Skip to main content
SimilarExport ZIP
100%

Fork of country

✓ Published0🌍 Public
Rrushithareddyy
Last edited Jul 21, 2023
Created on Jul 21, 2023

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork

This visualization uses D3.js to plot COVID-19 data from a WHO global dataset, showing total cases against total deaths for each country as individual circles. The scatter plot uses D3's `csv` loader and `scaleLinear` functions to map the data, with axes labeled "Total Cases" and "Total Deaths." Circles are rendered in steelblue, and the chart is drawn as an SVG in a React application. The code defines its own width, height, and margins, using D3's `axisBottom` and `axisLeft` to generate the axes.

66264kusuma@gmail.com
89% match
Loading thumbnail…

A2Q3

This interactive scatterplot visualizes COVID-19 metrics across countries by continent, plotting selectable attributes from the Covid World May Data CSV on x- and y-axes. Users can compare new cases, total cases, and death counts, with points colored by continent via a legend. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and `extent` for scaling, while SVG circles render the data and dropdown menus control axis selection.

MmNamratha25
88% match
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes COVID-19 total cases over time for nine countries, with each country represented by a distinct color. Hovering over a legend item highlights that country’s data points while fading all others. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color mapping. The data comes from the JHU COVID-19 dataset loaded via `d3.csv`, rendered as SVG circles with hover-driven opacity changes through React state.

Aamanoakane
87% match
Loading thumbnail…

fork country

This interactive scatterplot explores global health indicators across countries, plotting health expenditure against life expectancy with each point colored by continent. Users select which attribute appears on each axis via dropdown menus, and hovering over the color legend highlights points from that continent while fading others. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding, and renders all marks as SVG circles with opacity transitions. Data is loaded as CSV from a GitHub gist.

Rrushithareddyy
87% match
Loading thumbnail…

Fork of Bonus ICE Scatter plot using D3.js

This 3D scatter plot visualizes COVID-19 data across countries, showing two traces: one plotting cured cases against dead cases, and another plotting active cases against dead cases. The visualization uses Plotly’s `scatter3d` type within `Plotly.newPlot`, with D3.js handling CSV data loading via `d3.csv` and the `unpack` function to extract columns. Data originates from a GitHub-hosted CSV file containing per-country case counts, rendered as colored markers with configurable opacity and line styling in a minimal HTML page.

Pprathyusha-reddy-arch
84% match
Loading thumbnail…

Fork of ICE-7 : Reusable Scatter Plot

This scatter plot visualizes COVID-19 total cases against total deaths, with each country represented by a symbol scaled according to a 100-pixel size. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` APIs to render SVG marks and axes. Data loads from a GitHub-hosted CSV via `d3.csv`, with margins and dimensions set dynamically to the window size. The reusable `scatterPlot` function exposes configuration methods for data, value accessors, and dimensions.

MM Hema
84% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 20 countries by COVID-19 case counts (from the "1/28/20" column of a CSV dataset) as a horizontal bar chart. Using React components with D3.js, it renders SVG rectangles whose widths are scaled by `d3.scaleLinear` against the maximum population value and positions the bars along a categorical `d3.scaleBand` axis for country names. D3’s `csv` loader fetches remote data, while axis ticks and labels are generated manually with `xScale.ticks()`. The chart is drawn within a 960×500 SVG canvas, with margins and inner plot dimensions defined by constants.

Sskambhore04
84% match
Loading thumbnail…

Fork of Fork of Box Plot

This example shows box plots for new COVID-19 cases by country, displaying minimum, first quartile, median, third quartile, and maximum values derived from a CSV dataset. The chart uses the D3 `scaleBand` and `scaleLinear` functions for positioning, with React components rendering each plot element as SVG. The data is aggregated using D3’s `nest`, `quantile`, and `rollup` functions, and the visualization is inspired by a D3 graph gallery example. Axis ticks are generated separately with custom React axis components.

Vvryvarma5577@gmail.com
83% match