Skip to main content
SimilarExport ZIP
100%

D3 Course 14: Melting Data for Multiple Lines

✓ Published0🌍 Public
Mmaru25-alt
Last edited May 14, 2020
Created on May 14, 2020

This line chart visualizes population trends across global regions from 1950 to 2100. It combines data from two UN population CSV files, melting columns into rows and filtering to display only regional aggregates. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `nest`, and `curveBasis` for smooth lines. A black vertical marker indicates the currently selected year, which updates interactively on mouse movement via the `mouse(this)` function.

AI-generated description

Data Visualization with D3 course; Melting & Munging Data

<h3>Melting & Munging Data</h3> <table> <th align="left">Topics</th> <tr> <td> <ul> <li><b>Melting columns into rows</b></li> <li><b>Filtering out undesirable values</b></li> <li><b>Merging multiple data tables</b></li> <li><b>Correctly parsing dates with d3.timeParse</b></li> <li><b>Renaming long names for labels</b></li> </ul> </td> </tr> </table>
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Course 14: Melting Data for Multiple Lines

This visualization displays population estimates and projections for world regions from 1950 to 2100, with each region shown as a distinct colored line. A vertical black line marks a selected year, and users can move their mouse across the chart to update this selection. The code uses d3.csv to load two UN population datasets, merges them after melting columns into rows, and applies d3.timeParse to handle yearly dates. The lines are rendered as SVG paths using d3.line, with d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal managing the axes and colors.

GGabrz
93% match
Loading thumbnail…

D3 Melting Data for Multiple Lines

This visualization displays population trends over time for various world regions, with multiple colored lines representing different areas. The chart uses D3's `scaleTime` and `scaleLinear` to map the data for the x and y axes, and `scaleOrdinal` with `schemeCategory10` for line colors. The code uses D3's `nest` function to group the data by region name, and employs `line` with `curveBasis` for smooth curve rendering. The data is melted from UN population estimates and medium variant projections, covering years from 1950 to 2100. A custom `colorLegend` component renders the color guide for the regions.

Rrdeichert
90% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for world regions from 1950 to 2100, displayed as multiple smoothed line paths colored by region. The code uses D3 v5 with `d3.nest` to group data by region, `d3.line` with `curveBasis` for smoothing, and `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for axes and color mapping. Data is melted from wide UN population CSV files using a custom `melt` function that reshapes yearly columns into long format, combining estimates and medium-variant projections.

CCurran Kelleher
90% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes global population trends from 1950 to 2100, showing how different regions change over time as multiple lines. The chart uses `d3.line` with `curveBasis` to draw smooth paths, with color encoding via `d3.scaleOrdinal` and a custom `colorLegend`. Data is melted from wide to long format using a custom `melt` function that processes UN population estimates from two CSV files, concatenating historical estimates with medium-variant projections. The visualization includes axis labels, gridlines, and a legend, with regions sorted by their final population value.

Mmeihaoming
89% match
Loading thumbnail…

Melting Data for Multiple Lines

Using D3 v5, this chart visualizes global population trends from 1950 through 2100 by combining two datasets: historical estimates and medium-variant projections. It displays multiple lines, each representing a development region, with a color legend and a vertical line marking the year 2018. The code melts the wide-format data into a tidy structure, then uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG chart. A `d3.line` path with `curveBasis` draws each line, and an interactive mouse event on a transparent rectangle captures hover positions. This example demonstrates a data-wrangling technique for creating multi-line charts from time-series data.

KKrishu
89% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for regions, displaying multiple lines that trace changes from 1950 to 2100. The data is sourced from UN population estimates and medium variant projections, processed through a melting operation that converts wide-format data into long format. The chart uses D3.js v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis` for smooth paths, and `nest` for grouping by region. An ordinal color scale with `schemeCategory10` assigns colors, while a custom legend shows region names.

Ssteveaigbe
89% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for various global regions, with each region represented by a colored line and a corresponding legend. The data comes from UN population estimates and projections, spanning 1950 to 2100. Built with D3 v5, the code melts wide-format CSV data into tidy rows using a custom function before applying scales, axes, and a line generator with curveBasis interpolation. Regions are sorted by their final population value and colored using d3.scaleOrdinal with schemeCategory10.

HHasideluxe
89% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for global regions, with each region represented as a colored line. The chart uses multiple lines to compare regional population growth from 1950 to 2100, with a color legend on the right side. The code processes United Nations population data by melting it into a tidy format, then uses d3.line with curveBasis to generate smooth paths, d3.nest to group by region, and d3.scaleOrdinal with schemeCategory10 for colors. Axes are rendered using d3.axisLeft and d3.axisBottom, with SVG rendering and custom tick formatting for population values.

CChenluWang96
89% match