Skip to content

Instantly share code, notes, and snippets.

@pstuffa

pstuffa/barley.tsv

Last active September 12, 2016 02:27
Show Gist options
  • Save pstuffa/2039304ed80b1c08be718fce486360ca to your computer and use it in GitHub Desktop.
Save pstuffa/2039304ed80b1c08be718fce486360ca to your computer and use it in GitHub Desktop.
Download ZIP
Barley Hulls
Raw
barley.tsv
site variety 1931 1932 yoy yoy_percent
University Farm Manchuria 27 26.9 -0.1 0.003717472119
Waseca Manchuria 48.86667 33.46667 -15.4 0.4601593167
Morris Manchuria 27.43334 34.36666 6.93332 -0.201745529
Crookston Manchuria 39.93333 32.96667 -6.96666 0.2113243467
Grand Rapids Manchuria 32.96667 22.13333 -10.83334 0.4894582062
Duluth Manchuria 28.96667 22.56667 -6.4 0.283604094
University Farm Glabron 43.06666 36.8 -6.26666 0.1702896739
Waseca Glabron 55.2 37.73333 -17.46667 0.4628976557
Morris Glabron 28.76667 35.13333 6.36666 -0.1812142487
Crookston Glabron 38.13333 26.16667 -11.96666 0.4573245277
Grand Rapids Glabron 29.13333 14.43333 -14.7 1.018475986
Duluth Glabron 29.66667 25.86667 -3.8 0.1469071976
University Farm Svansota 35.13333 27.43334 -7.69999 0.2806800047
Waseca Svansota 47.33333 38.5 -8.83333 0.2294371429
Morris Svansota 25.76667 35.03333 9.26666 -0.2645098254
Crookston Svansota 40.46667 20.63333 -19.83334 0.9612282651
Grand Rapids Svansota 29.66667 16.63333 -13.03334 0.7835676921
Duluth Svansota 25.7 22.23333 -3.46667 0.1559222123
University Farm Velvet 39.9 26.8 -13.1 0.4888059701
Waseca Velvet 50.23333 37.4 -12.83333 0.3431371658
Morris Velvet 26.13333 38.83333 12.7 -0.3270386547
Crookston Velvet 41.33333 32.06666 -9.26667 0.288981453
Grand Rapids Velvet 23.03333 32.23333 9.2 -0.2854188506
Duluth Velvet 26.3 22.46667 -3.83333 0.1706229717
University Farm Trebi 36.56666 29.06667 -7.49999 0.2580271493
Waseca Trebi 63.8333 49.2333 -14.6 0.2965472556
Morris Trebi 43.76667 46.63333 2.86666 -0.06147234178
Crookston Trebi 46.93333 41.83333 -5.1 0.1219123603
Grand Rapids Trebi 29.76667 20.63333 -9.13334 0.4426498292
Duluth Trebi 33.93333 30.6 -3.33333 0.1089323529
University Farm No. 457 43.26667 26.43334 -16.83333 0.6368219075
Waseca No. 457 58.1 42.2 -15.9 0.3767772512
Morris No. 457 28.7 43.53334 14.83334 -0.3407351699
Crookston No. 457 45.66667 34.33333 -11.33334 0.3300973136
Grand Rapids No. 457 32.16667 19.46667 -12.7 0.6523971486
Duluth No. 457 33.6 22.7 -10.9 0.4801762115
University Farm No. 462 36.6 25.56667 -11.03333 0.4315513127
Waseca No. 462 65.7667 44.7 -21.0667 0.4712908277
Morris No. 462 30.36667 47 16.63333 -0.3539006383
Crookston No. 462 48.56666 30.53333 -18.03333 0.590611309
Grand Rapids No. 462 24.93334 19.9 -5.03334 0.2529316583
Duluth No. 462 28.1 22.5 -5.6 0.2488888889
University Farm Peatland 32.76667 28.06667 -4.7 0.1674584124
Waseca Peatland 48.56666 36.03333 -12.53333 0.3478260266
Morris Peatland 29.86667 43.2 13.33333 -0.3086418981
Crookston Peatland 41.6 25.23333 -16.36667 0.6486131636
Grand Rapids Peatland 34.7 26.76667 -7.93333 0.2963883815
Duluth Peatland 32 31.36667 -0.63333 0.02019117745
University Farm No. 475 24.66667 30 5.33333 -0.1777776667
Waseca No. 475 46.76667 41.26667 -5.5 0.1332794723
Morris No. 475 22.6 44.23333 21.63333 -0.4890730587
Crookston No. 475 44.1 32.13333 -11.96667 0.3724067814
Grand Rapids No. 475 19.7 15.23333 -4.46667 0.2932169132
Duluth No. 475 33.06666 27.36667 -5.69999 0.2082821914
University Farm Wisconsin No. 38 39.3 38 -1.3 0.03421052632
Waseca Wisconsin No. 38 58.8 58.16667 -0.63333 0.01088819422
Morris Wisconsin No. 38 29.46667 47.16667 17.7 -0.3752649911
Crookston Wisconsin No. 38 49.86667 35.9 -13.96667 0.3890437326
Grand Rapids Wisconsin No. 38 34.46667 20.66667 -13.8 0.6677418278
Duluth Wisconsin No. 38 31.6 29.33333 -2.26667 0.07727284969
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
/*css to go here*/
body {
font-family: arial;
font-size: 12px;
}
.axis line {
fill: none;
stroke: #000;
stroke-width: 1px;
}
.axis text {
font-family: arial, sans-serif;
font-size: 12px;
pointer-events: none;
fill: #777;
}
.domain {
fill: none;
}
.y.axis text {
text-anchor: end !important;
font-size:12px;
}
.hull {
stroke-width: 12px;
stroke-linejoin: round;
}
</style>
<body>
<div class="g-all-charts-container">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>
var margin = {top: 30, right: 30, bottom: 30, left: 50},
width = 800 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.linear()
.domain([0,70])
.range([0,width]);
var yScale = d3.scale.linear()
.domain([-25,25])
.range([height,0]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var colorScale = d3.scale.category10();
d3.tsv("barley.tsv", ready);
function ready(err, data) {
if (err) console.warn(err, "error loading data");
data.forEach(function(d) {
d['1931'] = +d['1931'];
d['yoy'] = +d['yoy'];
});
var container = d3.select(".g-all-charts-container")
.append("div")
.attr("class", "g-container");
var svg = container.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 + ")");
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
var nestedData = d3.nest()
.key(function(d) { return d.site })
.entries(data);
nestedData.forEach(function(d) {
d.vertices = d3.geom.hull(
d.values.map(function(d) {
return [xScale(d['1931']), yScale(d['yoy'])];
})
);
});
svg.selectAll(".hull")
.data(nestedData)
.enter().append("path")
.attr("class", "hull")
.attr("d", function(d) { return "M" + d.vertices.join("L") + "Z"; })
.style("fill", function(d) { return colorScale(d.key); })
.style("stroke", function(d) { return colorScale(d.key); })
.style("fill-opacity", 0)
.style("stroke-opacity", 0);
svg.selectAll(".variety-nodes")
.data(data)
.enter().append("circle")
.attr("class", "variety-nodes")
.attr("r", 0)
.attr("cx", function(d) { return xScale(d['1931'])})
.attr("cy", function(d) { return yScale(d['yoy'])})
d3.selectAll(".variety-nodes")
.transition()
.duration(1000)
.delay(function(d) { return 2000 + (d.yoy*200); })
.attr("r", 3)
.style("fill", function(d) { return d.yoy > 0 ? 'black' : 'red' })
.style("stroke", "#fff")
.style("stroke-width", 1)
svg.selectAll(".hull")
.transition()
.delay(7000)
.style("fill-opacity", 1)
.style("stroke-opacity", 1);
var legend = svg.selectAll(".legend")
.data(colorScale.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", colorScale);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
svg.append("line")
.attr("x1", 0)
.attr("y1", yScale(0))
.attr("x2", width)
.attr("y2", yScale(0))
.style("stroke", "#000")
.style("stroke-width", 1);
var defs = svg.append("defs");
defs.append("marker")
.attr("id", "triangle-start")
.attr("viewBox", "0 0 10 10")
.attr("refX", 10)
.attr("refY", 5)
.attr("markerWidth", -6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0 0 L 10 5 L 0 10 z");
defs.append("marker")
.attr("id", "triangle-end")
.attr("viewBox", "0 0 10 10")
.attr("refX", 10)
.attr("refY", 5)
.attr("markerWidth", -6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0 0 L 10 5 L 0 10 z")
.style("fill","red");
svg.append("line")
.attr("x1", 80)
.attr("y1", yScale(-5))
.attr("x2", 80)
.attr("y2", yScale(0))
.style("stroke", "red")
.style("stroke-width", 1)
.style("stroke-dasharray", 2)
.attr("marker-start", "url(#triangle-end)");
svg.append("text")
.attr("x",80)
.attr("y", yScale(-5))
.attr("dy", 8)
.style("fill","red")
.style("text-anchor","middle")
.style("font","8px sans-serif")
.text("Down year over year")
svg.append("line")
.attr("x1", 60)
.attr("y1", yScale(5))
.attr("x2", 60)
.attr("y2", yScale(0))
.style("stroke", "#000")
.style("stroke-width", 1)
.style("stroke-dasharray", 2)
.attr("marker-start", "url(#triangle-start)");
svg.append("text")
.attr("x", 60)
.attr("y", yScale(5))
.attr("dy", -2)
.style("text-anchor","middle")
.style("font","8px sans-serif")
.text("Up year over year")
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment