Assignment Metis' Data Visualization with D3.js: Class 3
Last active
June 21, 2016 17:09
-
-
Save justinav/a75bbcd6ed5be6007b79883f5fe50a02 to your computer and use it in GitHub Desktop.
BasicBarChart
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
yield | variety | year | site | |
---|---|---|---|---|
39.93333 | Manchuria | 1931 | Crookston | |
38.13333 | Glabron | 1931 | Crookston | |
40.46667 | Svansota | 1931 | Crookston | |
41.33333 | Velvet | 1931 | Crookston | |
46.93333 | Trebi | 1931 | Crookston | |
45.66667 | No. 457 | 1931 | Crookston | |
48.56666 | No. 462 | 1931 | Crookston | |
41.6 | Peatland | 1931 | Crookston | |
44.1 | No. 475 | 1931 | Crookston | |
49.86667 | Wisconsin No. 38 | 1931 | Crookston | |
32.96667 | Manchuria | 1932 | Crookston | |
26.16667 | Glabron | 1932 | Crookston | |
20.63333 | Svansota | 1932 | Crookston | |
32.06666 | Velvet | 1932 | Crookston | |
41.83333 | Trebi | 1932 | Crookston | |
34.33333 | No. 457 | 1932 | Crookston | |
30.53333 | No. 462 | 1932 | Crookston | |
25.23333 | Peatland | 1932 | Crookston | |
32.13333 | No. 475 | 1932 | Crookston | |
35.9 | Wisconsin No. 38 | 1932 | Crookston | |
28.96667 | Manchuria | 1931 | Duluth | |
29.66667 | Glabron | 1931 | Duluth | |
25.7 | Svansota | 1931 | Duluth | |
26.3 | Velvet | 1931 | Duluth | |
33.93333 | Trebi | 1931 | Duluth | |
33.6 | No. 457 | 1931 | Duluth | |
28.1 | No. 462 | 1931 | Duluth | |
32 | Peatland | 1931 | Duluth | |
33.06666 | No. 475 | 1931 | Duluth | |
31.6 | Wisconsin No. 38 | 1931 | Duluth | |
22.56667 | Manchuria | 1932 | Duluth | |
25.86667 | Glabron | 1932 | Duluth | |
22.23333 | Svansota | 1932 | Duluth | |
22.46667 | Velvet | 1932 | Duluth | |
30.6 | Trebi | 1932 | Duluth | |
22.7 | No. 457 | 1932 | Duluth | |
22.5 | No. 462 | 1932 | Duluth | |
31.36667 | Peatland | 1932 | Duluth | |
27.36667 | No. 475 | 1932 | Duluth | |
29.33333 | Wisconsin No. 38 | 1932 | Duluth | |
32.96667 | Manchuria | 1931 | Grand Rapids | |
29.13333 | Glabron | 1931 | Grand Rapids | |
29.66667 | Svansota | 1931 | Grand Rapids | |
23.03333 | Velvet | 1931 | Grand Rapids | |
29.76667 | Trebi | 1931 | Grand Rapids | |
32.16667 | No. 457 | 1931 | Grand Rapids | |
24.93334 | No. 462 | 1931 | Grand Rapids | |
34.7 | Peatland | 1931 | Grand Rapids | |
19.7 | No. 475 | 1931 | Grand Rapids | |
34.46667 | Wisconsin No. 38 | 1931 | Grand Rapids | |
22.13333 | Manchuria | 1932 | Grand Rapids | |
14.43333 | Glabron | 1932 | Grand Rapids | |
16.63333 | Svansota | 1932 | Grand Rapids | |
32.23333 | Velvet | 1932 | Grand Rapids | |
20.63333 | Trebi | 1932 | Grand Rapids | |
19.46667 | No. 457 | 1932 | Grand Rapids | |
19.9 | No. 462 | 1932 | Grand Rapids | |
26.76667 | Peatland | 1932 | Grand Rapids | |
15.23333 | No. 475 | 1932 | Grand Rapids | |
20.66667 | Wisconsin No. 38 | 1932 | Grand Rapids | |
27.43334 | Manchuria | 1931 | Morris | |
28.76667 | Glabron | 1931 | Morris | |
25.76667 | Svansota | 1931 | Morris | |
26.13333 | Velvet | 1931 | Morris | |
43.76667 | Trebi | 1931 | Morris | |
28.7 | No. 457 | 1931 | Morris | |
30.36667 | No. 462 | 1931 | Morris | |
29.86667 | Peatland | 1931 | Morris | |
22.6 | No. 475 | 1931 | Morris | |
29.46667 | Wisconsin No. 38 | 1931 | Morris | |
34.36666 | Manchuria | 1932 | Morris | |
35.13333 | Glabron | 1932 | Morris | |
35.03333 | Svansota | 1932 | Morris | |
38.83333 | Velvet | 1932 | Morris | |
46.63333 | Trebi | 1932 | Morris | |
43.53334 | No. 457 | 1932 | Morris | |
47 | No. 462 | 1932 | Morris | |
43.2 | Peatland | 1932 | Morris | |
44.23333 | No. 475 | 1932 | Morris | |
47.16667 | Wisconsin No. 38 | 1932 | Morris | |
27 | Manchuria | 1931 | University Farm | |
43.06666 | Glabron | 1931 | University Farm | |
35.13333 | Svansota | 1931 | University Farm | |
39.9 | Velvet | 1931 | University Farm | |
36.56666 | Trebi | 1931 | University Farm | |
43.26667 | No. 457 | 1931 | University Farm | |
36.6 | No. 462 | 1931 | University Farm | |
32.76667 | Peatland | 1931 | University Farm | |
24.66667 | No. 475 | 1931 | University Farm | |
39.3 | Wisconsin No. 38 | 1931 | University Farm | |
26.9 | Manchuria | 1932 | University Farm | |
36.8 | Glabron | 1932 | University Farm | |
27.43334 | Svansota | 1932 | University Farm | |
26.8 | Velvet | 1932 | University Farm | |
29.06667 | Trebi | 1932 | University Farm | |
26.43334 | No. 457 | 1932 | University Farm | |
25.56667 | No. 462 | 1932 | University Farm | |
28.06667 | Peatland | 1932 | University Farm | |
30 | No. 475 | 1932 | University Farm | |
38 | Wisconsin No. 38 | 1932 | University Farm | |
48.86667 | Manchuria | 1931 | Waseca | |
55.2 | Glabron | 1931 | Waseca | |
47.33333 | Svansota | 1931 | Waseca | |
50.23333 | Velvet | 1931 | Waseca | |
63.8333 | Trebi | 1931 | Waseca | |
58.1 | No. 457 | 1931 | Waseca | |
65.7667 | No. 462 | 1931 | Waseca | |
48.56666 | Peatland | 1931 | Waseca | |
46.76667 | No. 475 | 1931 | Waseca | |
58.8 | Wisconsin No. 38 | 1931 | Waseca | |
33.46667 | Manchuria | 1932 | Waseca | |
37.73333 | Glabron | 1932 | Waseca | |
38.5 | Svansota | 1932 | Waseca | |
37.4 | Velvet | 1932 | Waseca | |
49.2333 | Trebi | 1932 | Waseca | |
42.2 | No. 457 | 1932 | Waseca | |
44.7 | No. 462 | 1932 | Waseca | |
36.03333 | Peatland | 1932 | Waseca | |
41.26667 | No. 475 | 1932 | Waseca | |
58.16667 | Wisconsin No. 38 | 1932 | Waseca |
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> | |
<meta charset="utf-8"> | |
<head> | |
<title>Barley Farms</title> | |
</head> | |
<style type="text/css"> | |
body{ | |
font: 400 13px/1.2 sans-serif; | |
} | |
h2 { | |
font-size: 30px; | |
} | |
.description { | |
text-align: center; | |
} | |
.chart { | |
display: block; | |
background: #f8f8f8; | |
margin: 2em auto; | |
padding: 10px; | |
} | |
.axis path { | |
fill: none; | |
} | |
.axis path, | |
.axis line { | |
stroke: #222; | |
stroke-width: 1; | |
opacity: 1; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-size: 11px; | |
} | |
.anscombe-circle-groups { | |
font-size: 10px; | |
} | |
.anscombe-circles { | |
fill: Coral; | |
} | |
</style> | |
<body></body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
<script> | |
var header = d3.select("body").append("div") | |
.attr("class", "description") | |
header.append("h2") | |
.text("University Farm") | |
header.append("p") | |
.text("1931") | |
var margin = {top: 20, right: 30, bottom: 100, left: 30}; | |
var width = 720 - margin.left - margin.right, | |
height = 400 - margin.top - margin.bottom; | |
var xScale = d3.scale.ordinal() | |
.rangePoints([0, width]) | |
.rangeBands([0, width]); | |
var yScale = d3.scale.linear() | |
.range([height, 0]) | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left") | |
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 + ")"); | |
d3.csv("barley.csv", ready) | |
function ready(error, data) { | |
if (error) return console.warn(error); | |
var sampleData1 = data.filter(function(d) { return d.site == 'University Farm' & d.year == '1931'; }) | |
var sampleData2 = data.filter(function(d) { return d.site == 'University Farm' & d.year == '1932'; }) | |
xScale.domain(sampleData1.map(function(d) {return d.variety; })) | |
svg.append("g") | |
.attr("class","x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
.selectAll("text") | |
.style("text-anchor", "end") | |
.attr("dx", "-.8em") | |
.attr("dy", "-.55em") | |
.attr("transform", "rotate(-90)" ); | |
yScale.domain([0, d3.max(sampleData1, function(d){return (d.yield); })]).nice() | |
svg.append("g") | |
.attr("class","y axis") | |
.call(yAxis); | |
var barWidth = xScale.rangeBand(); | |
var bar = svg.selectAll(".bars") | |
.data(sampleData1) | |
.enter().append("g") | |
.attr("class","bars") | |
.attr("transform", function(d, i) {return "translate(" + i * barWidth + ", 0)"; }) | |
bar.append("rect") | |
.attr("fill","rgba(0,0,255,.5)") | |
.attr("x", 0) | |
.attr("width", barWidth - 2) | |
.attr("y", function(d) {return yScale(d.yield)}) | |
.attr("height", function(d){return height - yScale(d.yield); }) | |
.text(function(d) {return d.variety + " " + d.year}) | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment