Fork of Bonus ICE Scatter plot using D3.js

100%

Fork of Bonus ICE Scatter plot using D3.js

✓ Published0🌍 Public

Last edited Apr 4, 2023

Created on Apr 4, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Fork of 3D Scatter Plot

This 3D scatter plot visualizes COVID-19 data from a CSV file, plotting positive cases, recovered cases, and negative cases for one trace, with a second trace comparing positive and recovered cases against currently hospitalized patients. The visualization uses Plotly's `scatter3d` chart type within a `Plotly.newPlot` call, leveraging the D3.js library's `d3.csv` function to parse and populate the data from the `covid.csv` file. Each marker is styled with a distinct color and size, with the layout margins set to zero for a clean presentation.

Bbugfree55

88% match

Loading thumbnail…

Fork of Bonus ICE Scatter plot using D3.js

This example visualizes heart patient statistics across countries using an interactive 3D scatter plot. It displays two traces: death cases in red and active cases in blue, plotted against country name and patient category. The visualization uses Plotly.js within an HTML page, loading data from a CSV file via D3.js’s `d3.csv` function. D3’s `unpack` helper extracts columns for the x, y, and z axes, while Plotly’s `newPlot` renders the scatter3d chart with custom marker styling and opacity.

SSurikanti Swathi

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

84% match

Loading thumbnail…

Fork of Fork of ICE-7 : Reusable Scatter Plot

This example visualizes COVID-19 data by plotting countries against death counts using a reusable scatter plot. It employs D3 v6 to load CSV data, scale axes with `scaleLinear`, and render marks via `symbol` and `symbols` for varied point shapes. The chart’s axes are generated with `axisLeft` and `axisBottom`, while margins and dimensions are configured through a custom `scatterPlot` function. The visualization is built with SVG, and the `d3.csv` module fetches the dataset from a remote URL. The code demonstrates a modular pattern where the plot function accepts configurable accessors for x, y, and symbol values, making it reusable.

MM Hema

84% match

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

83% match

Loading thumbnail…

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

This visualization displays COVID-19 data for 20 countries as a horizontal bar chart, with each bar’s length encoding the reported case count. Built using React and D3 v5, it loads CSV data via `d3.csv` and renders SVG elements. Scales are created with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, while gridlines and tick labels are drawn manually using React components. The chart updates asynchronously as data loads, showing a “Loading...” message initially.

Bbindhureddy98

83% match

Loading thumbnail…

Bonus ICE 11554625

This example visualizes COVID-19 case counts for multiple countries across the years 2019–2023 as a multi-series 3D bar chart. It renders the data using the d3-x3d library, which combines D3.js v5 with X3DOM for WebGL-based 3D graphics. The visualization reads CSV data from a GitHub gist, parses it with `d3.csv`, and binds it to the chart via the `datum()` method. The chart is displayed inside an HTML div with styling, allowing interactive rotation and exploration of the three-dimensional bars representing case numbers.

MManohar Kowthavarapu

83% match