D3.js v7+ Example

100%

D3.js v7+ Example

✓ Published0🌍 Public

Last edited Feb 18, 2023

Created on Feb 17, 2023

This dashboard visualizes COVID-19 data across multiple countries using linked SVG charts, including a world choropleth map with zoom and tooltips, bar charts for latest case counts, a ranked list of the top six infected nations, and a multi-line time-series graph with a brushable context view. Built with D3 v7, it employs d3.geoPath, d3.geoMercator, d3.scaleThreshold, d3.brushX, and d3.zoom for interactive exploration. Data is loaded from local TSV/CSV files, with animations and transitions updating the visualizations dynamically.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

COVID-19 DASHBOARD

This interactive dashboard visualizes COVID-19 trends with multiple linked charts, including a world map showing total cases, line charts for new cases by country, and an income-bracket comparison. It also includes a vaccination chart and a navigator for exploring case timelines. Built with React and D3 v7, the visualization uses `d3.geoPath` with TopoJSON for map rendering, `d3.scaleTime` and `d3.scaleLinear` for axes, and SVG with animations for interactive updates. Data is loaded from the Our World in Data COVID-19 CSV files, with country coordinates from a custom JSON file.

Bbhargav83

84% match

Loading thumbnail…

Test

This interactive dashboard displays global COVID-19 cases and deaths on an SVG map of the world, allowing users to switch between years and metrics such as total cases, hospitalizations, and vaccinations. The map renders geographic boundaries from the supplied world.geojson file using d3.geoPath, while dropdown menus update the displayed data. The visualization also integrates an embedded Tableau dashboard via JavaScript, overlaying external analytics alongside the D3 map. Color-coded regions with a gradient legend communicate severity, and hover tooltips provide additional detail. The code relies on d3.v7 for geographic projections and data binding, with CSS styling for layout and interactivity.

UUthkarsh Reddy Junuthula

83% match

Loading thumbnail…

Untitled

A dashboard of linked COVID-19 visualizations shows global cases via a Leaflet map, interactive line charts of pandemic metrics, and scatter plots. Users can select countries on the map to filter data, while brushable axes and k-means clustering reveal relationships like GDP per capita versus case rates. Built with d3.v7 and SVG animations, the dashboard loads data from a CSV and GeoJSON files.

Bbhargav83

83% match

Loading thumbnail…

d3 choropleth map

This interactive choropleth map visualizes the spread of COVID-19 cases across countries over time, using an animated timeline that cycles through daily data from January to July 2020. The map renders world country boundaries as SVG paths using the Eckert5 projection, with each country’s fill color dynamically updated based on its reported case count for the currently displayed date. Built with D3 v3, it leverages `d3.geo.path`, `d3.geo.eckert5`, `d3.geo.graticule`, TopoJSON for geographic data, and a CSV dataset, while a play button and date label drive the sequential animation.

Aashpradhan01123

82% match

Loading thumbnail…

COVID-19

This D3.js visualization shows the progression of COVID-19 cases, deaths, and recoveries over time for a selected country. Users choose a status metric and country via dropdown menus, and the chart displays a smooth line chart of that metric against observation dates. The code uses D3 v5 methods like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. Data is loaded from a CSV file and aggregated by country and day using `nest` and a custom `groupByDay` function.

WW9183907

81% match

Loading thumbnail…

Let's make a map with D3.js!

This interactive map visualizes COVID-19 case data by country, with a control panel that categorizes confirmed cases, recoveries, and deaths into distinct stages. The visualization uses D3.js v5 and TopoJSON to render a world map from Natural Earth data, employing `d3.geoPath` with a natural Earth projection and SVG paths. Users can zoom and pan the map via `d3.zoom`. A drop-down menu allows switching between different dates, and the data appears to come from a CSV dataset tracking the pandemic’s progression through early 2020.

SSarahKiyani

81% match

Loading thumbnail…

D3.js Scatter Plot and Area Chart

This example presents two linked visualizations of COVID-19 data: a scatter plot of confirmed cases versus deaths, and a time-series area chart of confirmed cases over dates. Built with D3 v7, it uses SVG selections with `scatterSvg` and `areaSvg` for rendering, and implements interactive tooltips via `d3.select` with mouseover/mouseout events. The area chart employs `xAreaScale.invert` to map mouse positions back to dates, and both charts reference local data arrays for case counts. A CSS-styled tooltip div provides hover details.

Mmdadeebfarhaan@gmail.com

81% match

Loading thumbnail…

COVID-19

This interactive D3.js visualization displays COVID-19 metrics over time for selected countries, allowing viewers to toggle between confirmed cases, deaths, and recoveries via two dropdown menus. The line chart uses a time-based x-axis and a linear y-axis, with a single red, blue, or green line rendered per selection. Data is loaded from a CSV file, processed by nesting and grouping entries by date, and filtered by country. The visualization uses D3's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` for smooth curves.

WW9183907

81% match