4 — VizHub

100%

4

✓ Published0🌍 Public

Last edited Apr 24, 2024

Created on Apr 24, 2024

This example visualizes COVID-19 confirmed cases in Uttarakhand over time as a line chart, with interactive tooltips on data points. It uses D3 v6’s `d3.csv` to load data from a remote GitHub repository, `d3.timeParse` and `d3.scaleTime` for date handling, and `d3.line` to generate the SVG path. The chart renders axes via `d3.axisBottom` and `d3.axisLeft`, adds a legend, and displays a tooltip on mouseover using D3 transitions. The line and points are styled with steelblue, and the SVG output includes animation-ready elements.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Responsive Bar Chart

This fork of a D3.js v6 bar chart visualizes the relationship between COVID-19 confirmed cases and agriculture yield in Uttarakhand over time. It uses a dual-axis line chart with red and blue paths, and includes a legend. The code loads CSV data from a GitHub repository, parses dates with d3.timeParse, and renders the visualization as an SVG. The chart relies on d3.scaleTime and d3.scaleLinear for axes, and d3.axisBottom, d3.axisLeft, and d3.axisRight for tick marks, with a responsive layout defined by margin and size variables.

Vvjc5505@gmail.com

82% match

Loading thumbnail…

Chart 3

A dual-axis line chart compares daily COVID-19 case counts against agricultural yield over time for the Indian state of Uttarakhand. The chart uses red and blue lines with corresponding left and right axes, and a legend to distinguish the metrics. It is built with D3 v6, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`/`d3.axisRight` to render SVG axes and paths. Data is loaded as CSV from a gist, with date parsing and numeric conversion performed inline.

Rramsrinivaskatragadda@my.unt.edu

80% match

Loading thumbnail…

Chart 1

This visualization displays the progression of confirmed COVID-19 cases over time as a single orange line chart. The x-axis maps dates using `d3.scaleTime`, while the y-axis uses `d3.scaleLinear` to represent case counts. Data is loaded via `d3.csv` from a GitHub gist and parsed with `d3.timeParse`. The line is rendered with `d3.line`, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`. The SVG structure is built with D3 v6, with explicit margins, axis labels, and a white background.

Rramsrinivaskatragadda@my.unt.edu

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…

2nd chart

This chart displays the total COVID-19 cases over time as a single steelblue line, with time on the x-axis and case counts on the y-axis. The visualization is built with the D3 version 6 library, using an SVG rendering approach. The code employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to map data, and `d3.axisBottom` and `d3.axisLeft` for axes, with a rotated y-axis label. The dataset is loaded from a CSV file hosted on GitHub, supplied by the author Harisankara000.

Hharisankarakeluth@my.unt.edu

77% match

Loading thumbnail…

Untitled

This visualization displays COVID-19 total cases by location using a bar chart rendered with SVG. It loads data from a CSV file via d3.csv, then uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, with a fixed domain of 0 to 13. The bars are drawn as rectangles with a teal fill, and axis labels are rotated for readability. The chart is built with d3.v4 within a React framework, though the core logic is plain D3 JavaScript.

Bbhargav83

77% match

Loading thumbnail…

Covid_1

This example visualizes COVID-19 new cases from a cleaned CSV file, showing a cumulative sum line chart for a selected date. Buttons generated from all available dates let users switch between dates, and the chart updates to display the cumulative case total for that day. The visualization loads data via `d3.csv`, parses dates with `d3.timeParse`, and renders an SVG line using `d3.line` with `d3.scaleTime` and `d3.scaleLinear` axes. It demonstrates D3 v6 event handling, data filtering, and dynamic SVG updates.

LLakshmi Keerthi

77% match

Loading thumbnail…

Working with Time

This scatter plot visualizes COVID-19 data, showing the daily increase in positive cases (y-axis) against time (x-axis) as a series of circular marks. The visualization uses React to render SVG elements, with D3 v5 scales including `scaleTime` and `scaleLinear` to map data to coordinates. The code employs `d3.csv` for data loading from a GitHub-hosted CSV file, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Each circle includes a native SVG `<title>` element for tooltips displaying formatted dates, and the chart is styled with the Poppins font.

Aanduskong

77% match