Line Chart with Multiples Lines

100%

Line Chart with Multiples Lines - By Year

✓ Published0🌍 Public

Last edited Jan 25, 2020

Created on Nov 18, 2018

Forked from Line Chart with Multiples Lines

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.

AI-generated description

This data cames from personal annotation of body weight.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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…

Line Chart

This line chart shows monthly value trends across multiple years, with a smooth monotone curve plotted over time. The visualization uses D3.js v7, specifically the `d3.scaleTime` and `d3.scaleLinear` axes, and renders the line via `d3.line` with a `d3.curveMonotoneX` curve. Data is loaded from a CSV file using `d3.csv`, and the chart outputs to an SVG canvas with labeled axes and tick marks. The styling adheres to BBC-like color themes and font choices, though the core plot focuses on the steelblue line and its temporal variation.

LLikhitaMudagereShivaraj@my.unt.edu

78% 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…

Line chart.js!

This line chart visualizes yearly data from a CSV file, plotting values against years with a blue line on axes labeled "Year" and "Value." It uses D3 v7 to load the data via `d3.csv`, scales the x- and y-axes with `d3.scaleLinear`, and renders the line path using the `d3.line` generator. The chart explicitly appends axes, labels, and the line to an SVG element, with margins set to accommodate tick marks and text. The example demonstrates basic DOM manipulation and data binding in D3.

Vvishnupriya eupuri

76% match

Loading thumbnail…

Line Chart with Multiple Lines

This example visualizes projected delivery dates for Social Security numbers across multiple report years, using a smooth, curved line to show the relationship between report year and projected delivery time. The chart employs time-scaled axes on both dimensions, with a maroon line path rendered in SVG. Built with D3 v5, it uses d3.csv to load external data, d3.scaleTime for temporal scaling, d3.line with d3.curveBasis for the smoothed path, and d3.axisBottom and d3.axisLeft for labeled axes with grid ticks.

SSean Moore

76% match

Loading thumbnail…

Basic line chart

This basic line chart displays a time series of yearly values from a CSV file, with a single blue line tracing the data points. The visualization uses D3 v4 to parse the CSV columns, mapping the "year" field to a time-scaled x-axis and the "value" field to a linear y-axis. Axes are rendered with d3.axisBottom and d3.axisLeft, and the line path is drawn using d3.line with a stroke width of 2.5 pixels. The chart includes labeled axes and is designed as a reusable template, with customizable data file, column names, and labels in the script.

EEleonore9

76% match

Loading thumbnail…

multiple lines

This example visualizes monthly net income trends across three years (2015–2017) as multiple overlaid line series. The SVG chart uses a linear x-scale for months (January through August) and a linear y-scale for totalNet values, with each year’s data drawn as a separate line. The visualization is rendered with D3 v4, using axes and scales to map the temporal and quantitative dimensions, and the design includes a subtle box shadow and labeled axis styling. The data is loaded from an external JSON file, and the chart is generated with animation support, making it easy to compare yearly patterns side by side.

663anp3ca

75% match