Skip to content

Instantly share code, notes, and snippets.

@sarubenfeld

sarubenfeld/index.html

Created September 22, 2016 23:51
Show Gist options
  • Save sarubenfeld/66aff5ac2e5944b62672f860da209827 to your computer and use it in GitHub Desktop.
Save sarubenfeld/66aff5ac2e5944b62672f860da209827 to your computer and use it in GitHub Desktop.
Download ZIP
barley sites: peatland variety
Raw
index.html
<!DOCTYPE html>
<html>
<body>
<div class="buttons"></div>
<br />
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<link href="colorbrewer.css" media="screen, print" rel="stylesheet" />
<style>
body {
font-family: futura;
font-size: 8px;
width: 720px;
margin: 20px auto;
}
text {
font-family: futura;
}
.point {
fill: #999;
stroke: #fff;
}
.point.scanned {
fill: orange;
fill-opacity: 1;
stroke: brown;
}
.point.selected {
fill: red;
fill-opacity: 1;
}
.node {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.overlay {
fill: none;
pointer-events: all;
}
svg {
border: '#003c30';
}
.axis line {
stroke: '#8c510a';
stroke-dasharray: 1px 1px;
}
</style>
<script>
var margin = {top: 20, right: 50, bottom: 60, left: 40};
var width = 300 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var yScale = d3.scaleLinear()
.range([height, 0]);
var xScale = d3.scaleBand()
.padding([.1])
.rangeRound([0, width])
var colorScale = d3.scaleOrdinal(d3.schemeSet3);
//
// ['#543005','#8c510a','#bf812d','#dfc27d','#f6e8c3','#c7eae5','#80cdc1','#35978f','#01665e','#003c30']
var yAxis = d3.axisLeft(yScale)
.tickPadding(8);
var xAxis = d3.axisBottom(xScale)
.tickPadding(8);
d3.csv("peatland.csv", ready)
function ready(error, data) {
if (error) return console.warn(error);
data.forEach(function(d) {
d.yield = +d.yield
})
var distinctSites = d3.set(data.map(function(d) { return d.site })).values();
distinctSites.forEach(function(site) {
drawChart(site, data);
})
}
function drawChart(siteName, data) {
console.log(data);
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 + ")");
svg.append("text")
.text(siteName)
.attr("y", -12);
sampleData = data.filter(function(d) { return d.site == siteName; });
xScale.domain(d3.set(sampleData.map(function(d) { return d.variety })).values());
yScale.domain([0, d3.max(sampleData, function(d) { return +d.yield; })]);
var yearScale = d3.scaleBand()
.domain(d3.set(sampleData.map(function(d) { return d.year })).values())
.rangeRound([0, xScale.bandwidth()])
svg.append("g")
.attr("class","x axis")
.attr("transform","translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("transform","rotate(45)")
.style("text-anchor", "start")
svg.append("g")
.attr("class","y axis")
.call(yAxis);
var bars = svg.selectAll(".bars")
// .data(function(d) { return d.values })
.data(sampleData)
.enter().append("rect")
// .attr("class", "bars")
.attr("class", function(d) { return "bars " + "L" + d.year.replace(". ", "").replace(" ", "") })
.attr("width", yearScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.yield); })
.attr("x", function(d) { return xScale(d.variety) + yearScale(d.year); })
.attr("y", function(d) { return yScale(d.yield); })
.style("fill", function(d) { return colorScale(d.year); })
.on("mouseover", function(d) {
var myYear = d.year.replace(". ", "").replace(" ", "");
console.log(myYear)
d3.selectAll(".bars ")
.style("opacity", ".1")
d3.selectAll("." + "L" + myYear)
.style("opacity", "1")
})
.on("mouseleave", function(d) {
d3.selectAll(".bars")
.style("opacity", "1")
})
// .on("mouseenter", function(d) {
//
// d3.select(this)
// .append("text")
// .attr("dx", 5)
// .attr("dy", 10)
// .text("(" + d.x + "," + d.y + ")")
//
// // d3.selectAll("rect")
// // .style("fill-opacity", .5);
//
// d3.select(this)
// .select("rect")
// .transition()
// .ease(d3.easeElastic)
// // .attr("r", 20)
// .style("fill-opacity", 1);
// })
// .on("mouseleave", function(d) {
//
// d3.select(this)
// .select("text")
// .transition()
// .style("opacity", 0)
// .transition()
// .remove();
//
// d3.select(this)
// .select("rect")
// .transition()
// .ease(d3.easeElastic)
// // .attr("r", 10)
//
// d3.selectAll("rect")
// .style("fill-opacity", 1);
// })
// Lengend to do
// box - border - title - color - 2 options
//
var legend = svg.selectAll(".legend")
.data(colorScale.domain())
.enter().append("g")
.attr("transform", function(d,i) { return "translate(" + width + "," + i*15 + ")" });
legend.append("rect")
.attr("width", 10)
.attr("height", 10)
.style("fill", function(d) { return colorScale(d); })
legend.append("text")
.attr("x", 18)
.attr("y", 8)
.text(function(d) { return d; })
}
</script>
Raw
peatland.csv
yield variety year site days
7 49.0 Peatland 1927 StPaul 0.0
17 56.4 Peatland 1927 Duluth 0.0
26 45.4 Peatland 1927 Waseca 0.0
33 14.9 Peatland 1927 GrandRapids 0.0
42 45.4 Peatland 1927 Morris 0.0
50 39.8 Peatland 1927 Crookston 0.0
60 34.8 Peatland 1928 StPaul 0.0
70 35.5 Peatland 1928 Duluth 0.0
79 53.0 Peatland 1928 Waseca 0.0
88 44.4 Peatland 1928 GrandRapids 0.0
99 26.8 Peatland 1928 Morris 0.0
109 49.4 Peatland 1929 StPaul 0.0
120 28.8 Peatland 1929 Duluth 0.0
131 50.5 Peatland 1929 Waseca 0.0
142 27.1 Peatland 1929 GrandRapids 0.0
155 26.5 Peatland 1929 Morris 0.0
165 33.7 Peatland 1929 Crookston 0.0
177 33.1 Peatland 1930 StPaul 0.0
191 27.5 Peatland 1930 Duluth 0.0
202 42.7 Peatland 1930 Waseca 0.0
212 38.9 Peatland 1930 GrandRapids 0.0
225 26.0 Peatland 1930 Morris 0.0
235 29.0 Peatland 1930 Crookston 0.0
247 32.8 Peatland 1931 StPaul 0.0
263 32.0 Peatland 1931 Duluth 0.0
274 48.6 Peatland 1931 Waseca 0.0
286 34.7 Peatland 1931 GrandRapids 0.0
301 29.9 Peatland 1931 Morris 0.0
313 41.6 Peatland 1931 Crookston 0.0
325 28.1 Peatland 1932 StPaul 0.0
337 36.0 Peatland 1932 Waseca 0.0
348 43.2 Peatland 1932 Morris 0.0
357 25.2 Peatland 1932 Crookston 0.0
367 26.8 Peatland 1932 GrandRapids 0.0
377 31.4 Peatland 1932 Duluth 0.0
386 31.0 Peatland 1933 StPaul 0.0
402 59.1 Peatland 1933 Waseca 0.0
415 35.3 Peatland 1933 Crookston 0.0
427 14.4 Peatland 1933 GrandRapids 0.0
438 41.7 Peatland 1933 Duluth 0.0
450 5.4 Peatland 1934 StPaul 0.0
466 11.3 Peatland 1934 Waseca 0.0
480 44.7 Peatland 1934 Crookston 0.0
492 43.2 Peatland 1934 GrandRapids 0.0
504 50.7 Peatland 1934 Duluth 0.0
517 51.9 Peatland 1935 StPaul 0.0
533 47.8 Peatland 1935 Waseca 0.0
547 49.1 Peatland 1935 Morris 0.0
559 52.0 Peatland 1935 Crookston 0.0
571 35.6 Peatland 1935 GrandRapids 0.0
583 33.0 Peatland 1935 Duluth 0.0
596 11.0 Peatland 1936 StPaul 0.0
607 38.5 Peatland 1936 Waseca 0.0
616 18.1 Peatland 1936 Morris 0.0
625 6.7 Peatland 1936 Crookston 0.0
634 16.5 Peatland 1936 GrandRapids 0.0
643 17.5 Peatland 1936 Duluth 0.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment