D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tomshanley
Full window
Github gist
Enter n Merge n Exit
Built with
blockbuilder.org
<!DOCTYPE html> <meta charset="utf-8"> <svg width="1280" height="800"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")"); var colors = [ "#11ff00", "#22aa00", "#333300", "#440000", "#aa0000", "#ff0000", "#000033", "#000066", "#000099", "#0000dd" ]; function update(data) { var cellsize = 30; console.log(data) var t = d3.transition() .duration(1500); // JOIN new data with old elements. var soft = g.selectAll(".soft") .data(data.filter(function(d) { return d.soft != 0; }), function(d, i) { return d.row + ":" + d.col; }) // ENTER new elements present in new data. var enter = soft.enter() .append("rect") .attr("class", "soft") .attr("x", function(d, i) { return (d.row * cellsize); }) .attr("width", cellsize - 5) .attr("height", cellsize) .style("fill", function(d, i) { return colors[d.soft] }) var exit = soft.exit(); var merge = enter.merge(soft) .transition(t) .style("fill", function(d, i) { return colors[d.soft] }) .style("opacity", 1) // EXIT old elements not present in new data. exit.transition(t) .style("opacity", 1e-6) .remove(); } d3.interval(function() { var data = []; for(var i = 0; i < 10; i++) data.push({ row : i, col : 0, value : Math.floor(Math.random() * 10), soft : Math.floor(Math.random() * 3)}); update(data); }, 1000); </script>
https://d3js.org/d3.v4.min.js