Skip to main content
SimilarExport ZIP
100%

3

✓ Published2🌍 Public
Vvjc5505@gmail.com
Last edited Apr 24, 2024
Created on Apr 22, 2024
Forked from Activity-6

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.

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

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
90% 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
89% 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
81% 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
79% match
Loading thumbnail…

D3 - Heatmap

This heatmap visualizes impact magnitudes across locations and months from January to September 2016, using color intensity to convey variation. The D3.js v7 code loads CSV data via `d3.csv`, maps locations and months to x- and y-axes using `d3.scaleBand`, and fills rectangles with the sequential `d3.interpolateViridis` color scale. The SVG rendering includes axis labels, a chart title, and a grey background, with the heatmap cells styled with rounded corners and white strokes.

CChandana Srinivas
77% 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
77% match
Loading thumbnail…

d3 Heatmap

This heatmap visualizes cardiovascular disease case counts across ten countries from 2018 to 2023. The SVG rendering uses D3.js version 7, specifically `d3.csv` to load external data and `d3.scaleSequential` with `d3.interpolateReds` to map case numbers to color intensity. Each cell represents a country-year combination, and hovering triggers a custom tooltip with detailed values. The legend shows a low-to-high gradient, while the dataset is sourced from a remote CSV file.

Sshreyasribearelly@gmail.com
75% match
Loading thumbnail…

Bonus ICE 11554625

This example visualizes COVID-19 case counts for multiple countries across the years 2019–2023 as a multi-series 3D bar chart. It renders the data using the d3-x3d library, which combines D3.js v5 with X3DOM for WebGL-based 3D graphics. The visualization reads CSV data from a GitHub gist, parses it with `d3.csv`, and binds it to the chart via the `datum()` method. The chart is displayed inside an HTML div with styling, allowing interactive rotation and exploration of the three-dimensional bars representing case numbers.

MManohar Kowthavarapu
75% match