Skip to main content
SimilarExport ZIP
100%

Swiss Cantons

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Dec 4, 2012

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.

AI-generated description

A Swiss cantons TopoJSON example, via interactivethings.

gpl-3.0 Licensed

Similar vizzes

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
89% 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
89% 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
83% 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
75% 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
73% 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
73% match
Loading thumbnail…

Swedish map

This example displays a choropleth map of Swedish counties, with each region filled in teal and interior boundaries highlighted in a contrasting color. It visualizes the geographic subdivisions of Sweden using geospatial data. The map is rendered as SVG with React, using the `geoMercator` projection and `geoPath` from D3 v5, and the TopoJSON data is converted to GeoJSON using the `feature` and `mesh` functions. The projection is fitted to the viewport via `fitExtent`. The data originates from a preprocessed TopoJSON file of simplified Swedish county boundaries.

PPatric Tysk
72% match
Loading thumbnail…

map

This example displays a choropleth map of Swedish counties (laen) using geographic data from a TopoJSON source. The visualization renders province boundaries as filled shapes in a blue-teal color, with interior borders highlighted in green, all drawn through SVG paths generated by `d3.geoPath` and the `geoMercator` projection. Built with React and d3.v5, the code applies the projection’s `fitExtent` method to scale and position the map within the viewport. The map is populated using `topojson.feature` and `topojson.mesh` to extract geometries and internal boundaries from the fetched dataset.

Ppreethamkesa
72% match