Line Chart with Multiple Lines

100%

Line Chart with Multiple Lines

✓ Published0🌍 Public

Last edited May 6, 2015

Created on May 6, 2015

This example shows how the number of ALG II benefit recipients in Cologne changed from 2005 to 2012 across nine different demographic categories, such as single-parent households or foreign nationals. Each category is rendered as a separate line, using `d3.svg.line` with interpolated smoothing and a category-10 color scale. The data is parsed from a CSV file and nested by category with `d3.nest`, while time is handled via `d3.time.scale`. Axes are drawn with `d3.svg.axis`, and the SVG rendering uses `d3.select` to append paths and labels.

AI-generated description

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart tracks projected delivery dates against report years for multiple social security number categories over time. The visualization uses D3 v5 with scales, axes, and a line generator with curveBasis smoothing to render each category as a distinct colored path. Data is loaded from a CSV file and grouped using d3.nest. The chart includes a custom color legend component and axis labels, with temperature data sourced from the Data Canvas – Sense Your City project.

SSean Moore

74% match

Loading thumbnail…

Line chart

A multi-line chart visualizes population changes for five countries—Germany, Italy, Japan, the United Kingdom, and the United States—from 1600 to 1916, with each line colored distinctly and labeled via tooltips. Built with D3.js, it uses `d3.time.scale` for the x-axis, `d3.scale.linear` for the y-axis, and SVG paths to render the trends. Data is loaded from a CSV file (`population.csv`) and formatted using `d3.format` and `d3.time.format`. The chart emphasizes comparative growth patterns over centuries.

LLuisSevillano

74% match

Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans

73% 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

73% match

Loading thumbnail…

Line Chart with Multiple Lines

This visualization shows population trends over time for multiple world regions, with each region represented as a distinct colored line and a legend identifying the regions. A vertical black line marks the currently selected year, and users can move their mouse across the chart to dynamically change that year. The code uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to render SVG paths, along with d3.nest to group the data by region. Population data comes from UN estimates and medium-variant projections, covering 1950 to 2100.

RRoger Yu-Hsiang Lo

72% 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

71% match

Loading thumbnail…

27 - melting data for multiple lines - dataviz 2018

A multi-line chart displays population trends over time for various countries and regions, using the United Nations population estimates and projections dataset. The visualization employs multiple vertical reference lines to highlight the current year, a hovered year, and a selected year, which users can change by clicking on the chart. The D3 code uses `d3.nest` to group data by region and `d3.line` with `d3.curveBasis` to draw the smoothed paths, while `d3.scaleOrdinal` and `d3.schemeCategory10` assign colors. A custom color legend function renders the region names and color swatches.

Zzach b.

71% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays projected population trends over time for multiple world regions, with each region represented by a colored line and a corresponding color legend. The chart uses d3.line with curveBasis to create smooth paths, d3.nest to group data by region, and d3.scaleOrdinal with schemeCategory10 for coloring. Axis labels and gridlines are generated using d3.axisBottom and d3.axisLeft. The data comes from UN population estimates and medium-variant projections, which are processed and merged using d3.csv, d3.range, and d3.timeParse.

Aakshayms0

71% match