Skip to main content
SimilarExport ZIP
100%

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

✓ Published3🌍 Public
Bbepnye@gmail.com
Last edited May 1, 2024
Created on May 1, 2024

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.

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 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
96% 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
86% match
Loading thumbnail…

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

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.

EElena Momtcheva
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
86% match
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
86% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This example builds a choropleth-style world map using D3.js v5, displaying country boundaries from the world-atlas TopoJSON dataset. The visualization renders the map as SVG paths, with countries filled in light green and a blue sphere for the background. It uses `d3.geoPath` with a `geoNaturalEarth1` projection to project the geographical data, while `topojson.feature` extracts the country geometries. Population data from a CSV file is loaded, though the code only logs country data to the console rather than encoding values visually, and includes a hover effect that turns countries red.

Mmavercikalvin
84% match
Loading thumbnail…

Fork of World Map with D3.js!

This example renders an interactive world map using D3.js and TopoJSON. Countries are drawn as SVG paths with white fills and black strokes, while the surrounding sphere is teal. The map uses the `geoEquirectangular` projection and `geoPath` to convert geographic data into screen coordinates. It loads country boundaries from the world-atlas dataset (countries-110m.json) and highlights individual countries in navy when hovered.

SSumanya4
84% 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
84% match