Skip to main content
SimilarExport ZIP
100%

World Adult Obesity

✓ Published0🌍 Public
Aacb30
Last edited May 23, 2020
Created on May 23, 2020
Forked from HTML Starter

A heat map of global adult obesity rates uses color-coded countries on a world map to show prevalence by year. Users can scrub through available years for smooth transitions or input a specific year, with pop-ups on hover providing country details and a legend describing the color scale. It is rendered as SVG via D3 v5, using d3.min.js for selection and shape drawing, with data loaded from a static CSV.

AI-generated description

This will be a heat map of world obesity percentages, allowing user to scrub through the year ranges available. Will create a smoothe transition as user scrubs. Allows user input of year to view rate. Hovering over country will trigger a pop-up with additional country details. Legend at the bottom to descibe the "heat" map coloring.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This interactive world map visualizes global obesity rates, with countries colored on a red sequential scale according to their reported obesity percentage, while nations lacking data remain gray. The visualization uses the d3.geoMercator projection and d3.geoPath to render country boundaries from a GeoJSON world map, then overlays obesity data from an external CSV file. The code employs d3.scaleSequential with d3.interpolateReds to create the color mapping, and d3.json and d3.csv load the respective data sources. Hovering a country turns it orange via CSS, and country labels appear at path centroids. The map is displayed in an SVG container within an HTML page.

Cc_peimann@coloradocollege.edu
77% match
Loading thumbnail…

World Map

This choropleth map displays the global prevalence of hypertension among adults aged 30-79 years in 2019, with data sourced from the WHO Global Health Observatory. The map uses a blue sequential color scale to represent percentage values, ranging from approximately 15% to 35%, and includes an interactive legend with tick marks. A dropdown menu allows switching between "Both sexes," "Female," and "Male" to filter the displayed data. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering country boundaries, and SVG paths for map elements. Hovering over a country highlights it and shows a tooltip with the country name and its exact prevalence value.

MMd Fahimul Kabir Chowdhury
74% match
Loading thumbnail…

Obesity Among Adults

This example demonstrates how to load and inspect a dataset on adult obesity rates by country, displaying basic statistics about the data file. The visualization presents three key metrics: the file size in kilobytes, the number of rows, and the number of columns. Using D3.js version 5.11, the code loads a TSV file from a remote URL via `d3.tsv`, formats the data with `d3.tsvFormat`, and calculates the byte length of the formatted string. The resulting information appears in a large `<pre>` element. The dataset originates from Kaggle, covering obesity rates from 1975 to 2016.

DdaojunL
73% match
Loading thumbnail…

Fork of Fork of Polished World Map

This interactive map visualizes age-standardized hypertension prevalence among adults aged 30-79 across countries, using 2019 WHO Global Health Observatory data. Users can filter results by sex through a dropdown. A sequential blue color scale encodes prevalence percentages, with a gradient legend and hover tooltips displaying exact values. The application is built with React and D3.js (d3.geoPath, d3.geoNaturalEarth1, d3.geoGraticule) to render an SVG world map from TopoJSON data, while d3.scaleSequential and interpolateBlues drive the color encoding.

NNita
73% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the obesity rates of the most affected countries using 2016 data from a Wikipedia list. It renders horizontal bars for each country, with the length of each bar proportional to the obesity rate percentage. The visualization uses D3 v7 with `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for the axes. The SVG elements are styled with `fill: steelblue`, and the data is loaded from a local `data.csv` file.

JJadeITNT
72% match
Loading thumbnail…

World Map 2

This interactive choropleth map visualizes the global prevalence of hypertension in 2019, filtered by sex. It uses a blue sequential color scale to encode prevalence values. Built with React and D3, the visualization employs `d3.geoPath` to render an SVG map, with country interactivity for tooltips and highlighting. The legend is generated using `d3.scaleSequential` and `d3.interpolateBlues`. Data originates from the WHO Global Health Observatory, loaded via `d3.csv` and `d3.json`.

MMd Fahimul Kabir Chowdhury
71% match
Loading thumbnail…

World Map

This interactive world map visualizes population data by country for 2018, using color and size to distinguish between regions with and without reported figures. The visualization employs a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with countries rendered as SVG paths. Population values are mapped to circle sizes using `d3.scaleSqrt`, and a size legend with tick marks displays the scale. Users can pan and zoom through `d3.zoom`, and hovering over a country reveals its population via a tooltip. Data comes from a CSV file joined to TopoJSON world atlas geometry.

Rrohit181099
71% match
Loading thumbnail…

Demers Cartogram

This visualization shows a pseudo-Demers cartogram of U.S. adult obesity rates, with each state represented by a square whose area encodes the prevalence of BMI ≥ 30. The squares are initially placed at their geographic centroids and then shifted via a d3.layout.force simulation with custom gravity and collision functions to avoid overlap while preserving approximate locality. The code uses d3.geo.albersUsa() for projection and d3.geom.quadtree for collision detection, rendering as SVG rectangles. Data comes from CDC 2008 values embedded as an array, with state centroids loaded from an external JSON file.

SSpaceActuary
71% match