scatter plot and area chart

100%

scatter plot and area chart

✓ Published0🌍 Public

Last edited Apr 26, 2024

Created on Apr 26, 2024

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.

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…

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

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

85% match

Loading thumbnail…

data visulalization Scatter Plot

This scatter plot visualizes COVID-19 cases by country, plotting total deaths against total cases. Each circle represents a country, with color encoding the continent, and the plot includes axes, labels, and a legend. The code loads CSV data from a GitHub repository, uses D3 v7 scales and SVG rendering to position the circles, and employs `d3.axisBottom` and `d3.axisLeft` to generate the axes.

Bbudalavijay2001@gmail.com

82% match

Loading thumbnail…

Scatter Plot for Covid

This scatter plot visualizes COVID-19 data for the top 10 countries, showing the relationship between total cases and total deaths. The visualization uses D3.js v7 with SVG rendering to display circles for each country, where the x-axis represents total cases and the y-axis represents total deaths. The code loads CSV data from a GitHub gist, processes it with JavaScript array methods, and uses d3.scaleLinear to create scales for both axes. Axis labels and grid lines are generated using d3.axisBottom and d3.axisLeft, with margins defining the plot area.

MM Hema

80% match

Loading thumbnail…

Scatter Plot 2

A scatter plot displays the relationship between confirmed and active COVID-19 cases, with each circle representing a data point. The visualization uses React components to render SVG elements, with d3.scaleLinear managing the x and y scales. Axes are generated from array methods like xScale.ticks() and map(), while the data loads through d3.csv with multiplication applied to numeric values. The chart includes axis labels and tooltips showing formatted values using d3.format with SI notation.

NNikithakatta30

79% match

Loading thumbnail…

Simple Scatter Plot

This simple scatter plot visualizes COVID-19 data, mapping confirmed cases on the x-axis against deaths on the y-axis for each country. Each circle represents a country, with the plot revealing a strong positive correlation and one prominent outlier with over 110 million confirmed cases. The visualization uses D3's `scaleLinear`, `axisLeft`, and `extent` functions to create the scales and axes, while circles are rendered with SVG elements. The code leverages `@curran/axis-labels` for axis labeling, reading from a static CSV dataset.

Aabell@wpi.edu

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

79% match

Loading thumbnail…

Dv2_5_Reusable Scatter plot

A reusable scatter plot displays the relationship between COVID-19 deaths and cases per 100,000 people across US states, using rolling averages from the NY Times dataset. The visualization is constructed with D3.js version 6.7.0, employing the scatterPlot function to map data points as SVG circles with configurable radius and margins. The chart is rendered SVG in a browser, scaling axes via D3's scaleLinear, and using extent to compute data domains. Axis labels are generated with axisLeft and axisBottom, while the data is loaded asynchronously with D3's csv parser.

NNagateja99

79% match