Fork of Making a Bar Chart

100%

Fork of Making a Bar Chart

✓ Published0🌍 Public

Last edited Jun 1, 2021

Created on May 31, 2021

This chart visualizes daily COVID-19 death totals over time, derived from the Johns Hopkins CSSE time-series dataset. The line chart plots dates on the x-axis against cumulative global deaths on the y-axis. The code uses React to manage the component lifecycle, with `useData` fetching the CSV via `d3.csv` and transforming it using `timeParse` and array methods. The rendered line is drawn as an SVG path within a React-based `LineChart` component.

AI-generated description

This bar chart shows population of 10 most populos countris.The data comes from the year 2018 estimate in United Nations:World Population Prospects 2017.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Global Coronavirus Deaths

A line chart displays cumulative global COVID-19 deaths over time, using data from the Johns Hopkins Coronavirus Dataset. The chart maps dates to the x-axis and death totals to the y-axis via `scaleTime` and `scaleLinear`, with the line generated by `d3.line`. React components handle the SVG rendering, while `useData` fetches and transforms the CSV with `d3.csv` and `timeParse`. Reference marker lines are defined but not currently invoked.

Ssenilefork

88% match

Loading thumbnail…

Fork of Global Coronavirus Deaths

This chart displays cumulative global COVID-19 deaths over time using data from the Johns Hopkins Coronavirus Dataset. A bold black line traces the daily total, with a dashed marker at the 10,000-death threshold and a vertical line highlighting the most recent date. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `line` to generate an SVG path. The CSV data is fetched via `d3.csv` and transformed to sum deaths across all countries for each date.

Zzwang1010

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

86% match

Loading thumbnail…

Fork of Fork of CORONAVIRUS LINE CHART

A line chart visualizes the global cumulative COVID-19 death toll over time, using a red background and a thick black line. The chart includes horizontal and vertical marker lines at the one million death threshold and at the latest date. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `line` generators, pulling data from the CSSEGISandData COVID-19 time-series CSV. The SVG rendering relies on React components for the marker lines and a `useData` hook for asynchronous CSV parsing and transformation.

Jjesramyep1263

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

85% match

Loading thumbnail…

Fork of Coronavirus Basic Line Chart With 10,000 Marker Line

A line chart tracks cumulative global COVID-19 deaths over time, with a horizontal marker line at 10,000 deaths. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `line` generators to map dates and death totals, rendering an SVG path with a thick black stroke. The marker line is drawn as a separate SVG `<line>` element, while the React component structure (via `useData`) loads the Johns Hopkins CSSE time-series CSV, aggregating daily death sums. The X-axis is delegated to a separate component using `d3.select`.

KKonJoDot

85% match

Loading thumbnail…

Fork of CORONAVIRUS LINE CHART

This chart displays global COVID-19 death totals over time using a red SVG background and a thick black line. It uses `d3.scaleTime` and `d3.scaleLinear` to map dates and cumulative deaths, while `d3.line` generates the path. Two custom React components, `YMarkerLine` and `XMarkerLine`, draw reference lines at the 1,000,000 death mark and at the latest date, respectively. Data comes from the CSSE COVID-19 time series CSV loaded via `d3.csv`.

Jjesramyep1263

85% match

Loading thumbnail…

Fork of Coronavirus Linear Y Axis

This line chart displays the cumulative total of COVID-19 deaths over time using a linear y-axis scale. It fetches data from the Johns Hopkins Coronavirus time-series dataset via `d3.csv` and aggregates daily death totals. The chart is rendered with React (version 16.9) and SVG, using `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Gridlines are drawn by setting `tickSize` on the axes, and the chart fills the entire browser window, updating responsively.

CCheng Tang

85% match