Annisa Farida

@annisafarida·3 public vizzes

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.

Sep 17, 2019

Loading thumbnail…

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.

Sep 17, 2019

Loading thumbnail…

Circles on a Map

This map visualizes population by country using circles sized with a square-root scale, where the area of each circle is proportional to a country's population. Users can pan and zoom the map, and hovering over a country reveals its name and population, while countries with missing data are colored differently. The visualization is built with D3 v5 and uses the `geoNaturalEarth1` projection, `geoPath` for rendering country shapes, and `scaleSqrt` for the circle sizes. Data comes from a CSV file and a TopoJSON world atlas, processed using the `topojson` library.

Sep 17, 2019