Skip to main content
SimilarExport ZIP
100%

Land use statistics map

✓ Published0🌍 Public
Aachintyatripathi
Last edited Oct 11, 2020
Created on Oct 11, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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…

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
77% match
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
75% match
Loading thumbnail…

Swiss Cantons and Municipalities

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.

OOscardR
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
72% match
Loading thumbnail…

Geospatial Data

This example presents a geospatial visualization of world land masses and country borders, rendered as an SVG using a Natural Earth projection. The map displays land areas in teal, graticule lines, and interior boundaries in contrasting colors, with a light gray sphere background. The code uses React with D3 v6, specifically d3.geoPath for projection and path generation, and TopoJSON’s feature and mesh functions to process the world-atlas dataset. The visualization highlights geographic shapes without additional quantitative data, focusing purely on spatial layout.

MMonish Vassantrai
72% 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
72% match
Loading thumbnail…

Swedish map

This example displays a choropleth map of Swedish counties using SVG paths generated from TopoJSON data. The visualization loads geojson features from a UK counties dataset and renders them with D3’s geoMercator projection and geoPath. Built with React, the map uses a custom `useData` hook to fetch and transform the topology, while the `Map` component iterates over features to draw each region. The code demonstrates ES6 module imports, D3 integration via UNPKG, and React state management for asynchronous data loading.

AAshrith Kudidhi
72% match