Skip to main content
SimilarExport ZIP
100%

CBA_map

✓ Published0🌍 Public
LLaurens
Last edited Feb 15, 2022
Created on Feb 15, 2022
Forked from Js template

This map visualization displays locations of kombucha-related businesses and events across Amsterdam, using colored circles to distinguish between origins, resellers, and events. The d3.js and Leaflet code generates an organic growth pattern by repeatedly spawning smaller colored circles near original data points, simulating diffusion across the map. It renders over a dark CartoDB tile layer using Canvas elements, with data loaded from a local JavaScript file containing coordinates and category labels.

AI-generated description

An old leaflet project I want to use for a prototype

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot - Events in Amsterdam

This scatterplot visualizes event locations across Amsterdam on latitude and longitude axes, with circles colored by category such as museums, parks, and beaches. Hovering over a circle reveals the event name in a tooltip and updates a preview image from the data. A legend allows filtering by category, while zooming adjusts the dot size. The visualization uses D3 v5 with SVG rendering, an ordinal color scale from `d3.schemePaired`, and d3.zoom for interaction, loading data from a JSON file containing multilingual event descriptions.

LLaurens
67% match
Loading thumbnail…

Sized Points on a Map

This map of Amsterdam displays the locations of universities and colleges, shown as small yellow circles, layered over the city’s neighborhoods, which are colored by district. A tooltip appears on hover, and clicking a school highlights it while fading the others. The visualization uses D3 v5 with a Mercator projection (`d3.geoMercator`) and path generation (`d3.geoPath`) to render TopoJSON neighborhood boundaries. City data comes from a local JSON file, and interactions like zoom and tooltips are implemented with D3’s zoom and event handlers.

Kkylebot0
66% match
Loading thumbnail…

New code structure

This interactive map visualizes where parking facilities are located relative to city centers across the Netherlands, with buttons to filter parking spots for Amsterdam, Den Haag, Rotterdam, and Utrecht. The visualization uses d3.geoMercator and d3.geoPath to project Dutch township boundaries from TopoJSON, while parking locations are fetched from the RDW Open Data API, cleaned, and drawn as blue circles around a red city center marker. The code relies on d3.select, d3.json, d3.zoom, and TopoJSON's feature extraction, with SVG rendering and transition-based animations for zoom resets.

Mmbergevoet
66% match
Loading thumbnail…

Lets make a MAP with d3 :)

This interactive map displays the municipalities of the Netherlands, rendered as green SVG paths with orange borders atop a pink sphere. It uses the d3.geoPath and d3.geoMercator APIs to project TopoJSON data from cartomap.github.io. A red circle is also placed using a projection call, though its data binding appears incomplete. The visualization incorporates d3.zoom to enable pan and zoom interactions, which apply a transform to the map group.

SSimonPlanje
66% match
Loading thumbnail…

My map

A map of European and North African cities displays population data as small circles over a geographic projection of country boundaries. The visualization uses D3 v6 in a React framework, rendering as SVG with d3.geoMercator and d3.geoPath to draw the map. City coordinates from a CSV file are projected and plotted as circles, with labels showing each city’s name, all styled via a linked CSS file.

DDrJoNoble
65% match
Loading thumbnail…

RailAmsterdam

RailAmsterdam is a custom geographic visualization of Amsterdam’s neighborhoods rendered as SVG, using D3 v4 to draw a TopoJSON topology. The example encodes neighborhood boundaries via projected vector paths, with mouse interaction highlighting individual districts.

JJulesBlm
65% match
Loading thumbnail…

Untitled

This interactive map displays three local businesses in Ithaca, New York, with custom icons and popups that appear on hover. Users can filter the displayed points by category—All, Cafes, or Others—using Bootstrap-styled buttons. The visualization is built with Leaflet for map rendering and GeoJSON data from `businesses.json`, with Font Awesome icons via Leaflet.awesome-markers to distinguish cafes from other business types.

Ccharliemok
64% match
Loading thumbnail…

My map

This map displays European and North African cities as dark dots on a light landmass, with each city labeled by name. The visualization uses D3.js v5 to load geographic data from a GeoJSON file and city coordinates from a CSV file. It renders the map by applying the Mercator projection through `d3.geoMercator` and drawing paths with `d3.geoPath`, while circles and text elements are positioned using the same projection function.

Hhlkyt
64% match