Skip to main content
SimilarExport ZIP
100%

Swe hexmap

✓ Published0🌍 Public
PPatrick Wojda
Last edited Jan 17, 2020
Created on Oct 3, 2017

This example displays a hexbin map of Sweden, overlaid with the locations of Systembolaget stores and agents from a JSON dataset. It shows the distance from each hexagon’s centroid to the nearest store, using opacity to highlight areas of sparse coverage. The visualization is built with D3 v4, using `d3.geoMercator` and `d3.geoPath` to project and render hexagon polygons from GeoJSON, while `d3.polygonCentroid` and turf’s `distance` compute proximity. A glow filter and black background emphasize the network of points and store distribution across the country.

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, city</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/16409749087544771963dee994a8568c'>Swe hexmap</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/da50ab97d089812850bd9dac358f17e3'>Swe hexmap</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/07610fc15224d7f82416436a461133f3'>Swe hexmap</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/bd2c2f81ccb3d1fdbe2e3f45ac7d102e'>Swe hexmap</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/5df5913f3017b14409cb81a19641af4c'>Swe hexmap</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/82bd63db1dbff0ffeae9665ad4d27fb5'>Swe hexmap</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/3138864cb74c88ff785da6a527573c94'>Swe hexmap</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/a31b12d82026fb8e1af803b31cd642f5'>Swe hexmap</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/dfcd1e82e9087f9fc211849a98a001e5'>Swe hexmap</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/a0b2805776f50fb22b44ca58ed991216'>Swe hexmap</a>

gpl-3.0 Licensed

Similar vizzes

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
Loading thumbnail…

Bivariate Hexbin Map

This example maps approximately 3,000 Walmart store locations across the United States using hexagonal binning. It projects the store coordinates with the d3.geoAlbersUsa projection, then groups them into hexagons using d3.hexbin. Hexagon area encodes the number of stores in each bin, while the fill color encodes the median store age, ranging from black for older stores to steelblue for newer ones. The map is rendered as SVG, with d3.geoPath drawing the nation and state boundaries from TopoJSON data.

Mmbostock
76% match
Loading thumbnail…

Sweden map

This example presents a choropleth-style map of Sweden’s counties, rendered as SVG paths with dark blue fills and gold interior borders. The visualization uses React to manage state and D3 v5’s `geoMercator` projection with `geoPath` and `fitExtent` to scale and center the map. County boundaries and interior borders are derived from a TopoJSON file using `topojson.feature` and `topojson.mesh`. The code includes a commented-out `geoEqualEarth` alternative and a video link, though the active map focuses solely on geographic outlines without additional data encoding.

VVenkata Sai Preetham
75% match
Loading thumbnail…

Sweden Map

This example presents a choropleth-style map of Sweden’s counties, rendered as SVG paths using the Mercator projection via `d3.geoMercator` and `d3.geoPath`. The map outlines each county with a red stroke and aqua fill, while internal borders are highlighted in teal. County geometries are loaded from a TopoJSON file, converted to GeoJSON using `topojson.feature` for areas and `topojson.mesh` for boundaries. The React component fetches and uses the data through `useData`, producing a static, interactive-free visualization.

VVineela Reddy
74% 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
74% match
Loading thumbnail…

VarshaGSweden

This example displays a choropleth-style map of Sweden’s counties, highlighting internal boundaries in cyan and county fill in dark blue on a light background. Using React with D3 v5, it loads TopoJSON data from a GitHub gist, converts it to GeoJSON with `topojson.feature`, and renders paths via `d3.geoPath` with a Mercator projection fitted to the viewport. Interior mesh lines are drawn separately using `topojson.mesh`. The visualization updates reactively when data loads.

VVReddy913
74% 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
74% 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
73% match