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
Gg_ivaska@coloradocollege.edu
Last edited May 6, 2024
Created on May 6, 2024

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.

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

Fork of Fork of D3 Starter

This example displays a world map colored by per-country values from a small CSV dataset, using a blue sequential color scale to encode the data. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and renders them as SVG paths with a Mercator projection (d3.geoMercator). The visualization relies on d3.json for fetching, topojson.feature for conversion, and d3.geoPath to generate the map shapes.

Rrevanthdasari10@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
86% 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
85% 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
85% 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
85% 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
84% match
Loading thumbnail…

Fork of World Map with D3.js!

This example displays a world map rendered as blue SVG paths for the oceans and green-filled country polygons with black strokes, based on geographic data from the world-atlas TopoJSON dataset. The code imports `geoEquirectangular` and `geoPath` from d3 to project coordinates, and uses `feature` from topojson to convert TopoJSON topology into GeoJSON features. A single empty path is first appended for the sphere outline, then country paths are added dynamically once the JSON data loads asynchronously.

Bbhargavarathod
84% match