mlu @aws
Published
Edited
Aug 10, 2021
2 forks
2 stars
gridData = [
{ x: 0, y: 0 },
{ x: 0, y: 1 },
{ x: 0, y: 2 },
{ x: 1, y: 0 },
{ x: 1, y: 1 },
{ x: 1, y: 2 },
{ x: 2, y: 0 },
{ x: 2, y: 1 },
{ x: 2, y: 2 },
];
xScale = d3.scalePoint().domain([0, 1, 2]).range([margin, width - margin])
yScale = d3.scalePoint().domain([0, 1, 2]).range([height - margin, margin])
{
// init svg
const svg = DOM.svg(width, height)
const sel = d3.select(svg)
// create g tags to append to (in grid shape)
const join = sel.selectAll('g.grid')
.data(gridData)
.enter().append('g')
.attr('class', 'grid')
.attr('transform', (d, i) => {
return `translate(${xScale(d.x)}, ${yScale(d.y)})`
})
// e.g., add circles to each g
sel.selectAll('g.grid').each(function(d,i) {
const cell = d3.select(this).append('g')
cell.append('circle').attr('r', 20).attr('fill', 'red')
})
return svg
}
d3 = require("d3@6")
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.
