D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tanya53
Full window
Github gist
animateTransitions
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } svg {width:800; height: 600;} circle{ opacity:0.5; } </style> </head> <body> <script> // properties var radius = 10; var duration = 1500; var width = 800; var height = 600; var svg = d3.select('body').append('svg'); // scales var xScale = d3.scaleBand() .rangeRound([0, width]); var yScale = d3.scaleLinear() .range([height, 0]); var colorScale = d3.scaleOrdinal(d3.schemeCategory10); function update(data,year){ data = data.filter(function(d) { return d.year === year; }); var t = d3.transition().duration(1000); var circles = svg.selectAll('circle') .data(data, function(d) {return d.key}); // exit circles.exit() .transition(t) .attr('r', 0) .remove(); circles.enter().append('circle') .attr('r', radius) .attr('cy', d => yScale(d.yield)) .merge(circles) .attr('fill', d => colorScale(d.gen)) .attr('cx', d => xScale(d.site)) .transition(t) .attr('cy', d => yScale(d.yield)); } d3.csv('barleyfull.csv', function(err, response) { response.forEach(function(d) { // convert yield and year from string to int d.year = +d.year; d.yield = +d.yield; // use gen and site as the unique key for each datum d.key = d.site + ':' + d.gen; }); // set domain on the scales var xDomain = response.map(function(d) {return d.site}); xScale.domain(xDomain); var yDomain = d3.extent(response, function(d) {return d.yield}); yScale.domain(yDomain); var startYear = 1927; var numYears = 9; var index = 0; update(response, startYear); /* setInterval(() => { update(response, startYear + (index % numYears)); index += 1; }, 1000)*/ }); </script> </body>
https://d3js.org/d3.v4.min.js