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 DeltasLine Chart UpdateData and Axes Transitions
Axis Update
function setScale1(){
xScale.domain([0, 1000]).range([0, width-(margin.left+margin.right)])
yScale.domain([0, 1000]).range([height-(margin.top+margin.bottom), 0])
xAxisCall.scale(xScale)
yAxisCall.scale(yScale)
}
function updateAxis(){
var t = d3.transition()
.duration(500)
d3.select(".x")
.transition(t)
.call(xAxisCall)
d3.select(".y")
.transition(t)
.call(yAxisCall)
}
{
var vis = d3.select(example1)
setScale1()
initAxis()
function initAxis() {
vis.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+[margin.left, height-margin.top]+")")
.call(xAxisCall)
vis.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+[margin.left, margin.top]+")")
.call(yAxisCall)
}
return md`Initialization code.`
}
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.
