Skip to main content
SimilarExport ZIP
100%

Chart 4

✓ Published0🌍 Public
Rramsrinivaskatragadda@my.unt.edu
Last edited Apr 26, 2024
Created on Apr 26, 2024
Forked from 3

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.

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…

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

3

This heat map visualizes agricultural yield and confirmed COVID-19 cases across months, using a dual-row layout with a shared monthly x-axis. Each row encodes one variable—Yield above, Confirmed below—with color intensity mapped through `d3.scaleSequential` and `d3.interpolateInferno`. The code loads CSV data from GitHub via `d3.csv`, extracts months from dates, and renders SVG rectangles with `d3.axisBottom` and `d3.axisLeft` for axes. A mouseover tooltip displays row values, and a legend with `d3.scaleLinear` and `d3.axisBottom` clarifies the color scale.

Vvjc5505@gmail.com
90% 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
83% match
Loading thumbnail…

Fork of Q2

This scatterplot visualizes the relationship between crop yield and COVID-19 confirmed cases across multiple data points, with each blue dot representing a country or region. The visualization uses d3.csv to load data from a GitHub repository, d3.scaleLinear for both axes, and d3.axisBottom/axisLeft for tick marks. Circles are appended with D3’s selection API, and mouseover/mouseout events trigger a simple HTML tooltip showing the exact values. A static legend and axis labels clarify the quantitative comparison between agricultural output and pandemic impact.

Vvjc5505@gmail.com
77% 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
75% match
Loading thumbnail…

Heatmap in D3

This heatmap visualizes monthly COVID-19 cases across Scandinavian countries for 2020, using a blue sequential color scale to encode case counts per country-month combination. The SVG chart, built with D3 v7, reads CSV data from a GitHub gist and renders axes, labels, and tooltips. It uses `d3.scaleBand` for positioning, `d3.scaleSequential` with `d3.interpolateBlues` for coloring, and the d3-legend plugin for the color legend.

Kkfhujosefsson@dons.usfca.edu
75% 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
74% match
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
74% match