Skip to main content
SimilarExport ZIP
100%

Gist 52138cb406012a760fee

✓ Published0🌍 Public
SStephen
Last edited Oct 30, 2015
Created on Oct 30, 2015

This example renders a world map from a TopoJSON file containing land polygons. The visualization uses D3.js to project and draw the geographic data onto a canvas, with the `d3.geoPath` function handling the polygon outlines. The code loads the `Land.json` file, which stores the geometry in TopoJSON format, and prepares it for display using D3’s geographic projection utilities. The map shows the basic landmasses of the world as simple filled shapes, with no additional thematic data or interaction applied to the polygons.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 075cee318faa9088bc16bd9eb985a9a5

This example shows a world map rendered from a TopoJSON file using a Mercator projection, with pan and zoom enabled for interactive exploration. The map is drawn as SVG paths via `d3.geoPath` and a `d3.geoMercator` projection, centered and scaled to display global geography. A `d3.zoom` handler updates the map’s transform and re-projects paths on each interaction. The code includes commented-out attempts to plot city coordinates from a CSV, but the visible implementation focuses solely on the country boundaries from the `world-110m2.json` data source.

AAlexanderDavidson
81% match
Loading thumbnail…

Let's make a Map

This map renders world countries from the world-atlas TopoJSON dataset, using D3’s `geoNaturalEarth1` projection and `geoPath` to draw landmasses and country boundaries. The SVG output fills countries in light gray with blue strokes over a blue ocean sphere. It demonstrates a basic choropleth setup by asynchronously loading the 110m-resolution data and applying styling from an external stylesheet. The example shows how to project geographic features with D3’s geo API and topojson’s `feature` conversion.

Aarieltonglet
81% match
Loading thumbnail…

Topojson World Map

This example renders a world map using a natural Earth projection, displaying countries as filled polygons on a light blue sphere. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. It draws the map with SVG paths generated by `d3.geoPath` and `d3.geoNaturalEarth1`, styling the sphere and countries via CSS classes for a clear, colorful presentation.

SSyed Araib Karim
81% match
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
80% match
Loading thumbnail…

WorldMap with Topojson Data

A world map rendered with a light pink background and distinct filled landmasses, using topojson data from the world-atlas package. The visualization displays the globe with blue oceans and green countries, each outlined with faint black strokes. Built with D3 v5, the code uses `d3.geoPath` with a `geoNaturalEarth1` projection and the `topojson` library's `feature` method to process geographic data into SVG paths.

Ggopiganta
80% match
Loading thumbnail…

Lets make a map!

This example demonstrates how to load and display world map data using D3.js and TopoJSON. The visualization fetches country boundaries from the world-atlas dataset and projects them as SVG paths. The code uses `d3.json` to retrieve the TopoJSON file, `topojson.feature` to convert it into GeoJSON, and `d3.select` to append the resulting shapes to the chart. The map is rendered as static SVG elements within a fixed 960×500 viewport.

Kkhuton
80% match
Loading thumbnail…

World Map Example

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths. The visualization shows a natural Earth projection of the globe, with countries filled in light green and oceans in blue, using a grayscale-style aesthetic. The code loads geographic data from the world-atlas TopoJSON file and applies `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` to extract country features. A sphere outline is drawn first, followed by individual country paths appended to the SVG canvas.

Ccpsshan
80% match
Loading thumbnail…

world map for Topojson data

This example displays a world map rendered as filled green countries on a light blue sphere, using Natural Earth projection. It loads TopoJSON data from a GitHub gist and converts it to GeoJSON with `topojson.feature`. The map is drawn as SVG paths using `d3.geoPath` with `d3.geoNaturalEarth1`, while `d3.json` fetches the remote dataset. Country boundaries appear with subtle black strokes, and the sphere outline is generated from a generic GeoJSON sphere object.

SSheshidharreddy
80% match