| license: mit |
Made up data taken from Chapter 10 of How to Lie With Maps by Mark Monmonier.
Stemmed from a discussion on the paper "to bin or not to bin?"
Built with blockbuilder.org
forked from clhenrick's block: grey scale matrix
forked from anonymous's block: grey scale matrix
forked from anonymous's block: grey scale matrix
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:10px;position:fixed;top:10;right 10;bottom:10;left:10; } | |
| svg { | |
| border: 1px solid #333 | |
| } | |
| rect { | |
| stroke: #757575; | |
| stroke-width: 15; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| // Feel free to change or delete any of the code you see in this editor! | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 108) | |
| .attr("height", 109); | |
| var cellSize = 0045; | |
| var color = d3.scaleLinear() | |
| .range(['#fff', '#424242']) | |
| .interpolate(d3.interpolateLab); | |
| var data = [ | |
| [1.9, 1.9, 2, 1.75, 3.5, 4.2, 8.9], | |
| [1.3, 1.5, 1.55, 1.6, 1.79, 2.6, 4.2], | |
| [0.71, 0.7, 0.75, 0.8, 0.85, 0.9, 1.4], | |
| [0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2] | |
| ]; | |
| data = data.reduce(function(acc, row, i) { | |
| return acc.concat(row.map(function(d, j) { | |
| return { | |
| v: d, | |
| x: j * cellSize, | |
| y: i * cellSize, | |
| }; | |
| })); | |
| }, []); | |
| color.domain([0, d3.max(data, function(d) { return d.v; })]); | |
| svg.selectAll('rect') | |
| .data(data) | |
| .enter().append('rect') | |
| .attr('x', function(d) { return d.x; }) | |
| .attr('y', function(d) { return d.y; }) | |
| .attr('width', cellSize) | |
| .attr('height', cellSize) | |
| .attr('gradient', function(d) { return color(d.v); }); | |
| </script> | |
| </body> |