Skip to content

Instantly share code, notes, and snippets.

@pstuffa
Last active December 4, 2017 01:31
Show Gist options
  • Save pstuffa/2cdca813d7dfb02cfedb4d460eafd3d4 to your computer and use it in GitHub Desktop.
Save pstuffa/2cdca813d7dfb02cfedb4d460eafd3d4 to your computer and use it in GitHub Desktop.
Barley Maps
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
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Arial;
font-weight: 200;
font-size: 12px;
}
.counties {
stroke: #1d1e1a;
stroke-width: .1;
fill: #fff;
}
.usCounties {
stroke: #1d1e1a;
stroke-width: .1;
fill: #bfbfbf;
}
.states {
stroke: #1d1e1a;
stroke-width: .5;
fill: #efefef;
}
.bubbles {
stroke: #1d1e1a;
fill-opacity: .95;
}
.links {
stroke: #1d1a1a;
stroke-width: 1px;
opacity: .95;
stroke-dasharray: 5;
}
.outline {
stroke: #000;
stroke-width: 3;
}
.text {
pointer-events: none;
}
svg {
overflow: visible;
}
.headline {
font-size: 32px;
text-anchor: "end";
}
.subline {
text-anchor: "end";
}
</style>
<body>
<div id="chart-container"> </div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script>
var margin = {top: 10, right: 20, bottom: 50, left: 20};
var width = 900 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var coordinateLookup = {
"Waseca": { "lat": 44.077591, "long": -93.505882 },
"Duluth": { "lat":46.795114,"long": -92.100090},
"GrandRapids": { "lat":47.235844,"long": -93.527529},
"Morris": { "lat":45.979908,"long": -94.278796},
"Crookston": { "lat":47.77468,"long": -96.606201},
"UniversityFarm": { "lat":44.984557,"long": -93.185641}
}
var simulation = d3.forceSimulation()
.force("charge", d3.forceManyBody().strength(-100))
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("x", d3.forceX(width / 2))
.force("y", d3.forceY(height / 2));
var svg = d3.select("#chart-container")
.append("svg")
.attr("class", "map")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
queue()
.defer(d3.tsv, "barley.tsv")
.defer(d3.json, "us.json")
.defer(d3.json, "tl_2013_27_cousub.json")
.await(ready);
function ready(error, barley, us, mn) {
if (error) throw error;
console.log(mn);
// COUNTIES SECTION
var counties = topojson.feature(mn, mn.objects.tl_2013_27_cousub);
var usStates = topojson.feature(us, us.objects.states);
var projection = d3.geoAlbersUsa()
.fitSize([width, height], counties);
var path = d3.geoPath()
.projection(projection);
svg.selectAll(".states")
.data(usStates.features)
.enter().append("path")
.attr("class", "states")
.attr("d", path)
svg.append("path")
.datum(topojson.mesh(mn, mn.objects.tl_2013_27_cousub))
.attr("class", "outline")
.attr("d", path)
var countyPaths = svg.selectAll(".counties")
.data(counties.features)
.enter().append("path")
.attr("class", "counties")
.attr("d", function(d) { return path(d); })
// TEXT
svg.append("text")
.attr("class", "headline")
.attr("x", width - width*.1)
.attr("y", height*.1)
.text("Michigan Barley")
svg.append("text")
.attr("class", "subline")
.attr("x", width - width*.1)
.attr("y", height*.15)
.text("1931-1932")
// BARLEY SECTION
barley.forEach(function(d) {
d.site = d.site.replace(" ","").replace(". ", "")
d.variety = d.variety.replace(" ","").replace(". ", "")
d["third_level_node"] = d.site + "-" + d.variety + "-" + d.year;
d["second_level_node"] = d.site + "-" + d.variety
d["first_level_node"] = d.site
})
var nestedBarley = d3.nest()
.key(function(d) { return d.site })
.key(function(d) { return d.variety })
.entries(barley);
var yoyLookup = {};
var secondYearLookup = {};
nestedBarley.forEach(function(site) {
site.values.forEach(function(variety) {
variety["YoY"] = variety.values[1].yield - variety.values[0].yield;
yoyLookup[site.key + "-" + variety.key] = variety["YoY"]
secondYearLookup[site.key + "-" + variety.key] = variety.values[1].yield;
})
});
var sites = d3.set(barley.map(function(d) { return d.first_level_node; })).values(),
siteVarieties = d3.set(barley.map(function(d) { return d.second_level_node; })).values();
var nodes = [],
links = [];
sites.forEach(function(site) {
var lat = coordinateLookup[site].lat;
var long = coordinateLookup[site].long;
nodes.push({"id": site,
"type": "site",
"site": site,
"displayName": site,
"fx": projection([long,lat])[0],
"fy": projection([long,lat])[1]
})
});
siteVarieties.forEach(function(siteVariety) {
nodes.push({"id": siteVariety,
"type": "Variety",
"site": siteVariety.split("-")[0],
"displayName": siteVariety.split("-")[1]
})
links.push({"source": siteVariety, "target": siteVariety.split("-")[0]})
});
var graph = {
"nodes": nodes,
"links": links
}
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line");
var radiusScale = d3.scaleLinear()
.domain(d3.extent(barley, function(d) { return d.yield; }))
.range([2, 20])
var colorScale = d3.scaleSequential(d3.interpolateRdYlGn)
.domain([-25, 25])
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 2)
.attr("class", "site")
node.filter(function(d) { return d.type == "Variety" })
.attr("class", "bubbles")
.attr("r", function(d) { return radiusScale(secondYearLookup[d.id]); })
.style("fill", function(d) { return colorScale(yoyLookup[d.id]) })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
.on("mouseenter", function(d) {
d3.select(".nodes")
.style("opacity", .5);
d3.select(".links")
.style("opacity", .5);
d3.select(".text")
.selectAll("text")
.filter(function(e) { return e.site == d.site && e.displayName == d.displayName; })
.style("opacity", 1)
})
.on("mouseleave", function(d) {
d3.select(".nodes")
.style("opacity", .95);
d3.select(".links")
.style("opacity", .95);
d3.select(".text")
.selectAll("text")
.filter(function(e) { return e.site == d.site && e.displayName == d.displayName; })
.style("opacity", 0)
});
var text = svg.append("g")
.attr("class", "text")
.selectAll("text")
.data(graph.nodes)
.enter().append("text")
.attr("dy", 4)
.attr("dx",function(d) { return radiusScale(secondYearLookup[d.id])+1; })
.style("opacity", 0)
.text(function(d) { return d.displayName;})
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
text
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
}
}
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
</html>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment