Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
circleChart(data, 300, 340, 'Random Values', radiusScale.domain(d3.extent(data)))
circleChart(idata, 300, 340, 'Tenths', radiusScale.domain(d3.extent(idata)))
data = d3.range(1000).map(d => Math.random())
idata = d3.range(10).map(d => d * 0.1)
maxRadius = 140
radiusScale = d3.scaleLinear()
.domain(d3.extent(data))
.range([3, maxRadius])
margin = ({top: 2, right: 2, bottom: 40, left: 2})
function circleChart (data, width, height, label, radiusScale, colorScale, fontSize=18) {
const svg = d3.select(DOM.svg(width, height));
const svgg = svg
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height - margin.bottom - margin.top) / 2 + ")");
const gr = svgg.append("g")
.selectAll("circle")
.data(data)
.enter().append("circle")
.attr('r', d => radiusScale(d))
.attr('fill', d => colorScale ? colorScale(d) : 'none')
.attr('fill-opacity', 0.25)
.attr('stroke', d => colorScale ? colorScale(d) : 'steelblue')
.attr('stroke-opacity', d => 0.1)
.attr('stroke-width', 1.0)
svgg
.append('text')
.style('text-anchor', 'middle')
.style('-webkit-text-stroke', '1px black')
.attr("dominant-baseline", "central")
.text(label)
.attr('fill', '#7fdbed')
.attr('stroke', '#000')
.attr('stroke-opacity', 0.7)
.attr('stroke-thickness', 1.5)
.attr('y', height / 2)
.attr('font-family', 'Arial')
.attr('font-weight', 'bold')
.attr('font-size', fontSize);
return Object.assign(svg.node())
}
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.
