Skip to content

Instantly share code, notes, and snippets.

@sarubenfeld

sarubenfeld/index.html

Created September 23, 2016 00:53
Show Gist options
  • Save sarubenfeld/8423c6de02c5afc7e5126545c5bc78bf to your computer and use it in GitHub Desktop.
Save sarubenfeld/8423c6de02c5afc7e5126545c5bc78bf to your computer and use it in GitHub Desktop.
Download ZIP
barley sites: velvet 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.schemeDark2);
var yAxis = d3.axisLeft(yScale)
.tickPadding(8);
var xAxis = d3.axisBottom(xScale)
.tickPadding(8);
d3.csv("velvet.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
velvet.csv
yield variety year site days
3 43.4 Velvet 1927 StPaul 0.0
13 60.0 Velvet 1927 Duluth 0.0
22 39.8 Velvet 1927 Waseca 0.0
30 20.1 Velvet 1927 GrandRapids 0.0
38 45.6 Velvet 1927 Morris 0.0
46 32.8 Velvet 1927 Crookston 0.0
56 28.4 Velvet 1928 StPaul 0.0
66 38.0 Velvet 1928 Duluth 0.0
75 54.9 Velvet 1928 Waseca 0.0
85 34.8 Velvet 1928 GrandRapids 0.0
95 36.8 Velvet 1928 Morris 0.0
105 49.5 Velvet 1929 StPaul 0.0
116 29.7 Velvet 1929 Duluth 0.0
127 48.9 Velvet 1929 Waseca 0.0
139 23.7 Velvet 1929 GrandRapids 0.0
151 26.6 Velvet 1929 Morris 0.0
161 29.1 Velvet 1929 Crookston 0.0
173 36.6 Velvet 1930 StPaul 0.0
187 27.9 Velvet 1930 Duluth 0.0
198 37.8 Velvet 1930 Waseca 0.0
209 37.8 Velvet 1930 GrandRapids 0.0
221 28.1 Velvet 1930 Morris 0.0
231 36.7 Velvet 1930 Crookston 0.0
243 39.9 Velvet 1931 StPaul 0.0
259 26.3 Velvet 1931 Duluth 0.0
270 50.2 Velvet 1931 Waseca 0.0
283 23.0 Velvet 1931 GrandRapids 0.0
297 26.1 Velvet 1931 Morris 0.0
309 41.3 Velvet 1931 Crookston 0.0
321 26.8 Velvet 1932 StPaul 0.0
332 37.4 Velvet 1932 Waseca 0.0
344 38.8 Velvet 1932 Morris 0.0
353 32.1 Velvet 1932 Crookston 0.0
363 32.2 Velvet 1932 GrandRapids 0.0
373 22.5 Velvet 1932 Duluth 0.0
382 38.2 Velvet 1933 StPaul 0.0
397 53.5 Velvet 1933 Waseca 0.0
411 35.6 Velvet 1933 Crookston 0.0
423 8.0 Velvet 1933 GrandRapids 0.0
434 30.4 Velvet 1933 Duluth 0.0
446 15.0 Velvet 1934 StPaul 0.0
461 18.5 Velvet 1934 Waseca 0.0
476 47.2 Velvet 1934 Crookston 0.0
488 40.4 Velvet 1934 GrandRapids 0.0
500 51.8 Velvet 1934 Duluth 0.0
513 57.0 Velvet 1935 StPaul 0.0
528 56.5 Velvet 1935 Waseca 0.0
543 36.7 Velvet 1935 Morris 0.0
555 40.6 Velvet 1935 Crookston 0.0
567 26.0 Velvet 1935 GrandRapids 0.0
579 27.5 Velvet 1935 Duluth 0.0
592 17.0 Velvet 1936 StPaul 0.0
602 39.4 Velvet 1936 Waseca 0.0
612 21.1 Velvet 1936 Morris 0.0
621 12.6 Velvet 1936 Crookston 0.0
630 7.7 Velvet 1936 GrandRapids 0.0
639 8.9 Velvet 1936 Duluth 0.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment