Assignment 9 World Chloropleth Map

100%

Assignment 9 World Chloropleth Map

✓ Published1🌍 Public

Aahuynh8@dons.usfca.edu

Last edited Apr 1, 2024

Created on Apr 1, 2024

Forked from Assignment 9 Chloropleth Map

This example presents a world choropleth map visualizing crude death rates per 1000 population in 2012, with countries colored using a threshold scale and green color scheme. A legend and title clarify the metric, while interactive tooltips display each country’s exact value on mouseover. Built with D3 v6, it uses d3.csv to load UN data, d3.json with topojson to fetch world country geometries, and d3.geoPath with a geoAlbers projection to render SVG paths. A d3.legendColor component generates the color legend.

AI-generated description

CS 360 Assignment 9 World Chloropleth Map

Annie Huynh CSV

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 9 Chloropleth Map

This choropleth map visualizes the number of births in 2022 per county across the United States, using a green color scale to encode population data. The visualization loads CSV data from a GitHub repository and county geometry from the US-10m TopoJSON file, rendering with SVG paths via `d3.geoPath` and `topojson.feature`. Interactive tooltips display the county name and birth count on mouseover, while a `d3.legendColor` legend provides scale reference. The code relies on D3 v6, d3-legend, and topojson libraries to create the map.

Aahuynh8@dons.usfca.edu

81% match

Loading thumbnail…

D3: GeoEarth

A choropleth world map visualizes 2019 death rates from brain and central nervous system cancer by country, using an orange-to-red sequential color scale. The map is rendered with `d3.geoPath` and `d3.geoNaturalEarth1` projection, with country boundaries from World Atlas TopoJSON. React manages state for data loading via `d3.csv` and a custom hook, while hover interactions append tooltip text. A legend built with SVG rectangles shows the color scale’s domain, and the code uses `d3.scaleSequential` with `interpolateYlOrRd` for color encoding.

Ssowmyanagula@my.unt.edu

80% match

Loading thumbnail…

D3 - World Choropleth

This example displays a world choropleth map of population in 2023, using a Mercator projection and a yellow-to-red sequential color scale to represent each country’s population. The map is rendered as SVG paths, with a tooltip that appears on hover showing the country name and population. The code loads GeoJSON and CSV data via D3’s `d3.queue` and `d3.json`/`d3.csv` APIs, and it builds the choropleth using `d3.geoPath` with a projected path generator. A legend is added using the `d3.legend` library, and the project utilizes D3 v4, `d3-scale-chromatic` for the color interpolation, and `d3-geo-projection` for the map projection.

CChandana Srinivas

80% match

Loading thumbnail…

Assignment 8 1

This interactive choropleth map visualizes the estimated percentage of internet users per country, using a cool blue color gradient to represent the range from 0–14% to 86–100%. Hovering over a country reveals its exact value in a tooltip. The visualization is built with D3.js v7 and the TopoJSON client, using a geoMercator projection and d3.geoPath to render world boundaries. A static CSV dataset embedded in the code supplies the country-value pairs, which are mapped to a d3.scaleQuantize color scale, while a legend clarifies the data ranges and includes a "No data" category.

SSai Vamshi B

80% match

Loading thumbnail…

D3: GeoEarth

This example displays a world map colored by deaths from brain and central nervous system cancer for the year 2019, using a yellow-orange-red sequential color scale. It leverages d3.geoPath with a d3.geoNaturalEarth1 projection to render country boundaries from the World Atlas TopoJSON. The choropleth maps data from a CSV joined to country codes via ISO-3166 codes, with colors scaled by d3.scaleSequential using d3.interpolateYlOrRd.

SSiddharthMittal07

79% match

Loading thumbnail…

Assignment 8 Maps

This choropleth map displays global GDP distribution, coloring countries by their Gross Domestic Product in billions of USD using a sequential green color scale. Built with D3 v7, it loads TopoJSON world atlas data and renders it as SVG paths via `d3.geoPath` with a Natural Earth projection. A threshold-based color scale (`d3.scaleThreshold`) maps GDP ranges to colors, while hover interactions trigger tooltips showing country names and GDP values. A legend explains the color bins, and gray indicates missing data.

445.saiful@gmail.com

79% match

Loading thumbnail…

[A9] World Birth Rate (World Choropleth Map)

This example shows a world choropleth map of birth rates across countries, with color intensity reflecting the rate value and gray indicating missing data. The visualization uses an SVG rendered with D3.js and React, projecting geographic features via `d3.geoMercator` and drawing them with `d3.geoPath`. Birth rate data is loaded from a CSV and matched to country names, then mapped to a sequential color scale (`d3.interpolateYlOrRd`). Hovering over a country reveals a tooltip with the specific birth rate.

Cctan13@dons.usfca.edu

79% match

Loading thumbnail…

Chloropleth Map

This example displays a choropleth map using 160 countries colored by income group, with a legend and tooltips. It loads world geometry from TopoJSON and joins it with TSV metadata, projecting paths with `d3.geoPath` and a natural Earth projection. The ordinal color scale uses `scaleOrdinal` with `schemeSpectral`, and the legend is built as a custom D3 component. Pan and zoom are enabled via `d3.zoom`, and hovering highlights the selected country in red.

Ffloresh

79% match