2012-05-24 22:33:06 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
overflow-y:scroll;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<body>
|
|
|
|
|
|
2012-05-26 08:55:32 +00:00
|
|
|
<br> <br> <br> <br> <br>
|
|
|
|
|
|
2012-05-24 22:33:06 +00:00
|
|
|
<div class="gallery" id="chart"></div>
|
|
|
|
|
|
|
|
|
|
<script src="../lib/d3.v2.js"></script>
|
|
|
|
|
<script src="../nv.d3.js"></script>
|
|
|
|
|
<script src="../src/models/bullet.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
var width = 960,
|
2012-05-26 08:55:32 +00:00
|
|
|
height = 55,
|
2012-05-24 22:33:06 +00:00
|
|
|
margin = {top: 5, right: 40, bottom: 20, left: 120};
|
|
|
|
|
|
2012-05-26 08:55:32 +00:00
|
|
|
var chart = nv.models.bullet()
|
2012-05-24 22:33:06 +00:00
|
|
|
.width(width - margin.right - margin.left)
|
|
|
|
|
.height(height - margin.top - margin.bottom);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
data = [
|
2012-05-26 08:55:32 +00:00
|
|
|
{"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220],"markers":[250]}
|
|
|
|
|
/*
|
2012-05-26 17:26:47 +00:00
|
|
|
//TODO: fix the tooltip offset if multiple
|
2012-05-26 08:55:32 +00:00
|
|
|
,
|
|
|
|
|
{"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]},
|
2012-05-24 22:33:06 +00:00
|
|
|
{"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
|
2012-05-26 08:55:32 +00:00
|
|
|
*/
|
2012-05-24 22:33:06 +00:00
|
|
|
];
|
|
|
|
|
|
2012-06-01 21:11:19 +00:00
|
|
|
//TODO: to be consistent with other models, shouild be appending a g to an already made svg, not creating the svg element
|
2012-05-24 22:33:06 +00:00
|
|
|
var vis = d3.select("#chart").selectAll("svg")
|
|
|
|
|
.data(data)
|
|
|
|
|
.enter().append("svg")
|
|
|
|
|
.attr("class", "bullet")
|
|
|
|
|
.attr("width", width)
|
|
|
|
|
.attr("height", height)
|
|
|
|
|
.append("g")
|
|
|
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
|
|
|
|
|
.call(chart);
|
|
|
|
|
|
|
|
|
|
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; });
|
|
|
|
|
|
|
|
|
|
title.append("text")
|
|
|
|
|
.attr("class", "subtitle")
|
|
|
|
|
.attr("dy", "1em")
|
|
|
|
|
.text(function(d) { return d.subtitle; });
|
|
|
|
|
|
|
|
|
|
chart.duration(1000);
|
2012-05-26 08:55:32 +00:00
|
|
|
|
|
|
|
|
|
2012-05-24 22:33:06 +00:00
|
|
|
window.transition = function() {
|
|
|
|
|
vis.datum(randomize).call(chart);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
2012-05-26 08:55:32 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2012-05-24 22:33:06 +00:00
|
|
|
function randomize(d) {
|
|
|
|
|
if (!d.randomizer) d.randomizer = randomizer(d);
|
|
|
|
|
d.ranges = d.ranges.map(d.randomizer);
|
|
|
|
|
d.markers = d.markers.map(d.randomizer);
|
|
|
|
|
d.measures = d.measures.map(d.randomizer);
|
|
|
|
|
return d;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function randomizer(d) {
|
|
|
|
|
var k = d3.max(d.ranges) * .2;
|
|
|
|
|
return function(d) {
|
|
|
|
|
return Math.max(0, d + k * (Math.random() - .5));
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2012-05-26 08:55:32 +00:00
|
|
|
|
|
|
|
|
d3.select('body').on('click', window.transition);
|
|
|
|
|
|
|
|
|
|
|
2012-05-24 22:33:06 +00:00
|
|
|
</script>
|
