Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published0🌍 Public
CChandra Prakash Reddy Kalwakolu
Last edited Apr 22, 2024
Created on Apr 22, 2024
Forked from Hello VizHub

This visualization displays merged time-series data for COVID-19 cases and accident counts from two Google Drive-hosted CSV files, showing both trends as smooth lines in a single SVG chart. Using D3 v7’s `d3.csv` for data loading, `d3.timeParse` for date conversion, and `d3.scaleTime` with `d3.axisBottom` and `d3.axisLeft` for axes, the code merges records by date and draws lines with `d3.line` and `d3.curveMonotoneX`. The steelblue line represents COVID cases while the green line shows accidents, with data processed through a `Promise.all` merge and local ES6 modules.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hello VizHub

This visualization shows COVID-19 confirmed cases over time as a line chart, with dates on the x-axis and case counts on the y-axis. It loads data from a CSV file hosted on GitHub and renders an SVG path using `d3.line` and `d3.csv`. The code uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to construct the axes, with styling applied via the `stroke` attribute. The example demonstrates D3 v6 loading via UNPKG.

Vvjc5505@gmail.com
86% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example shows a scatter plot of global road accidents from 2015 to 2020, with each circle representing a year’s accident count and colored by accident severity (green, orange, red for Low, Medium, High). The plot uses D3 v6 to load a CSV file via `d3.csv`, then builds an SVG with linear scales for the x- and y-axes (`d3.scaleLinear`), ordinal color mapping (`d3.scaleOrdinal`), and axis generators (`d3.axisBottom`, `d3.axisLeft`). Circles are appended and positioned using the scales, with a legend added manually alongside the axes. The data source is a global road accident CSV, and rendering is entirely SVG-based.

Llikhithakarunakarreddym@gmail.com
80% match
Loading thumbnail…

Fork of Hello VizHub

This example shows an area chart of time-series data from a diabetes CSV file, with a steelblue fill and labeled axes for date and value. It loads D3 via UNPKG and uses the `d3.csv` method to fetch the data, `d3.scaleTime` and `d3.scaleLinear` for scaling, `d3.area` for the area shape, and `d3.axisBottom` and `d3.axisLeft` for axes. The visualization also demonstrates ES6 module imports, including a local `message` module that sets text in the page, while the chart is rendered as SVG inside a dedicated `#chart` div.

LLakshmiPrasannaValdas@my.unt.edu
78% match
Loading thumbnail…

Fork of A7_Multi-line Chart

This fork of a multi-line chart visualizes COVID-19 case counts over time, showing a green line with circular points for each date. It uses D3 v7 with an SVG rendering, employing `d3.scaleBand` for the date axis and `d3.scaleLinear` for the case count axis, plus `d3.line` and `d3.axisBottom`/`d3.axisLeft` to generate the chart. Data is loaded from a remote CSV file containing date and case columns, with the line chart displaying a clear trend of rising cases across the period.

MM Hema
78% match
Loading thumbnail…

Fork of Hello VizHub

This area chart visualizes a dataset loaded from a CSV file hosted on GitHub. The chart displays values over time, with dates parsed via `d3.timeParse` and a linear scale for the y-axis. The area path is generated using `d3.area` and rendered as a steelblue SVG path. Axes are created with `d3.axisBottom` and `d3.axisLeft`, and the chart is built with D3 v7.

SSeema Shrestha
77% match
Loading thumbnail…

Fork of Fork

This visualization uses D3.js to plot COVID-19 data from a WHO global dataset, showing total cases against total deaths for each country as individual circles. The scatter plot uses D3's `csv` loader and `scaleLinear` functions to map the data, with axes labeled "Total Cases" and "Total Deaths." Circles are rendered in steelblue, and the chart is drawn as an SVG in a React application. The code defines its own width, height, and margins, using D3's `axisBottom` and `axisLeft` to generate the axes.

66264kusuma@gmail.com
77% match
Loading thumbnail…

Fork of HTML Starter

This example displays the progression of confirmed COVID-19 cases over time as a line chart. It uses D3.js v6 (d3.csv, d3.scaleTime, d3.scaleLinear, d3.line, d3.axisBottom, d3.axisLeft) and is rendered as an SVG within a React-based HTML page. The data is loaded from a GitHub-hosted CSV file, with dates parsed using d3.timeParse. The chart includes labeled axes, a tooltip, and a styled orange line, all set against a white background.

KKELUTH HARI SANKARA KOTESWARA LAL
77% match
Loading thumbnail…

Fork of Task8

This visualization displays the trend of confirmed COVID-19 cases over time as a line chart, with the x-axis representing dates and the y-axis showing the cumulative number of cases. The code loads data from a CSV file hosted on GitHub, parses the date and numeric fields, and uses D3 v6 scales and axes (d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft) to render the SVG plot. A single orange path is drawn using d3.line, with axis labels added via text elements.

KKELUTH HARI SANKARA KOTESWARA LAL
76% match