Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@emschuch

emschuch/README.md

Last active November 3, 2015 15:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emschuch/e1c3926389a39117c3bb to your computer and use it in GitHub Desktop.
Save emschuch/e1c3926389a39117c3bb to your computer and use it in GitHub Desktop.
Download ZIP
Multiple Bar Charts
Raw
README.md

Multiple bar charts using barley data from 1931 and 1932

Raw
barley.csv
yield variety year site
27 Manchuria 1931 University Farm
48.86667 Manchuria 1931 Waseca
27.43334 Manchuria 1931 Morris
39.93333 Manchuria 1931 Crookston
32.96667 Manchuria 1931 Grand Rapids
28.96667 Manchuria 1931 Duluth
43.06666 Glabron 1931 University Farm
55.2 Glabron 1931 Waseca
28.76667 Glabron 1931 Morris
38.13333 Glabron 1931 Crookston
29.13333 Glabron 1931 Grand Rapids
29.66667 Glabron 1931 Duluth
35.13333 Svansota 1931 University Farm
47.33333 Svansota 1931 Waseca
25.76667 Svansota 1931 Morris
40.46667 Svansota 1931 Crookston
29.66667 Svansota 1931 Grand Rapids
25.7 Svansota 1931 Duluth
39.9 Velvet 1931 University Farm
50.23333 Velvet 1931 Waseca
26.13333 Velvet 1931 Morris
41.33333 Velvet 1931 Crookston
23.03333 Velvet 1931 Grand Rapids
26.3 Velvet 1931 Duluth
36.56666 Trebi 1931 University Farm
63.8333 Trebi 1931 Waseca
43.76667 Trebi 1931 Morris
46.93333 Trebi 1931 Crookston
29.76667 Trebi 1931 Grand Rapids
33.93333 Trebi 1931 Duluth
43.26667 No. 457 1931 University Farm
58.1 No. 457 1931 Waseca
28.7 No. 457 1931 Morris
45.66667 No. 457 1931 Crookston
32.16667 No. 457 1931 Grand Rapids
33.6 No. 457 1931 Duluth
36.6 No. 462 1931 University Farm
65.7667 No. 462 1931 Waseca
30.36667 No. 462 1931 Morris
48.56666 No. 462 1931 Crookston
24.93334 No. 462 1931 Grand Rapids
28.1 No. 462 1931 Duluth
32.76667 Peatland 1931 University Farm
48.56666 Peatland 1931 Waseca
29.86667 Peatland 1931 Morris
41.6 Peatland 1931 Crookston
34.7 Peatland 1931 Grand Rapids
32 Peatland 1931 Duluth
24.66667 No. 475 1931 University Farm
46.76667 No. 475 1931 Waseca
22.6 No. 475 1931 Morris
44.1 No. 475 1931 Crookston
19.7 No. 475 1931 Grand Rapids
33.06666 No. 475 1931 Duluth
39.3 Wisconsin No. 38 1931 University Farm
58.8 Wisconsin No. 38 1931 Waseca
29.46667 Wisconsin No. 38 1931 Morris
49.86667 Wisconsin No. 38 1931 Crookston
34.46667 Wisconsin No. 38 1931 Grand Rapids
31.6 Wisconsin No. 38 1931 Duluth
26.9 Manchuria 1932 University Farm
33.46667 Manchuria 1932 Waseca
34.36666 Manchuria 1932 Morris
32.96667 Manchuria 1932 Crookston
22.13333 Manchuria 1932 Grand Rapids
22.56667 Manchuria 1932 Duluth
36.8 Glabron 1932 University Farm
37.73333 Glabron 1932 Waseca
35.13333 Glabron 1932 Morris
26.16667 Glabron 1932 Crookston
14.43333 Glabron 1932 Grand Rapids
25.86667 Glabron 1932 Duluth
27.43334 Svansota 1932 University Farm
38.5 Svansota 1932 Waseca
35.03333 Svansota 1932 Morris
20.63333 Svansota 1932 Crookston
16.63333 Svansota 1932 Grand Rapids
22.23333 Svansota 1932 Duluth
26.8 Velvet 1932 University Farm
37.4 Velvet 1932 Waseca
38.83333 Velvet 1932 Morris
32.06666 Velvet 1932 Crookston
32.23333 Velvet 1932 Grand Rapids
22.46667 Velvet 1932 Duluth
29.06667 Trebi 1932 University Farm
49.2333 Trebi 1932 Waseca
46.63333 Trebi 1932 Morris
41.83333 Trebi 1932 Crookston
20.63333 Trebi 1932 Grand Rapids
30.6 Trebi 1932 Duluth
26.43334 No. 457 1932 University Farm
42.2 No. 457 1932 Waseca
43.53334 No. 457 1932 Morris
34.33333 No. 457 1932 Crookston
19.46667 No. 457 1932 Grand Rapids
22.7 No. 457 1932 Duluth
25.56667 No. 462 1932 University Farm
44.7 No. 462 1932 Waseca
47 No. 462 1932 Morris
30.53333 No. 462 1932 Crookston
19.9 No. 462 1932 Grand Rapids
22.5 No. 462 1932 Duluth
28.06667 Peatland 1932 University Farm
36.03333 Peatland 1932 Waseca
43.2 Peatland 1932 Morris
25.23333 Peatland 1932 Crookston
26.76667 Peatland 1932 Grand Rapids
31.36667 Peatland 1932 Duluth
30 No. 475 1932 University Farm
41.26667 No. 475 1932 Waseca
44.23333 No. 475 1932 Morris
32.13333 No. 475 1932 Crookston
15.23333 No. 475 1932 Grand Rapids
27.36667 No. 475 1932 Duluth
38 Wisconsin No. 38 1932 University Farm
58.16667 Wisconsin No. 38 1932 Waseca
47.16667 Wisconsin No. 38 1932 Morris
35.9 Wisconsin No. 38 1932 Crookston
20.66667 Wisconsin No. 38 1932 Grand Rapids
29.33333 Wisconsin No. 38 1932 Duluth
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
/*css to go here*/
body {
font-family: arial;
}
.axis path,
.axis line {
fill: none;
stroke: #dedede;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.g-1931 {
fill: orange;
}
.g-1932 {
fill: dodgerblue;
}
.g-chart-container {
width:320px;
margin:10px 0;
display: inline-block;
}
.g-location {
text-align: center;
font-weight: bold;
font-size:14px;
margin: 3px 0;
}
.mega-container {
max-width: 960px;
margin: 0 auto;
}
</style>
<body>
<div class='mega-container'></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>
var varieties,
sites;
var margin = {'top': 0, 'right': 30, 'bottom': 30, 'left': 100};
var width = 320 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var xscale = d3.scale.linear();
var yscale = d3.scale.ordinal()
.rangeBands([height, 0], 0.2);
d3.csv('barley.csv', ready);
function ready (error, barley) {
// FORMAT THE DATA
barley.forEach(function (d) {
d.yield = +d.yield;
d.year = +d.year;
});
var nested = d3.nest()
.key(function (d) {
return d.variety;
})
.key(function (d) {
return d.year;
})
.map(barley);
var max_yield = d3.max(barley, function (d) {
return d.yield
});
xscale.range([0, width])
.domain([0, max_yield]);
varieties = d3.map(barley, function (d) { return d.variety }).keys();
sites = d3.map(barley, function (d) { return d.site }).keys();
yscale.domain(varieties);
sites.forEach(function (d) {
make_chart(d);
});
function make_chart (site) {
var mylocation = site;
var data = barley.filter( function (d) {
return d.site === mylocation;
});
var chartcontainer = d3.select('.mega-container')
.append('div')
.attr('class', 'g-chart-container');
var chartlocation = chartcontainer
.append('h5')
.attr('class', 'g-location');
var chart = chartcontainer
.append('div')
.attr('class', 'g-chart');
chartlocation.text(mylocation);
var svg = chart.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// sort data descending by 1931 yield
// data.sort(function (a, b) {
// return a.year - b.year || a.yield - b.yield
// });
var bar_height = height / data.length;
var xaxis = d3.svg.axis()
.scale(xscale)
.orient('bottom')
.ticks(6);
var yaxis = d3.svg.axis()
.scale(yscale)
.orient('left');
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xaxis);
svg.append('g')
.attr('class', 'axis')
.call(yaxis);
var bargroup = svg.selectAll('.g-bargroup')
.data(data)
.enter().append('g')
.attr('class', 'g-bargroup')
.attr("transform", function(d) {
return "translate(0," + yscale(d.variety) + ")";
});
bargroup.append('rect')
.attr('width', function (d) {
return xscale(d.yield);
})
.attr('height', yscale.rangeBand() / 2)
.attr("y", function(d) {
return d.year == 1931 ? 0 : yscale.rangeBand()/2;
})
.attr('class', function (d) {
return 'g-' + d.year;
}
);
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment