Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
discGauge (data, width, 350, radiusScale, 'steelblue')
function discGauge (data, width, height, radiusScale, color) {
const svg = d3.select(DOM.svg(width, height));
svg.selectAll('g')
.data(data)
.enter().append("g")
.attr("transform", (d,i) => "translate(" + xScale(i) + "," + (height - margin.bottom - margin.top) / 2 + ")")
.call(g => g
.append("circle")
.attr("r", maxRadius)
.attr("fill", color)
.attr('fill-opacity', 0.15))
.call(g => g
.append("circle")
.attr("r", d => radiusScale(d))
.attr("fill", color)
.attr('fill-opacity', 0.85)
.append("title")
.text(d => Math.round(d * 100).toFixed(0) + '%'))
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.
