Skip to main content
SimilarExport ZIP
100%

Fork of D3 world map example with TopoJSON to GeoJSON and circular indicators

✓ Published2🌍 Public
EElena Momtcheva
Last edited Apr 18, 2024
Created on Apr 18, 2024

This map visualization displays Nobel Prize winners per country using a world map with circular indicators. Red circles, sized using `d3.scaleSqrt`, overlay each country's geographic centroid, and hovering highlights countries and shows a tooltip via SVG path interactions. The map renders through an equirectangular projection defined by `d3.geoEquirectangular` and `d3.geoPath`, converting TopoJSON data with the `topojson` library. Country data from a CSV file is joined with GeoJSON features to position each indicator.

AI-generated description

D3 world map example with TopoJSON to GeoJSON and circular indicators

TopoJSON source: https://github.com/Kyrand/dataviz-with-python-and-js-ed-2/blob/master/Part_5_Visualizing_your_Data_with_Plotly_and_D3/Ch.15-21_Nobel_Dataviz_with_D3/static/data/world-110m.json

Visit https://github.com/ax-va/Interactive-Data-Visualization-Dale-2023

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of D3 world map example with TopoJSON to GeoJSON and circular indicators

This example presents a world map with circular indicators sized by the number of Nobel Prize winners per country. The map is drawn using D3.js (v7) with an equirectangular projection, converting TopoJSON geographic data to GeoJSON via the `topojson` library and rendering with `d3.geoPath`. Country data from a local CSV file is joined to the map geometries, with red semicircles positioned at each country's coordinates using a square-root scale for radius. Interactive tooltips appear on hover, displaying the country name and winner count.

KKELUTH HARI SANKARA KOTESWARA LAL
95% match
Loading thumbnail…

D3 world map example with TopoJSON to GeoJSON and circular indicators

A world map rendered with D3 v7 displays Nobel Prize winner counts per country using circular indicators scaled by value. The visualization loads TopoJSON world data, converts it to GeoJSON via the `topojson` library, and projects it using `d3.geoEquirectangular` with `d3.geoPath`. Country data from a CSV file is joined to map geometries, with red semi-transparent centroids sized by a square-root scale. Interactive mouse events trigger tooltips showing country names and prize counts, while graticule lines and internal borders provide cartographic context.

AAxVa 🐍 💪
91% match
Loading thumbnail…

Fork of Fork of D3 world map example with TopoJSON to GeoJSON and circular indicators

This D3.js v4 world map visualizes birth rates per country using a Mercator projection, coloring each nation on a white-to-blue linear scale. The map draws country boundaries as SVG paths from a TopoJSON-to-GeoJSON dataset, with the `d3.geoMercator` and `d3.geoPath` APIs converting geographic coordinates into planar shapes. Circular indicators mark four specific cities—Fairbanks, Boston, Philly, and COS—positioned via the same projection. The choropleth colors are derived from a CSV file loaded through `d3.json` and `d3.csv` deferred queues.

Bbepnye@gmail.com
86% match
Loading thumbnail…

Fork of D3 world map example with TopoJSON to GeoJSON and circular indicators

This example displays a world map highlighting ten cricket-playing nations, each filled with a distinct color. It loads world boundary data as TopoJSON and converts it to GeoJSON using the `topojson` library, then renders the map with `d3.geoEquirectangular` and `d3.geoPath`. A graticule grid is added with `d3.geoGraticule` for visual reference. The map uses SVG elements and data from the world-atlas package, with country-specific colors assigned via a JavaScript object.

Vvinodreddysagam929@gmail.com
85% match
Loading thumbnail…

Fork of Fork of Fork of D3 world map example with TopoJSON to GeoJSON and circular indicators

This example visualizes a choropleth world map where each country’s fill color reflects its birth rate, using a linear blue scale. It also plots four city locations (Fairbanks, Boston, Philly, COS) as small circles, positioned via a Mercator projection with `d3.geoPath`. The map is built with D3 v4, loading GeoJSON country boundaries and CSV data via `d3.json` and `d3.csv`. The code uses `d3.geoMercator`, `d3.scaleLinear`, and `d3.extent` to drive the color mapping and projection.

Gg_ivaska@coloradocollege.edu
85% match
Loading thumbnail…

Fork of Fork of Fork of D3 world map example with TopoJSON to GeoJSON and circular indicators

This example displays a U.S. map with circular indicators, initially showing population-based circles over state boundaries. It converts TopoJSON to GeoJSON using `feature` and `mesh` from `topojson`, while `d3.geoPath` renders the SVG shapes. React hooks manage asynchronous data loading from a CDN via `d3.json`. The visualization uses `d3.scaleLinear` and `d3.scaleSqrt` to size and color the circles, though the render function currently outputs an empty SVG.

HHOURPRIMERA@GMAIL.COM
84% match
Loading thumbnail…

Fork of D3 map

This example displays a world map using geographic data loaded from a TopoJSON file. The map is rendered as an SVG, with each country filled in pink and outlined with red, while the oceans appear green. The visualization is created using D3.js version 5, specifically leveraging the `d3.geoPath` projection and the `topojson` library to parse the topology data. The map is based on Curran’s earlier D3 map example, and the countries are drawn using a Robinson projection.

RRahulSai05
83% match
Loading thumbnail…

Fork of Fork of world map

This example renders an interactive world map using D3.js and TopoJSON. It displays countries as white polygons with black outlines on a blue sphere, and highlights individual countries in orange on hover. The visualization uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths. Country geometry is loaded from a world-atlas TopoJSON file hosted on jsDelivr, with features extracted via the `feature` function.

Sshabbab01
82% match