ice7

100%

✓ Published0🌍 Public

Last edited Mar 27, 2024

Created on Mar 27, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

86% match

Loading thumbnail…

ICE 7 Snehith Part-1

A static scatter plot visualizes COVID-19 active cases per country, with each country as a colored circle on a categorical x-axis and a linear y-axis scaled by active case counts. The chart, built with D3.js v7, renders as SVG and loads data from a remote CSV file. Circles enlarge and display a country-specific tooltip on mouseover, while a legend lists all countries. The visualization uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors.

Ssai snehith nadipally

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

85% match

Loading thumbnail…

ICE7 Line Chart 11540905

This line chart displays the cumulative COVID-19 case counts across nine countries over time, with the x-axis representing total cases and the y-axis showing countries. The visualization uses D3 v5 with an SVG canvas, employing `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to render the axis and path. Data is loaded from a remote CSV file via `csv()`, with values parsed and scaled before being drawn as a single red line path.

Nnagasai-gummadi

83% match

Loading thumbnail…

ice 6

A horizontal bar chart displays the top 10 countries by COVID-19 case counts, with countries listed on the y-axis and case numbers on the x-axis. The visualization uses React to manage state and render SVG elements, while D3 v5 functions like `csv`, `scaleBand`, and `scaleLinear` handle data loading, scaling, and axis ticks. Data is fetched from a GitHub-hosted CSV file.

Bbhargavarathod

82% match

Loading thumbnail…

ICE-6 - Scatter Plot - 11629157

This example shows the total COVID-19 cases for the top 20 countries as horizontal bars, with each bar’s length proportional to the case count. The visualization uses React with a state hook to fetch and parse a CSV file via `d3.csv`, then renders an SVG using `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numerical case axis. Grid lines and tick labels are drawn manually with `d3.axisBottom`-style logic, while the bars themselves are simple SVG rectangles positioned using the computed scales.

NNiharika-Guthikonda

82% match