Skip to main content
SimilarExport ZIP
100%

Swiss Cantons & Lakes

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Apr 7, 2014

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.

AI-generated description

This example shows how to create canton boundaries consistent with lake boundaries using topojson-merge. To avoid losing information, --no-quantization is used when creating the initial unmerged topologies. Data from interactivethings/swiss-maps.

gpl-3.0 Licensed

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
89% 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
85% 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
81% 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…

Map 5 - lan, topojson

A choropleth map of Swedish counties rendered from a TopoJSON file displays each region in alternating gray and red. Hovering over a county highlights it with a black stroke and brings it to the foreground, while a second SVG view shows a zoomed-in detail of that county, centered on its centroid, with its Swedish name displayed as a caption. The visualization uses the D3 v3 library with its `d3.geo.path` and `d3.geo.mercator` projection APIs, processing the `alla_lan(1).json` TopoJSON topology to generate the geographic features and render them as SVG paths.

PPatrick Wojda
68% match
Loading thumbnail…

Fork of Swedish map

This visualization displays the counties of Sweden as a choropleth-style map, with each region filled in teal and internal borders highlighted in cyan. It renders county boundaries using the TopoJSON format, converted to GeoJSON features and an interior mesh. The map is projected with a Mercator projection and fitted to the viewport via `d3.geoPath`’s `fitExtent`. Built with React and D3 v5, the code loads geographic data from a remote TopoJSON source and renders the paths as SVG elements.

Nnagamaheswar
67% match
Loading thumbnail…

Reldens

This example displays a choropleth map of Switzerland, visualizing “Relatedness Density” data for NUTS2 regions using a threshold classification. The map uses a sequential RdYlBu color scale from `d3.scaleSequential` and `d3.interpolateRdYlBu` to encode the values. It leverages the `eurostat-map` library to render the map with SVG, and includes a legend, tooltips, and an inset for small screens. The underlying CSV data is loaded from a GitHub gist, and a button allows downloading the resulting SVG.

SStefan Apostol
66% match