Skip to main content
SimilarExport ZIP
100%

Fork of Multiline chart

✓ Published0🌍 Public
Kkfhujosefsson@dons.usfca.edu
Last edited Mar 19, 2025
Created on Mar 19, 2025
Forked from Multiline chart

This fork of a multiline chart visualizes COVID-19 cases in five Scandinavian countries during October 2020. Each country gets its own small SVG chart displaying daily case counts as a line, with a shared color-coded legend and tooltip. The code uses d3.csv for data loading, d3.group to organize data by country, and d3.line with d3.scaleLinear for axes and paths. A d3-legend library creates the custom legend, and the tooltip appears on hover.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

White hat multiline chart

The chart displays daily COVID-19 case counts for five Scandinavian countries across October 2020, plotted as multiple colored lines over a shared day axis. It uses d3.csv to load the data, d3.line and d3.scaleLinear to generate the paths and coordinates, and SVG elements with CSS classes for styling. The y-axis shows case numbers, the x-axis shows days, and a legend identifies each country’s line color.

Kkfhujosefsson@dons.usfca.edu
88% match
Loading thumbnail…

Black hat multiline chart

This example displays daily COVID-19 cases for five Scandinavian countries throughout October 2020 on a logarithmic scale. The black-background chart uses colored lines for Sweden, Denmark, Norway, Finland, and Iceland. The visualization loads CSV data via `d3.csv`, builds scales with `scaleLinear` and `scaleLog`, and renders paths with the `d3.line` generator. SVG elements handle axes, labels, a title, and a legend, demonstrating D3 v7's data-joining and axis APIs.

Kkfhujosefsson@dons.usfca.edu
87% match
Loading thumbnail…

Both Charts

This visualization presents two line charts showing COVID-19 case counts in five Scandinavian countries throughout October 2020. One chart uses a linear scale while the other displays the same data on a logarithmic scale, highlighting the different visual patterns each scale produces. Built with D3 v7, the code uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleLog` for the axes, and `d3.line` to generate the SVG paths. Each country’s daily cases are plotted against the day of the month, with axes styled using `d3.axisBottom` and `d3.axisLeft`.

Kkfhujosefsson@dons.usfca.edu
85% match
Loading thumbnail…

Fork of Line Chart - Covid Cases per day in Sweden October 2020

This line chart tracks daily COVID-19 cases in Sweden during October 2020, with a shaded area under a monotone-smoothed curve, interactive hover points that reveal tooltips with exact values, and a dashed red line marking the average case count. The visualization also annotates the peak case day. Built with D3 v7, it uses SVG paths for the line, area, and axes, while d3.csv loads the external data and d3.scaleTime and d3.scaleLinear map dates and case numbers to positions. Responsive dimensions and hover transitions enhance the interactive experience.

NNita
83% match
Loading thumbnail…

Fork of A7_Multi-line Chart

This fork of a multi-line chart visualizes COVID-19 case counts over time, showing a green line with circular points for each date. It uses D3 v7 with an SVG rendering, employing `d3.scaleBand` for the date axis and `d3.scaleLinear` for the case count axis, plus `d3.line` and `d3.axisBottom`/`d3.axisLeft` to generate the chart. Data is loaded from a remote CSV file containing date and case columns, with the line chart displaying a clear trend of rising cases across the period.

MM Hema
83% match
Loading thumbnail…

Fork of Streamgraph of covid-19

This fork of a COVID-19 streamgraph visualizes daily new cases across five continents using a silhouette-offset stacked area chart, drawing on data from `data_daily.csv` and `data_monthly.csv`. Built with D3 v2 in a React framework, the SVG animation renders layers with cardinal interpolation and a custom time-based x-axis. Hover interactions adjust layer opacity, display tooltips with region and date details, and apply stroke highlighting via the `mouseover` and `mousemove` events. Color schemes (`orange`, `pink`, `blue`) are selectable through a chart function, while month-level trends appear in a secondary D3 v4 area chart.

Nnomiaro
82% match
Loading thumbnail…

Fork of country

This interactive scatterplot visualizes COVID-19 metrics across countries, plotting attributes like new cases against total cases on logarithmic-scaled axes. Each circle represents a country, colored by continent, with a legend to the right. The visualization uses React with D3 v5 scales (`scaleLinear`, `scaleOrdinal`) to render SVG marks and axes. Data is loaded asynchronously from a CSV file using D3's `csv` method, with dropdown menus allowing users to switch between different case and death metrics for the x and y axes.

Rrushithareddyy
82% match
Loading thumbnail…

Fork of CovidCases

This example shows a choropleth map of COVID-19 total cases across Sweden, Denmark, and Norway over time, with a slider to scrub through the available dates. The map uses SVG paths rendered with `d3.geoPath` and a Mercator projection fitted to geographic data from a world GeoJSON file. Each region’s fill color is driven by a `d3.scaleSequential` with `d3.interpolatePlasma`, mapping case counts from a CSV dataset. A tooltip is attached to the paths via mouse events, though it is referenced but not fully instantiated in the provided code, and the slider updates the displayed date label.

Kkfhujosefsson@dons.usfca.edu
82% match