Map 8 - map w. zoom

100%

Map 8 - map w. zoom

✓ Published0🌍 Public

Last edited Aug 30, 2016

Created on Aug 30, 2016

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`.

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>

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/78557cf1c00e63036fd92e84466aa60c'>Map 5 - lan, topojson</a>

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/ab208b1f5c3b85e5f9eed706d569f245'>Map 6 - dotmap, kommun, stockholm</a>

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/523ae2fb967ebe05c3bfea0598cdbdc4'>Map 7 - dotmap</a>

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/7bf8c0f9dd273c42687d33715676de9d'>Map 8 - map w. zoom</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/504af7dabff8f12faea27eb5e07390a8'>Map 8 - map w. zoom</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/dca1afb3f6ba01638b6c75050f458aea'>Map 8 - map w. zoom</a>

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

80% match

Loading thumbnail…

Map #4 - kommun

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.

PPatrick Wojda

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

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

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

76% match