Skip to main content
SimilarExport ZIP
100%

Swiss Cantons and Municipalities

✓ Published0🌍 Public
OOscardR
Last edited Jun 24, 2019
Created on Jun 24, 2019

This example visualizes the boundaries of Swiss cantons and municipalities, combining both administrative levels into a single interactive map. The geographic data comes from the Swiss Maps repository as a TopoJSON file, which the code parses and renders using WebGL. The visualization is built with Vue.js, and the map geometry is drawn using the TopoJSON library to decode the topology, with d3.geoPath generating the projected paths for each region. Distinct styling differentiates cantonal borders from municipal subdivisions.

AI-generated description

Map of Switzerland with TopoJSON and map data from Swiss Maps. Cantons and municipalities are combined in a single TopoJSON file.

Similar vizzes

Loading thumbnail…

Swiss Cantons

This example displays a choropleth map of the Swiss cantons, labeling each region with its name. The visualization is rendered as scalable vector graphics (SVG) using D3.js version 3 and the TopoJSON library. It loads geographic data from a `readme-swiss.json` file and projects it using an Albers equal-area conic projection with specific parameters for Switzerland. Canton boundaries are drawn as white paths, while `d3.geo.path()` handles the map projection and centroid calculations for label placement.

Mmbostock
83% match
Loading thumbnail…

Swiss Cantons & Lakes

A map of Switzerland displays gray canton boundaries and semi-transparent blue lakes, highlighting consistent borders where the two coincide. The visualization renders geographic data as SVG paths using `d3.geo.path` and `topojson.feature`, with `topojson.mesh` drawing white canton boundaries. Canton and lake shapes come from a pre-processed `ch.json` TopoJSON file, built from swiss-maps data via `topojson-merge` to ensure shared boundaries align. Hovering over any feature turns it orange.

Mmbostock
83% match
Loading thumbnail…

Swiss Map

This visualization shows a choropleth-style map of Switzerland, displaying all municipal boundaries with a teal fill and interior borders in a lighter stroke. The map renders as SVG using React, with `d3.geoPath` and a projection applied to draw the geographic features from TopoJSON data loaded via `d3.json`. The data originates from the `swiss-maps` package on unpkg, which provides combined municipality geometry. The code also uses `@turf/bbox` to compute the map’s extent, though the bounds are not explicitly applied to scale the view.

Vvmonney
80% match
Loading thumbnail…

Untitled

A static choropleth-style map of Switzerland displays each canton as a gray filled polygon with white boundaries, overlaid with the canton names positioned at their geographic centroids. The visualization is rendered in SVG using D3 v3, with the Albers projection and a TopoJSON dataset (`readme-swiss.json`). The code applies `d3.geo.path` for geographic feature rendering, `topojson.feature` and `topojson.mesh` for extracting canton polygons and boundaries, and `path.centroid` to place the text labels.

BBaumii-ui
79% match
Loading thumbnail…

Land use statistics map

This example displays a land use statistics map of Switzerland, rendering municipal boundaries as black vector paths on a light background. It loads GeoJSON data from `ch_municipalities.geojson` and projects them using `d3.geo.mercator()` with a fixed scale and center point, then translates the projection to fit a 900 by 600 pixel SVG container. The code uses `d3.geo.path()` to generate the path data for each feature, appending `path` elements to the SVG via a data join. The map is static, with no interaction or additional styling beyond the basic class assignment.

Aachintyatripathi
72% match
Loading thumbnail…

SwedisH MAP

This example displays a choropleth-style map of Swedish counties, rendered as SVG paths with cyan fills and green boundary lines between regions. The visualization uses a React component structure with D3’s `geoMercator` projection and `geoPath` to draw geographic features from TopoJSON data. The map is loaded via the `json` method and processed with `feature` and `mesh` from the TopoJSON library, with the projection fitted to the viewport using `fitExtent`.

Sspandhanabadekol
68% match
Loading thumbnail…

s map

This map of Swedish counties visualizes administrative boundaries using a geoMercator projection fitted to the extent of the geographic features. Built with React and D3 v5, the code loads TopoJSON data from a GitHub gist and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. The `d3.geoPath` generator renders both county outlines (`feature`) and interior borders, with styling defined in CSS that fills each county in teal and strokes boundaries in contrasting colors. The visualization presents the simplified county geometry as an interactive SVG graphic.

SSaahithi49
68% match
Loading thumbnail…

Gist 1f575522ca61946b31d92bbd146a9dce

This visualization compares French legislative electoral districts between 2012 and 2017, showing how commune boundaries and canton assignments shifted across the two years. It displays two side-by-side maps, likely using Three.js with WebGL rendering to animate or morph between the two configurations. The data comes from CSV files containing commune-to-canton and commune-to-district correspondences for both years. The visualization relies on the Vue framework to manage the interface and handle state transitions, with the geographic comparisons rendered through WebGL for smooth interactive exploration.

TThomasG77
67% match