Skip to content

Instantly share code, notes, and snippets.

@aliavni

aliavni/barley.csv

Last active March 31, 2016 14:01
Show Gist options
  • Save aliavni/e2e02f5eaa01d322c7aa5e2c74e63a23 to your computer and use it in GitHub Desktop.
Save aliavni/e2e02f5eaa01d322c7aa5e2c74e63a23 to your computer and use it in GitHub Desktop.
Download ZIP
Barley Yields
Raw
barley.csv
variety site y1931 y1932
Glabron Crookston 38.13333 26.16667
Glabron Duluth 29.66667 25.86667
Glabron Grand Rapids 29.13333 14.43333
Glabron Morris 28.76667 35.13333
Glabron University Farm 43.06666 36.8
Glabron Waseca 55.2 37.73333
Manchuria Crookston 39.93333 32.96667
Manchuria Duluth 28.96667 22.56667
Manchuria Grand Rapids 32.96667 22.13333
Manchuria Morris 27.43334 34.36666
Manchuria University Farm 27 26.9
Manchuria Waseca 48.86667 33.46667
No. 457 Crookston 45.66667 34.33333
No. 457 Duluth 33.6 22.7
No. 457 Grand Rapids 32.16667 19.46667
No. 457 Morris 28.7 43.53334
No. 457 University Farm 43.26667 26.43334
No. 457 Waseca 58.1 42.2
No. 462 Crookston 48.56666 30.53333
No. 462 Duluth 28.1 22.5
No. 462 Grand Rapids 24.93334 19.9
No. 462 Morris 30.36667 47
No. 462 University Farm 36.6 25.56667
No. 462 Waseca 65.7667 44.7
No. 475 Crookston 44.1 32.13333
No. 475 Duluth 33.06666 27.36667
No. 475 Grand Rapids 19.7 15.23333
No. 475 Morris 22.6 44.23333
No. 475 University Farm 24.66667 30
No. 475 Waseca 46.76667 41.26667
Peatland Crookston 41.6 25.23333
Peatland Duluth 32 31.36667
Peatland Grand Rapids 34.7 26.76667
Peatland Morris 29.86667 43.2
Peatland University Farm 32.76667 28.06667
Peatland Waseca 48.56666 36.03333
Svansota Crookston 40.46667 20.63333
Svansota Duluth 25.7 22.23333
Svansota Grand Rapids 29.66667 16.63333
Svansota Morris 25.76667 35.03333
Svansota University Farm 35.13333 27.43334
Svansota Waseca 47.33333 38.5
Trebi Crookston 46.93333 41.83333
Trebi Duluth 33.93333 30.6
Trebi Grand Rapids 29.76667 20.63333
Trebi Morris 43.76667 46.63333
Trebi University Farm 36.56666 29.06667
Trebi Waseca 63.8333 49.2333
Velvet Crookston 41.33333 32.06666
Velvet Duluth 26.3 22.46667
Velvet Grand Rapids 23.03333 32.23333
Velvet Morris 26.13333 38.83333
Velvet University Farm 39.9 26.8
Velvet Waseca 50.23333 37.4
Wisconsin No. 38 Crookston 49.86667 35.9
Wisconsin No. 38 Duluth 31.6 29.33333
Wisconsin No. 38 Grand Rapids 34.46667 20.66667
Wisconsin No. 38 Morris 29.46667 47.16667
Wisconsin No. 38 University Farm 39.3 38
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*/
/* .container {
width: 80%;
margin: 0px auto;
} */
svg {
/* border: 1px solid #f0f; */
}
circle {
/* fill: red;
stroke: steelblue; */
stroke-width: 3;
}
.tick line {
/* stroke: red;
stroke-width: 1; */
}
.domain {
fill: none;
stroke: black;
}
/* svg {
overflow: visible;
} */
text {
font-family: 'Open Sans', sans-serif;
font-size: small;
}
.data-labels text{
font-size: x-small;
}
.left {
float: left;
}
</style>
<body>
<div id="wrap">
<div class="left">
<div id="barley1" class="chart"> </div>
<div id="barley2" class="chart"> </div>
<div id="barley3" class="chart"> </div>
</div>
<div class="right">
<div id="barley4" class="chart"> </div>
<div id="barley5" class="chart"> </div>
<div id="barley6" class="chart"> </div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<script>
var w = 350,
h = 350
var barley1 = makeBarley('Waseca', w, h);
d3.select("#barley1").call(barley1);
var barley2 = makeBarley('Crookston', w, h);
d3.select("#barley2").call(barley2);
var barley3 = makeBarley('Duluth', w, h);
d3.select("#barley3").call(barley3);
var barley4 = makeBarley('Grand Rapids', w, h);
d3.select("#barley4").call(barley4);
var barley5 = makeBarley('Morris', w, h);
d3.select("#barley5").call(barley5);
var barley6 = makeBarley('University Farm', w, h);
d3.select("#barley6").call(barley6);
function makeBarley(site, w, h) {
var margin = {top: 50, right: 50, bottom: 50, left: 50},
width = w - margin.left - margin.right,
height = h - margin.top - margin.bottom,
barleySite = site || 'Waseca';
function chart(selection) {
selection.each(function() {
var body = d3.select(this);
var container = body.append("div")
.attr("class", "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("text")
.text(barleySite)
.attr("x", width / 3)
.style("font-size", "large")
d3.csv('barley.csv',
function(error, data) {
var axisMin = 10;
var axisMax = 70;
data = data.filter(function(row) { return row.site === barleySite; });
var xScale = d3.scale.linear()
.range([0, width])
.domain([axisMin, axisMax]);
var yScale = d3.scale.linear()
.range([height, 0])
.domain([axisMin, axisMax]);
var xAxis = d3.svg.axis()
.scale(xScale)
.tickSize(2)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(2)
.orient("left");
var rad = 3;
var circle = svg.selectAll(".class3-circle")
.data(data)
.enter()
.append("circle")
.attr("class", "class3-circle")
.attr("r", rad )
.attr("cx", function(d) { return xScale(d.y1931); })
.attr("cy", function(d) { return yScale(d.y1932); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis)
.append("text")
.attr("y", -10)
.attr("x", width)
.text("1931");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0, 0)")
.call(yAxis)
.append("text")
.attr("x", 10)
.text("1932")
svg.append("line")
.attr("class", "center-line")
.attr({
x1: 0,
y1: height,
x2: width,
y2: 0
})
.style("stroke", "gray")
.style("stroke-width", "1")
});
});
}
return chart;
} // function makeBarley
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment