Skip to main content
SimilarExport ZIP
100%

plot 1

✓ Published0🌍 Public
Ppriyankachary1701@gmail.com
Last edited Nov 18, 2025
Created on Nov 18, 2025

This heatmap displays the prevalence of undernourishment (as a percentage, three-year average) across a selection of 20 countries over multiple years. Each cell’s color intensity represents the value, using a sequential orange-red color scale. The visualization loads CSV data from a GitHub-hosted FAOSTAT dataset via `d3.csv`, filters it by item and country, and renders the plot using D3 v7 with SVG rectangles. Interactive tooltips, implemented with D3’s selection and event handlers, reveal country, year, and exact percentage on mouseover.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

plot 2

The visualization displays the prevalence of undernourishment for the top ten countries in a selected year, using an interactive side-by-side pie chart and bar chart. A year selector and color-coded legend allow users to compare regional values. The D3 v7 code filters a FAOSTAT CSV dataset, then uses `d3.pie` and `d3.arc` for the pie, `d3.scaleBand` and `d3.scaleLinear` for the bar chart, and a hover tooltip. The charts are rendered as SVG with `d3.select`, `d3.scaleOrdinal`, and `arc.join`.

Ppriyankachary1701@gmail.com
85% match
Loading thumbnail…

Fork of D3 Starter

This example shows a choropleth world map colored by the prevalence of undernourishment (percent) for the 2022–2024 three-year average, using a subset of FAOSTAT food security indicators. Each country’s fill intensity reflects the data value loaded from an embedded CSV string. The visualization uses D3 v7 with `d3.geoPath` and TopoJSON to render country boundaries, along with `d3.scaleSequential` and `d3.interpolateYlOrRd` from d3-scale-chromatic for the color encoding. SVG is used for rendering, and the map includes a legend and hover effects.

Ppriyankachary1701@gmail.com
78% match
Loading thumbnail…

Heatmap using d3.js

This heatmap visualizes the consumption of various fruits and vegetables across five European countries—France, Italy, Germany, the United Kingdom, and Spain—using a color scale that encodes the percentage deviation of each value from the mean. The data is loaded from a CSV file, and each cell’s color corresponds to a six-band scale: negative values render in shades of red (dark to light), while positive values use shades of green, with the legend indicating percentage ranges. The chart uses an SVG layout with band scales for the x-axis (products) and y-axis (countries), and includes animation for a dynamic presentation. Built with d3.v4, the visualization is adapted from a block by nanu146 and is available under the GPL-3.0 license.

GGerardoFurtado
72% 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
71% match
Loading thumbnail…

Fork of heatmap

This visualization explores heart disease prevalence through an interactive choropleth map. It uses D3.js and TopoJSON to render world country boundaries as SVG paths, with a Mercator projection and color encoding showing whether each country has heart disease data. Sliders filter by age range, while zoom and hover tooltips display country-specific details. The dataset comes from a CSV containing heart disease statistics by country and age category.

Sshreyasribearelly@gmail.com
71% match
Loading thumbnail…

level 1 with all features

This interactive map shows nutritional indicators (stunting, wasting, and underweight prevalence) across administrative regions in Palghar district, India, for three months. A dropdown menu and range slider let users select different health metrics and adjust color thresholds, while hovering reveals tooltips with region names and percentages. Built with D3 v5, the visualization uses `d3.geoPath` with a Mercator projection to render GeoJSON boundaries at the block and project levels. Animated transitions update fill colors when selections change, and the map supports zooming through D3's zoom behavior. Data comes from monthly CSV files.

AAsmabee Khan
70% match
Loading thumbnail…

fork country

This interactive scatterplot explores global health indicators across countries, plotting health expenditure against life expectancy with each point colored by continent. Users select which attribute appears on each axis via dropdown menus, and hovering over the color legend highlights points from that continent while fading others. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding, and renders all marks as SVG circles with opacity transitions. Data is loaded as CSV from a GitHub gist.

Rrushithareddyy
70% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between BMI and life expectancy across countries in 2021, with each circle representing a country. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the scales. Interactive hover effects trigger a tooltip that shows the country name, BMI, and life expectancy values. The chart is rendered as an SVG with animated transitions on circle hover, changing the fill color from steelblue to orange.

Ssravya7136@gmail.com
70% match