D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mootari
Full window
Github gist
edges slicing
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;font: 1.1em sans-serif;padding:10px} svg {background:#757575 } </style> </head> <body> <p>Diagrams show edge counts for slice start (x) and slice end (y), both ranging from -20 to 20.<br> Zero values have been marked using white.</p> <p>The left diagram shows edge counts after zero iterations of Voronoi relaxation for randomly distributed points, the right diagram after 100 iterations.</p> <script> // [-20,-20][20,20], 0 iterations var data0 = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[4,4,4,4,4,4,4,4,4,4,4,3,0,0,0,0,0,0,0,0,4,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[9,9,9,9,9,9,9,9,9,9,9,8,5,0,0,0,0,0,0,0,9,4,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[20,20,20,20,20,20,20,20,20,20,20,19,16,11,0,0,0,0,0,0,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[40,40,40,40,40,40,40,40,40,40,40,39,36,31,20,0,0,0,0,0,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[73,73,73,73,73,73,73,73,73,73,73,72,69,64,53,33,0,0,0,0,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[122,122,122,122,122,122,122,122,122,122,122,121,118,113,102,82,49,0,0,0,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[172,172,172,172,172,172,172,172,172,172,172,171,168,163,152,132,99,50,0,0,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[222,222,222,222,222,222,222,222,222,222,222,221,218,213,202,182,149,100,50,0,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[50,50,50,50,50,50,50,50,50,50,50,49,47,45,39,30,17,1,0,0,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[100,100,100,100,100,100,100,100,100,100,100,99,96,92,84,69,47,18,1,0,100,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[150,150,150,150,150,150,150,150,150,150,150,149,146,141,131,114,86,48,18,1,150,100,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[199,199,199,199,199,199,199,199,199,199,199,198,195,190,179,160,130,86,47,17,199,149,99,49,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[232,232,232,232,232,232,232,232,232,232,232,231,228,223,212,192,160,114,69,30,232,182,132,82,33,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[252,252,252,252,252,252,252,252,252,252,252,251,248,243,232,212,179,131,84,39,252,202,152,102,53,20,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[263,263,263,263,263,263,263,263,263,263,263,262,259,254,243,223,190,141,92,45,263,213,163,113,64,31,11,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[268,268,268,268,268,268,268,268,268,268,268,267,264,259,248,228,195,146,96,47,268,218,168,118,69,36,16,5,0,0,0,0,0,0,0,0,0,0,0,0,0],[271,271,271,271,271,271,271,271,271,271,271,270,267,262,251,231,198,149,99,49,271,221,171,121,72,39,19,8,3,0,0,0,0,0,0,0,0,0,0,0,0],[272,272,272,272,272,272,272,272,272,272,272,271,268,263,252,232,199,150,100,50,272,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0],[272,272,272,272,272,272,272,272,272,272,272,271,268,263,252,232,199,150,100,50,272,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0],[272,272,272,272,272,272,272,272,272,272,272,271,268,263,252,232,199,150,100,50,272,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0],[272,272,272,272,272,272,272,272,272,272,272,271,268,263,252,232,199,150,100,50,272,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0],[272,272,272,272,272,272,272,272,272,272,272,271,268,263,252,232,199,150,100,50,272,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0],[272,272,272,272,272,272,272,272,272,272,272,271,268,263,252,232,199,150,100,50,272,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0],[272,272,272,272,272,272,272,272,272,272,272,271,268,263,252,232,199,150,100,50,272,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0],[272,272,272,272,272,272,272,272,272,272,272,271,268,263,252,232,199,150,100,50,272,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0],[272,272,272,272,272,272,272,272,272,272,272,271,268,263,252,232,199,150,100,50,272,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0],[272,272,272,272,272,272,272,272,272,272,272,271,268,263,252,232,199,150,100,50,272,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0],[272,272,272,272,272,272,272,272,272,272,272,271,268,263,252,232,199,150,100,50,272,222,172,122,73,40,20,9,4,1,0,0,0,0,0,0,0,0,0,0,0]]; // [-20,-20][20,20], 100 iterations var data100 = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[11,11,11,11,11,11,11,11,11,11,11,11,11,10,0,0,0,0,0,0,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[36,36,36,36,36,36,36,36,36,36,36,36,36,35,25,0,0,0,0,0,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[76,76,76,76,76,76,76,76,76,76,76,76,76,75,65,40,0,0,0,0,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[124,124,124,124,124,124,124,124,124,124,124,124,124,123,113,88,48,0,0,0,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[174,174,174,174,174,174,174,174,174,174,174,174,174,173,163,138,98,50,0,0,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[224,224,224,224,224,224,224,224,224,224,224,224,224,223,213,188,148,100,50,0,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[50,50,50,50,50,50,50,50,50,50,50,50,50,49,40,25,10,2,0,0,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[100,100,100,100,100,100,100,100,100,100,100,100,100,99,89,65,35,12,2,0,100,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[150,150,150,150,150,150,150,150,150,150,150,150,150,149,139,114,75,37,12,2,150,100,50,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[198,198,198,198,198,198,198,198,198,198,198,198,198,197,187,162,122,75,35,10,198,148,98,48,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[238,238,238,238,238,238,238,238,238,238,238,238,238,237,227,202,162,114,65,25,238,188,138,88,40,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[263,263,263,263,263,263,263,263,263,263,263,263,263,262,252,227,187,139,89,40,263,213,163,113,65,25,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[273,273,273,273,273,273,273,273,273,273,273,273,273,272,262,237,197,149,99,49,273,223,173,123,75,35,10,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0],[274,274,274,274,274,274,274,274,274,274,274,274,274,273,263,238,198,150,100,50,274,224,174,124,76,36,11,1,0,0,0,0,0,0,0,0,0,0,0,0,0]]; var l = 10, gap = 1; var svg = d3.select("body").append("svg") .attr("width", (data0[0].length+data100[0].length+3)*(l+gap)) .attr("height", (data0.length+2) * (l+gap)); function render(data, ox, oy) { var min = 0, max = 0; data.map(function(row) {row.map(function(v) { min = Math.min(min, v); max = Math.max(max, v); })}); var scale = d3.scaleSequential(d3.interpolateInferno).domain([min, max]); svg.selectAll().data(data).enter() .append('g') .each(function(g, y) { d3.select(this).selectAll() .data(function(d) {return d;}) .enter() .append('rect') .attr('fill', function(v) {return v ? scale(v) : 'white'}) .attr('x', function(v, x) {return x * l + l + x*gap + ox}) .attr('y', (y+gap) * l + y*gap + oy) .attr('width', l) .attr('height', l); }); } render(data0, gap, gap); render(data100, (data0[0].length+1) * (l+gap), gap); </script> </body>
https://d3js.org/d3.v4.min.js