Fork of React & D3 Starter - ice 8 - 1

100%

Fork of React & D3 Starter - ice 8 - 1

✓ Published0🌍 Public

Last edited Nov 8, 2025

Created on Nov 8, 2025

This choropleth map shows the number of internet users by country in millions for 2022, using a blue color scale to represent the range from small (e.g., Switzerland, Australia) to large values (e.g., China, India). It renders a Natural Earth projection of the world with a graticule layer and a hover tooltip, built with D3 v7’s `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. The code assigns country-specific values via an ISO3 lookup table mapped from TopoJSON’s numeric IDs.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Starter - ICE_8_1

A choropleth map of world GDP in trillions of USD, colored on a red scale from light to bright red, with country boundaries in white and a graticule overlay. It uses D3 v7’s `d3.geoNaturalEarth1` projection and `d3.geoPath` to render the SVG, with TopoJSON data for country shapes. A hover tooltip displays country-specific GDP values from a hardcoded dataset.

Vvijaysaichigullapally1@gmail.com

84% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This choropleth world map visualizes population data for nine countries, using darker blue shades to represent higher populations. It loads country boundaries from the world-atlas TopoJSON dataset, converts them to GeoJSON with topojson-client’s feature function, and renders them as SVG paths via d3.geoPath with a Natural Earth projection. A d3.scaleLinear color scale maps population values to a light-to-dark blue range, and each country includes an SVG title tooltip showing the name and population in millions.

SSathviKankanala@my.unt.edu

83% match

Loading thumbnail…

Fork of React & D3 Starter- ICE_8_1.2(country)

This choropleth map shows estimated tourist visits per U.S. state for 2024, using a red color scale from light to dark red to indicate increasing visitor counts. The visualization renders a U.S. map with state boundaries defined by white strokes, using the `d3.geoAlbersUsa` projection and `d3.geoPath` to generate SVG paths. A hover tooltip displays state-specific data, while a legend and caption provide context. The map is built with D3.js v7, pulling TopoJSON geographic data via the topojson-client library, with a fixed sample dataset embedded in the code.

Vvijaysaichigullapally1@gmail.com

83% match

Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This choropleth map colors world countries by population, using darker blues for more populous nations while unlisted countries appear gray. A legend explains the visual encoding. The example loads world-atlas TopoJSON, converts it to GeoJSON features using topojson-client, and projects the map with d3.geoNaturalEarth1 and d3.geoPath. A d3.scaleLinear maps population values to a light-to-dark color range, and SVG paths render each country with tooltips showing population figures.

SSathviKankanala@my.unt.edu

82% match

Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India, colored with the d3.scaleOrdinal and schemeCategory10 palette, with hover states that turn regions orange. The visualization uses d3.geoMercator projection, d3.geoPath for rendering, and topojson.feature to parse GeoJSON from a geoBoundaries TopoJSON file hosted on GitHub. The React-based code loads data via d3.json, appends SVG paths, and includes zoom functionality through d3.zoom, with the map heading and styling defined in HTML and CSS.

YYerlan Yeszhanov

81% match

Loading thumbnail…

Fork of HTML Starter

This choropleth map colors countries by their 2020 population in millions, using a blue sequential scale where darker shades represent larger populations. Built with D3 v7 and TopoJSON data from the world-atlas package, the visualization projects geographic features with `d3.geoNaturalEarth1` and renders them as SVG paths via `d3.geoPath`. Country populations from `dataset.csv` are joined to geometry using ISO3 codes, with tooltips displaying each nation’s name and population value.

RRithvik

81% match

Loading thumbnail…

Fork of 2015 Internet Users World Map

A choropleth map colors the world by each country’s percentage of internet users in 2015, using a six-step green scale from `d3.schemeGreens`. Hovering reveals a country’s exact value in a tooltip, while the view supports interactive zoom via `d3.zoom` to bounding boxes. The map is drawn with `d3.geoNaturalEarth1` and `d3.geoPath` from TopoJSON data, with a color legend built from a custom `scaleOrdinal` scale. Internet usage data comes from a CSV of per-100-people statistics.

SstellaWangg

81% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This choropleth map visualizes world population data by country, where darker blue tones correspond to higher population figures. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1`, with country boundaries drawn using `d3.geoPath` and rendered as SVG paths. Population values are matched to country names from the world-atlas TopoJSON source, then mapped to a color scale using `d3.scaleLinear` from light to dark blue. The code loads world-atlas data via TopoJSON and processes it with `feature` from the topojson-client library to convert it to GeoJSON features for rendering.

Ssaisanthoshravula@my.unt.edu

80% match