SmallPox Death cases

100%

SmallPox Death cases

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

This example visualizes the number of smallpox death cases recorded between 1950 and 1970 using a green line chart rendered as SVG. The chart employs D3.js scales, with `d3.scaleBand` mapping years to the x-axis and `d3.scaleLinear` mapping death counts to the y-axis. The line path is generated using `d3.line`, with data loaded from a CSV file via `d3.csv`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, and the chart is embedded in a React page.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Q4ICE7

This chart visualizes the number of smallpox death cases each year between 1950 and 1970. A green area under a solid black line, rendered as SVG, shows the trend over time. The visualization uses D3 v5 to load and parse CSV data, apply linear scales for both axes, and generate the smoothed line and area paths using `line()`, `area()`, and `curveBasis()`. Axis components are built with `axisBottom()` and `axisLeft()`.

Pprathyusha-reddy-arch

84% match

Loading thumbnail…

51) React + D3 Axes

This example shows the global cumulative death toll from the early COVID-19 pandemic as a time-series line chart, with horizontal and vertical marker lines highlighting the 10,000-death threshold and the most recent date. Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to generate an SVG path, while custom React components render the marker lines. D3’s `axisBottom` and `select` handle the gridlines and tick labels. Data is loaded as CSV from a Johns Hopkins repository and transformed with `d3.csv` and `timeParse`.

Llefat92

74% match

Loading thumbnail…

Visualization Labels

This example displays the global cumulative death toll from COVID-19 over time as a single black line on a log-scaled y-axis, with labeled axes and a title. The chart uses React to render an SVG and relies on `d3.scaleTime`, `d3.scaleLog`, and `d3.line` for data mapping and path generation, while `d3.axisBottom` and `d3.axisLeft` create the gridlines. Data comes from the JHU CSSE COVID-19 time-series CSV, aggregated daily across all countries, with deaths counted from the start of the outbreak.

NNikita Toropov

74% match

Loading thumbnail…

React + D3 Axes

This example shows the global cumulative death toll from COVID-19 over time, rendered as a line chart with React and D3. A horizontal reference line marks the 6.5 million death threshold, while a vertical line highlights a specific date, labeled with its formatted value. The chart uses d3’s `scaleTime`, `scaleLinear`, and `line` to map the data, while a custom `XAxis` component leverages `axisBottom` for tick generation. The raw data is fetched from a CSV hosted by the CSSE at Johns Hopkins.

NNikita Toropov

73% match

Loading thumbnail…

680 Assignment

This example presents a line chart tracking the cumulative total of COVID-19 deaths over time, based on the Johns Hopkins Coronavirus dataset. The visualization uses D3 v5 within a React framework to render an SVG path, with a time-scaled x-axis and linear y-axis. Axis components are built using `d3.axisBottom` and `d3.axisLeft`, while gridlines and markers are drawn as separate React components. The data is loaded via `d3.csv` and transformed to daily death totals.

KKofi Adu-Gyan

73% match

Loading thumbnail…

Scientific Data Visualization ICE-6 Working with react and d3.js

This visualization displays the cumulative Monkey Pox cases for the top 20 countries, using a horizontal bar chart rendered as an SVG. The chart employs React’s `useState` and `useEffect` hooks to asynchronously fetch CSV data via `d3.csv`, then maps each country’s population count to bar widths using `d3.scaleBand` and `d3.scaleLinear` for the y- and x-axes. Gridlines and ticks are generated with `d3.scaleLinear.ticks`, and all visual elements are constructed through React DOM creation. The bars are styled pink via CSS, with blue axis labels and red gridlines.

SSravyaAnnadi

73% match

Loading thumbnail…

use d3 Axis Coronavirus data

This example presents a line chart of cumulative global COVID-19 deaths over time, sourced from the Johns Hopkins CSSE time-series dataset. Using React with D3 v7, it maps dates to a time scale and death totals to a linear scale, rendered as an SVG path. Custom XAxis and YAxis components leverage d3.axisBottom and d3.axisLeft with gridlines, while the chart’s axes and line are styled via CSS. The visualization resizes to the window dimensions and updates through a loading state while fetching CSV data.

BBlake McCarty

73% match

Loading thumbnail…

Visualization Labels

This example shows a line chart tracking cumulative global COVID-19 deaths over time, with a logarithmic y-axis and clearly labeled axes. The visualization uses D3 v7’s `scaleTime`, `scaleLog`, and `line` generators within a React component, rendering to SVG. Axis components built with `axisBottom` and `axisLeft` include grid lines and formatted tick labels. Data is loaded via `d3.csv` from a Johns Hopkins CSSE time-series dataset, then transformed into date and death-total pairs. The chart also demonstrates custom text labels for the title and axes, styled with CSS.

SSerind Joshua McCue

73% match