Published
Edited
May 11, 2021
2 forks
37 stars
Insert cell
Insert cell
Insert cell
Plot.areaY(data, Plot.stackY({ x: "i", y: "value", fill: "j", offset: "silhouette" })).plot({
width,
color: { scheme: "pubu", reverse: true }
})
Insert cell
Insert cell
data = d3.range(300).flatMap(i => {
return d3.range(series).map(j => {
let x = i * xres
let y = j * yres
return {
i, j, x, y,
value: 1 + simplex.noise3D(x, y, z) // add 1 just to avoid negative values
}
})
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.cell(data, { x: "i", y: "j", fill: "value" }).plot({
width, height: 300,
color: { scheme: "ylorrd" },
x: { axis: false }, y: { label: null }
})
Insert cell
Insert cell
Plot.cell(data, Plot.binX({fill: "mean" }, { x: "i", y: "j", fill: "value", thresholds: 50 })).plot({
width, height: 300,
color: { scheme: "ylorrd" },
x: { axis: false }, y: { label: null }
})
Insert cell
Insert cell
Insert cell
Plot.lineY(data, { x: "i", y: "value", stroke: "j" }).plot({
width, color: { scheme: "pubu", reverse: true }
})
Insert cell
Insert cell
Insert cell
Plot.lineY(data, { x: "i", y: "value", stroke: "j" }).plot({
facet: {
data,
y: "j"
},
width, height: 600,
y: { axis: false }, fy: { label: null },
color: { scheme: "pubu", reverse: true }
})
Insert cell
Insert cell
simplex = new SimplexNoise()
Insert cell
SimplexNoise = require('simplex-noise@2.4')
Insert cell
Plot = require("@observablehq/plot@0.1")
Insert cell
Inputs = require("@observablehq/inputs@0.7")
Insert cell
d3 = require("d3@6")
Insert cell

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.
Learn more