This is a six part series, taking you through stages of designing and creating reusable visualizations with d3.js
All visualizations have the same functionality, showcase the individual points with a bar chart and sum up the selected bars.
Part 2. This is showcasing the power of the reusable chart API. This is showcasing the difference between a reusable bar chart and a prototyped bar chart.
These are examples created for a talk (slides and video).
Cheers,
Miles @milr0c
xxxxxxxxxx
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://littlesparkvt.com/flatstrap/assets/css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="src.js"></script>
</head>
<body>
<div class="row">
<div class="span2"><button class="btn btn-success" onclick="update()">update</button></div>
<div class="span2" id="sum">TOTAL: 0</div>
</div>
<div class="row" id="chart"></div>
<script type="text/javascript">
var bar = charts.bar()
.on('brush', makeSum)
.on('brushend', makeSum),
data;
update();
function update() {
data = randomizeData(20, Math.random()*100000);
d3.select("#chart")
.datum(data)
.call(bar);
}
function makeSum() {
var sumDiv = d3.select('#sum'),
extent = d3.event.target.extent()
x = bar.x(),
sum = 0;
// inefficient recommend for performance to leverage crossfilter.js
data.forEach(function(d) {
if (extent[0] <= x(d.x) && x(d.x) + x.rangeBand() <= extent[1])
sum += d.y;
});
sumDiv.text('TOTAL: ' + sum);
}
function randomizeData(n, y) {
if (arguments.length < 2) y = 400;
if (!arguments.length) n = 20;
var i = 0;
return d3.range(~~(Math.random()*n) + 1).map(function(d, i) { return {
x: ++i,
y: ~~(Math.random()*y)
}});
}
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js