Skip to main content
100%

Export CartoDB GeoJSON to TopoJSON.

✓ Published0🌍 Public
Aamundo
Last edited Mar 12, 2013
Created on Aug 16, 2016

This example demonstrates how to render TopoJSON geographic data as an SVG map using D3. It loads a world dataset pre-converted from CartoDB GeoJSON format and draws country polygons with a Mercator projection. The countries are styled with a light gray fill and white strokes, using D3’s geo path and TopoJSON utilities. The map is displayed in a narrow Bootstrap container, with the visualization sized at 960 by 1160 pixels.

AI-generated description

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

Creating world map with the world Topojson data

This example displays a world map using an orthographic projection, rendering each country as a pink SVG path with black borders on a teal background. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON with the `feature` function from topojson. The map is drawn using d3.geoPath with the d3.geoOrthographic projection, and all countries are appended as SVG paths using D3’s data join. The visualization uses D3 v5 and topojson v3.

Kkarumanchimanasa
84% match
Loading thumbnail…

making a map

This example renders a world map using the Mercator projection, displaying country boundaries as SVG paths. The code loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON using `topojson.feature`, and draws the countries with `d3.geoPath`. The map is created with d3.v7, using a static SVG canvas sized to 960 by 500 pixels. The visualization demonstrates a straightforward approach to converting TopoJSON into a projected map with minimal styling.

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

Let's make a map?!

This example shows how to create a simple world map by loading TopoJSON country boundaries and rendering them as filled paths. The code uses d3.json to fetch the world-atlas dataset, topojson.feature to convert it to GeoJSON, and d3.geoMercator with d3.geoPath to project and draw the countries. All shapes are appended as SVG path elements, styled with green fills and black strokes.

Ggorfoula
84% match
Loading thumbnail…

World Map with the world Topojson data

This example displays a world map using the Mercator projection, with each country rendered as a filled SVG path along a light green background and dark green borders. The map is built with the d3.geo.path API, which generates path data from the TopoJSON geometry of the world-atlas dataset. The code loads geographic data from a JSON file and uses topojson.object to extract country boundaries before injecting them into SVG path elements for visualization.

Aanushatod
83% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js and TopoJSON. It renders country boundaries as green SVG paths with thin black strokes on a dark blue background, using a Mercator projection. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features with the `feature` function. The code uses `d3.geoMercator` and `d3.geoPath` to project the map coordinates and generate the path data.

Ddacoylo
83% match
Loading thumbnail…

Maps

This example renders a world map using D3.js and TopoJSON, displaying countries as light green shapes against a dark blue spherical background. It uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from the world-atlas dataset. The code loads TopoJSON data, converts it to GeoJSON with topojson.feature, and appends country paths to an SVG container. The visualization demonstrates basic data binding and DOM manipulation while showing geographic features with minimal styling.

Cceresfin
83% match