Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
D3 Selectable LegendD3 DistributionsD3 Duration Tick LabelsContinuous Sequential Colormap Comparison with variable metricsRF Energy ScatterplotContinuous Sequential Colormap ComparisonReverse-FFT signals with focus + contextReverse-FFT signals with updating lines, marks, and axesBasic updating line with marks and axesBasic updating line with marksBasic updating lineGenerate signals with reverse-FFT.SVG fill transition exampleScrubbing Adjacent-Color Difference Graph of D3 ColormapsCumulative Adjacent Color Difference Colormap RaceMicrophone Audio Spectrogram 3Colormap Cumulative Adjacent Color DeltasForce-Directed Graph of Categorical ColorsAdjacent-Color Difference Graph of D3 ColormapsForce-directed layout of Palette Deltas 2Cumulative Colormap Adjacent Color Deltas with filtering and gradientsForce-Directed Graph of actual pixel valuesCumulative Colormap Adjacent Color DeltasAxis UpdateData and Axes Transitions
Line Chart Update
{
let g = d3.select(chart).append("g")
g
.attr("width", width - (margin.left + margin.right))
.attr("height", height - (margin.top + margin.bottom))
.attr('id', 'vis')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.append('rect')
.attr("width", width - (margin.left + margin.right))
.attr("height", height - (margin.top + margin.bottom))
.attr('fill', 'yellow')
.attr('fill-opacity', 0.05)
setScale(initialdata)
initAxis()
g
.append("path")
.datum(initialdata)
.attr("class", "line")
.attr('stroke', '#ffab00')
.attr('stroke-width', 3)
.attr('d', line0)
.attr('fill', 'none')
update(initialdata)
return md`Initialize groups, path, and axes:`
}
function update (data){
var t = d3.transition()
.duration(1500)
.ease(d3.easeLinear);
// Update the path
d3
.select(".line")
.transition(t)
.attr("d", line(data))
// update the circles
var us = d3.select('#vis').selectAll("circle")
.data(data)
us.enter()
.append("circle") // Uses the enter().append() method
.attr("cx", function(d, i) { return xScale(i) })
.attr("cy", function(d) { return yScale(0.5) })
.transition(t)
.attr("cy", function(d) { return yScale(d.y) })
.attr("r", 5)
.attr('fill', 'none')
.attr('stroke', '#ffab00')
us
.transition(t)
.attr("cy", function(d) { return yScale(d.y) })
us.exit()
.transition(t)
.attr("r", 60)
.attr('stroke', '#ff1100')
.remove();
}
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.
