Map 5 - lan, topojson

100%

Map 5 - lan, topojson

✓ Published0🌍 Public

Last edited Aug 15, 2016

Created on Aug 15, 2016

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.

AI-generated description

A demo of TopoJSON on a U.S. counties shapefile from the U.S. census bureau. The same TopoJSON file can also be used to show states.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4122298'>U.S. Counties TopoJSON</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/dae443994bdd438c5c45688aeb0a4f03'>U.S. Counties TopoJSON</a>

gpl-3.0 Licensed

Similar vizzes

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

85% match

Loading thumbnail…

sverige

This visualization displays a map of Sweden's counties (län) using D3.js with SVG rendering. The map is projected using a Mercator projection fitted to a 400x400 canvas, with each Swedish county drawn as a separate path from TopoJSON geographic data. The code loads the map data from an external 'lan.json' TopoJSON file and uses d3.geoMercator to project the geographic coordinates, automatically scaling the map to fit the specified dimensions.

PPatrick Wojda

85% match

Loading thumbnail…

Swedish map

A choropleth map of Swedish counties rendered as SVG paths, colored in a dark red with light gray borders. The map uses a Mercator projection fitted to the county boundaries, with internal borders highlighted in purple. The visualization is built with React using d3.geoPath for projection and path generation, and topojson’s feature and mesh functions to extract county polygons and interior boundaries from a TopoJSON dataset. The code includes commented-out options for an equal-earth projection and for scaling/centering the map, but the active projection uses d3.geoMercator.

AABCDB15

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

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

83% match

Loading thumbnail…

Fork of Swedish map

This example displays a choropleth map of Swedish counties, using a teal fill with gray borders, alongside a cyan network of interior boundaries. Built with React and D3 v5, the visualization uses `geoMercator` for projection and `geoPath` to render the geographic features. The source data is a TopoJSON file of simplified Swedish counties, processed with the `topojson` library’s `feature` and `mesh` functions to generate both the county shapes and their shared interior borders.

JJustin Roberts

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

82% match

Loading thumbnail…

Swedish map - ICE 8

This example visualizes the counties of Sweden as a choropleth-style map, with each region filled in a muted red and interior boundaries highlighted in teal. Built with React and D3 v5, it loads TopoJSON data from a GitHub gist and converts it to GeoJSON using `feature` and `mesh` from the topojson library. The map is rendered as SVG using `geoMercator` projection and `geoPath`, with a `fitExtent` call to scale the map to fit the viewport.

Ssuchitra2602

82% match