Skip to main content
SimilarExport ZIP
100%

Chart 3

✓ Published0🌍 Public
Rramsrinivaskatragadda@my.unt.edu
Last edited Apr 25, 2024
Created on Apr 25, 2024

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.

AI-generated description

A responsive bar chart.

MIT Licensed

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
85% match
Loading thumbnail…

4

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.

Vvjc5505@gmail.com
80% match
Loading thumbnail…

Chart2

A scatter plot visualizes the relationship between crop yield and COVID-19 confirmed cases, with each point representing a data record. The code loads CSV data via `d3.csv`, scales values with `d3.scaleLinear`, and renders circles as SVG elements. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with labels and a simple legend included. The visualization uses a blue dot style with 60% fill opacity, showcasing the correlation between agricultural productivity and pandemic impact across the dataset.

Rramsrinivaskatragadda@my.unt.edu
76% match
Loading thumbnail…

Chart 4

This heat map compares monthly COVID-19 confirmed cases against agricultural yield, with the x-axis showing months and the y-axis two categories: "Yield" and "Confirmed." The color encoding uses the D3 sequential Inferno scale (`d3.interpolateInferno`) to map numeric values. Built with D3 v6 and SVG, the chart loads data from a remote CSV using `d3.csv`, applies band scales (`d3.scaleBand`) for positioning, and includes axes, a legend, and mouseover tooltips to display exact month, yield, and case numbers.

Rramsrinivaskatragadda@my.unt.edu
75% match
Loading thumbnail…

Chart 4

A heat map visualizes COVID-19 confirmed cases and agricultural yield across months. Using d3.csv, it loads data from a GitHub gist and renders SVG rectangles with d3.scaleBand for axes and d3.scaleSequential with the interpolateInferno color scheme. The chart includes month and category axes via d3.axisBottom and d3.axisLeft, plus a custom legend showing high, intermediate, and low values.

Rramsrinivaskatragadda@my.unt.edu
75% 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
72% match
Loading thumbnail…

13

This example presents a comparative analysis of COVID-19 data for India using two D3.js v7 charts. A scatter plot maps confirmed cases against deaths for states, while an area chart tracks confirmed cases over time for Kerala. The code loads data from a remote CSV file, using `d3.csv`, and employs SVG rendering with `d3.axisBottom` for the scatter plot and `d3.area` for the time series.

Hharisankarakeluth@my.unt.edu
72% match
Loading thumbnail…

12

A line chart and a stacked bar chart display COVID-19 confirmed, cured, and death cases in Kerala, India, from a CSV dataset. The line chart plots confirmed cases over time, while the stacked bar chart shows the cumulative breakdown of outcomes. Both charts use D3.js v7, employing `d3.csv`, `d3.scaleTime`, `d3.scaleBand`, `d3.line`, and `d3.axisBottom` with SVG rendering. The visualization is static, with rotated date labels and axis titles.

Hharisankarakeluth@my.unt.edu
72% match