Skip to main content
SimilarExport ZIP
100%

Melting Data for Multiple Lines

✓ Published1🌍 Public
PPeter S
Last edited Oct 5, 2019
Created on Sep 19, 2019

This example visualizes population trends for countries over time as multiple smoothed lines, using a nested data structure to group values by region. The chart displays yearly population estimates from the UN’s medium variant dataset, covering 1950 to 2100. Built with React and D3 v5, the code employs `d3.nest` for data grouping, `d3.line` with `curveBasis` for path generation, and `d3.scaleOrdinal` with `schemeCategory10` for color mapping. A custom color legend and axes with tick formatting complete the SVG rendering.

AI-generated description

An example showing the one week Temperature from San Francisco. The data comes form here

MIT Licensed

Similar vizzes

Loading thumbnail…

Melting data from Multiple Lines

This example visualizes population trends over time for various global regions, with multiple lines displayed simultaneously to facilitate comparison. The data is presented using a line chart, where each line represents a different region and is color-coded according to a categorical scheme. The visualization is built using React and D3 v5, leveraging D3's `nest` and `line` functions to structure and render the data. The underlying dataset is sourced from UN population estimates, processed into a tidy format by the `loadAndProcessData` function.

Jjeelong
94% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population growth over time for various regions, using multiple lines to compare trends across areas. The chart employs a nested data structure, processing population estimates from the UN’s medium variant dataset for 1950-2100. The code utilizes D3’s `nest` and `line` functions with the `curveBasis` for smooth lines, while `scaleTime` and `scaleLinear` handle the axes. A color legend generated via a custom `colorLegend` function helps distinguish regions, and the rendering uses SVG with a `mix-blend-mode` for overlapping lines.

HHeholek
93% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population growth over time for various regions, using multiple lines to compare trends across areas. The chart employs a nested data structure, processing population estimates from the UN’s medium variant dataset for 1950-2100. The code utilizes D3’s `nest` and `line` functions with the `curveBasis` for smooth lines, while `scaleTime` and `scaleLinear` handle the axes. A color legend generated via a custom `colorLegend` function helps distinguish regions, and the rendering uses SVG with a `mix-blend-mode` for overlapping lines.

HHeholek
93% match
Loading thumbnail…

Melting data for multiple lines

This example visualizes population trends over time for multiple regions, displaying separate lines for each region from 1950 to 2100. The data is sourced from UN population estimates and is processed by reshaping wide-format CSV data into a tidy format using custom functions. The visualization uses D3 v5 with SVG rendering, employing `d3.line` with curve interpolation, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.nest` to group data by region. A color legend is rendered using a custom function that utilizes `d3.scaleOrdinal` with `d3.schemeCategory10`.

MMatthiasVanCampen
93% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population trends over time for various global regions, with each region represented as a distinct colored line. The chart highlights how populations evolve from 1950 to 2100, combining historical estimates with medium-variant projections. The code uses d3.nest to group data by region, d3.line with curveBasis for smooth paths, and d3.scaleOrdinal with schemeCategory10 for colors. A custom colorLegend component renders the interactive legend, while data processing in loadAndProcessData.js melts the CSV dataset into a tidy format using d3.range and timeParse.

Vvic126
93% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes population trends for multiple countries over time as a series of colored lines, using a legend to identify each country. The chart displays time on the x-axis and population on the y-axis, with a title and axis labels. The code uses `d3.csv` to load data from a UN population estimates dataset, which is then "melted" from wide to long format to create individual line paths. It leverages D3 v6 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, `curveBasis`, `axisLeft`, `axisBottom`, and `group`, rendering the final visualization as an SVG.

MMatthew Rubino
93% 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
93% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization displays population trends over time by region, using multiple colored lines to represent different countries from 1950 to 2100. The chart employs d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group data by country. A custom colorLegend component renders the categorical scale using d3.scaleOrdinal with schemeCategory10. The data comes from UN population estimates, processed through a custom melt function that transforms wide-format CSV data into tidy rows. SVG rendering handles the visualization, with axis labels and a title annotating the chart.

PPotikorn
93% match