Skip to content

Instantly share code, notes, and snippets.

@justinav

justinav/1931.csv

Last active June 21, 2016 17: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 justinav/274230f854b736b117255cc0b9d4c9bd to your computer and use it in GitHub Desktop.
Save justinav/274230f854b736b117255cc0b9d4c9bd to your computer and use it in GitHub Desktop.
Download ZIP
GroupedBarCharts
Raw
1931.csv
Site Glabron Manchuria No. 457 No. 462 No. 475 Peatland Svansota Trebi Velvet Wisconsin No. 38
Crookston 38.13333 39.93333 45.66667 48.56666 44.1 41.6 40.46667 46.93333 41.33333 49.86667
Duluth 29.66667 28.96667 33.6 28.1 33.06666 32 25.7 33.93333 26.3 31.6
Grand Rapids 29.13333 32.96667 32.16667 24.93334 19.7 34.7 29.66667 29.76667 23.03333 34.46667
Morris 28.76667 27.43334 28.7 30.36667 22.6 29.86667 25.76667 43.76667 26.13333 29.46667
University Farm 43.06666 27 43.26667 36.6 24.66667 32.76667 35.13333 36.56666 39.9 39.3
Waseca 55.2 48.86667 58.1 65.7667 46.76667 48.56666 47.33333 63.8333 50.23333 58.8
Raw
1932.csv
Site Glabron Manchuria No. 457 No. 462 No. 475 Peatland Svansota Trebi Velvet Wisconsin No. 38
Crookston 26.16667 32.96667 34.33333 30.53333 32.13333 25.23333 20.63333 41.83333 32.06666 35.9
Duluth 25.86667 22.56667 22.7 22.5 27.36667 31.36667 22.23333 30.6 22.46667 29.33333
Grand Rapids 14.43333 22.13333 19.46667 19.9 15.23333 26.76667 16.63333 20.63333 32.23333 20.66667
Morris 35.13333 34.36666 43.53334 47 44.23333 43.2 35.03333 46.63333 38.83333 47.16667
University Farm 36.8 26.9 26.43334 25.56667 30 28.06667 27.43334 29.06667 26.8 38
Waseca 37.73333 33.46667 42.2 44.7 41.26667 36.03333 38.5 49.2333 37.4 58.16667
Raw
README.md

This is a grouped bar chart using data from a 1930s barley crop study in Minnesota.

  • Chart one: overall yield for both 1931 and 1932
  • Chart two: yield for just 1931
  • Chart three: yield for just 1932

Built for Metis' Data Visualization with D3.js Class 3

