Map #4 - kommun

100%

Map #4 - kommun

✓ Published0🌍 Public

Last edited Jan 17, 2020

Created on Aug 12, 2016

This example visualizes Swedish municipalities on a map, with each region filled by a random color and overlaid with circles of varying sizes at their centroids. One municipality, Gotland, is annotated with a label and leader line. The map is rendered as SVG using D3 v4 with a Mercator projection and a `d3.geoPath` generator, while `d3.geoCentroid` computes circle positions. Municipal boundaries come from the included `lan.json` TopoJSON file, and the code applies a glow filter via SVG defs.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/a849b7cd1c15350560b93ce8752be363'>Map #1</a>

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/723d1b4f3d6b288028ade7fcacf66cd9'>Map #4 - län</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Map #4 - län

This example displays a map of Swedish counties using a Mercator projection, with each region filled by a random light or orange color. Circle markers, sized and colored randomly, appear at the centroid of each county, and a label identifies the island of Gotland. Built with D3 v4 and TopoJSON, it uses `d3.geoMercator`, `d3.geoPath`, and `d3.geoCentroid` to project and draw the geographic features as SVG paths and circles.

PPatrick Wojda

89% match

Loading thumbnail…

Map 6 - dotmap, kommun, city

This map shows Swedish municipalities as a dot map, highlighting areas with high proportions of residents connected to Stockholm, Gothenburg, or Malmö. Red circles sized by a square-root scale mark municipalities above a 5% threshold, with faint lines connecting them to the selected city. It uses D3 v3 with TopoJSON to load county boundaries and `d3.geo.mercator` with `d3.geo.path` for projection, while `d3.geo.centroid` positions each circle. Data comes from a local TopoJSON file (`alla_lan(1).json`).

PPatrick Wojda

84% match

Loading thumbnail…

Kommun glowing dots

This map of Swedish municipalities (kommuner) displays overlaid glowing dots that pulse and move, marking locations with the highest number of reported stories. The visualization uses a D3 v4 Mercator projection to render geographic boundaries from a local `lan.json` file. Randomly generated dots are placed near each region's centroid, with a searchable input and animated transitions that scale the view on click. The SVG rendering and `transition` animation API create a dynamic, interactive exploration of the data.

PPatrick Wojda

82% match

Loading thumbnail…

Map 8 - map w. zoom

This interactive map visualizes the normalized share of each Swedish municipality’s population that has moved to a selected city (Stockholm, Göteborg, or Malmö). Only municipalities above a threshold are highlighted in red, with color intensity and circle size proportional to the migration share, while others appear gray. The map is rendered as SVG paths using d3.geoPath and a Mercator projection from the TopoJSON file, and users can click a municipality to zoom in and see its properties. The code uses d3.v3, topojson.v1, and d3.selection methods for interaction.

PPatrick Wojda

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

80% match

Loading thumbnail…

Map 8 - map w. zoom

This interactive map of Swedish municipalities visualizes the share of residents who moved to a selected city (Stockholm, Göteborg, or Malmö), with red intensity representing higher migration rates and gray for below-threshold values. The map uses TopoJSON data loaded via `d3.json`, rendered as SVG paths through `d3.geo.path` with a Mercator projection. A drop-down menu triggers transitions that recolor the paths via `transition().duration()`, while clicking a municipality or searching by name highlights and brings it to the front using `moveToFront`.

PPatrick Wojda

80% match

Loading thumbnail…

MapD3

This interactive map of Sweden displays municipal boundaries as SVG paths, with a tooltip revealing each region’s name on hover. The visualization relies on D3.js v5’s `geoMercator` projection and `geoPath` generator, while the TopoJSON library supplies the administrative geometry from a GitHub-hosted dataset. Pan and zoom controls, implemented via D3’s `zoom` event, let users explore the country, and region styling changes color on mouseover.

HHaris Vidimlic

78% match

Loading thumbnail…

Map 7 - dotmap

This interactive dot map visualizes normalized migration data from Swedish municipalities to the selected city (Stockholm, Göteborg, or Malmö), using red color intensity to represent the proportion of each municipality’s population that moved. A dropdown menu switches between target cities, and a search box highlights a chosen home municipality by moving it to the front with a styled stroke. Built with D3 v3 and TopoJSON, the map renders county boundaries from a U.S. Census-derived TopoJSON file adapted for Swedish regions, using a Mercator projection and SVG paths with circle overlays for emphasis.

PPatrick Wojda

78% match