An example of d3-contour.
forked from mbostock's block: Contour Plot III
forked from enjalot's block: Contour Plot III
license: gpl-3.0 |
An example of d3-contour.
forked from mbostock's block: Contour Plot III
forked from enjalot's block: Contour Plot III
<!DOCTYPE html> | |
<style> | |
body { | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
} | |
</style> | |
<canvas width="1050" height="1500"></canvas> | |
<script src="https://d3js.org/d3-array.v1.min.js"></script> | |
<script src="https://d3js.org/d3-color.v1.min.js"></script> | |
<script src="https://d3js.org/d3-contour.v1.min.js"></script> | |
<script src="https://d3js.org/d3-geo.v1.min.js"></script> | |
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script> | |
<script src="https://d3js.org/d3-scale.v1.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<script src="https://d3js.org/d3-timer.v1.min.js"></script> | |
<script> | |
// Populate a grid of n×m values where -9.6 ≤ x ≤ 9.6 and -5 ≤ y ≤ 5. | |
var n = 240, m = 125, values = new Array(n * m); | |
for (var j = 0.5, k = 0; j < m; ++j) { | |
for (var i = 0.5; i < n; ++i, ++k) { | |
values[k] = value( i / n * 20 + 8.8 , | |
- + 260 - j / m * 20); | |
} | |
} | |
var colors = [ | |
d3.scaleSequential(d3.interpolateRdBu).domain([-1, 1]), | |
d3.scaleSequential(d3.interpolateRdYlGn).domain([-1, 1]), | |
/* | |
d3.scaleSequential(d3.interpolatePuOr).domain([-1, 1]), | |
d3.scaleSequential(d3.interpolatePiYG).domain([-1, 1]), | |
*/ | |
d3.scaleSequential(d3.interpolatePiYG).domain([-1, 1]), | |
d3.scaleSequential(d3.interpolateSpectral).domain([-1, 1]), | |
d3.scaleSequential(d3.interpolateCool).domain([-1, 1]), | |
d3.scaleSequential(d3.interpolatePlasma).domain([-1, 1]), | |
d3.scaleSequential(d3.interpolateViridis).domain([-1, 1]), | |
d3.scaleSequential(d3.interpolateInferno).domain([-1, 1]), | |
d3.scaleSequential(d3.interpolateMagma).domain([-1, 1]), | |
d3.scaleSequential(d3.interpolateWarm).domain([-1, 1]), | |
d3.scaleSequential(d3.interpolateRainbow).domain([-1, 1]), | |
d3.scaleSequential(d3.interpolateRainbow).domain([-1, 1]), | |
//d3.scaleSequential(d3.interpolateCubehelixDefault).domain([-1,1]), | |
] | |
var color = colors[Math.floor(Math.random() * colors.length)] | |
var color = colors[0] | |
var canvas = document.querySelector("canvas"), | |
context = canvas.getContext("2d"), | |
//color = d3.scaleSequential(d3.interpolateRdBu).domain([-1, 1]), | |
path = d3.geoPath(null, context), | |
thresholds = d3.range(-1.2, 1, 0.2), | |
contours = d3.contours().size([n, m]); | |
context.scale(canvas.width / n * 2, canvas.height / m); | |
var duration = 15000 | |
d3.timer(function(t) { | |
var dv = (t % duration) / duration * 0.2; | |
contours | |
.thresholds(thresholds.map(function(v) { return v + dv; })) | |
(values) | |
.forEach(fill); | |
}); | |
function fill(geometry,i) { | |
context.beginPath(); | |
path(geometry); | |
context.fillStyle = color(geometry.value); | |
context.fill(); | |
} | |
function value(x, y) { | |
return Math.sin(x + y) * Math.sin(x - y); | |
} | |
</script> |
���� JFIF H H �� C | |
$.' ",#(7),01444'9=82<.342�� C 2!!22222222222222222222222222222222222222222222222222�� ��" |