|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
|
|
<style type="text/css"> |
|
/*css to go here*/ |
|
svg { |
|
width: 2400px; |
|
height: 2600px; |
|
} |
|
circle { |
|
opacity: 0.5; |
|
} |
|
</style> |
|
|
|
<body> |
|
</body> |
|
|
|
<script> |
|
// properties |
|
var radius = 10; |
|
var duration = 1000; |
|
var width = 400; |
|
var height = 400; |
|
var margin = {top: 10, bottom:10, left:40, right:10}; |
|
var svg = d3.select('body').append('svg'); |
|
|
|
//scales |
|
var xScale = d3.scaleBand() |
|
.rangeRound([margin.left,width+margin.left]); |
|
var yScale = d3.scaleLinear() |
|
.range([height+margin.top,margin.bottom]); |
|
var colorscale = d3.scaleOrdinal(d3.schemeCategory10); |
|
|
|
//transition |
|
|
|
function update(data,year){ |
|
var t = d3.transition().duration(1000); |
|
|
|
data = data.filter(function(d){return d.year === year;}) |
|
|
|
console.log(data) |
|
var circles = svg.selectAll('circle') |
|
.data(data, d => d.key); |
|
|
|
// // exit |
|
circles.exit().transition(t) |
|
.transition(t) |
|
// .attr('cy', 0) |
|
// .attr('cx', 0) |
|
.attr('r',0) |
|
.remove(); |
|
|
|
// enter |
|
var enter = circles.enter().append('circle') |
|
.attr('cy', d=>yScale(d.yield)) |
|
.attr('cx', d=>xScale(d.site)) |
|
.attr('r',0) |
|
|
|
// enter + update |
|
circles = enter.merge(circles) |
|
|
|
.attr('cx', d=>xScale(d.site)) |
|
.attr('fill',d=>colorscale(d.gen)) |
|
.transition(t) |
|
.attr('r',radius) |
|
.attr('cy', d=>yScale(d.yield)) |
|
|
|
} //end update |
|
|
|
|
|
d3.csv('barleyfull.csv', function(err, response){ |
|
response.forEach(function(d){ |
|
d.year = +d.year; |
|
d.yield = +d.yield; |
|
d.key = d.site+":"+d.gen; |
|
}); |
|
// console.log(response); |
|
|
|
|
|
var xDomain1 = response.map(function(d) {return d.site}) |
|
// console.log("1: ", xDomain1); |
|
// var xDomain2 = d3.map(response, d => d.site) |
|
// console.log("2: ", xDomain2); |
|
xScale.domain(xDomain1); |
|
// console.log("ends up like: ",xScale.domain()) |
|
|
|
var yExtent = d3.extent(response, d => d.yield) |
|
console.log(yExtent[1]); |
|
yScale.domain([0,yExtent[1]]) |
|
var startyear = 1927; |
|
var numyears = 9; |
|
var index = 0; |
|
|
|
// update(response, startyear); |
|
setInterval(()=>{update(response, startyear +(index%numyears)); |
|
index+=1; |
|
},2000); |
|
}); |
|
|
|
|
|
|
|
</script> |