Senior 3D Artist at Mayo Studios in NYC.
Published
Edited
Nov 13, 2020
2 forks
2 stars
chart = {
const svg = d3.select(DOM.svg()).attr("viewBox", [0, 0, width, height]);
svg.selectAll('.row')
.data(data)
.enter()
.append('g')
.attr('transform', (d, i) => `translate(0, ${i * cellWidth})`)
.selectAll('.cell')
.data((d, i) => data[i])
.enter()
.append('rect')
.attr("width", cellWidth)
.attr('height', cellWidth)
.attr('x', (d, i) => i * cellWidth)
.attr('stroke', 'white')
.attr('stroke-width', '1px')
.attr('fill', d => `rgb(255, ${(-d + 1) / 2 * 200}, 0)`)
return svg.node()
}
data = {
let data = Array(nrows).fill(0).map(() => Array(ncols).fill(0));
data.forEach(
(row, i) => row.forEach(
(cell, j) => data[i][j] = Math.cos(i * .2 - 6) + Math.sin(j * .1 + 3)
)
)
return data
}
cellWidth = width / ncols;
height = nrows * cellWidth
d3 = require('d3')
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.
