Circles on a Map of Slovakia

100%

Circles on a Map of Slovakia

✓ Published1🌍 Public

Last edited Sep 17, 2019

Created on Sep 17, 2019

Forked from Circles on a Map of Slovakia

This example displays a map of Slovakia with circles positioned at the centroids of each district, sized according to the number of apartments in multi-story residential buildings. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath`, with topojson data loaded asynchronously. Circle sizes are scaled using `d3.scaleLinear`, and a legend is generated with a custom `sizeLegend` function. The visualization is rendered as SVG in a React app and supports zooming through D3’s zoom behavior.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map of Slovakia

A choropleth map of Slovakia encodes the number of apartments in apartment buildings per district as circles, scaled by a linear `d3.scaleLinear` and positioned at each district’s centroid via `d3.geoCentroid` and a `geoMercator` projection. Districts render as SVG paths from TopoJSON data, with hover highlighting, while a separate `sizeLegend` provides tick labels. The map supports zooming and panning through `d3.zoom` and uses `d3.tsv` and `d3.json` to load and join tabular census data.

AAnnisa Farida

95% match

Loading thumbnail…

Circles on a Map of Slovakia

A choropleth map of Slovakia displays districts colored by municipal boundaries, overlaid with scaled circles indicating the number of apartments in residential buildings per district. The visualization uses D3 v5 with a Mercator projection and `geoPath` to render the TopoJSON geometry, while circle radii are sized via a linear `scaleLinear`. District data from a TSV file is joined with geometric features, and a `sizeLegend` displays the population scale. Pan and zoom interactions are enabled through a D3 zoom behavior.

PPeter S

93% match

Loading thumbnail…

Choropleth map of Slovakia II

This interactive choropleth map of Slovakia colors each district by its administrative region, with a legend for filtering districts by region and zooming and panning available via d3.zoom. Built with React and D3 v5, it renders SVG paths generated by d3.geoMercator and d3.geoPath from TopoJSON data loaded alongside district-level TSV statistics. The map uses d3.scaleOrdinal with a spectral color scheme, and hovering reveals district names via SVG title elements.

Zzalix

81% match

Loading thumbnail…

Choropleth map of Slovakia II

This interactive choropleth map colors Slovakia’s districts by region using an ordinal color scale and a Mercator projection. Clicking a legend item highlights matching districts and dims others, while zooming and panning are enabled via `d3.zoom`. The map is rendered as SVG with `d3.geoPath`, using TopoJSON and TSV data joined by district name, with hover tooltips showing district names and values.

PPeter S

81% match

Loading thumbnail…

Choropleth map of Slovakia

This choropleth map of Slovakia colors districts by region, using a spectral color scale. The map is rendered with SVG and uses `d3.geoMercator` and `d3.geoPath` to project and draw administrative boundaries from TopoJSON data. A legend allows selection of a region, which highlights the matching districts and dims others. Zoom and pan are enabled via `d3.zoom`.

PPeter S

81% match

Loading thumbnail…

Map of Slovakia II

A choropleth-style map of Slovakia renders district boundaries as SVG paths, filled in light green with thin black strokes, on a white background. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to convert TopoJSON data from a local `okresy.json` file into geographic features. An auxiliary feature below the map displays a list of filtered car prices, generated asynchronously from a hardcoded dataset via a promise.

PPeter S

80% match

Loading thumbnail…

Cheap tricks for Slovakia

This example displays an interactive choropleth map of Slovakia’s districts, highlighting each district’s name on hover. The map is rendered using SVG with D3 v5’s `geoMercator` projection and `geoPath`, while `topojson.feature` converts district boundaries from a TopoJSON file. District labels are linked via a TSV file, and zooming is enabled through D3’s `zoom` behavior. The page also includes a separate car-report demo that uses Promises and ES6 modules.

Mmounika-hub

79% match

Loading thumbnail…

lets make a Map of Slovakia

This example displays a map of Slovakia using a dark blue spherical backdrop and light green country boundaries. It loads world TopoJSON data, converts it to GeoJSON, and renders the paths with an SVG projection. The code uses `d3.geoMercator`, `d3.geoPath`, and `topojson.feature` to position and draw the geometry. It also demonstrates asynchronous data loading via a Promise that simulates fetching car records, then formats and filters them into a text report shown on the page.

PPeter S

78% match