Allow changing colormap size (#77)

* Allow changing color scale size * use self.width in _repr_html_
python-visualization · Nov 5, 2022 · 51d247c · 51d247c
1 parent 047d146
commit 51d247c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/branca/colormap.py b/branca/colormap.py
@@ -86,6 +86,9 @@ def __init__(self, vmin=0., vmax=1., caption='', max_labels=10):
         self.max_labels = max_labels
         self.tick_labels = None
 
+        self.width = 450
+        self.height = 40
+
     def render(self, **kwargs):
         """Renders the HTML representation of the element."""
         self.color_domain = [self.vmin + (self.vmax-self.vmin) * k/499. for
@@ -148,15 +151,14 @@ def _repr_html_(self):
         Does not support all the class arguments.
 
         """
-        width = 500
         nb_ticks = 7
-        delta_x = math.floor(width / (nb_ticks - 1))
+        delta_x = math.floor(self.width / (nb_ticks - 1))
         x_ticks = [(i) * delta_x for i in range(0, nb_ticks)]
-        delta_val = delta_x * (self.vmax - self.vmin) / width
+        delta_val = delta_x * (self.vmax - self.vmin) / self.width
         val_ticks = [round(self.vmin + (i) * delta_val, 1) for i in range(0, nb_ticks)]
 
         return (
-            '<svg height="40" width="{}">'.format(width)
+            '<svg height="40" width="{}">'.format(self.width)
             + "".join(
                 [
                     (
@@ -165,10 +167,10 @@ def _repr_html_(self):
                     ).format(
                         i=i * 1,
                         color=self.rgba_hex_str(
-                            self.vmin + (self.vmax - self.vmin) * i / (width - 1)
+                            self.vmin + (self.vmax - self.vmin) * i / (self.width - 1)
                         ),
                     )
-                    for i in range(width)
+                    for i in range(self.width)
                 ]
             )
             + '<text x="0" y="38" style="text-anchor:start; font-size:11px; font:Arial">{}</text>'.format(
@@ -183,7 +185,7 @@ def _repr_html_(self):
                 ]
             )
             + '<text x="{}" y="38" style="text-anchor:end; font-size:11px; font:Arial">{}</text>'.format(
-                width, self.vmax
+                self.width, self.vmax
             )
             + '<text x="0" y="12" style="font-size:11px; font:Arial">{}</text>'.format(
                 self.caption

diff --git a/branca/templates/color_scale.js b/branca/templates/color_scale.js
@@ -13,7 +13,7 @@
 
     {{this.get_name()}}.x = d3.scale.linear()
               .domain([{{ this.color_domain[0] }}, {{ this.color_domain[-1] }}])
-              .range([0, 400]);
+              .range([0, {{ this.width }} - 50]);
 
     {{this.get_name()}}.legend = L.control({position: 'topright'});
     {{this.get_name()}}.legend.onAdd = function (map) {var div = L.DomUtil.create('div', 'legend'); return div};
@@ -27,8 +27,8 @@
 
     {{this.get_name()}}.svg = d3.select(".legend.leaflet-control").append("svg")
         .attr("id", 'legend')
-        .attr("width", 450)
-        .attr("height", 40);
+        .attr("width", {{ this.width }})
+        .attr("height", {{ this.height }});
 
     {{this.get_name()}}.g = {{this.get_name()}}.svg.append("g")
         .attr("class", "key")
@@ -43,7 +43,7 @@
           };
         }))
       .enter().append("rect")
-        .attr("height", 10)
+        .attr("height", {{ this.height }} - 30)
         .attr("x", function(d) { return d.x0; })
         .attr("width", function(d) { return d.x1 - d.x0; })
         .style("fill", function(d) { return d.z; });