Built with blockbuilder.org
forked from basilesimon's block: append/update rects (dots OK)
Last active
June 14, 2017 14:44
-
-
Save basilesimon/91f75ab5209a62981f11d30a81f618b5 to your computer and use it in GitHub Desktop.
append/update rects (dots OK)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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; } | |
| text { font-family: sans-serif; color: grey; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var data = [ | |
| { | |
| label: 'foo', | |
| amount: 8 | |
| }, | |
| { | |
| label: 'bar', | |
| amount: 6 | |
| }, | |
| { | |
| label: 'lol', | |
| amount: 1 | |
| } | |
| ]; | |
| var circles = [] | |
| var width = 500; | |
| var height = 500; | |
| var color = d3.scaleOrdinal(d3.schemeCategory10); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .attr("transform", "translate(50,50)"); | |
| // append 1 rect for each label | |
| function update(dataset){ | |
| var x = d3.scaleBand().rangeRound([0, width]) | |
| .domain(dataset.map(function(d) { return d.label; })); | |
| var data = dataset.map(function(d) { | |
| var circles = d3.range(d.amount).map(function(i) { | |
| return { | |
| x: (i % 5)*20, | |
| y: (i / 5 >> 0)*20 | |
| } | |
| }); | |
| return { | |
| label: d.label, | |
| dots: circles | |
| }; | |
| }); | |
| var g = svg.selectAll('g') | |
| .data(data); | |
| g.transition() | |
| .attr('class', function(d) { return d.label }) | |
| .attr('transform', function(d) { | |
| return 'translate(' + x(d.label) + ',150)' | |
| }); | |
| g.enter() | |
| .append('g') | |
| .attr('class', function(d) { return d.label }) | |
| .attr('transform', function(d) { | |
| return 'translate(' + x(d.label) + ',150)' | |
| }) | |
| .attr('fill', function(d) { return color(d.label)}) | |
| .append('text') | |
| .text(function(d) {return d.label}); | |
| g.exit().transition().remove(); | |
| var dots = g.selectAll('circle') | |
| .data(function(d) {return d.dots}); | |
| dots.transition() | |
| .attr('r', 5) | |
| .attr('cx', function(d) { | |
| return (10 + d.x); | |
| }) | |
| .attr('cy', function(d) { | |
| return (20 + d.y); | |
| }) | |
| //.attr('fill', 'lightcoral'); | |
| dots.exit().transition() | |
| .attr('r', 0) | |
| .remove(); | |
| dots.enter().append('circle') | |
| .attr('r', 5) | |
| .attr('cx', function(d) { | |
| console.log(d) | |
| return (10 + d.x); | |
| }) | |
| .attr('cy', function(d) { | |
| return (20 + d.y); | |
| }) | |
| //.attr('fill', 'lightblue'); | |
| } | |
| update(data); | |
| setInterval(function() { | |
| function n() {return Math.random() * (40 - 1) + 1} | |
| newdata = [ | |
| { | |
| label: 'con', | |
| amount: n() | |
| }, | |
| { | |
| label: 'lab', | |
| amount: n() | |
| }, | |
| { | |
| label: 'lib', | |
| amount: n() | |
| }, | |
| { | |
| label: 'lol', | |
| amount: n() | |
| } | |
| ]; | |
| update(newdata); | |
| }, 1500); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment