Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
Published
Edited
Nov 12, 2020
chart = {
const svg = d3.create('svg')
.attr('viewBox', [0,0,30,10])
.attr('style', 'border: 1px solid lightgray')
const defs = svg
.append("defs")
.selectAll('filter')
.data(filterData)
.join('filter')
.attr('id', d => d.id)
.append('feDropShadow')
.attr('dx', d => d.dx)
.attr('dy', d => d.dy)
.attr('stdDeviation', d => d.stdDeviation)
.attr('floodColor', d => d.floodColor)
svg.selectAll('circle')
.data(data)
.join('circle')
.attr('r', 4)
.attr('cx', d => d.cx)
.attr('cy', '50%')
.attr('fill', 'white')
.style('filter', d => `url(#${d.filter})`)
return svg.node();
}
filterData = [
{ id: 'shadow', dx: 0.2, dy: 0.4, stdDeviation: 0.2, floodColor: 'none', 'flood-opacity': 1 },
{ id: 'shadow2', dx: 0, dy: 0, stdDeviation: 0.5, floodColor: 'silver', 'flood-opacity': 1 },
{ id: 'shadow3', dx: -0.8, dy: -0.8, stdDeviation: 0, floodColor: 'silver', 'flood-opacity': 0.5 },
]
data = [
{filter: 'shadow', cx: 5},
{filter: 'shadow2', cx: 15},
{filter: 'shadow3', cx: 25}
]
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.
