Data sculptor
firstName = "Vasco"
lastName = "Asturiano"
handle = "vastur"
// Your D3 code goes here.
// The function badgeCode gets called below to generate the previews.
function badgeCode(g, context, frameNumber) {
// g: a <g>, i.e. d3.select(... the node)
// context: a canvas context, useful for doing canvas drawing
// frameNumber: a number that represents the frame (1, 2, … 10) for psuedo-animation.
// width & height are available via the environment, as is d3
// Note: the <g> is drawn on top of the <canvas>
const order = [1, 2, 2, 3, 3, 4, 5, 6, 7, 8][frameNumber - 1];
const hilbertData = {
start: 0,
length: Math.pow(4, order)
};
const canvasSize = Math.min(width, height);
hilbert
.order(order)
.canvasWidth(canvasSize)
.simplifyCurves(false)
.layout(hilbertData);
const gradient = g.append('defs')
.append('linearGradient')
.attr('id', 'hilbert-gradient')
.attr('x1', '41%')
.attr('x2', '59%')
.attr('y1', '0%')
.attr('y2', '100%');
const colorInterpol = d3ScaleChromatic.interpolateSpectral;
const stops = gradient.selectAll('stop').data(d3.range(0, 1, 0.01));
stops.merge(stops.enter())
.append('stop')
.attr('offset', d => `${d * 100}%`)
.style('stop-color', d => colorInterpol(1 - d));
const hilbertCanvas = g.append('g')
// centered on bottom
.attr('transform', `translate(-${(canvasSize - width) / 2}, ${-canvasSize + height})`)
hilbertCanvas.append('path')
.datum(hilbertData)
.attr('d', d => getHilbertPath(d.pathVertices))
.attr('transform', d => `scale(${d.cellWidth}) translate(${d.startCell[0] +.5}, ${d.startCell[1] +.5})`)
.style('fill', 'none')
.style('stroke', 'url(#hilbert-gradient)')
.style('stroke-width', 0.35)
.style('stroke-linecap', 'square');
context.fillStyle = '#000018';
context.fillRect(0, 0, width, height);
}
function getHilbertPath(vertices) {
var path = 'M0 0L0 0';
vertices.forEach(function(vert) {
switch(vert) {
case 'U': path += 'v-1'; break;
case 'D': path += 'v1'; break;
case 'L': path += 'h-1'; break;
case 'R': path += 'h1'; break;
}
});
return path;
}
hilbert = d3Hilbert.hilbert()
d3Hilbert = require('d3-hilbert')
d3ScaleChromatic = require('d3-scale-chromatic')
isTextLight = true
import {preview, animation, download, width, height, d3}
with {firstName, lastName, handle, isTextLight, badgeCode}
from "b93171820ba3f268"
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.
