frontend + d3
Published
Edited
Apr 25, 2020
2 stars
import { trans, ttrans } from '@rabelais/d3-lib-2'
// initialize only once: boot-up process is very expensive
// simplex = new SimplexNoise(seed)
// simplex.noise2D(x, y)
SimplexNoise = require('https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js')
getNoise = () => {
const simplex = new SimplexNoise();
const noises = Array.from({ length: column }).map(() => []);
for (let c = 0; c < column; c++) {
for (let r = 0; r < row; r++) {
noises[c][r] = simplex.noise2D(c, r);
}
}
return noises;
}
getNoise()
width / 40
column = Math.round(config.clippedWidth / 23)
row = Math.round(config.clippedWidth / 23)
scaleX = d3
.scaleLinear()
.domain([0, row])
.range([config.margin, config.clippedWidth])
scaleY = d3
.scaleLinear()
.domain([0, column])
.range([config.margin, config.clippedHeight])
scaleColor = d3
.scaleQuantile()
.domain([-1, 0, 1])
.range(['orange', 'transparent', 'pink'])
scaleSize = d3
.scaleQuantile()
.domain([-1, 0, 1])
.range([2, 4, 6])
radius = 3
{
while (true) {
await Promises.tick(1000);
const data = getNoise();
art.render(data);
yield;
}
}
config = ({
margin: 20,
width: width,
height: width,
clippedWidth: width - 40,
clippedHeight: width - 40
})
d3 = require('d3@5.15.0')
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.
