Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
D3 Selectable LegendD3 DistributionsContinuous 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 UpdateAxis UpdateData and Axes Transitions
D3 Duration Tick Labels
function getUtcTicks (maxValue=3600000, n=7, hideOrigin=false) {
let ts = d3.scaleUtc().domain([0, maxValue]).ticks(n)
if(hideOrigin){
ts = ts.slice(1)
}
return ts
}
function milliToString(milliSeconds, maxValue, showDays = false) {
const negative = milliSeconds < 0;
if (negative) {
milliSeconds = -milliSeconds;
}
let d;
if (showDays) {
d = Math.trunc(milliSeconds / (60000 * 60 * 24));
milliSeconds = milliSeconds - 60000 * 60 * 24 * d;
}
const h = Math.trunc(milliSeconds / (60000 * 60));
milliSeconds = milliSeconds - 60000 * 60 * h;
const m = Math.trunc(milliSeconds / 60000);
milliSeconds = milliSeconds - 60000 * m;
const s = Math.trunc(milliSeconds / 1000);
milliSeconds = milliSeconds - 1000 * s;
const frac = milliSeconds;
let result = m ? m + ' m ' : ''; // start with minutes
if (maxValue < 60000 * 60) {
if (s) {
result = result + s + ' s '; // add seconds value
}
}
if (maxValue < 5000) {
// include milliseconds
result = frac ? result + frac + ' ms ' : result;
}
if (h) {
result = h + ' h ' + result;
}
if (d) {
result = d + 'd ' + result;
}
if (negative) {
result = '-' + result;
}
return result.trim();
}
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.
