Published
Edited
Mar 24, 2020
Insert cell
md`# d3.symbol`
Insert cell
symbols = d3.symbols
Insert cell
symbol = d3.symbol().size(5000)
Insert cell
{
console.log(symbols)
let svg = d3.create('svg').attr('width', 1000)
svg.selectAll('path')
.data(symbols)
.enter()
.append('path')
.attr('d', d => symbol.type(d)()) // symbol.type(d3.symbols[1])()
.attr('fill', (d, i) => d3.schemePaired[i])
.attr('transform', (d, i) => `translate(${i * 140 + 50}, 80)`)
return svg.node();
}
Insert cell
{
let div = d3.create('div');
div.selectAll('span')
.data(d3.schemePaired)
.enter()
.append('span')
.style('background-color', d => d)
.style('height', '40px')
.style('width', '40px')
.style('display', 'inline-block')
return div.node();
}
Insert cell
d3 = require("d3@5")
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