Toggle topojson layers (change visibility)

100%

Toggle topojson layers (change visibility)

✓ Published0🌍 Public

Last edited Mar 17, 2017

Created on Nov 6, 2016

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.

AI-generated description

Alternative approach to toggling layers, compared to : Toggling layers, reload file

Has the advantage of loading data only once, so it should be a smoother transition between toggles.

Click anywhere on the map to toggle layers.

Similar vizzes

Loading thumbnail…

Toggle topojson Layers (reload file)

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.

Aandrew-reid

90% match

Loading thumbnail…

Click the Countries for Interaction

This interactive map illustrates world countries and allows users to click individual nations to toggle their fill color between light green and yellow. Built with D3 v5 and TopoJSON, it renders geographic features using the `geoNaturalEarth1` projection and `geoPath` generator. The visualization includes zoom and pan capabilities via `d3.zoom`, with country name tooltips from a TSV dataset. Clicking a country updates an array of selected IDs, triggering a re-render that recolors the clicked nation.

RRobert Curtis

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

76% match

Loading thumbnail…

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp

76% match

Loading thumbnail…

Interactive Map

This interactive map displays country boundaries from the world-atlas TopoJSON dataset, rendered as SVG paths using d3.geoPath and an equirectangular projection. Hovering over a country highlights it in blue via CSS, while d3.zoom enables pan and zoom transforms on the map group. Country names from the accompanying TSV file appear as tooltips through SVG title elements, all loaded asynchronously with d3.json and d3.tsv.

Ccornshoots

76% match

Loading thumbnail…

Map D3.js HW

This interactive world map lets users click individual countries to select them, highlighting each in orange with a red stroke while displaying the country’s name in red text above the SVG. Clicking a selected country reverts its fill to light green, though the name label remains visible. The visualization uses D3 v5 and TopoJSON, rendering with `d3.geoPath` and the `geoNaturalEarth1` projection, with zoom support via `d3.zoom`. Country names come from a TSV file paired with the world-atlas TopoJSON dataset.

KKCachel

75% match

Loading thumbnail…

Map.js!

This map visualization displays the world’s countries by using a Mercator projection to render geographic features as filled SVG paths on a light gray sphere background. The code loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with `topojson.feature`, then draws each country using `d3.geoPath`. Styling applies a blue fill with dark strokes and a subtle opacity, while the hidden overflow and full-bleed body create an immersive, full-window presentation.

Aargonaeut

75% match

Loading thumbnail…

Interaction

A D3.js visualization displays a world map using a natural Earth projection, with countries rendered as SVG paths colored in bright green against a dark sea. Hovering a country turns it red and reveals its name via a tooltip. The map is built with `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.zoom` for interactive panning and zooming, while `d3.tsv` and `d3.json` load country names and geometries. A `topojson` feature layer draws each country, and CSS handles hover styling.

MMatan

75% match