Path Animation

100%

Path Animation

✓ Published1🌍 Public

Last edited Feb 22, 2020

Created on Feb 4, 2020

Forked from Line Chart with Multiples Lines

This visualization charts personal body weight measurements over time, showing a single person’s weight fluctuations from 2008 to 2011 in kilograms. A slider input animates two small circles along the rendered weight paths, with each circle tracing a separate line. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for smoothing, and d3.nest to group data by person. The slider controls circle positions via the SVG path’s `getPointAtLength` method, while a color legend and gridlines are added using d3.scaleOrdinal and axis components.

AI-generated description

This data cames from personal annotation of body weight.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Path Animation

This visualization displays personal body weight data over time for a single individual, with the y-axis representing weight in kilograms and the x-axis representing dates. Two smoothed line paths are rendered from the dataset, each colored differently to distinguish between weight series. A slider control animates two circles moving along these paths, using `path.getPointAtLength` to track progress from the beginning to the end of each line. The chart is built with D3 v5, using `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `curveBasis` to generate the SVG paths and axes.

Llhbhb21c

90% match

Loading thumbnail…

Line Chart with Multiples Lines

This line chart tracks personal body weight over time, plotting individual weight measurements taken from June 2008 onward. The chart uses multiple lines to represent different people, though only one person ("Rub") appears in the dataset. It uses D3.js with a time-scaled x-axis and linear y-axis, rendering smooth curves via `d3.curveBasis`. A color-coded legend, generated by a custom `colorLegend` function, identifies each person's line.

RRubens

80% match

Loading thumbnail…

Line Chart with Multiples Lines - By Year

The visualization displays personal body weight measurements over time, segmented into individual annual series that are overlaid on a single chart. Each year's data forms a separate multi-hued line, allowing year-over-year comparison of weight fluctuations. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, `nest()` to group entries by person and year, and `line()` with `curveBasis` to generate smooth paths. The data is parsed from a CSV and rendered as SVG, with a categorical color legend for each year.

RRubens

80% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between weight loss and number of days across genders, with an animated axis cycling through three data dimensions every two seconds. Built with D3.js v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `circle` elements update via data joins. The chart sources CSV data from a GitHub gist and animates through Gender, Weightloss, and Numberofdays columns using `setInterval`. SVG rendering with CSS styling provides a clean, interactive presentation.

PPavaniMangugari

73% match

Loading thumbnail…

myLbs

A line chart tracks body weight in pounds over time, with each point representing a single measurement and a smooth curve connecting the sequence. The visualization uses a time-scaled x-axis and a linear y-axis, with the y-domain fixed to start at 200 pounds to emphasize fluctuations. Built with D3 v4, the example loads tab-separated data from `myLbs.tsv`, parses dates, and renders the path using `d3.line` with a basis curve. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, while SVG elements handle all drawing.

335degrees

73% match

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.

MMarian Schubert

72% match

Loading thumbnail…

Untitled

This example shows a scatter plot of the relationship between weight and height for a small dataset of twelve individuals, with each point rendered as a steelblue circle. A linear regression line is not drawn, but axes are customized with tick formats that append units. The visualization uses D3 v6 to create an SVG, with linear scales mapping data to pixel coordinates, and d3.axisBottom and d3.axisLeft for the axes. Data is hardcoded in the script, and gridlines are styled via tick line selection.

LLa Máquina Oráculo

71% match

Loading thumbnail…

Path Transitions

A real-time scrolling line chart demonstrates a surprising visual artifact when animating the path. The chart displays a sliding window of 40 random data points, with new values entering from the right and old ones exiting left. The example uses D3's `transition` API and SVG path interpolation to animate the line. It reveals that default path interpolation parses the `d` attribute's numbers and pairs them in order, causing vertical "wiggling" as control points move in place. The solution involves interpolating the chart's transform instead of the path data.

GGerHobbelt

71% match