Marian Schubert

@maio·2 public vizzes

My d3 skill

This example animates a sinusoidal line chart generated from a sequence of one thousand data points, rendering the path with SVG and a smooth transition. The visualization uses d3.line to compute the curve, d3.scaleLinear and d3.axisBottom for the x-axis, and d3.range to create the initial dataset. Though the code includes a commented-out update to different data, only the initial static render is active, leaving the axis without ticks and the line fixed in place.

Mar 6, 2020

Loading thumbnail…

Path update

A line chart animates between two datasets, updating its path shape over time. The example uses d3.line to generate the path from an array of numbers, mapping each value to x and y coordinates based on its index and magnitude. D3’s selection and transition methods handle the smooth morphing of the path’s `d` attribute when new data arrives. The SVG rendering is driven by a simple render function called twice with different data arrays, demonstrating a basic update pattern with d3.v5.

Mar 6, 2020