Skip to main content
100%

sverige

✓ Published0🌍 Public
PPatrick Wojda
Last edited Mar 10, 2020
Created on Mar 9, 2020

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Swedish map

This visualization displays the counties of Sweden using a geographic map rendered with SVG. The map fills the entire viewport via a Mercator projection fit to the data extent, with each county filled red and internal boundaries highlighted in purple. The implementation uses d3-geo’s `geoMercator`, `geoPath`, and `fitExtent` to project GeoJSON features derived from a TopoJSON source via topojson’s `feature` and `mesh` functions. React manages the component state and renders the paths, while data is loaded asynchronously with `d3.json`.

RRakshithaRao27
85% 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
85% match
Loading thumbnail…

s map

This map of Swedish counties visualizes administrative boundaries using a geoMercator projection fitted to the extent of the geographic features. Built with React and D3 v5, the code loads TopoJSON data from a GitHub gist and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. The `d3.geoPath` generator renders both county outlines (`feature`) and interior borders, with styling defined in CSS that fills each county in teal and strokes boundaries in contrasting colors. The visualization presents the simplified county geometry as an interactive SVG graphic.

SSaahithi49
84% match
Loading thumbnail…

Fork of Swedish map

This visualization displays the counties of Sweden as an SVG map, rendered with a Mercator projection fitted to the geographic bounds of the country. County boundaries appear in teal with lighter interior borders, created using the `geoPath` and `feature`/`mesh` APIs from D3 v5 and TopoJSON. The data comes from a simplified Swedish counties GeoJSON file, loaded asynchronously via `d3.json` and integrated into a React component structure. The map is static, showing only geographic outlines without additional data encodings.

SSnapika
84% 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
83% match
Loading thumbnail…

Sweden

This example displays a choropleth of Sweden’s counties, rendered as a static SVG map without interactivity. Using React and D3 v5, it loads TopoJSON county boundaries via `d3.json` and converts them with `topojson.feature`. A Mercator projection (`d3.geoMercator`) and `d3.geoPath` draw the filled paths, with a fixed zoom scale and map dimensions. The code’s styling applies a teal fill and transparent stroke to each county.

HHaris Vidimlic
83% match
Loading thumbnail…

Sweden map

This example visualizes the counties of Sweden as a choropleth map, using a red fill for each county and yellow lines to highlight interior borders. The map is rendered as an SVG using React, with geographic data from a remote TopoJSON file. The code employs `topojson.feature` and `topojson.mesh` to extract county boundaries and interior edges, and `d3.geoPath` with the Mercator projection to project the geometries. The projection is fitted to the map's extent using `fitExtent`.

SSravyaAnnadi
83% match
Loading thumbnail…

Fork of Swedish map

This visualization displays the counties of Sweden as filled geographic regions, with interior borders highlighted in a contrasting color. The map is rendered using React and D3 v5, employing `d3.geoMercator` projection and `d3.geoPath` to draw features from TopoJSON data in the world-atlas dataset. The code applies `projection.fitExtent` to fit the map within the SVG canvas. The dataset source is the Data Canvas Sense Your City project, with geographic boundaries from the world-atlas countries-10m.json file.

SSreejaBellamkonda
83% match