Circle on a Map

100%

Circle on a Map

✓ Published0🌍 Public

Last edited Nov 6, 2019

Created on Nov 6, 2019

This interactive map of the world shows each country colored by its DegreeId value from the Iran dataset, using d3.geoPath with the geoNaturalEarth1 projection to render SVG paths. Users can pan and zoom via the d3.zoom API, while a color legend built with d3.scaleOrdinal and schemeSpectral displays the categorical color mapping. The visualization loads geographic data from TopoJSON and CSV, then binds the CSV attributes to country features.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles on a Map

This example displays world country outlines colored by population data from the UN, overlaid with a custom color legend. The map uses d3.geoNaturalEarth1 for projection and d3.geoPath to render geographic features, with zoom interaction via d3.zoom. Circles positioned using d3.geoCentroid appear on country centers. The legend demonstrates a reusable d3 module with SVG rendering, while data loads through d3.csv and d3.json with topojson.feature.

PPiotr Paszek

81% match

Loading thumbnail…

Circles on a Map

This interactive map colors countries by economic classification using a diverging spectral color scale. Built with D3 v5, it renders a Natural Earth projection via `d3.geoPath` and loads data from the World Atlas TopoJSON and TSV files. A hover effect turns countries red, and the color legend with labeled circles is generated by a custom reusable function. Zooming is enabled through `d3.zoom`, transforming the map group on user interaction.

MMiss-Programmer

81% match

Loading thumbnail…

circles on the map

This visualization displays a world map with countries colored green or red based on data from a CSV file, indicating a binary attribute for the year 2020. The map uses the D3.js library with a `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features. TopoJSON data from the visionscarto-world-atlas is merged with the CSV data, and an SVG path is generated for each country. Zoom functionality is enabled via `d3.zoom`.

Nntech9613

80% match

Loading thumbnail…

Circles on a map

This map visualization displays circles sized by a country’s 2018 value, positioned at each country’s centroid using the `geoNaturalEarth1` projection and `geoPath` for rendering the world in SVG. The circles’ radii come from `scaleSqrt`, while countries are colored green or red based on whether they have a value, with a categorical `scaleOrdinal` color legend. Data is loaded from a CSV and TopoJSON via `d3.csv` and `d3.json`, processed with `topojson.feature`, and the SVG supports zooming through `d3.zoom`.

Bbencestubnya

80% match

Loading thumbnail…

Circles on a map

This visualization shows a world map colored by each country's economy category, with a legend displaying the color scale on the left side. The map uses a natural Earth projection, rendered as SVG paths with a blue ordinal color scheme. The code loads geographic data from world-atlas TopoJSON and country metadata from a TSV file, merging them via ISO country codes. Interaction includes zooming via d3.zoom and a hover effect that turns countries red. The color legend is built with custom d3 selections, circles, and text labels.

Aankita1mit

80% match

Loading thumbnail…

Circles on a map

This example displays a natural Earth projection world map with interactive zooming and panning, where each country is rendered as a light green path that turns red on hover. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` for map geometry, with country shapes loaded as TopoJSON data from the world-atlas package and names joined via TSV metadata. The visualization demonstrates modular ES6 imports, including `topojson.feature` for converting TopoJSON to GeoJSON, and an SVG-based rendering approach with `d3.zoom` for user interaction.

MMauradion

80% match

Loading thumbnail…

Circles on a map

This visualization displays a natural Earth projection map with circles overlaid on each country, sized proportionally to its 2018 population and colored by data availability. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while d3.scaleSqrt and d3.geoCentroid position the circles. Population data is loaded from a UN CSV file, merged with TopoJSON world geometry via topojson.feature, and filtered for valid values. Zooming is enabled through d3.zoom, and a size legend with formatted tick labels explains the circle scale. Countries missing data appear in red, and hover tooltips display the region and exact population.

ZZ-Richard

79% match

Loading thumbnail…

Circles on a Map

This visualization displays a world map with semitransparent circles overlaid on each country, sized proportionally to population data from 2018. The map renders using d3.geoNaturalEarth1 projection and d3.geoPath, while circle sizes are scaled with d3.scaleSqrt. Zooming is enabled via d3.zoom. The code includes color and size legends built with reusable functions, and loads data from a CSV and TopoJSON world atlas using d3.csv and topojson.feature.

NNeepaB

79% match