Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
HHOURPRIMERA@GMAIL.COM
Last edited May 10, 2024
Created on May 10, 2024

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.

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 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 React & D3 Starter

This example presents a world map rendered in an SVG container, visually distinguishing a subset of countries by coloring them orange according to a small, hardcoded population dataset, while all other nations appear in gray. It uses the `d3.geoMercator` and `d3.geoPath` APIs to project and draw geographic boundaries from a TopoJSON source loaded via `d3.json`. The map is built within a React application, and the code demonstrates a non-reactive workflow by appending paths directly to the SVG element.

Kkodalijagadeesh9@gmail.com
86% 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 Let's make a map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue oceanic sphere. It uses D3 v5 and the topojson library to load and parse world-atlas data from an external URL, then projects the geographic features with a natural Earth projection and draws them using d3.geoPath. The map is generated entirely in the browser from TopoJSON data, with a simple CSS-styled SVG output.

DD3React
85% 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 World Map Simple

This example shows a basic interactive world map using D3.js and TopoJSON. It renders country outlines, a graticule grid, and a map outline using d3.geoPath with a geoNaturalEarth1 projection. Country boundaries are loaded from the visionscarto-world-atlas TopoJSON dataset via fetch and converted to GeoJSON with topojson.feature. The React-based rendering uses a small state machine to handle asynchronous data loading, then calls the map function to draw paths into an SVG.

Zzenoalive
85% 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
Loading thumbnail…

Fork of World Map

This example displays a world map using an orthographic projection, rendered as SVG with D3’s `geoPath` and `geoOrthographic`. It shows landmasses filled in teal, graticules, sphere outline, and interior borders, drawing from the world-atlas TopoJSON dataset (countries-50m.json) via `feature` and `mesh`. React manages the component state, loading data asynchronously with a custom `useData` hook before rendering the map within a fixed SVG canvas.

SSaiSreya1
84% match