Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiples Lines

✓ Published3🌍 Public
RRubens
Last edited Feb 22, 2020
Created on Nov 17, 2018

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.

AI-generated description

This data cames from personal annotation of body weight.

MIT Licensed

Similar vizzes

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
89% match
Loading thumbnail…

Path Animation

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.

RRubens
80% 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
76% match
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
74% match
Loading thumbnail…

D3 - Line chart (multiple)

This example displays multiple line charts on a single SVG canvas, tracking the average human wellness index for four countries (India, Sri Lanka, Vietnam, Cambodia) from 2010 to 2019. It first establishes linear scales for time and wellness values, then uses d3.line with path elements to draw each country’s trend, colored via an ordinal scale. The code employs d3.axisBottom and d3.axisLeft for axes, plus the d3-legend library’s legendColor for a horizontal ordinal legend. Data is loaded from a remote CSV using d3.csv, with parsing and flattening for the y-domain.

CChandana Srinivas
71% match
Loading thumbnail…

LineChart+ColorLegend

A multi-line chart displays patient biomarker values over time, with each line representing a different marker and a color legend identifying them. The visualization uses D3 v5 within a React application, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for path generation, and `scaleOrdinal` with `schemeSet1` for colors. Data comes from a CSV file loaded via `d3.csv`, and hovering over a line highlights it while dimming others.

Ppplomith
71% match
Loading thumbnail…

myLbs

myLbs is a time-series line chart that tracks a person's weight in pounds across several years, with a single early outlier in 2012 and denser, more frequent measurements from 2015 onward. The visualization uses D3 v4 with SVG rendering and animation, pairing a smooth curved line with individual red data points that reveal exact dates and weights via an interactive tooltip on hover. The chart also incorporates a zoom behavior enabled through `d3.zoom`, which rescales the x-axis, and uses gridlines with dashed strokes for readability. Data comes from an external TSV file, and the visualization includes an area fill beneath the line.

335degrees
71% 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
70% match