Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
SSukesh Kumar
Last edited Aug 3, 2019
Created on Aug 3, 2019

This line chart displays GDP against female school enrollment percentages for several South Asian and Oceanian countries, with each country represented by a distinct colored line. The data originates from Gray Area’s Data Canvas - Sense Your City project. The visualization uses D3 v5’s `scaleLinear`, `scaleTime`, `line` generator with `curveBasis`, and `nest` for grouping, rendering vector graphics via SVG. A custom `colorLegend` function adds an ordinal color scale legend, while axis labels and gridlines are styled through CSS.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes global population trends over time, grouped by world regions, using a multi-line layout with a categorical color legend. It combines historical estimates (1950–2014) with medium-variant projections (2015–2100) from UN population data. The visualization uses D3 v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `line`, `curveBasis`, and `nest` to structure and render the paths, while a custom `colorLegend` function displays the region labels as SVG circles and text.

RRoger Yu-Hsiang Lo
75% 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
75% 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
75% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays a bar chart of population data for eight countries, using horizontal bars to compare values. The chart encodes population on a linear scale along the x-axis and country names on a categorical band scale along the y-axis. Built with D3 v5, it loads data from a CSV file, parses the population column as numbers, and renders SVG rectangles via `scaleLinear` and `scaleBand`. A color legend from a separate module is also included, though the chart itself does not implement multiple lines as its title suggests.

VVikas Pathak
75% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows annual CO2 emissions (in million tonnes) for multiple countries over time, with each country represented as a separate colored line. The data comes from the Data Canvas - Sense Your City dataset, displayed as an SVG using D3 v5. The visualization uses d3.nest to group data by country, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for smooth paths. A color legend lists all countries alongside the chart.

Nnadia-el
75% match
Loading thumbnail…

A6_LineChart with 4 qualitative color scale

This line chart visualizes the GDP of four Southeast Asian countries—Vietnam, Thailand, Indonesia, and Malaysia—from 2012 to 2022, using a qualitative color scale with distinct hues for each nation. The chart employs D3.js v7 to create SVG paths for each country’s trend line, with an ordinal color scale mapping countries to specific colors. A legend generated via d3-legend and an ordinal color scale is displayed horizontally. The data is loaded from a CSV file and parsed, with axes rendered using d3.axisBottom and d3.axisLeft.

DDuc Pham
75% match
Loading thumbnail…

Line Chart

This line chart displays student growth rate from 1980 to 2005, plotting year on the x-axis and per capita mobile usage on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to create the SVG path, with gridlines from tick size and rotated axis labels. Data is loaded via `csv()` from a GitHub gist, and the chart includes a title and styled axes using CSS classes.

DDineshK2602
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
74% match