Toggle topojson Layers (reload file)

100%

Toggle topojson Layers (reload file)

✓ Published0🌍 Public

Last edited Mar 17, 2017

Created on Nov 6, 2016

This example demonstrates a map of world countries that can be toggled between different TopoJSON layers, with the ability to reload the file. Built with D3 v4 and rendered as SVG, it loads geographic data from countries.json and displays it using a custom projection. The visualization uses a button to re-fetch and re-render the TopoJSON data, allowing users to refresh the map layers dynamically.

AI-generated description

In response to a stack overflow question on how to load a topojson file based on a file input.

Click the map to change the source file.

As topojson files often have a filename (without extenstion) that is equal to the name of the property that holds the features, we can use:

d3.json(fileName + ".json", function(error, topo) { ....

... .data(topojson.feature(topo, topo.objects[fileName]).features)

To ensure that these two match, you can check the topojson itself. Though it can be a pain to find. If you can find the word "objects", you can find the property name.

Alternative Apprach

Original Question

Similar vizzes

Loading thumbnail…

Toggle topojson layers (change visibility)

Clicking toggles visibility of countries from a TopoJSON world map, which are rendered as SVG paths using d3.geoPath with a Robinson projection. The `countries.json` TopoJSON file is loaded with d3.json, converted to GeoJSON, and each country is drawn as a separate path element in an SVG group. A button enables users to show or hide all country layers simultaneously by toggling the CSS visibility of the group, while preserving the map's layout and interactivity.

Aandrew-reid

90% match

Loading thumbnail…

TopoJSON Layers

This example animates the four layers of a U.S. TopoJSON map—a glowing land silhouette, a solid land fill, county boundaries, and state boundaries—by fading each SVG layer in and out in sequence. Using d3.geo.path with the Albers USA projection, the code fetches US GeoJSON data via d3.json and converts it with topojson.feature and topojson.mesh to render the paths. Each layer is styled with distinct SVG filters and strokes, and the cyclic animation is driven by chained transitions on the opacity property.

Mmbostock

79% 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

78% match

Loading thumbnail…

TopoJSON Parallax

A stack of four SVG layers forms a parallax map of the United States, with each layer shifting at a different rate relative to the mouse position. The bottom layer shows a blurred land glow, followed by the land fill, county boundaries, and state boundaries on top. The visualization uses `d3.json` to load TopoJSON from a gist, `d3.geo.albersUsa` for the projection, and `d3.geo.path` to render the geographic features. Mouse movement triggers CSS 3D transforms on each SVG to create the depth effect.

Mmbostock

77% 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

77% 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

77% match

Loading thumbnail…

World Map with D3.js and Topojson

This example displays a world map using an equirectangular projection, rendered as an SVG graphic. The map is drawn with countries filled in orange, each with a white stroke, and a blue sphere representing the globe's background. Hovering over a country changes its fill to green. The visualization is built with D3.js version 5 and TopoJSON version 3, loading country boundaries from the world-atlas countries-110m.json file. It uses `d3.geoEquirectangular` for projection, `d3.geoPath` for generating SVG paths, and TopoJSON's `feature` method to convert the dataset into GeoJSON features.

Bbugfree55

77% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create an interactive world map using D3.js v5 with TopoJSON data from the world-atlas package. The map renders countries as SVG paths using the `d3.geoNaturalEarth1` projection and `d3.geoPath` generator, with a blue sphere background. Country shapes are filled green and turn red on hover, while each path includes a title element displaying "hello". The code loads geographic data asynchronously via `d3.json` and converts TopoJSON features using the `feature` function from the topojson library.

Ttrustyred

77% match