Skip to main content
SimilarExport ZIP
100%

Line Chart with Multiple Lines

✓ Published0🌍 Public
Wwishcsdev
Last edited Apr 11, 2019
Created on Apr 9, 2019

This example shows suicide numbers across multiple countries over time, with each country represented by a colored line on a time-series chart. The visualization uses D3 v5 to load CSV data and render an SVG with scaled axes, grid lines, and a color legend. It employs D3's `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, along with `axisBottom`, `axisLeft`, and `nest` to group data by country. The lines are sorted by their final value, and the chart is rendered entirely with SVG elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart with Multiple Lines

This example displays suicide numbers across countries over time, with each country’s yearly data shown as a separate colored line and a matching color legend on the right. Using d3.csv to load the dataset, d3.scaleTime and d3.scaleLinear map years and suicide counts, while d3.nest groups records by country and sorts them by the last value. The SVG rendering includes axes, gridlines, and a title, though the line paths are commented out, so only colored circles appear at data points.

Wwishcsdev
97% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays suicide numbers across countries over time, with each line representing a country and color encoding the country identity. The data comes from the Data Canvas - Sense Your City dataset. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `nest` to group data by country. Lines are drawn using the `line` generator with `curveBasis` smoothing, and a `colorLegend` displays the available country choices.

Wwishcsdev
94% match
Loading thumbnail…

D3 Time Series Axes

This example shows suicide rates over time as multiple colored lines, one per country, plotted against a linear time axis and a value axis. The visualization uses D3 v4 to load CSV data via `d3.csv`, processes it with `d3.nest()` to group records by country, and draws the lines with `d3.line()`. Axes are generated through `d3.axisBottom` and `d3.axisLeft`, while a color scale (`d3.scaleOrdinal`) assigns each country a distinct stroke color. The rendered output is an SVG graphic within a fixed-width chart area.

Mmnalk
88% match
Loading thumbnail…

Suicides rates in countries

The chart displays suicide rates over time for various countries, with a line chart connecting yearly data points. The visualization uses D3 v5 to load CSV data, parses year values, and scales the time and linear axes. It renders an SVG with a maroon line path, axis labels, and gridlines, with the data pulled from the source at vizhub.com/wishcsdev/datasets/suicides.csv.

Wwishcsdev
86% match
Loading thumbnail…

Melting data with multiple lines

This visualization shows suicide generation numbers over time from 1985 to 2016, with multiple colored lines representing different regions and countries sorted by their final values. The chart uses d3.line with curveBasis smoothing, d3.scaleTime for the x-axis, and d3.scaleOrdinal with schemeCategory10 for line colors. Data is melted from wide CSV format using d3.nest and d3.range, and a custom color legend is rendered alongside the SVG axes.

Kkbriggs1
84% match
Loading thumbnail…

DataViz Project - Suicides Visualization

An interactive line chart visualizes suicide death rates in American countries over time, alongside related mental health and unemployment metrics. A country selector filters the dataset, and a color legend distinguishes unemployment from mental illness data. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `curveNatural` for path rendering, with data from a CSV hosted on GitHub Gist. The SVG output includes custom axes and a dropdown menu for country selection.

FFelipe Mejías
81% match
Loading thumbnail…

S ucide For Selected Country

This interactive visualization displays suicide rates by year for a user-selected country, using data from a CSV file covering 1979 to 2016. A dropdown menu triggers an update of the line chart, which uses d3.scaleLinear, d3.scaleOrdinal, d3.line, and d3.curveBasis for rendering the smoothed lines. The SVG includes axes with d3.axisBottom and d3.axisLeft, a color legend for the selected country, and a title, all rendered using d3.select and d3.append. The visualization uses React for dropdown interaction and d3.v5 for the core charting logic.

PPakcheera Choppradit
81% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes COVID-19 death counts over time for seven countries, with each country represented as a colored line and labeled at its final data point. The chart uses a linear time scale for days since the 10th death and a linear scale for death counts, with axes and a color legend rendered by custom D3 functions. The code loads CSV data, processes it, and uses `d3.nest` to group by country, `d3.line` with `curveBasis` for smooth paths, and `d3.scaleOrdinal` for colors. The visualization is rendered as SVG with D3 v5.

Iinroadings
80% match