Skip to main content
SimilarExport ZIP
100%

map

✓ Published0🌍 Public
Ppreethamkesa
Last edited Apr 4, 2022
Created on Apr 3, 2022
Forked from map

A map of Estonian counties rendered as an SVG using React and D3. The visualization uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` with `fitExtent` to scale the map to the viewport. County boundaries are drawn as brown filled paths with darker stroke outlines, while interior borders are highlighted using a TopoJSON mesh. The geographic data is loaded from a remote TopoJSON file and processed with `feature` and `mesh` from the topojson library.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

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

Fork of Swedish map

This visualization displays a map of Swedish counties using a Mercator projection, with the counties filled in teal and their borders drawn in a complementary green. The code loads GeoJSON data via `d3.json`, processes it with the TopoJSON `feature` and `mesh` functions to extract county geometries and interior boundaries, and renders them as SVG paths using `d3.geoPath` within a React component. The map is fitted to the viewport, and the styling is applied through CSS classes.

AAndre J Denais
83% match
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
83% match
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
83% match
Loading thumbnail…

map

This example displays a map of U.S. counties as unfilled, stroked polygons on a blank background, all rendered as SVG paths. The map shows the geographic boundaries without additional fill or data encoding. The code uses React with D3 v5 functions including `d3.geoAlbersUsa` for the projection, `d3.geoPath` to generate the path data, and TopoJSON's `feature` function to convert topojson data into GeoJSON features. Data loads asynchronously via `d3.json` from a remote URL, and each feature is mapped to an SVG `<path>` element with a thin teal stroke.

CChase Hall
83% match
Loading thumbnail…

Fork of Swedish map

This map visualizes Swedish counties, with each region filled in teal and interior borders highlighted in cyan. The data originates from a TopoJSON file of simplified Swedish county boundaries. Built with React and D3 v5, the visualization uses `geoMercator` projection and `geoPath` to render the geographic features and mesh outlines. The projection is fitted to the specified extent using `fitExtent`, and the map is drawn as SVG paths within a React component.

SSreejaBellamkonda
81% match
Loading thumbnail…

Fork of Swedish map

This visualization displays a map of Swedish counties, rendered as dark filled polygons with teal boundaries between regions. The map uses a Mercator projection fitted to the geographic data. Built with React and D3 v5, the code employs `geoMercator`, `geoPath`, and `fitExtent` to project and scale the map. TopoJSON data is converted to GeoJSON features and meshes using the `feature` and `mesh` functions from the topojson library.

Mmanvithareddykarra
81% 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
81% match