This example is very similar to the previous example, but uses a queue to load the data initially
D3 - Bar chart, multiple datasets, using slider (Data: Number of roadside breath tests in UK per month)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
border: no | |
license: MIT |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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