nvd3
Version:
A reusable charting library written in d3.js
60 lines (48 loc) • 1.75 kB
HTML
<head>
<meta charset="utf-8">
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<script src="../build/nv.d3.js"></script>
</head>
<body>
<div class="gallery" id="chart"></div>
<script>
var width = 960,
height = 55,
margin = {top: 5, right: 40, bottom: 20, left: 120};
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],"markers":[-250], "markerLines":[-230]}
];
//TODO: to be consistent with other models, should be appending a g to an already made svg, not creating the svg element
var vis = d3.select("#chart").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "bullet nvd3")
.attr("width", width)
.attr("height", height);
vis.call(chart);
window.transition = function() {
vis.datum(randomize).call(chart);
};
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.markerLines = d.markerLines.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));
};
}
d3.select('body').on('click', window.transition);
</script>
</body>
</html>