Bullet charts: support for "right" orientation.

d3.chart.js

@@ -15,7 +15,7 @@ d3.chart.bullet = function() {
       ranges = d3_chart_bulletRanges,
       markers = d3_chart_bulletMarkers,
       measures = d3_chart_bulletMeasures,
-      width = 800,
+      width = 500,
       height = 30,
       x0 = d3.scale.linear().domain([0, Infinity]).range([0, width]),
       x1 = d3.scale.linear().range([0, width]),
@@ -39,9 +39,15 @@ d3.chart.bullet = function() {
       };
     });
 
+    var reversed = orient === "right" || orient === "bottom";
+
     // Update the x-scale.
     x1.domain([0, max]);
 
+    var startpos = function(scale) {
+      return reversed ? function(d) { return width - scale(d); } : 0;
+    };
+
     // Update the range rects.
     var range = chart.selectAll("rect.range")
         .data(d3_chart_bulletRanges);
@@ -50,12 +56,15 @@ d3.chart.bullet = function() {
         .attr("class", function(d, i) { return "range s" + i; })
         .attr("width", x0)
         .attr("height", height)
+        .attr("x", startpos(x0))
       .transition()
         .duration(duration)
-        .attr("width", x1);
+        .attr("width", x1)
+        .attr("x", startpos(x1))
 
     range.transition()
         .duration(duration)
+        .attr("x", startpos(x1))
         .attr("width", x1)
         .attr("height", height);
 
@@ -67,36 +76,43 @@ d3.chart.bullet = function() {
         .attr("class", function(d, i) { return "measure s" + i; })
         .attr("width", x0)
         .attr("height", height / 3)
+        .attr("x", startpos(x0))
         .attr("y", height / 3)
       .transition()
         .duration(duration)
-        .attr("width", x1);
+        .attr("width", x1)
+        .attr("x", startpos(x1))
 
     measure.transition()
         .duration(duration)
         .attr("width", x1)
         .attr("height", height / 3)
+        .attr("x", startpos(x1))
         .attr("y", height / 3);
 
     // Update the marker lines.
     var marker = chart.selectAll("line.marker")
         .data(d3_chart_bulletMarkers);
 
+    var pos = function(scale) {
+      return reversed ? function(d) { return width - scale(d); } : scale;
+    };
+
     marker.enter().append("svg:line")
         .attr("class", "marker")
-        .attr("x1", x0)
-        .attr("x2", x0)
+        .attr("x1", pos(x0))
+        .attr("x2", pos(x0))
         .attr("y1", height / 6)
         .attr("y2", height * 5 / 6)
       .transition()
         .duration(duration)
-        .attr("x1", x1)
-        .attr("x2", x1);
+        .attr("x1", pos(x1))
+        .attr("x2", pos(x1));
 
     marker.transition()
         .duration(duration)
-        .attr("x1", x1)
-        .attr("x2", x1)
+        .attr("x1", pos(x1))
+        .attr("x2", pos(x1))
         .attr("y1", height / 6)
         .attr("y2", height * 5 / 6);
 
@@ -104,10 +120,16 @@ d3.chart.bullet = function() {
     var tick = chart.selectAll("g.tick")
         .data(x1.ticks(10), tickFormat);
 
+    var translate = function(f) {
+      return function(d) {
+        return "translate(" + f(d) + ",0)";
+      };
+    };
+
     // Initialize the ticks with the old scale, x0.
     var tickEnter = tick.enter().append("svg:g")
         .attr("class", "tick")
-        .attr("transform", function(d) { return "translate(" + x0(d) + ",0)"; })
+        .attr("transform", translate(pos(x0)))
         .attr("opacity", 1e-6);
 
     tickEnter.append("svg:line")
@@ -123,13 +145,13 @@ d3.chart.bullet = function() {
     // Transition the entering ticks to the new scale, x1.
     tickEnter.transition()
         .duration(duration)
-        .attr("transform", function(d) { return "translate(" + x1(d) + ",0)"; })
+        .attr("transform", translate(pos(x1)))
         .attr("opacity", 1);
 
     // Transition the updating ticks to the new scale, x1.
     var tickUpdate = tick.transition()
         .duration(duration)
-        .attr("transform", function(d) { return "translate(" + x1(d) + ",0)"; })
+        .attr("transform", translate(pos(x1)))
         .attr("opacity", 1);
 
     tickUpdate.select("line")
@@ -142,7 +164,7 @@ d3.chart.bullet = function() {
     // Transition the exiting ticks to the new scale, x1.
     tick.exit().transition()
         .duration(duration)
-        .attr("transform", function(d) { return "translate(" + x1(d) + ",0)"; })
+        .attr("transform", translate(pos(x1)))
         .attr("opacity", 1e-6)
         .remove();
 

d3.chart.min.js

@@ -1 +1 @@
-(function(){function d(a){return a.data}function c(a){return a.measures}function b(a){return a.markers}function a(a){return a.ranges}d3.chart={},d3.chart.bullet=function(){function o(e){var j=0;e.map(function(a,b){var c=g.call(this,a,b).slice().sort(d3.descending),d=h.call(this,a,b).slice().sort(d3.descending),e=i.call(this,a,b).slice().sort(d3.descending);j=Math.max(j,c[0],d[0],e[0]);return{ranges:c,markers:d,measures:e,data:a}}),m.domain([0,j]);var o=e.selectAll("rect.range").data(a);o.enter().append("svg:rect").attr("class",function(a,b){return"range s"+b}).attr("width",l).attr("height",k).transition().duration(f).attr("width",m),o.transition().duration(f).attr("width",m).attr("height",k);var p=e.selectAll("rect.measure").data(c);p.enter().append("svg:rect").attr("class",function(a,b){return"measure s"+b}).attr("width",l).attr("height",k/3).attr("y",k/3).transition().duration(f).attr("width",m),p.transition().duration(f).attr("width",m).attr("height",k/3).attr("y",k/3);var q=e.selectAll("line.marker").data(b);q.enter().append("svg:line").attr("class","marker").attr("x1",l).attr("x2",l).attr("y1",k/6).attr("y2",k*5/6).transition().duration(f).attr("x1",m).attr("x2",m),q.transition().duration(f).attr("x1",m).attr("x2",m).attr("y1",k/6).attr("y2",k*5/6);var r=e.selectAll("g.tick").data(m.ticks(10),n),s=r.enter().append("svg:g").attr("class","tick").attr("transform",function(a){return"translate("+l(a)+",0)"}).attr("opacity",1e-6);s.append("svg:line").attr("y1",k).attr("y2",k*7/6),s.append("svg:text").attr("text-anchor","middle").attr("dy","1em").attr("y",k*7/6).text(n),s.transition().duration(f).attr("transform",function(a){return"translate("+m(a)+",0)"}).attr("opacity",1);var t=r.transition().duration(f).attr("transform",function(a){return"translate("+m(a)+",0)"}).attr("opacity",1);t.select("line").attr("y1",k).attr("y2",k*7/6),t.select("text").attr("y",k*7/6),r.exit().transition().duration(f).attr("transform",function(a){return"translate("+m(a)+",0)"}).attr("opacity",1e-6).remove(),e.map(d),l.domain([0,j])}var e="left",f=0,g=a,h=b,i=c,j=800,k=30,l=d3.scale.linear().domain([0,Infinity]).range([0,j]),m=d3.scale.linear().range([0,j]),n=d3.format(",.0f");o.orient=function(a){if(!arguments.length)return e;e=a;return o},o.ranges=function(a){if(!arguments.length)return g;g=a;return o},o.markers=function(a){if(!arguments.length)return h;h=a;return o},o.measures=function(a){if(!arguments.length)return i;i=a;return o},o.width=function(a){if(!arguments.length)return j;l.range([0,j=a]),m.range([0,j]);return o},o.height=function(a){if(!arguments.length)return k;k=a;return o},o.tickFormat=function(a){if(!arguments.length)return n;n=a;return o},o.duration=function(a){if(!arguments.length)return f;f=a;return o};return o}})()
+(function(){function d(a){return a.data}function c(a){return a.measures}function b(a){return a.markers}function a(a){return a.ranges}d3.chart={},d3.chart.bullet=function(){function o(o){var p=0;o.map(function(a,b){var c=g.call(this,a,b).slice().sort(d3.descending),d=h.call(this,a,b).slice().sort(d3.descending),e=i.call(this,a,b).slice().sort(d3.descending);p=Math.max(p,c[0],d[0],e[0]);return{ranges:c,markers:d,measures:e,data:a}});var q=e==="right"||e==="bottom";m.domain([0,p]);var r=function(a){return q?function(b){return j-a(b)}:0},s=o.selectAll("rect.range").data(a);s.enter().append("svg:rect").attr("class",function(a,b){return"range s"+b}).attr("width",l).attr("height",k).attr("x",r(l)).transition().duration(f).attr("width",m).attr("x",r(m)),s.transition().duration(f).attr("x",r(m)).attr("width",m).attr("height",k);var t=o.selectAll("rect.measure").data(c);t.enter().append("svg:rect").attr("class",function(a,b){return"measure s"+b}).attr("width",l).attr("height",k/3).attr("x",r(l)).attr("y",k/3).transition().duration(f).attr("width",m).attr("x",r(m)),t.transition().duration(f).attr("width",m).attr("height",k/3).attr("x",r(m)).attr("y",k/3);var u=o.selectAll("line.marker").data(b),v=function(a){return q?function(b){return j-a(b)}:a};u.enter().append("svg:line").attr("class","marker").attr("x1",v(l)).attr("x2",v(l)).attr("y1",k/6).attr("y2",k*5/6).transition().duration(f).attr("x1",v(m)).attr("x2",v(m)),u.transition().duration(f).attr("x1",v(m)).attr("x2",v(m)).attr("y1",k/6).attr("y2",k*5/6);var w=o.selectAll("g.tick").data(m.ticks(10),n),x=function(a){return function(b){return"translate("+a(b)+",0)"}},y=w.enter().append("svg:g").attr("class","tick").attr("transform",x(v(l))).attr("opacity",1e-6);y.append("svg:line").attr("y1",k).attr("y2",k*7/6),y.append("svg:text").attr("text-anchor","middle").attr("dy","1em").attr("y",k*7/6).text(n),y.transition().duration(f).attr("transform",x(v(m))).attr("opacity",1);var z=w.transition().duration(f).attr("transform",x(v(m))).attr("opacity",1);z.select("line").attr("y1",k).attr("y2",k*7/6),z.select("text").attr("y",k*7/6),w.exit().transition().duration(f).attr("transform",x(v(m))).attr("opacity",1e-6).remove(),o.map(d),l.domain([0,p])}var e="left",f=0,g=a,h=b,i=c,j=500,k=30,l=d3.scale.linear().domain([0,Infinity]).range([0,j]),m=d3.scale.linear().range([0,j]),n=d3.format(",.0f");o.orient=function(a){if(!arguments.length)return e;e=a;return o},o.ranges=function(a){if(!arguments.length)return g;g=a;return o},o.markers=function(a){if(!arguments.length)return h;h=a;return o},o.measures=function(a){if(!arguments.length)return i;i=a;return o},o.width=function(a){if(!arguments.length)return j;l.range([0,j=a]),m.range([0,j]);return o},o.height=function(a){if(!arguments.length)return k;k=a;return o},o.tickFormat=function(a){if(!arguments.length)return n;n=a;return o},o.duration=function(a){if(!arguments.length)return f;f=a;return o};return o}})()

examples/bullet/bullet-multiples.html

@@ -10,12 +10,20 @@
   <body>
     <script type="text/javascript">
 
-var bullet = d3.chart.bullet()
-    .orient("left")
-    .duration(1000);
+var bullet = function(chart) {
+  chart.each(function(orient) {
+    var bulletChart = d3.chart.bullet()
+      .orient(orient).duration(1000);
+    // Is there a simpler way to construct a group from the current node?
+    chart.filter(function(d) { return d === orient })
+        .selectAll('g.bullet').call(bulletChart);
+  });
+};
 
-var vis = d3.select("body").append("svg:svg")
-    .attr("width", 900)
+var vis = d3.select("body").selectAll('svg')
+    .data(['left', 'right', 'top', 'bottom'])
+  .enter().append("svg:svg")
+    .attr("width", 520)
     .attr("height", 300)
   .append("svg:g")
     .attr("transform", "translate(10,0)");
@@ -25,7 +33,8 @@ vis.selectAll("g.bullet")
   .enter().append("svg:g")
     .attr("class", "bullet")
     .attr("transform", function(d, i) { return "translate(0," + (i * 60) + ")"; })
-    .call(bullet);
+
+vis.call(bullet);
 
 function randomize() {
   for (var i = 0, ii = bullets.length; i < ii; i++) {
@@ -34,7 +43,7 @@ function randomize() {
     b.markers = b.markers.map(function(d) { return Math.random() * 1000; });
     b.measures = b.measures.map(function(d) { return Math.random() * 1000; });
   }
-  vis.selectAll("g.bullet").call(bullet);
+  vis.call(bullet);
 }
 
     </script>

src/chart/bullet.js

@@ -14,7 +14,7 @@ d3.chart.bullet = function() {
       ranges = d3_chart_bulletRanges,
       markers = d3_chart_bulletMarkers,
       measures = d3_chart_bulletMeasures,
-      width = 800,
+      width = 500,
       height = 30,
       x0 = d3.scale.linear().domain([0, Infinity]).range([0, width]),
       x1 = d3.scale.linear().range([0, width]),
@@ -38,9 +38,15 @@ d3.chart.bullet = function() {
       };
     });
 
+    var reversed = orient === "right" || orient === "bottom";
+
     // Update the x-scale.
     x1.domain([0, max]);
 
+    var startpos = function(scale) {
+      return reversed ? function(d) { return width - scale(d); } : 0;
+    };
+
     // Update the range rects.
     var range = chart.selectAll("rect.range")
         .data(d3_chart_bulletRanges);
@@ -49,12 +55,15 @@ d3.chart.bullet = function() {
         .attr("class", function(d, i) { return "range s" + i; })
         .attr("width", x0)
         .attr("height", height)
+        .attr("x", startpos(x0))
       .transition()
         .duration(duration)
-        .attr("width", x1);
+        .attr("width", x1)
+        .attr("x", startpos(x1))
 
     range.transition()
         .duration(duration)
+        .attr("x", startpos(x1))
         .attr("width", x1)
         .attr("height", height);
 
@@ -66,36 +75,43 @@ d3.chart.bullet = function() {
         .attr("class", function(d, i) { return "measure s" + i; })
         .attr("width", x0)
         .attr("height", height / 3)
+        .attr("x", startpos(x0))
         .attr("y", height / 3)
       .transition()
         .duration(duration)
-        .attr("width", x1);
+        .attr("width", x1)
+        .attr("x", startpos(x1))
 
     measure.transition()
         .duration(duration)
         .attr("width", x1)
         .attr("height", height / 3)
+        .attr("x", startpos(x1))
         .attr("y", height / 3);
 
     // Update the marker lines.
     var marker = chart.selectAll("line.marker")
         .data(d3_chart_bulletMarkers);
 
+    var pos = function(scale) {
+      return reversed ? function(d) { return width - scale(d); } : scale;
+    };
+
     marker.enter().append("svg:line")
         .attr("class", "marker")
-        .attr("x1", x0)
-        .attr("x2", x0)
+        .attr("x1", pos(x0))
+        .attr("x2", pos(x0))
         .attr("y1", height / 6)
         .attr("y2", height * 5 / 6)
       .transition()
         .duration(duration)
-        .attr("x1", x1)
-        .attr("x2", x1);
+        .attr("x1", pos(x1))
+        .attr("x2", pos(x1));
 
     marker.transition()
         .duration(duration)
-        .attr("x1", x1)
-        .attr("x2", x1)
+        .attr("x1", pos(x1))
+        .attr("x2", pos(x1))
         .attr("y1", height / 6)
         .attr("y2", height * 5 / 6);
 
@@ -103,10 +119,16 @@ d3.chart.bullet = function() {
     var tick = chart.selectAll("g.tick")
         .data(x1.ticks(10), tickFormat);
 
+    var translate = function(f) {
+      return function(d) {
+        return "translate(" + f(d) + ",0)";
+      };
+    };
+
     // Initialize the ticks with the old scale, x0.
     var tickEnter = tick.enter().append("svg:g")
         .attr("class", "tick")
-        .attr("transform", function(d) { return "translate(" + x0(d) + ",0)"; })
+        .attr("transform", translate(pos(x0)))
         .attr("opacity", 1e-6);
 
     tickEnter.append("svg:line")
@@ -122,13 +144,13 @@ d3.chart.bullet = function() {
     // Transition the entering ticks to the new scale, x1.
     tickEnter.transition()
         .duration(duration)
-        .attr("transform", function(d) { return "translate(" + x1(d) + ",0)"; })
+        .attr("transform", translate(pos(x1)))
         .attr("opacity", 1);
 
     // Transition the updating ticks to the new scale, x1.
     var tickUpdate = tick.transition()
         .duration(duration)
-        .attr("transform", function(d) { return "translate(" + x1(d) + ",0)"; })
+        .attr("transform", translate(pos(x1)))
         .attr("opacity", 1);
 
     tickUpdate.select("line")
@@ -141,7 +163,7 @@ d3.chart.bullet = function() {
     // Transition the exiting ticks to the new scale, x1.
     tick.exit().transition()
         .duration(duration)
-        .attr("transform", function(d) { return "translate(" + x1(d) + ",0)"; })
+        .attr("transform", translate(pos(x1)))
         .attr("opacity", 1e-6)
         .remove();