Skip to content

Instantly share code, notes, and snippets.

@martinjc
Last active Dec 10, 2018
Embed
What would you like to do?
D3 - Bar chart, multiple datasets, using slider (Data: Number of roadside breath tests in UK per month)
border: no
license: MIT

This example is very similar to the previous example, but uses a queue to load the data initially

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.4/d3-queue.min.js"></script>
<style>
html, body, #vis {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<form>
<label for="year">Please select a year: </label>
<label for="year">Please select a year: </label>
<input type="range" min=2009 max=2014 step=1 id="year" value=2014 oninput="selected_year.value = year.value">
<output name="selected_year" id="selected_year">2014</output>
</form>
<div id="vis">
</div>
<script src="script.js"></script>
</body>
</html>
month value
Jan 46396
Feb 33159
Mar 33494
Apr 33385
May 38177
Jun 95841
Jul 46438
Aug 42125
Sep 37893
Oct 37636
Nov 45746
Dec 160841
month value
Jan 43009
Feb 42299
Mar 42677
Apr 37992
May 44881
Jun 93920
Jul 45514
Aug 43251
Sep 41273
Oct 46500
Nov 49092
Dec 133044
month value
Jan 43920
Feb 36070
Mar 33698
Apr 33882
May 35240
Jun 76949
Jul 41603
Aug 36160
Sep 32501
Oct 33520
Nov 33592
Dec 122095
month value
Jan 38921
Feb 30774
Mar 33217
Apr 27501
May 31522
Jun 72441
Jul 31661
Aug 27590
Sep 29600
Oct 28737
Nov 31191
Dec 120922
month value
Jan 26045
Feb 24982
Mar 31351
Apr 29663
May 32617
Jun 83406
Jul 34535
Aug 29303
Sep 25480
Oct 27025
Nov 31469
Dec 121914
month value
Jan 23046
Feb 20109
Mar 22824
Apr 21681
May 20956
Jun 43460
Jul 22769
Aug 21712
Sep 19359
Oct 19768
Nov 20566
Dec 67668
var width = document.getElementById('vis')
.clientWidth;
var height = document.getElementById('vis')
.clientHeight;
var margin = {
top: 10,
bottom: 70,
left: 70,
right: 20
}
var svg = d3.select('#vis')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.right + ')');
width = width - margin.left - margin.right;
height = height - margin.top - margin.bottom;
var data = {};
var x_scale = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1);
var y_scale = d3.scaleLinear()
.range([height, 0]);
var colour_scale = d3.scaleQuantile()
.range(["#ffffe5", "#fff7bc", "#fee391", "#fec44f", "#fe9929", "#ec7014", "#cc4c02", "#993404", "#662506"]);
var y_axis = d3.axisLeft(y_scale);
var x_axis = d3.axisBottom(x_scale);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')');
svg.append('g')
.attr('class', 'y axis');
function draw(year) {
var csv_data = data[year];
var t = d3.transition()
.duration(2000);
var months = csv_data.map(function(d) {
return d.month;
});
x_scale.domain(months);
var max_value = d3.max(csv_data, function(d) {
return +d.value;
});
y_scale.domain([0, max_value]);
colour_scale.domain([0, max_value]);
var bars = svg.selectAll('.bar')
.data(csv_data)
bars
.exit()
.remove();
var new_bars = bars
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', function(d) {
return x_scale(d.month);
})
.attr('width', x_scale.bandwidth())
.attr('y', height)
.attr('height', 0)
new_bars.merge(bars)
.transition(t)
.attr('y', function(d) {
return y_scale(+d.value);
})
.attr('height', function(d) {
return height - y_scale(+d.value)
})
.attr('fill', function(d) {
return colour_scale(+d.value);
})
svg.select('.x.axis')
.call(x_axis);
svg.select('.y.axis')
.transition(t)
.call(y_axis);
}
d3.queue()
.defer(d3.csv, 'monthly_data_2014.csv')
.defer(d3.csv, 'monthly_data_2013.csv')
.defer(d3.csv, 'monthly_data_2012.csv')
.defer(d3.csv, 'monthly_data_2011.csv')
.defer(d3.csv, 'monthly_data_2010.csv')
.defer(d3.csv, 'monthly_data_2009.csv')
.await(function(error, d2014, d2013, d2012, d2011, d2010, d2009) {
data['2009'] = d2009;
data['2010'] = d2010;
data['2011'] = d2011;
data['2012'] = d2012;
data['2013'] = d2013;
data['2014'] = d2014;
draw('2014');
});
var slider = d3.select('#year');
slider.on('change', function() {
draw(this.value);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment