// Chart design based on the recommendations of Stephen Few. Implementation // based on the work of Clint Ivy, Jamie Love, and Jason Davies. // http://projects.instantcognition.com/protovis/bulletchart/ nv.models.bullet = function() { var orient = "left", // TODO top & bottom reverse = false, duration = 0, ranges = function(d) { return d.ranges }, markers = function(d) { return d.markers }, measures = function(d) { return d.measures }, width = 380, height = 30, tickFormat = null; var dispatch = d3.dispatch('elementMouseover', 'elementMouseout'); // For each small multiple… function bullet(g) { g.each(function(d, i) { var rangez = ranges.call(this, d, i).slice().sort(d3.descending), markerz = markers.call(this, d, i).slice().sort(d3.descending), measurez = measures.call(this, d, i).slice().sort(d3.descending), g = d3.select(this); // Compute the new x-scale. var x1 = d3.scale.linear() .domain([0, Math.max(rangez[0], markerz[0], measurez[0])]) // TODO: need to allow forceX and forceY, and xDomain, yDomain .range(reverse ? [width, 0] : [0, width]); // Retrieve the old x-scale, if this is an update. var x0 = this.__chart__ || d3.scale.linear() .domain([0, Infinity]) .range(x1.range()); // Stash the new scale. this.__chart__ = x1; /* // Derive width-scales from the x-scales. var w0 = bulletWidth(x0), w1 = bulletWidth(x1); function bulletWidth(x) { var x0 = x(0); return function(d) { return Math.abs(x(d) - x(0)); }; } function bulletTranslate(x) { return function(d) { return "translate(" + x(d) + ",0)"; }; } */ var w0 = function(d) { return Math.abs(x0(d) - x0(0)) }, // TODO: could optimize by precalculating x0(0) and x1(0) w1 = function(d) { return Math.abs(x1(d) - x1(0)) }; // Update the range rects. var range = g.selectAll("rect.range") .data(rangez); range.enter().append("rect") .attr("class", function(d, i) { return "range s" + i; }) .attr("width", w0) .attr("height", height) .attr("x", reverse ? x0 : 0) .on('mouseover', function(d,i) { dispatch.elementMouseover({ value: d, label: (i <= 0) ? 'Maximum' : (i > 1) ? 'Minimum' : 'Mean', //TODO: make these labels a variable pos: [x1(d), height/2] }) }) .on('mouseout', function(d,i) { dispatch.elementMouseout({ value: d, label: (i <= 0) ? 'Minimum' : (i >=1) ? 'Maximum' : 'Mean', //TODO: make these labels a variable }) }) .transition() .duration(duration) .attr("width", w1) .attr("x", reverse ? x1 : 0); range.transition() .duration(duration) .attr("x", reverse ? x1 : 0) .attr("width", w1) .attr("height", height); // Update the measure rects. var measure = g.selectAll("rect.measure") .data(measurez); measure.enter().append("rect") .attr("class", function(d, i) { return "measure s" + i; }) .attr("width", w0) .attr("height", height / 3) .attr("x", reverse ? x0 : 0) .attr("y", height / 3) .on('mouseover', function(d) { dispatch.elementMouseover({ value: d, label: 'Current', //TODO: make these labels a variable pos: [x1(d), height/2] }) }) .on('mouseout', function(d) { dispatch.elementMouseout({ value: d, label: 'Current' //TODO: make these labels a variable }) }) .transition() .duration(duration) .attr("width", w1) .attr("x", reverse ? x1 : 0) measure.transition() .duration(duration) .attr("width", w1) .attr("height", height / 3) .attr("x", reverse ? x1 : 0) .attr("y", height / 3); // Update the marker lines. var marker = g.selectAll("path.markerTriangle") .data(markerz); var h3 = height / 6; marker.enter().append("path") .attr("class", "markerTriangle") .attr('transform', function(d) { return 'translate(' + x0(d) + ',' + (height / 2) + ')' }) .attr('d', 'M0,' + h3 + 'L' + h3 + ',' + (-h3) + ' ' + (-h3) + ',' + (-h3) + 'Z') .on('mouseover', function(d,i) { dispatch.elementMouseover({ value: d, label: 'Previous', pos: [x1(d), height/2] }) }) .on('mouseout', function(d,i) { dispatch.elementMouseout({ value: d, label: 'Previous' }) }); marker.transition().duration(duration) .attr('transform', function(d) { return 'translate(' + x1(d) + ',' + (height / 2) + ')' }); marker.exit().remove(); /* marker.enter().append("line") .attr("class", "marker") .attr("x1", x0) .attr("x2", x0) .attr("y1", height / 6) .attr("y2", height * 5 / 6) .transition() .duration(duration) .attr("x1", x1) .attr("x2", x1); marker.transition( .duration(duration) .attr("x1", x1) .attr("x2", x1) .attr("y1", height / 6) .attr("y2", height * 5 / 6); */ // Compute the tick format. var format = tickFormat || x1.tickFormat(8); // Update the tick groups. var tick = g.selectAll("g.tick") .data(x1.ticks(8), function(d) { return this.textContent || format(d); }); // Initialize the ticks with the old scale, x0. var tickEnter = tick.enter().append("g") .attr("class", "tick") .attr("transform", function(d) { return "translate(" + x0(d) + ",0)" }) .style("opacity", 1e-6); tickEnter.append("line") .attr("y1", height) .attr("y2", height * 7 / 6); tickEnter.append("text") .attr("text-anchor", "middle") .attr("dy", "1em") .attr("y", height * 7 / 6) .text(format); // Transition the entering ticks to the new scale, x1. tickEnter.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + x1(d) + ",0)" }) .style("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)" }) .style("opacity", 1); tickUpdate.select("line") .attr("y1", height) .attr("y2", height * 7 / 6); tickUpdate.select("text") .attr("y", height * 7 / 6); // Transition the exiting ticks to the new scale, x1. tick.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + x1(d) + ",0)" }) .style("opacity", 1e-6) .remove(); }); d3.timer.flush(); } bullet.dispatch = dispatch; // left, right, top, bottom bullet.orient = function(x) { if (!arguments.length) return orient; orient = x; reverse = orient == "right" || orient == "bottom"; return bullet; }; // ranges (bad, satisfactory, good) bullet.ranges = function(x) { if (!arguments.length) return ranges; ranges = x; return bullet; }; // markers (previous, goal) bullet.markers = function(x) { if (!arguments.length) return markers; markers = x; return bullet; }; // measures (actual, forecast) bullet.measures = function(x) { if (!arguments.length) return measures; measures = x; return bullet; }; bullet.width = function(x) { if (!arguments.length) return width; width = x; return bullet; }; bullet.height = function(x) { if (!arguments.length) return height; height = x; return bullet; }; bullet.tickFormat = function(x) { if (!arguments.length) return tickFormat; tickFormat = x; return bullet; }; bullet.duration = function(x) { if (!arguments.length) return duration; duration = x; return bullet; }; return bullet; };