Skip to main content
SimilarExport ZIP
100%

Map Collab

✓ Published0🌍 Public
Aandy
Last edited Feb 11, 2022
Created on Feb 10, 2022
Forked from HTML Starter

A map of London and Paris displays hotel locations as brown circles overlaid on a Google Map. The visualization combines the Google Maps JavaScript API with D3.js v3 to render SVG markers that are positioned using the map's projection. Hotel data, including latitude, longitude, and review scores, is loaded from a JSON file, and markers are hidden when the map zoom level falls below six.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Map Collab

This visualization overlays hotel data from a JSON file on an interactive Google Map of Western Europe, with a separate layer of city markers. Clicking a city marker zooms the map to that city at a predefined level. Hotel markers become visible only at higher zoom levels, while city labels disappear when zoomed in, managing clutter. The map utilizes the Google Maps JavaScript API for rendering, and D3.js (v3) is used to draw SVG circles for hotel locations and handle the data-driven overlay layer.

Aandy
90% match
Loading thumbnail…

Google Map + D3.js

This example combines Google Maps with D3.js to display bars and lounges around a Los Angeles hotel, using data from the Yelp API. A custom Google Maps overlay projects each business's latitude and longitude onto the map, rendering them as styled SVG markers with numbered labels. The map itself uses custom styling to alter road, landscape, and transit appearance, while the markers are drawn as red circles with white strokes. The code relies on the Google Maps JavaScript API, D3 v3, and jQuery for data handling, with the input data stored in a query.json file.

LLucaZampieri
72% 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
69% match
Loading thumbnail…

My map

This example displays a map of Europe and North Africa with city locations marked by circles and labeled with their names. It uses a Mercator projection via `d3.geoMercator` and renders the country boundaries as SVG paths through `d3.geoPath`. City data from `cities.csv` is plotted as circles and text labels, with the map styled using custom CSS classes. The visualization loads both the GeoJSON country boundaries and the CSV data concurrently using `Promise.all`.

LLeo
68% match
Loading thumbnail…

Untitled

A map of France displays colored circles sized by the percentage of survey responses from each university, with a tooltip showing the exact value on hover. The visualization loads geographic boundaries from a TopoJSON file and renders them as SVG paths using `d3.geoPath` with a custom composite projection from compmap.js. Circles are positioned via the projection, sized with `d3.scaleSqrt`, and animated on mouseover through D3 transitions, while CSV data drives the interactive tooltips.

TTimothyMiage
68% match
Loading thumbnail…

My map

This map displays global cities as labeled points overlaid on a Mercator-projected world map. It uses d3.geoPath to render country boundaries from a GeoJSON file and d3.geoMercator to project coordinates. City data from a CSV file is plotted with SVG circles and text labels. The visualization is built with React, uses SVG rendering, and loads both datasets via Promise.all.

VVineel Gannu
68% match
Loading thumbnail…

Locator Map

This locator map displays London, UK, as the central point, surrounded by major cities with population data plotted on a Mercator projection. It uses D3.js's `geoPath` and `geoMercator` for geographic projection, `geoGraticule` for the reference grid, and RBush for collision detection to intelligently label cities without overlap. The map includes a scale bar and city labels, with data sourced from TopoJSON world geography and a CSV of world cities.

CCurran Kelleher
68% match
Loading thumbnail…

London

A scatterplot maps Airbnb listings across London by latitude and longitude, with each point colored from red to green based on a normalized attraction index. The React app loads CSV data and passes it to a D3 visualization that renders axes, labels, and circles. D3's `scaleLinear` and `extent` set the geographic scales, while a custom color interpolation blends hex values between minimum and maximum index values.

MMatt Hagger
68% match