Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
Sshawnsrk
Last edited Dec 22, 2020
Created on Dec 21, 2020

This line chart compares the historical performance of an All-Weather portfolio against Global Equities, measured as growth of $1,000 from January 2000 to August 2020. Two smoothed lines trace each series over time, with an ordinal color scale distinguishing them. The visualization uses d3.csv for data loading, d3.nest for grouping, d3.line with curveBasis for path generation, and a custom colorLegend module. SVG axes with tick marks and labels display date and dollar-scaled values.

AI-generated description
MIT Licensed

Similar vizzes

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

Line Chart

This line chart visualizes student growth rates from 1980 to 2005, with years on the x-axis and growth rate on the y-axis. The chart uses d3.csv to load external data, then d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.line with d3.extent and d3.max for path generation. Rendered as SVG, the chart includes axis labels and a title, with the line path styled in red via CSS.

SSravaniPosina
73% match
Loading thumbnail…

multiple line chart

This example shows multiple time-series lines plotted on the same axes, with each line representing a different stock symbol over several months. The chart displays price trends for various symbols, allowing easy visual comparison of their trajectories. Using D3 v4 with SVG rendering, the code loads external CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and groups the data by symbol using `d3.nest()`. It then applies `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, and draws each line with `d3.line`, while adding axis labels and a legend via text elements.

EEssohanamKouyou
73% match
Loading thumbnail…

Line chart with multiple lines

This visualization shows profit trends across product sub-categories over time, with multiple colored lines representing different states and a legend that filters lines by click. The chart uses d3.csv for data loading, d3.nest to group data by state, d3.scaleLinear for both axes, and d3.line with curveBasis for smooth line paths. A colorLegend component (built with D3 selections) enables interactive highlighting by dimming non-selected states. The SVG rendering includes axes with d3.axisLeft and d3.axisBottom, while the data comes from a CSV file with order details.

Pprincit
72% match
Loading thumbnail…

Line Chart with Multiple Lines

A multi-line chart displays a week of temperature readings across multiple cities, with time on the x-axis and temperature on the y-axis. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with a category10 color scheme to encode city identity. Lines are generated with d3.line and a basis curve, while a custom color legend component renders SVG circles and text. Data comes from a CSV file loaded via d3.csv, with axes and gridlines produced by d3.axisBottom and d3.axisLeft.

Bbprokopowicz
72% match
Loading thumbnail…

multiple line chart

This multi-line chart visualizes stock data over time, plotting a series of data points connected by lines and displaying corresponding values. Built with D3.js v4, the visualization uses SVG for rendering and includes animated transitions on mouseover—circles change color and trigger a tooltip plus a dashed guide line. The chart employs `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and processes data loaded from a JSON file with `d3.json` and `d3.dsvFormat` parsing.

EElisaDnr
72% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays a week of temperature readings from multiple cities around the world, with each city represented by a distinct colored line plotted over time. The visualization uses D3 v6 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveBasis`, and `d3.nest` to group data by city. A color legend built with `d3.scaleOrdinal` and `schemeCategory10` identifies each line. The data comes from a CSV file loaded via `d3.csv` and rendered with custom axes, grid lines, and a title.

EEllednera
72% match
Loading thumbnail…

multiple line chart

A multiple line chart visualizes stock price trends over time for several symbols, with each symbol rendered as a separate black curved line. The chart uses a time-based x-axis and a linear y-axis scaled to the maximum price, with symbols labeled in a list beside the plot. Data is loaded from an external CSV file via `d3.text`, then parsed with `d3.dsvFormat` and `d3.timeParse`. Lines are drawn using `d3.line` with `d3.curveBasis`, and the data is grouped by symbol using `d3.nest`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`.

EEssohanamKouyou
72% match