Created
September 30, 2015 20:52
-
-
Save kpq/a3e451dec33998bd37d7 to your computer and use it in GitHub Desktop.
Barley data: arrows
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 | |
---|---|---|---|---|
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 |
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"> | |
<style type="text/css"> | |
/*css to go here*/ | |
body { | |
font-family: arial; | |
font-size: 12px; | |
} | |
.g-chart-container { | |
width:350px; | |
margin:10px 0; | |
} | |
.g-location { | |
text-align: center; | |
font-weight: bold; | |
font-size:14px; | |
margin: 3px 0; | |
} | |
.g-variety-group.g-increasing line { | |
stroke:#7FA4CE; | |
} | |
.g-variety-group.g-decreasing line { | |
stroke: #BE6C8D; | |
} | |
.g-variety-group.g-decreasing circle { | |
fill: #BE6C8D; | |
} | |
.g-variety-group.g-increasing circle { | |
fill: #7FA4CE; | |
} | |
.g-variety-group line { | |
stroke: #ccc; | |
stroke-width: 4px; | |
} | |
.axis line { | |
fill: none; | |
stroke: #ccc; | |
stroke-dasharray: 2px 3px; | |
shape-rendering: crispEdges; | |
stroke-width: 1px; | |
} | |
.axis text { | |
font-family: arial, sans-serif; | |
font-size: 12px; | |
pointer-events: none; | |
fill: #777; | |
} | |
.domain { | |
display: none; | |
} | |
.y.axis text { | |
text-anchor: end !important; | |
font-size:12px; | |
} | |
</style> | |
<body> | |
<div class="g-chart-container"> | |
<h5 class="g-location"></h5> | |
<div class="g-chart"></div> | |
</div> | |
</body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
<script> | |
//JS to go here | |
var myLocationName = "Waseca"; | |
var margin = {top: 20, right: 10, bottom: 20, left: 130}; | |
var width = 350 - margin.left - margin.right, | |
height = 400 - margin.top - margin.bottom; | |
var svg = d3.select("body").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 + ")"); | |
var xScale = d3.scale.linear() | |
.range([0,width]); | |
var y0 = d3.scale.ordinal() | |
.rangeBands([height, 0], 0.2) | |
.domain(["Glabron", "Manchuria", "No. 457", "No. 462", "No. 475", "Peatland", "Svansota", "Trebi", "Velvet", "Wisconsin No. 38"]); | |
var yAxis = d3.svg.axis() | |
.scale(y0) | |
.tickSize(-width) | |
.tickPadding(13) | |
.orient("left"); | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom"); | |
d3.tsv("barley.tsv", ready); | |
function ready(err, data) { | |
if (err) throw "error loading data"; | |
//FORMAT data | |
data.forEach(function(d) { | |
d.year = +d.year; | |
d.yield = +d.yield; | |
}); | |
var myLocationData = data.filter(function(d) { | |
return d.site === myLocationName; | |
}); | |
var yieldsByLocation = d3.nest() | |
.key(function(d) { return d.variety; }) | |
.entries(myLocationData); | |
yieldsByLocation.forEach(function(d) { | |
d.increasing = (d.values[0].yield > d.values[1].yield); | |
}); | |
d3.select(".g-location").text(myLocationName); | |
var maxYield = d3.max(data, function(d) { return d.yield; }); | |
xScale.domain([0, maxYield ]); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
var varietyGroup = svg.selectAll(".g-variety-group") | |
.data(yieldsByLocation) | |
.enter() | |
.append("g") | |
.attr("class", function(d) { return "g-variety-group " + (d.increasing ? "g-increasing" : "g-decreasing") }) | |
.attr("transform", function(d) { | |
return "translate(0," + (y0(d.key) + y0.rangeBand()/2) + ")"; | |
}); | |
varietyGroup.append("circle") | |
.attr("r", 4) | |
.attr("cx", function(d) { return xScale(d.values[1].yield); }) | |
varietyGroup.append("line") | |
.attr("x1", function(d) { return xScale(d.values[0].yield); }) | |
.attr("x2", function(d) { return xScale(d.values[1].yield); }); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment