Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7 : Reusable Scatter Plot

✓ Published0🌍 Public
MM Hema
Last edited Mar 28, 2024
Created on Mar 28, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

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
95% match
Loading thumbnail…

Fork of ICE-7 : Reusable Scatter Plot

This visualization uses D3 to render a reusable scatter plot of COVID-19 data, plotting each country’s population against itself while encoding the dataset’s SkinThickness column through symbol shapes. The chart displays axes for both variables, with points positioned using `scaleLinear` and `extent` for domains. The code relies on `d3.scaleOrdinal` to map symbol types and `d3.symbol` to generate the path data, while `axisLeft` and `axisBottom` add the scales. Data is loaded as CSV via `d3.csv`, and the plot is rendered as SVG with a custom margin and size configuration.

MM Hema
92% match
Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This example presents a reusable scatter plot of COVID-19 data, mapping countries along the x-axis and death counts along the y-axis. It utilizes the D3.js library (v7) within an SVG rendering context, demonstrating a modular component pattern via the `scatterPlot()` function. The main script asynchronously loads a CSV dataset using `d3.csv`, parses death values as numbers, and then invokes the chart with configurable accessors, margins, and point size. The visualization adapts to the full browser window by setting its width and height from `window.innerWidth` and `window.innerHeight`.

MM Hema
90% match
Loading thumbnail…

ice7

This visualization displays COVID-19 data as a scatterplot, plotting countries along the x-axis against their total case counts on the y-axis. It uses D3.js to load the CSV dataset, create SVG circles for each data point, and render axes with labels. The implementation relies on `scaleLinear` and `extent` for scaling, while the `observeResize` utility handles responsive dimensions. A separate `viz` module, built with D3’s `axisLeft` and custom axis helpers, manages the chart’s inner rendering, including a background rectangle and semi-transparent circles, with data sourced from a remote CSV file.

MM Hema
86% 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
85% 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 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…

Test Scatter Plot

This scatter plot visualizes COVID-19 data, comparing the number of cases and deaths for four countries. The chart uses SVG circles to represent each country, with D3.js’s `scaleLinear` and `extent` functions to map the data to axes, and `axisLeft` and `axisBottom` to render the labeled axes. The code imports `csv` to load the data from `data.csv` and applies D3 v6 to build the visualization, with a clear title and axis labels.

CChristine Lanser
83% match