blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Got most of the needed functionality in the bullet chart. Has protovis style triangle, and working toooltips

Browse Source
master-patched
Bob Monteverde 12 years ago
parent b7670eeaff
commit fd585afc17
7 changed files with 450 additions and 54 deletions
Show Stats Download Patch File Download Diff File

1
Makefile
Unescape Escape View File

@ -5,6 +5,7 @@ JS_FILES = \
src/utils.js \
src/models/axis.js \
src/models/bar.js \
src/models/bullet.js \
src/models/cumulativeLine.js \
src/models/legend.js \
src/models/line.js \

54
examples/bullet.html
Unescape Escape View File

@ -10,6 +10,8 @@ body {
</style>
<body>
<br> <br> <br> <br> <br>
<div class="gallery" id="chart"></div>
<script src="../lib/d3.v2.js"></script>
@ -17,22 +19,24 @@ body {
<script src="../src/models/bullet.js"></script>
<script>
var width = 960,
height = 50,
height = 55,
margin = {top: 5, right: 40, bottom: 20, left: 120};
var chart = bulletChart()
var chart = nv.models.bullet()
.width(width - margin.right - margin.left)
.height(height - margin.top - margin.bottom);
data = [
{"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220,270],"markers":[250]},
{"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21,23],"markers":[26]},
{"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100,320],"markers":[550]},
{"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000,1650],"markers":[2100]},
{"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220],"markers":[250]}
/*
,
{"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21],"markers":[26]},
{"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100],"markers":[550]},
{"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000],"markers":[1000]},
{"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
*/
];
var vis = d3.select("#chart").selectAll("svg")
@ -48,7 +52,6 @@ var chart = bulletChart()
var title = vis.append("g")
.attr("text-anchor", "end")
.attr("transform", "translate(-6," + (height - margin.top - margin.bottom) / 2 + ")");
title.append("text")
.attr("class", "title")
.text(function(d) { return d.title; });
@ -59,11 +62,42 @@ var chart = bulletChart()
.text(function(d) { return d.subtitle; });
chart.duration(1000);
window.transition = function() {
vis.datum(randomize).call(chart);
};
chart.dispatch.on('elementMouseover', function(e) {
var offsetElement = document.getElementById("chart"),
left = e.pos[0] + offsetElement.offsetLeft + margin.left,
top = e.pos[1] + offsetElement.offsetTop + margin.top;
var content = '<h3>' + e.label + '</h3>' +
'<p>' +
e.value +
'</p>';
nv.tooltip.show([left, top], content, e.value < 0 ? 'e' : 'w');
});
chart.dispatch.on('elementMouseout', function(e) {
nv.tooltip.cleanup();
});
function randomize(d) {
if (!d.randomizer) d.randomizer = randomizer(d);
d.ranges = d.ranges.map(d.randomizer);
@ -81,4 +115,8 @@ function randomizer(d) {
d3.select('body').on('click', window.transition);
</script>

296
nv.d3.js
Unescape Escape View File

@ -609,6 +609,302 @@ nv.models.bar = function() {
return chart;
}
// 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])])
.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;
};
nv.models.cumulativeLine = function() {
var margin = {top: 30, right: 20, bottom: 30, left: 60},
getWidth = function() { return 960 },

4
nv.d3.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
src/d3.css
Unescape Escape View File

@ -303,13 +303,16 @@ svg .title {
* Bullet
*/
.bullet { font: 10px sans-serif; }
.bullet { font: 10px sans-serif; cursor: pointer; }
.bullet rect { fill-opacity: .6; }
.bullet rect:hover { fill-opacity: 1; }
.bullet .marker { stroke: #000; stroke-width: 2px; }
.bullet .markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
.bullet .tick line { stroke: #666; stroke-width: .5px; }
.bullet .range.s0 { fill: #eee; }
.bullet .range.s1 { fill: #ddd; }
.bullet .range.s2 { fill: #ccc; }
.bullet .measure.s0 { fill: lightsteelblue; }
.bullet .measure.s1 { fill: steelblue; }
.bullet .measure.s0 { fill: steelblue; }
.bullet .measure.s1 { fill: darkblue; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: #999; }

138
src/models/bullet.js
Unescape Escape View File

@ -2,17 +2,19 @@
// 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/
function bulletChart() {
nv.models.bullet = function() {
var orient = "left", // TODO top & bottom
reverse = false,
duration = 0,
ranges = bulletRanges,
markers = bulletMarkers,
measures = bulletMeasures,
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) {
@ -34,19 +36,51 @@ function bulletChart() {
// 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("svg:rect")
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)
@ -58,20 +92,34 @@ function bulletChart() {
.attr("width", w1)
.attr("height", height);
// Update the measure rects.
var measure = g.selectAll("rect.measure")
.data(measurez);
measure.enter().append("svg:rect")
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);
.attr("x", reverse ? x1 : 0)
measure.transition()
.duration(duration)
@ -80,11 +128,39 @@ function bulletChart() {
.attr("x", reverse ? x1 : 0)
.attr("y", height / 3);
// Update the marker lines.
var marker = g.selectAll("line.marker")
var marker = g.selectAll("path.markerTriangle")
.data(markerz);
marker.enter().append("svg:line")
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)
@ -95,12 +171,14 @@ function bulletChart() {
.attr("x1", x1)
.attr("x2", x1);
marker.transition()
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);
@ -112,16 +190,16 @@ function bulletChart() {
});
// Initialize the ticks with the old scale, x0.
var tickEnter = tick.enter().append("svg:g")
var tickEnter = tick.enter().append("g")
.attr("class", "tick")
.attr("transform", bulletTranslate(x0))
.attr("transform", function(d) { return "translate(" + x0(d) + ",0)" })
.style("opacity", 1e-6);
tickEnter.append("svg:line")
tickEnter.append("line")
.attr("y1", height)
.attr("y2", height * 7 / 6);
tickEnter.append("svg:text")
tickEnter.append("text")
.attr("text-anchor", "middle")
.attr("dy", "1em")
.attr("y", height * 7 / 6)
@ -130,13 +208,13 @@ function bulletChart() {
// Transition the entering ticks to the new scale, x1.
tickEnter.transition()
.duration(duration)
.attr("transform", bulletTranslate(x1))
.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", bulletTranslate(x1))
.attr("transform", function(d) { return "translate(" + x1(d) + ",0)" })
.style("opacity", 1);
tickUpdate.select("line")
@ -149,13 +227,16 @@ function bulletChart() {
// Transition the exiting ticks to the new scale, x1.
tick.exit().transition()
.duration(duration)
.attr("transform", bulletTranslate(x1))
.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;
@ -212,27 +293,4 @@ function bulletChart() {
return bullet;
};
function bulletRanges(d) {
return d.ranges;
}
function bulletMarkers(d) {
return d.markers;
}
function bulletMeasures(d) {
return d.measures;
}
function bulletTranslate(x) {
return function(d) {
return "translate(" + x(d) + ",0)";
};
}
function bulletWidth(x) {
var x0 = x(0);
return function(d) {
return Math.abs(x(d) - x0);
};
}

2
src/models/historicalBar.js
Unescape Escape View File

@ -104,7 +104,7 @@ nv.models.historicalBar = function() {
dispatch.elementMouseover({
point: d,
series: data[0],
pos: [x(getX(d,i) + .5), y(getY(d,i))], // TODO: Figure out why the value appears to be shifted
pos: [x(getX(d,i)), y(getY(d,i))], // TODO: Figure out why the value appears to be shifted
pointIndex: i,
seriesIndex: 0,
e: d3.event

Write Preview
Loading…
Cancel
Save