Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
SSean Moore
Last edited Nov 12, 2019
Created on Nov 12, 2019

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.

AI-generated description
MIT Licensed

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

Line Chart with Multiple Lines

This line chart displays projected delivery dates by report year for multiple Social Security Number (SSN) groups, with each line representing a distinct category color-coded using `d3.scaleOrdinal` and `schemeCategory10`. The chart includes labeled axes, a title, and a color legend rendered as SVG circles and text. It uses `d3.line` with `curveBasis` smoothing, `d3.nest` to group data by SSN, and `d3.axisBottom` and `d3.axisLeft` for ticks. Data comes from a CSV of modified SSN records, parsed with `d3.csv` and converted to JavaScript `Date` objects.

SSean Moore
87% 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
78% 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…

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

Basic line chart

This line chart shows the relationship between two numerical values and time, plotting two series from a CSV file across the years 2010–2015. It uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for axes, while d3.line constructs the paths. The chart renders in SVG, with each line styled via a separate stroke color. Axis labels are added using d3.axisBottom and d3.axisLeft, and the code includes configurable column names for easy reuse as a template.

EEleonore9
77% match
Loading thumbnail…

Line Chart with Multiple Lines

This example displays a week of temperature data from San Francisco as a smooth, multi-line chart over time. The visualization uses D3.v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a single maroon path, while styling comes from CSS. Data is loaded from a CSV via `csv` and drawn as an SVG, with labeled axes and a title.

Iianleekq
77% match