index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<style type="text/css">
body {
display: inline-block;
font: 10px sans-serif;
}
#changeScale {
vertical-align: middle;
font: 18px sans-serif;
}
.axis {
font: 10px sans-serif;
}
.domain {
fill: none;
stroke: #000;
}
.varietyLines {
stroke-width: 3;
}
</style>
<body>
<div id="changeScale"> Adjust the scale
</div>
<div id="chartContainer">
</div>
</body>
<script>
var margin = {top: 20, right: 10, bottom: 20, left: 25};
var width = 300 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal()
.domain(['1931','1932'])
.rangePoints([0, width/2]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var colorScale = d3.scale.category10();
d3.tsv("data.tsv", function(error, data) {
if (error) return console.warn(error);
data.forEach(function(d) {
d.yield = +d.yield;
})
var places = d3.set(data.map(function(d) { return d.site })).values();
places.forEach(function(place) {
drawSlopeGraph(place);
})
d3.select("#changeScale")
.append("input")
.attr("type", "range")
.attr("min", -10)
.attr("max", 10)
.attr("step", .1)
.on("input", function() {
updateSlopegraph(this.value);
})
function drawSlopeGraph(sitePlace) {
var localData = data.filter(function(d) { return d.site == sitePlace; })
var data1931 = localData.filter(function(d) { return d.year == '1931' })
var data1932 = localData.filter(function(d) { return d.year == '1932' })
var yLocalScale = d3.scale.pow()
.exponent(1)
.range([height, 0])
.domain(d3.extent(localData, function(d) { return d.yield }));
var yAxis = d3.svg.axis()
.scale(yLocalScale)
.orient("left");
var svg = d3.select("#chartContainer")
.append("svg")
.data([localData])
.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")
.attr("class", "title")
.attr("dy", -5)
.text(sitePlace)
svg.append("g")
.attr("class","y axis")
.call(yAxis)
svg.append("g")
.attr("class","x axis")
.attr("transform","translate(0," + height + ")")
.call(xAxis)
var circleGroup1932 = svg.selectAll(".circleGroup1932")
.data(data1932)
.enter().append("g")
.attr("class", "circleGroup1932" )
.attr("transform", function(d) { return "translate(" + xScale(d.year) + "," + yLocalScale(d.yield) + ")"});
circleGroup1932.append("circle")
.attr("r", 3)
.style("fill",function(d) { return colorScale(d.variety); });
circleGroup1932.append("text")
.attr("dx", 8)
.attr("class", function(d) { return d.variety.replace(".","").replace(" ",""); })
.text(function(d) { return d.variety; })
.style("fill", function(d) { return colorScale(d.variety); })
var circleGroup1931 = svg.selectAll(".circleGroup1931")
.data(data1931)
.enter().append("g")
.attr("class", "circleGroup1931" )
.attr("transform", function(d) { return "translate(" + xScale(d.year) + "," + yLocalScale(d.yield) + ")"});
circleGroup1931.append("circle")
.attr("r", 3)
.style("fill",function(d) { return colorScale(d.variety); });
var nestedData = d3.nest()
.key(function(d) { return d.variety })
.entries(localData);
var varietyLines = svg.selectAll(".varietyLines")
.data(nestedData)
.enter().append("line")
.attr("class", "varietyLines")
.attr("stroke-dasharray", width + " " + width)
.attr("stroke-dashoffset", width)
.attr("x1", function(d) { return xScale(d.values[0].year); })
.attr("x2", function(d) { return xScale(d.values[1].year); })
.attr("y1", function(d) { return yLocalScale(d.values[0].yield); })
.attr("y2", function(d) { return yLocalScale(d.values[1].yield); })
.style("stroke",function(d) { return colorScale(d.key); })
d3.selectAll(".varietyLines")
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
}
function updateSlopegraph(exponentValue) {
d3.selectAll("svg")
.each(function() {
windowwhat = d3.select(this);
var data = d3.select(this).datum();
var yLocalScale = d3.scale.pow()
.exponent(exponentValue)
.range([height, 0])
.domain(d3.extent(data, function(d) { return d.yield }));
var yAxis = d3.svg.axis()
.scale(yLocalScale)
.orient("left");
var svg = d3.select(this);
svg.selectAll(".y")
.call(yAxis)
svg.selectAll(".varietyLines")
.attr("y1", function(d) { return yLocalScale(d.values[0].yield); })
.attr("y2", function(d) { return yLocalScale(d.values[1].yield); })
svg.selectAll(".circleGroup1931")
.attr("transform", function(d) { return "translate(" + xScale(d.year) + "," + yLocalScale(d.yield) + ")"});
svg.selectAll(".circleGroup1932")
.attr("transform", function(d) { return "translate(" + xScale(d.year) + "," + yLocalScale(d.yield) + ")"});
})
}
});
</script>