Built with blockbuilder.org
This example is ameliorated from the book Create Web Charts with D3 's chapter 10, with my personal tastes.
That book's example focus on functional redraw.
license: mit |
Built with blockbuilder.org
This example is ameliorated from the book Create Web Charts with D3 's chapter 10, with my personal tastes.
That book's example focus on functional redraw.
date | europe | asia | america | |
---|---|---|---|---|
12-Feb-12 | 52 | 40 | 65 | |
27-Feb-12 | 56 | 35 | 70 | |
02-Mar-12 | 51 | 45 | 62 | |
14-Mar-12 | 63 | 44 | 82 | |
30-Mar-12 | 64 | 54 | 85 | |
07-Apr-12 | 70 | 34 | 72 | |
18-Apr-12 | 65 | 36 | 69 | |
02-May-12 | 56 | 40 | 71 | |
19-May-12 | 71 | 55 | 75 | |
28-May-12 | 45 | 32 | 68 | |
03-Jun-12 | 64 | 44 | 75 | |
18-Jun-12 | 53 | 36 | 78 | |
29-Jun-12 | 59 | 42 | 79 |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
.tick line, | |
path.domain | |
{stroke: black;stroke-width: 1;fill: none;} | |
.invisided{opacity: 0;} | |
form{margin: 10px;padding: 5px;} | |
label{display: inline-block;min-width: 80px;} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<div> | |
<form> | |
<label><input name='country' type="radio" value="all" checked>All</label> | |
<label><input name='country' type="radio" value="europe">Europe</label> | |
<label><input name='country' type="radio" value="asia">Asia</label> | |
<label><input name='country' type="radio" value="america">America</label> | |
</form> | |
</div> | |
</div> | |
<script> | |
var margin = {top: 40, bottom: 40, left: 40, right: 40}, | |
svgHeight = 400, svgWidth = 500, | |
Height = svgHeight - margin.top - margin.bottom, | |
Width = svgWidth - margin.left - margin.right; | |
var dateParse = d3.time.format('%d-%b-%y').parse; | |
var xScale = d3.time.scale().range([0, Width]), | |
yScale = d3.scale.linear().range([Height, 0]), | |
colors = d3.scale.category10(), | |
xAxis = d3.svg.axis().orient('bottom') | |
.scale(xScale).ticks(5), | |
yAxis = d3.svg.axis().orient('left') | |
.scale(yScale).ticks(5); | |
var svg = d3.select('#container') | |
.append('svg') | |
.attr('width', svgWidth) | |
.attr('height', svgHeight); | |
var inputs = d3.select('#container').selectAll('input') | |
inputs.on('change', function(){ | |
// If val = d3.selectAll('input').property('value') | |
// val is always 'all' | |
var val = document.forms[0]['country'].value; | |
if(val === 'all'){ | |
d3.selectAll('.graph path').classed('invisided', 0); | |
}else{ | |
d3.selectAll('.graph path').classed('invisided', 1); | |
d3.select('.' + val).classed('invisided', 0); | |
} | |
}) | |
var url = 'data.tsv'; | |
d3.tsv(url, function(error, data){ | |
// data processing | |
var countryList = d3.keys(data[0]) | |
.filter(function(d){ return d !== 'date'; }); | |
data.map(function(d){ | |
d.date = dateParse(d.date); | |
d.europe = +d.europe; | |
d.asia = +d.asia; | |
d.america = +d.america; | |
}); | |
var maxAll = d3.max(data, function(d0){ | |
return d3.max(countryList.map(function(name){return d0[name]})); | |
}); | |
// construct a nested data | |
var nestData = []; | |
countryList.map(function(name){ | |
nestData.push({ | |
key: name, | |
values: data.map(function(d){ | |
return {date: d.date, value: d[name]}; | |
}), | |
}) | |
}); | |
xScale.domain(d3.extent(data, function(d){return d.date;})).nice(); | |
yScale.domain([0, maxAll]).nice(); | |
var line = d3.svg.line() | |
.x(function(d){return xScale(d.date);}) | |
.y(function(d){return yScale(d.value);}) | |
// asxis groups | |
var xGroup = svg.append('g') | |
.attr('transform', 'translate(' + | |
[margin.left, margin.top + Height] + ')'); | |
xGroup.call(xAxis); | |
var yGroup = svg.append('g') | |
.attr('transform', 'translate(' + | |
[margin.left, margin.top] + ')'); | |
yGroup.call(yAxis); | |
// main graph drawing | |
var graph = svg.append('g') | |
.attr('transform', 'translate(' + | |
[margin.left, margin.top] + ')') | |
.attr('class', 'graph') | |
.selectAll('g') | |
.data(nestData) | |
.enter() | |
.append('path') | |
.style('transition', 'all 1s ease') | |
.attr('class', function(d){return d.key;}) | |
.attr('d', function(d){return line(d.values)}) | |
.attr('fill', 'none') | |
.attr('stroke', function(d,i){return colors(i)}) | |
.attr('stroke-width', 2) | |
}) | |
</script> | |
</body> |