Melting data with multiple lines

100%

Melting data with multiple lines

✓ Published0🌍 Public

Last edited Aug 26, 2019

Created on Aug 26, 2019

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Melting Data for Multiple Lines

This example shows COVID-19 death counts for multiple countries over time, with each country represented as a colored line and labeled at its final value. The visualization uses a line generator with a basis curve, along with nested data grouping to separate countries. It displays the data on linear scales for both axes and includes a color legend in the corner. The code imports and processes data from two CSV files, filtering and merging them to build the dataset, and renders the chart as an SVG using D3 v5 APIs like `d3.nest`, `d3.line`, and `d3.axisLeft`.

Iinroadings

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

85% match

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population over time by region, with multiple lines colored by region and ordered by their final values. The chart uses a time scale for years, a linear scale for population, and an ordinal color scale with a custom legend. It demonstrates data melting by transforming wide-format CSV rows into long-format records via `d3.range` and nested loops, then draws the lines with `d3.line` and `curveBasis`. The tooltip-free SVG rendering relies on D3 v5 APIs, including `d3.nest`, `extent`, `axisLeft`, `axisBottom`, and `d3.format`.

Iip01

85% match

Loading thumbnail…

Melting Data for Multiple Lines

This example shows population over time by region, with multiple lines rendered as overlapping paths in a SVG chart. The visualization uses d3.line with curveBasis to smooth the lines, and d3.nest to group data by region, sorting lines by their final value. The data comes from UN population estimates, processed through a custom melt function that transforms wide CSV data into a long format. A color legend is built using d3.scaleOrdinal and schemeCategory10, with axes created via d3.axisLeft and d3.axisBottom.

Wwblockchain

84% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple line paths drawn in a single SVG chart. The lines are grouped by region name and displayed with a categorical color scale, accompanied by a legend. Data comes from UN population estimates and medium variant projections, melted into tidy format with `d3.csv`. The chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisLeft`, `d3.axisBottom`, `d3.group`, and `d3.scaleOrdinal` to render axes, lines, and legends with SVG.

HHe Jianfeng

84% match

Loading thumbnail…

Line Chart with Multiple Lines

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.

Wwishcsdev

84% match

Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population over time by region, with each line representing a different area and a color legend identifying them. The chart uses d3.csv to load UN population data, which is then processed using d3.nest to group data by region. The code demonstrates a data-wrangling technique called "melting," transforming wide-format data with columns per year into tidy data with year, name, and population fields. Multiple lines are drawn using d3.line and curveBasis, with d3.scaleTime and d3.scaleLinear handling the axes and d3.scaleOrdinal applying colors.

Ssingularity6033

84% match

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

84% match