Bono MAP

100%

✓ Published0🌍 Public

Aases1996

Last edited Jun 4, 2020

Created on Apr 9, 2020

This map shows the distribution of cities in Turkey, colored by region. The visualization uses a D3 geoEqualEarth projection and d3.geoPath to render the topojson features, with an ordinal color scale based on d3-scale-chromatic. A linked legend, built with custom SVG elements, allows users to filter regions by clicking, and the map supports pan and zoom via d3.zoom. The data comes from a CSV file of city-level analytics metrics.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

TP 10-12-22

This map visualization displays the geographic distribution of music albums, with country colors shaded by count according to a green scale. It shows a choropleth of world data where users can hover to see precise album counts and click to open a modal with detailed statistics about genres, artists, and yearly totals. The implementation uses D3 v5 with d3.geoMercator projection, d3.geoPath, and a d3.scaleLinear color scale, pulling TopoJSON country boundaries from world-atlas and loading country album counts from a local JSON file. Zooming is enabled via d3.zoom, with Bootstrap modals and tooltips providing interactivity.

TToky R

64% match

Loading thumbnail…

Earthquakes in Turkey

This visualization plots earthquake events across Turkish cities. Each point represents a single earthquake, with the x-axis showing the city, the y-axis showing the earthquake's magnitude (richter scale), and the color encoding the depth. The visualization uses the Vega-Lite API with a D3 data loading function, pulling CSV data from a GitHub gist. Points are rendered as semi-transparent circles with a tooltip displaying the magnitude on hover.

Gguangxinhu

64% match

Loading thumbnail…

Map it

This map visualizes world countries colored by their type, with a legend showing the categorical color scale. Built with d3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to render the TopoJSON world-atlas data, while d3.zoom enables panning and zooming. Hovering a country displays its name and type in a tooltip, and the d3.scaleOrdinal with schemeSpectral assigns colors.

DDolbyref113

62% match

Loading thumbnail…

Map with D3.js

This map displays the countries of the world in light green with black outlines, colored red on hover. The map supports zooming and panning through D3’s zoom module and geoMercator projection. It renders country shapes as SVG paths generated with d3.geoPath, using world-atlas data from TopoJSON and TSV files for country names. The code employs d3.select, d3.json, d3.tsv, and the topojson feature function to construct the visualization.

Aanastasiiaplatovskikh

62% match

Loading thumbnail…

Map It

This visualization uses a natural Earth projection and an ordinal color scale to map countries by their type, with a color legend and zoom interaction. Built with D3 v5, it uses `geoPath`, `geoNaturalEarth1`, `scaleOrdinal`, and `schemeSpectral` to render SVG paths, loading country data from the world-atlas TopoJSON and TSV files. The map colors each country based on its `properties.type`, and hovering highlights the country in red. A color legend shows the scale’s domain, and zoom transforms are applied via `zoom()` events.

DDolbyref113

61% match

Loading thumbnail…

Fork of world map w/ cities & countries pop!

This visualization displays a world map with cities and countries, using proportional symbols to encode population data. City locations are shown as circles, with their radius scaled according to population, while countries are shaded with an opacity value that reflects their total population, using data from the UN Population 2019 dataset. The map is rendered using D3.js geo projections with a Natural Earth projection, and the `d3.geoPath` API draws the geographic features. Country boundaries come from the World Atlas TopoJSON, and the city data is sourced from Simplemaps, with the entire scene rendered as an SVG.

Bbhanuteja1807@gmail.com

61% match

Loading thumbnail…

An interactive D3 map

This interactive D3 map displays a world map with countries colored pink and overlaid with green-bordered circles, visualizing numerical values from a CSV dataset via a color-coded choropleth. Built with React and D3 v5, it loads GeoJSON topology data from the world-atlas package and uses topojson’s feature and mesh functions to render land and country boundaries as SVG paths, while the data CSV is joined by ISO country codes for the visual encoding.

Nnouralkhoury

61% match

Loading thumbnail…

Merged

This interactive choropleth map visualizes the global distribution of album counts by country, using a green color scale that darkens with higher values. Users can zoom and pan via D3’s `zoom` behavior, hover to see a tooltip with country name and album total, and click to open a modal displaying additional statistics like top genres and artists. The map is rendered with `d3.geoPath` and topojson world data, while country counts come from a local `data_map.json` file, with colors mapped through `d3.scaleLinear`.

TTEKMS

61% match