Skip to content

Instantly share code, notes, and snippets.

@kpq

kpq/barley-v2.tsv

Created October 10, 2017 00:05
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 kpq/6b33e61d6e1e9d7d5e42c5bca4d75dd2 to your computer and use it in GitHub Desktop.
Save kpq/6b33e61d6e1e9d7d5e42c5bca4d75dd2 to your computer and use it in GitHub Desktop.
Download ZIP
Barley at University Farm Example
Raw
barley-v2.tsv
variety site y1931 y1932
Glabron Crookston 38.13333 26.16667
Manchuria Crookston 39.93333 32.96667
No. 457 Crookston 45.66667 34.33333
No. 462 Crookston 48.56666 30.53333
No. 475 Crookston 44.1 32.13333
Peatland Crookston 41.6 25.23333
Svansota Crookston 40.46667 20.63333
Trebi Crookston 46.93333 41.83333
Velvet Crookston 41.33333 32.06666
Wisconsin No. 38 Crookston 49.86667 35.9
Glabron Duluth 29.66667 25.86667
Manchuria Duluth 28.96667 22.56667
No. 457 Duluth 33.6 22.7
No. 462 Duluth 28.1 22.5
No. 475 Duluth 33.06666 27.36667
Peatland Duluth 32 31.36667
Svansota Duluth 25.7 22.23333
Trebi Duluth 33.93333 30.6
Velvet Duluth 26.3 22.46667
Wisconsin No. 38 Duluth 31.6 29.33333
Glabron Grand Rapids 29.13333 14.43333
Manchuria Grand Rapids 32.96667 22.13333
No. 457 Grand Rapids 32.16667 19.46667
No. 462 Grand Rapids 24.93334 19.9
No. 475 Grand Rapids 19.7 15.23333
Peatland Grand Rapids 34.7 26.76667
Svansota Grand Rapids 29.66667 16.63333
Trebi Grand Rapids 29.76667 20.63333
Velvet Grand Rapids 23.03333 32.23333
Wisconsin No. 38 Grand Rapids 34.46667 20.66667
Glabron Morris 28.76667 35.13333
Manchuria Morris 27.43334 34.36666
No. 457 Morris 28.7 43.53334
No. 462 Morris 30.36667 47
No. 475 Morris 22.6 44.23333
Peatland Morris 29.86667 43.2
Svansota Morris 25.76667 35.03333
Trebi Morris 43.76667 46.63333
Velvet Morris 26.13333 38.83333
Wisconsin No. 38 Morris 29.46667 47.16667
Glabron University Farm 43.06666 36.8
Manchuria University Farm 27 26.9
No. 457 University Farm 43.26667 26.43334
No. 462 University Farm 36.6 25.56667
No. 475 University Farm 24.66667 30
Peatland University Farm 32.76667 28.06667
Svansota University Farm 35.13333 27.43334
Trebi University Farm 36.56666 29.06667
Velvet University Farm 39.9 26.8
Wisconsin No. 38 University Farm 39.3 38
Glabron Waseca 55.2 37.73333
Manchuria Waseca 48.86667 33.46667
No. 457 Waseca 58.1 42.2
No. 462 Waseca 65.7667 44.7
No. 475 Waseca 46.76667 41.26667
Peatland Waseca 48.56666 36.03333
Svansota Waseca 47.33333 38.5
Trebi Waseca 63.8333 49.2333
Velvet Waseca 50.23333 37.4
Wisconsin No. 38 Waseca 58.8 58.16667
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
/*css to go here*/
svg {
border: 1px solid #f0f;
}
.variety-group line {
stroke: #ccc;
}
.y1931 {
fill: #ccc;
}
.y1932 {
fill: red;
}
</style>
<body>
<h1>Barley!</h1>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
//JS to go here
var margin = {top: 20, right: 20, bottom: 20, left: 120};
var width = 400 - margin.left - margin.right,
height = 300 - 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 + ")");
d3.tsv("barley-v2.tsv", ready);
function ready(err, data) {
if (err) console.warn(err, "error loading data");
// format your data
data.forEach(function(d) {
d.y1931 = +d.y1931;
d.y1932 = +d.y1932;
d.diff = d.y1931 - d.y1932;
});
data = data.filter(function(d) {
return d.site == "University Farm";
});
var xscale = d3.scaleLinear()
.domain([20,50])
.range([0,width]);
var yscale = d3.scalePoint()
.range([height, 0])
.domain(["Glabron", "Manchuria", "No. 457", "No. 462", "No. 475", "Peatland", "Svansota", "Trebi", "Velvet", "Wisconsin No. 38"]);
var yaxis = d3.axisLeft(yscale);
var xaxis = d3.axisBottom(xscale);
svg.append("g").call(xaxis);
svg.append("g").call(yaxis);
var varietyGroup = svg.selectAll(".variety-group")
.data(data)
.enter()
.append("g")
.attr('class', 'variety-group')
.attr("transform", function(d) {
return "translate(0," + yscale(d.variety) + ")";
});
varietyGroup.append("line")
.attr("x1", function(d) { return xscale(d.y1931); })
.attr("x2", function(d) { return xscale(d.y1932); })
.attr("y1", 0)
.attr("y2", 0);
varietyGroup.append("circle")
.attr("class", "y1931")
.attr("cx", function(d) { return xscale(d.y1931); })
.attr("r", 3);
varietyGroup.append("circle")
.attr("class", "y1932")
.attr("cx", function(d) { return xscale(d.y1932); })
.attr("r", 6);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment