Skip to main content
SimilarExport ZIP
100%

Melting Data for Multiple Lines

✓ Published0🌍 Public
Ssafdarawan
Last edited Jun 1, 2020
Created on Jun 1, 2020

This example shows four stacked line charts tracking cumulative counts of different infection sources—travel to Hubei, relatives, social contacts, and public transit—over time. The code uses d3.nest() to group the CSV data by category, then renders each category as a separate SVG path with d3.line(). A color legend is built using a custom colorLegend function with d3.scaleOrdinal. The x-axis uses d3.scaleTime for date parsing, while the y-axis uses d3.scaleLinear for counts.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Melting Data for Multiple Lines

Four line charts trace the cumulative counts of COVID-19 exposure categories—travel to Hubei, relative contact, social contact, and public transit—over time. The visualization uses D3 v4 with an SVG renderer, loading data from a CSV and melting it via `d3.nest` to group values by category. A shared ordinal `colorScale` assigns distinct hues to each line, while a custom `colorLegend` component displays the color-to-category mapping with circles and text. The axes are built with `d3.axisBottom` and `d3.axisLeft`, and the lines are drawn as paths using `d3.line`.

LLex
90% match
Loading thumbnail…

Melting Data for Multiple Lines

This example shows animated multi-line charts tracking COVID-19 confirmed cases over time for several countries, with colored lines that progressively extend as the day counter advances. A legend and axis labels accompany the visualization. The code uses d3.nest() to group data by country, d3.line() with curveBasis for smooth paths, and d3.scaleLinear for x/y axes. Circle markers and text labels display the latest value of each line. Data comes from CSV files processed through a custom loadAndProcessData function.

VVikas Pathak
86% match
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
85% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes COVID-19 confirmed cases across several countries using multiple animated line charts. The visualization uses D3.js v5 with SVG rendering to display data from CSV files, showing how cases grow over days since the outbreak began. The implementation employs D3 scales for linear and time axes, the `nest()` function to group data by country, and `line()` with `curveBasis` to generate smooth paths. A color legend and animated transitions update the lines dynamically, while a custom `yValue` function adds random variance to China’s data for demonstration purposes.

Vvans01
84% 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
83% 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
83% match
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes the number of confirmed COVID-19 cases over time for several countries, using animated multiple lines that appear to "melt" as they extend. The chart initially loads all data, then after a brief delay, it progressively renders lines day by day up to day 92, with each line colored and labeled for its country. The code uses D3 v5 APIs such as `nest()`, `line()`, `scaleLinear()`, and `transition()` to update the paths, while the `yValue` function adds random noise to China’s data after day 52, creating a melting effect. Data is loaded from CSV files and rendered as SVG.

Ssafdarawan
82% match
Loading thumbnail…

Melting Data for Multiple Lines

This visualization tracks cumulative COVID-19 death counts across multiple countries over time, using a multi-line chart that plots deaths against days since the first reported case. The chart includes a draggable vertical line that, when positioned at a specific day, reveals the death toll for each country at that point in time. The code uses D3 v5 APIs including `nest()`, `scaleLinear`, and `line` with `curveBasis` to generate the paths, while a custom `colorLegend` module displays the categorical color scale using `scaleOrdinal` and `schemeCategory10`. Data comes from the included CSV files `data01.csv` and `data02.csv`.

Iinroadings
82% match