Public
Edited
Sep 30, 2021
2 stars
chart = {
more;
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
// Set display size (css pixels).
var size = width;
context.canvas.style.width = size + "px";
context.canvas.style.height = size + "px";
// Set actual size in memory (scaled to account for extra pixel density).
//var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
context.canvas.width = Math.floor(size * scale);
context.canvas.height = Math.floor(size * scale);
const lineWidthScale = d3
.scaleLinear()
.domain([0, count])
.range([chance.integer({ min: 1, max: 10 }), 0.25]);
// Normalize coordinate system to use css pixels.
context.scale(scale, scale);
// if (chance.bool()) {
context.fillStyle = chance.pickone(colors);
// } else {
// if (chance.bool()) {
// context.fillStyle = "black";
// } else {
// context.fillStyle = "white";
// }
// }
context.fillRect(0, 0, width, height);
context.lineCap = "round";
let lineWidthMod1 = chance.floating({ min: 0.0001, max: 0.5 });
const lineWidthMod2 = chance.floating({ min: 0.0001, max: 0.5 });
for (const value of samples(color.domain(), count)) {
const lineWidth = lineWidthScale(count);
lineWidthMod1 += 0.0001;
context.setLineDash([
// chance.pickone([4, 8, 16, value * 5]),
// chance.pickone([1, 2, 4, value * 10])
count * lineWidthMod1,
count * lineWidthMod2
]);
context.lineWidth = chance.floating({ min: 0.1, max: 10 }) * lineWidth;
context.beginPath();
path(contours.contour(grid, value * valueAmp));
// context.strokeStyle = "#000"; //color(value);
context.strokeStyle = colorScale(value * colorAmp);
// context.strokeStyle = colorScale(count * 0.0001);
if (chance.bool({ likelihood: lineLikelihood })) context.stroke();
yield context.canvas;
}
}
color = d3.scaleSequential(d3.extent(grid), d3.interpolateGreys)
n = Math.ceil(width / q) + 1
m = Math.ceil(height / q) + 1
projection = d3.geoIdentity().translate([-q / 2, -q / 2]).scale(q)
contours = d3.contours().size([n, m])
grid = {
const grid = new Float64Array(n * m);
for (let j = 0; j < m; ++j) {
for (let i = 0; i < n; ++i) {
grid[j * n + i] = noise.noise(i * period, j * period);
}
}
return grid;
}
noise = {
//more;
return new Noise(chance.integer({ min: 3, max: 6 }));
}
height = width
// d3 = require("d3@5")
d3 = require("d3@6", "https://files-5ouswn75j.vercel.app/d3-contour.js")
import {samples} from "@mbostock/1d-poisson-disk-sampling"
Chance = require("chance")
chance = new Chance()
import { palettes } from "@makio135/give-me-colors"
colors = {
more;
const paletteName = chance.pickone(Object.keys(palettes));
return chance.pickone(palettes[paletteName]);
// return ["#000", "#FFF"];
// return ["#7bdff2", "#b2f7ef", "#eff7f6", "#f7d6e0", "#f2b5d4"];
}
colorScale = {
more;
return d3.piecewise(
d3.interpolateRgb.gamma(chance.floating({ min: 1, max: 4 })),
[
chance.pickone(colors),
chance.pickone(colors),
chance.pickone(colors),
chance.pickone(colors)
]
// [colors[1], chance.pickone(colors), colors[2], chance.pickone(colors)]
);
}
colorScale(0.5)
/*period = {
for (let i = 0, n = 250; i < n; ++i) {
yield i * 0.0012;
}
}*/
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
