Skip to main content
SimilarExport ZIP
100%

Melting Data for Multiple Line Chart

✓ Published0🌍 Public
Nnkohdatavis
Last edited Aug 1, 2020
Created on Aug 1, 2020

This visualization displays a week of temperature readings for multiple cities using a multi-line chart. The code reshapes the UN Population Estimates data into a tidy format via `d3.nest()` to group measurements by city, then renders smooth paths with `d3.line()` and `curveBasis`. Axes are generated with `axisBottom` and `axisLeft`, while a custom `colorLegend` function uses `scaleOrdinal` and `schemeCategory10` to assign city colors. Data loads from a CSV file via `d3.csv`, and the chart includes a title, labeled axes, and a legend positioned at the right margin.

AI-generated description

UN Population Estimates 2017 Medium Variant

MIT Licensed

Similar vizzes

Loading thumbnail…

Melting Data for Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with a category10 color scheme to distinguish each city as a separate line. Rendering with SVG, the code employs d3.line with curveBasis for smooth paths, d3.nest to group data by city, and a custom colorLegend function. A small multiple of circles on the legend indicates which city corresponds to which colored line.

Jjlspangl
88% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays temperature readings from multiple cities over one week, with each city represented by a distinct colored line and a corresponding color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map time, temperature, and city categories, while `nest()` groups the data by city and `line()` with `curveBasis` generates smooth paths. Axes are rendered with `axisBottom` and `axisLeft`, and the legend is built using a custom function that appends circles and text. Data originates from the Data Canvas - Sense Your City dataset.

RRamin Melikov
86% 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
86% match
Loading thumbnail…

Melting Data for multiple lines

This visualization shows world population estimates for different regions over time as multiple colored lines. It uses a line chart with an ordinal color scale to distinguish each region. The example loads data from CSV files, nests it by region using `d3.nest`, and renders smooth curves with `d3.line` and `curveBasis`. It also includes a custom color legend component and styled axes with grid lines.

AAjit Singh
86% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population over time by region using multiple smoothed lines, with a color legend identifying each region. The data is loaded from UN population estimate CSVs, then transformed using a custom `melt` function that reshapes wide-format data into long format for D3 line generation. The visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.nest`, and precomputed curve paths with `d3.line` and `curveBasis`. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while a custom legend component manages color-coded circles using `d3.scaleOrdinal` and `schemeCategory10`.

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

Multiple lines

This example visualizes a week of temperature readings from multiple cities using multiple colored lines, with a legend identifying each city. The chart uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `nest()` to group data by city, and `line()` with `curveBasis` for smooth paths. A categorical color scale assigns distinct strokes, and a custom `colorLegend` function renders the legend. Data is loaded from a CSV file via `d3.csv`, with axes from `axisBottom` and `axisLeft`.

RRoger Yu-Hsiang Lo
85% match