Raw
barley.csv
Site Glabron Manchuria No. 457 No. 462 No. 475 Peatland Svansota Trebi Velvet Wisconsin No. 38
Crookston 64.3 72.9 80 79.09999 76.23333 66.83333 61.1 88.76666 73.39999 85.76667
Duluth 55.53334 51.53334 56.3 50.6 60.43333 63.36667 47.93333 64.53333 48.76667 60.93333
Grand Rapids 43.56666 55.1 51.63334 44.83334 34.93333 61.46667 46.3 50.4 55.26666 55.13334
Morris 63.9 61.8 72.23334 77.36667 66.83333 73.06667 60.8 90.4 64.96666 76.63334
University Farm 79.86666 53.9 69.70001 62.16667 54.66667 60.83334 62.56667 65.63333 66.7 77.3
Waseca 92.93333 82.33334 100.3 110.4667 88.03334 84.59999 85.83333 113.0666 87.63333 116.96667
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Minnesota Barley Crop Experiment</title>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
* {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
text-rendering: optimizeLegibility;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
color: #282828;
font: 15px 'Montserrat', sans-serif;
}
a{
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
header {
text-align: center;
}
.chart {
display: block;
font-size: 10px;
margin: 1em auto;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
display: none;
}
.legendText {
font-size: 13px;
font-weight: 700;
}
/* Button Toolbar */
.button-toolbar:before,
.button-toolbar:after {
content: '';
display: table;
}
.button-toolbar:after {
clear: both;
}
.button-toolbar {
display: block;
max-width: 200px;
margin: 5em auto;
list-style: none;
background: #c51b7d;
border-radius: 8px;
border: 1px solid #fff;
}
button {
background-clip: border-box;
background: #c51b7d;
border-bottom: 0;
border-left: 0;
border-right: 1px solid #fff;
border-top: 0;
color: #fff;
display: inline-block;
float: left;
font-weight: 700;
height: 30px;
margin: 0;
padding: 0;
text-align: center;
width: 33.33333%;
}
button:hover {
background: #de77ae;
}
button:first-of-type{
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
button:last-of-type{
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-right: 0;
}
</style>
<body>
<header>
<h1>Minnesota Barley Crop Experiment</h1>
<div class="button-toolbar">
<a href="#overall"><button>Overall</button></a>
<a href="#y1931"><button>1931</button></a>
<a href="#y1932"><button>1932</button></a>
</div>
</header>
</body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 800 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var x1 = d3.scale.ordinal();
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.ordinal()
.range(["#8a2be2", "#6495ed", "#e9967a", "#c71585", "#00ff7f", "#ff6347", "#ee82ee", "#ffff00", "#dc143c", "#f0e68c"]);
var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
d3.csv("barley.csv", function(error,data) {
if (error) throw error;
d3.select("body").append("h2")
.attr("id","overall")
.text("Overall Yield for 1931 + 1932")
.style("text-align", "center")
var xNames = d3.keys(data[0]).filter(function(key) { return key !== "Site"; });
data.forEach(function(d) {
d.names = xNames.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Site; }));
x1.domain(xNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.names, function(d) { return d.value; }); })]);
var svg = d3.select("body").append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Crop Yield");
var site = svg.selectAll(".site")
.data(data)
.enter().append("g")
.attr("class", "site")
.attr("transform", function(d) { return "translate(" + x0(d.Site) + ",0)"; });
site.selectAll("rect")
.data(function(d) { return d.names; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); });
var legendArea = d3.select("body").append("svg")
.attr("class", "legendArea chart")
.attr("width", width)
legendArea.append("text")
.text("Crop Variety")
.attr("class", "legendText")
.attr( "transform", "translate(105,15)");
var legend = legendArea.selectAll(".legend")
.data(xNames.slice())
.enter().append("g")
.attr("class", "legend")
.attr( "transform", function(d,i) {
xOff = (i % 5) * 100 + 100
yOff = Math.floor(i / 5) * 25 + 30
return "translate(" + xOff + "," + yOff + ")"
} );
legend.append("rect")
.attr("x", 6)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", 30)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) { return d; });
});
d3.csv("1931.csv", function(error,data) {
if (error) throw error;
d3.select("body").append("h2")
.attr("id","y1931")
.text("Yield for 1931")
.style("text-align", "center")
var xNames = d3.keys(data[0]).filter(function(key) { return key !== "Site"; });
data.forEach(function(d) {
d.names = xNames.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Site; }));
x1.domain(xNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.names, function(d) { return d.value; }); })]);
var svg = d3.select("body").append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Crop Yield");
var site = svg.selectAll(".site")
.data(data)
.enter().append("g")
.attr("class", "site")
.attr("transform", function(d) { return "translate(" + x0(d.Site) + ",0)"; });
site.selectAll("rect")
.data(function(d) { return d.names; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); });
var legendArea = d3.select("body").append("svg")
.attr("class", "legendArea chart")
.attr("width", width)
legendArea.append("text")
.text("Crop Variety")
.attr("class", "legendText")
.attr( "transform", "translate(105,15)");
var legend = legendArea.selectAll(".legend")
.data(xNames.slice())
.enter().append("g")
.attr("class", "legend")
.attr( "transform", function(d,i) {
xOff = (i % 5) * 100 + 100
yOff = Math.floor(i / 5) * 25 + 30
return "translate(" + xOff + "," + yOff + ")"
} );
legend.append("rect")
.attr("x", 6)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", 30)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) { return d; });
});
d3.csv("1932.csv", function(error,data) {
if (error) throw error;
d3.select("body").append("h2")
.attr("id","y1932")
.text("Yield for 1932")
.style("text-align", "center")
var xNames = d3.keys(data[0]).filter(function(key) { return key !== "Site"; });
data.forEach(function(d) {
d.names = xNames.map(function(name) { return {name: name, value: +d[name]}; });
});
x0.domain(data.map(function(d) { return d.Site; }));
x1.domain(xNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.names, function(d) { return d.value; }); })]);
var svg = d3.select("body").append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Crop Yield");
var site = svg.selectAll(".site")
.data(data)
.enter().append("g")
.attr("class", "site")
.attr("transform", function(d) { return "translate(" + x0(d.Site) + ",0)"; });
site.selectAll("rect")
.data(function(d) { return d.names; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); })
.style("fill", function(d) { return color(d.name); });
var legendArea = d3.select("body").append("svg")
.attr("class", "legendArea chart")
.attr("width", width)
legendArea.append("text")
.text("Crop Variety")
.attr("class", "legendText")
.attr( "transform", "translate(105,15)");
var legend = legendArea.selectAll(".legend")
.data(xNames.slice())
.enter().append("g")
.attr("class", "legend")
.attr( "transform", function(d,i) {
xOff = (i % 5) * 100 + 100
yOff = Math.floor(i / 5) * 25 + 30
return "translate(" + xOff + "," + yOff + ")"
} );
legend.append("rect")
.attr("x", 6)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", 30)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) { return d; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment