D3.js Scatter Plot and Area Chart

100%

D3.js Scatter Plot and Area Chart

✓ Published0🌍 Public

Last edited Apr 26, 2024

Created on Apr 26, 2024

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

scatter plot and area chart

This example combines a scatter plot and an area chart to visualize COVID-19 data for Indian states and union territories. The scatter plot maps confirmed cases on the x-axis and deaths on the y-axis, with each circle representing a data point. Tooltips provide detailed state-specific information on hover, implemented via the `d3.select` and `d3.csv` APIs. The area chart, rendered with SVG, displays the data's distribution using D3 scales and axes. The code uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the charts.

HHarinathChakali33@gmail.com

85% match

Loading thumbnail…

D3.js v7+ Example

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.

FFarhaan Qazi

81% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes CDC COVID-19 data, plotting daily new deaths against new cases, with each point representing a 14-day moving average. The chart reveals a general correlation where more infected cases correspond to more deaths. Built with D3 v6, the visualization uses `d3.csv` to load the dataset and `d3.scaleLinear` to map values to screen coordinates, with points rendered as SVG circles. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, and the chart fills the entire browser window.

VVonnie

80% match

Loading thumbnail…

D3.js Line Chart and Stacked Bar Chart

This example visualizes COVID-19 data for the state of Kerala using two D3.js v7 charts. A line chart traces confirmed cases over time, with red dots and interactive tooltips showing exact dates and counts. Below it, a stacked bar chart breaks down the same data into confirmed, cured, and death categories. The visualization loads data from a remote CSV via `d3.csv`, uses `d3.scaleTime` and `d3.scaleLinear` for axes, and renders with SVG paths, circles, and animated tooltip transitions.

Mmdadeebfarhaan@gmail.com

80% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes global COVID-19 statistics, using position to show the number of confirmed cases, deaths, and recoveries across countries. The plot is created with a custom `scatterPlot` function built on the D3 v6 module and is rendered as an SVG with animated transitions. It dynamically rotates between two data-pair views every two seconds, filtering out extreme outliers for readability. Color encoding and symbol shapes represent a binary high/low category based on whether a country's confirmed cases exceed the median, and a three-button navigation panel provides access to additional chart types.

HHARISH ARMUGAM

80% match

Loading thumbnail…

13

This example presents a comparative analysis of COVID-19 data for India using two D3.js v7 charts. A scatter plot maps confirmed cases against deaths for states, while an area chart tracks confirmed cases over time for Kerala. The code loads data from a remote CSV file, using `d3.csv`, and employs SVG rendering with `d3.axisBottom` for the scatter plot and `d3.area` for the time series.

Hharisankarakeluth@my.unt.edu

80% 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

80% match

Loading thumbnail…

Fork of Area Chart ice 7

This area chart visualizes daily COVID-19 cases over time, with dates on the x-axis and case counts on the y-axis. The data is loaded from a CSV file via `d3.csv` and parsed using `d3.timeParse`. The chart is rendered as an SVG, using `d3.area` to generate the filled path and `d3.scaleTime`/`d3.scaleLinear` for the axes, which are drawn with `d3.axisBottom` and `d3.axisLeft`. The chart includes axis labels for "Date" and "Cases."

MM Hema

80% match