pixel flipper, data sifter. trying to see what I can while I'm here
Plot.plot({
marks: [
Plot.line(points, { x: "x", y: "y", stroke }),
Plot.dot(points, { x: "x", y: "y", r: 10, fill: "white", stroke }),
Plot.text(points, { x: "x", y: "y", text: "i", dx: 0, textAnchor: "middle", fontSize: 9, fill: stroke })
],
x: { axis: false, type: "point" },
y: { axis: false, type: "point" },
marginLeft: 20,
marginTop: 20,
marginBottom: 20,
marginRight: 20,
width: 650,
height: 650
})
points = makePoints(order)
makePoints = (order) => {
let hilbert = d3hilbert.hilbert().order(order)
return d3.range(Math.pow(4, order)).map(i => {
let xy = hilbert.getXyAtVal(i)
return { x: xy[0], y: xy[1], i }
})
}
html`<svg width=${chartSize} height=${chartSize}>${d3.range(2,5).reverse().map(i => Plot.plot({ marks: makeMarks(i), ...options }))}</svg>`
makeMarks = (order) => [
Plot.line(makePoints(order), { x: "x", y: "y", stroke: colors[order - 1] }),
Plot.dot(makePoints(order), { x: "x", y: "y", r: 10, fill: "white", stroke: colors[order - 1] }),
Plot.text(makePoints(order), { x: "x", y: "y", text: "i", dx: 0, textAnchor: "middle", fontSize: 9, fill: colors[order - 1] })
]
html`<svg width=${chartSize} height=${chartSize}>${d3.range(5,6).reverse().map(i => Plot.plot({ marks: makeMarks2(6), ...options }))}</svg>`
makeMarks2 = (order) => {
let color = colors2[order - 2]
return [
Plot.line(makePoints(order), { x: "x", y: "y", stroke: "#000000", opacity: 0.1, strokeWidth: 1 }),
// Plot.dot(makePoints(order), { x: "x", y: "y", r: 3, fill: color, stroke: color }),
]
}
options = ({
x: { axis: false, type: "point" },
y: { axis: false, type: "point" },
marginLeft: 20,
marginTop: 20,
marginBottom: 20,
marginRight: 20,
width: chartSize,
height: chartSize
})
chartSize = width
colors = [yellow, orange, blue, green, brown]
colors2 = [red,yellow, orange, "black", lightgreen, brown]
blue = "#0039A6"
red = "#EE352E"
green = "#00933C"
lightgreen = "#6CBE45"
brown = "#996633"
yellow = "#FCCC0A"
orange = "#FF6319"
purple = "#B933AD"
strokep = "#bfc1c2"
Plot.plot({
marks: [
Plot.line(pendantPoints, { x: "x", y: "y", stroke: strokep, strokeWidth: 12 }),
Plot.dot(pendantPoints, Plot.selectFirst({ x: "x", y: "y", r: 15, fill: "white", stroke: strokep, strokeWidth: 10 })),
Plot.dot(pendantPoints, Plot.selectLast({ x: "x", y: "y", r: 15, fill: "white", stroke: strokep, strokeWidth: 10 })),
],
x: { axis: false, type: "point" },
y: { axis: false, type: "point" },
marginLeft: 20,
marginTop: 20,
marginBottom: 20,
marginRight: 20,
width: 650,
height: 650,
style: {
strokeLinejoin: "round"
}
})
Plot.plot({
marks: [
Plot.line(pendantPoints, { x: "x", y: "y", stroke: "black", strokeWidth: 32 }),
// Plot.dot(pendantPoints, Plot.selectFirst({ x: "x", y: "y", r: 15, fill: "white", stroke: strokep, strokeWidth: 10 })),
// Plot.dot(pendantPoints, Plot.selectLast({ x: "x", y: "y", r: 15, fill: "white", stroke: strokep, strokeWidth: 10 })),
],
x: { axis: false, type: "point" },
y: { axis: false, type: "point" },
marginLeft: 20,
marginTop: 20,
marginBottom: 20,
marginRight: 20,
width: 650,
height: 650,
style: {
strokeLinejoin: "round"
}
})
pendantPoints = makePoints(3)
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.
