Skip to main content
SimilarExport ZIP
100%

ICE 7 Snehith Part-1

✓ Published0🌍 Public
Ssai snehith nadipally
Last edited Mar 28, 2024
Created on Mar 28, 2024
Forked from Circles with D3

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Snehith part-3

This line chart visualizes COVID-19 confirmed cases across different countries using a single connected path. The x-axis lists country names with rotated labels, while the y-axis scales the number of confirmed cases. The code uses D3 v7's `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.line` to create the stroke. Data comes from an external CSV file hosted in a GitHub gist, and the chart renders as an SVG with rotated country labels and clear axis titles.

Ssai snehith nadipally
90% match
Loading thumbnail…

ICE-7 Snehith part-4

This area chart visualizes COVID-19 confirmed cases by country, with a steel-blue filled area representing case counts. The SVG chart uses D3.js v7 to load a CSV dataset, map it to a band scale for countries and a linear scale for confirmed cases, and generate the area path via `d3.area()`. Axis labels and rotated tick text are added with `d3.axisBottom` and `d3.axisLeft`, while the chart is rendered on a yellow background with fixed dimensions.

Ssai snehith nadipally
89% match
Loading thumbnail…

ICE-7 snehith Part-2

This pie chart visualizes COVID-19 death counts by country. The D3 v5 code loads a CSV dataset from a GitHub gist, then uses `d3.pie` and `d3.arc` to generate sliced paths, with `d3.scaleOrdinal` providing categorical colors. Each slice is labeled with its country name, and a legend built from SVG rectangles and text identifies color mappings. The chart is rendered as an SVG with a fixed width and height, positioned centrally within the container.

Ssai snehith nadipally
87% match
Loading thumbnail…

ICE6 snehith

This example visualizes COVID-19 confirmed cases for ten countries using a horizontal bar chart rendered as SVG with React and D3 v5. It shows each country's case count as a blue bar, with country labels on the y-axis and a linear scale on the x-axis. The code loads data from a CSV file via `d3.csv`, filters to the 22nd through 31st rows, and uses `scaleBand` and `scaleLinear` to map data to positions. React manages the component state and rendering, while D3 handles the scales and axis ticks. The visualization highlights the relative magnitude of cases across selected countries.

Ssai snehith nadipally
87% 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
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
82% match
Loading thumbnail…

Fork of ICE6 snehith

This example visualizes Covid-19 confirmed cases across nine countries using a horizontal bar chart, where bar lengths encode case counts. The code fetches data from a CSV file and renders the visualization with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. It manually draws grid lines and axis tick labels via D3’s `select` and mapping functions, while the bars are SVG `<rect>` elements. The visualization is fully controlled by React state, with the chart updating when new data loads, and the rendering is done entirely through SVG within a React component.

Ssai snehith nadipally
82% match
Loading thumbnail…

ICE-7 Pie Chart

This example displays a pie chart of COVID-19 active cases by country, rendering each segment with a distinct color and labeling its percentage share. The chart includes a legend that maps colors to country names and active case counts. Built with React and D3 v5, the visualization uses d3.pie, d3.arc, and d3.scaleOrdinal to generate SVG paths and text labels. Data is loaded asynchronously from a CSV file using d3.csv, with the chart centered in an 800x450 SVG canvas.

Mmanojgne
82% match