TopoJSON

100%

✓ Published0🌍 Public

Last edited Dec 27, 2021

Created on Dec 27, 2021

This visualization displays a world map rendered as a sphere using the TopoJSON format. The map shows country boundaries in blue with no fill, projected using the geoEqualEarth projection. The code loads geographic data from a gist, converts TopoJSON to GeoJSON using topojson’s `feature` function, and renders paths with d3’s `geoPath`, all within a React component drawing to SVG.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Topojson Map

This example displays a world map rendered as filled country polygons on a sphere background. It uses d3.json to load TopoJSON data from the world-atlas package, then converts it to GeoJSON features with topojson.feature. The map is drawn in SVG using d3.geoPath with a d3.geoNaturalEarth1 projection, styling countries in green and the sphere in dark blue.

KKetaki789

91% match

Loading thumbnail…

World map with the world Topojson data

This example displays a world map using the Topojson world data, rendered as an SVG with a teal sphere background and white country boundaries. It employs D3.js v5’s geoEquirectangular projection and d3.geoPath to convert geographic coordinates into SVG paths. The data loads from a remote GitHub gist, and the topojson library’s feature function extracts country geometries. The map is styled via CSS classes for the sphere and individual countries.

Vvegurusaiprathyusha

89% match

Loading thumbnail…

World Map

This example renders a world map from TopoJSON data using D3 v5 and React, drawing countries as filled paths on an SVG canvas. The visualization uses `geoEqualEarth` for the projection, `geoPath` to generate paths, and `geoGraticule` to display a graticule overlay, with a distinct red sphere background and blue landmasses. Country geometries are loaded from the world-atlas TopoJSON file and converted to GeoJSON via `feature()`. The React component hierarchy separates data loading (`useData`) from the presentational `Marks` component.

Ggayatrisridhar

89% match

Loading thumbnail…

world map with the world Topojson data

This example displays a world map using D3.js version 5 and TopoJSON data from the world-atlas dataset. The visualization projects geographic country boundaries onto a natural Earth projection within an SVG container, with a light blue sphere background and teal country fills. The code imports geoNaturalEarth1 and geoPath for projection and path generation, and applies the feature function from topojson to convert country data into GeoJSON features. Red strokes with low opacity outline the countries, creating a distinct visual separation against the pastel background.

Bbindusreeja

89% match

Loading thumbnail…

Topojson World Map

This visualization displays a world map using a Natural Earth projection, rendering continents and countries as filled SVG paths with a blue ocean backdrop. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using `topojson.feature`. The map applies `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate the country outlines, with each country filled in green and stroked with a subtle black border.

SSyed Araib Karim

88% match

Loading thumbnail…

World Map

This visualization shows a world map rendered with D3’s geoEqualEarth projection, displaying country boundaries as blue filled paths over a light gray sphere. The map draws from the world-atlas TopoJSON dataset, which the code loads via `d3.json` and converts using `topojson.feature` and `topojson.mesh`. React renders the SVG paths, with the `d3.geoPath` generator computing the projected shapes, and interior borders highlighted in a contrasting stroke.

BBetty

88% match

Loading thumbnail…

World Map using TOPOJSON data

This example displays a world map with country boundaries, rendered as an SVG using a natural Earth projection. It shows landmasses in pink, graticules in grey, and country borders in black, all set against a sky-blue sphere. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to project and draw the geography, while `topojson.feature` and `topojson.mesh` extract land and interior boundaries from World Atlas TopoJSON data. The visualization is built with React components managing the data loading and SVG rendering.

Aavvarijayakrishna99@gmail.com

87% match

Loading thumbnail…

map

This example displays a world map using the GeoJSON country boundaries from the World Atlas TopoJSON dataset. The map is rendered as SVG paths via `d3.geoEqualEarth` and `d3.geoPath`, with each country filled in teal and outlined in light gray, while a separate sphere path provides a neutral background. It uses React for component structure, with data loaded through D3’s `json` method and converted from TopoJSON to GeoJSON using the `feature` function.

NNart Williamson

87% match