Learning D3 again

100%

Learning D3 again

✓ Published0🌍 Public

Last edited Nov 9, 2021

Created on Nov 9, 2021

This example plots daily new COVID-19 deaths in Fortaleza, Brazil, as a scatterplot. A time-scaled x-axis shows the date range, while a linear y-axis maps the count of new deaths, with each data point rendered as a small circle. The visualization uses the D3 version 7 API, including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart, and fetches its data from a CSV hosted in a GitHub gist, with parsing handled by D3's `csv` function. The SVG scene is generated dynamically based on the browser window's dimensions.

AI-generated description

Plotting graphs from Covid-19 Cases in Brazil, with data from Wesley Cota github repo

MIT Licensed

Similar vizzes

Loading thumbnail…

Covid-19 Brasil

A scatterplot of cumulative COVID-19 deaths over time for each Brazilian state, drawn as small circles. The chart uses D3’s `scaleTime` and `scaleLinear` for axes, with `axisBottom` and `axisLeft` for ticks, and renders in SVG. Data comes from the Wesley Cota GitHub repository’s `cases-brazil-states.csv`, fetched and parsed via a custom `fetchData` function using `d3.csv` and `timeParse`. The visualization highlights the growth trajectory of deaths across states without distinguishing them, showing overall pandemic impact.

GGabriel Dantas

82% match

Loading thumbnail…

covid data viz

This example plots COVID-19 data from the Our World in Data CSV as a scatterplot, with new cases on the x-axis and deaths on the y-axis. It uses D3 v7 to load the CSV, slice the dataset to a manageable subset, and append circles to an SVG. The code samples the raw data by taking every thousandth row, and scales the plot area with fixed margins, though the scales are incomplete.

NNita

78% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes CDC COVID-19 data, plotting daily new deaths against new cases, with each point representing a 14-day moving average. The chart reveals a general correlation where more infected cases correspond to more deaths. Built with D3 v6, the visualization uses `d3.csv` to load the dataset and `d3.scaleLinear` to map values to screen coordinates, with points rendered as SVG circles. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, and the chart fills the entire browser window.

VVonnie

78% match

Loading thumbnail…

COVID-19

This D3.js visualization shows the progression of COVID-19 cases, deaths, and recoveries over time for a selected country. Users choose a status metric and country via dropdown menus, and the chart displays a smooth line chart of that metric against observation dates. The code uses D3 v5 methods like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. Data is loaded from a CSV file and aggregated by country and day using `nest` and a custom `groupByDay` function.

WW9183907

75% match

Loading thumbnail…

01_covid19_flag_20210203

A horizontal bar chart displays the seven-day average of COVID-19 deaths per Brazilian state, sorted in descending order. The chart uses d3.scaleLinear for the x-axis, d3.scaleBand for the categorical y-axis, and renders SVG rectangles. Data comes from a local CSV file parsed with d3.csv, with axes styled using d3.axisLeft and d3.axisBottom.

RRodolfo Viana

75% match

Loading thumbnail…

Line Chart With Marker Lines and D3 Axes

This example visualizes global COVID-19 deaths over time as a line chart, with a horizontal marker line at six million deaths and a vertical marker at the most recent date. The chart uses React components wrapping D3 scales and axes, including `scaleTime`, `scaleLinear`, and `axisBottom` for gridlines. Data is loaded from a CSV file and aggregated by day from the CSSE COVID-19 dataset. Rendering uses SVG paths generated by D3's `line` generator.

OOleg Zhernovoy

74% match

Loading thumbnail…

CoronaVirus Linear Chart

Using D3 v5 within a React component, this chart visualizes global cumulative COVID-19 deaths over time from the JHU CSSE dataset. A single SVG line path traces the rising death totals, with gridlines and labeled axes generated by `d3.axisBottom` and `d3.axisLeft`. The code scales dates with `d3.scaleTime` and death counts with `d3.scaleLinear`, fetching data via `d3.csv` and formatting it with custom parsing and reduction logic.

AAmir

74% match

Loading thumbnail…

TEST

Daily COVID-19 deaths by country are plotted over time on a logarithmic y-axis, with each country shown as a line. Hovering over the chart highlights the nearest line and displays a tooltip with the country, death total, and date, using a Voronoi overlay built with `d3.Delaunay`. The data comes from the Johns Hopkins Coronavirus Dataset and is smoothed with a repeated averaging blur. The React-based visualization uses D3 scales, axes, and line generators, rendering to SVG.

Zzhangwbhi

74% match