Skip to main content
SimilarExport ZIP
100%

Map Collab

✓ Published0🌍 Public
Aandy
Last edited Feb 13, 2022
Created on Feb 10, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Map Collab

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.

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
71% match
Loading thumbnail…

Hotel checkin and checkout by Cities

A world map displays simulated hotel check-ins and checkouts across multiple cities, with circles sized by guest counts and colored to indicate business versus leisure travel. A time-brushing histogram below filters the map data by date range. Built with React and D3, the visualization uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.scaleSqrt` for mapping and scaling, while `d3.brushX` enables interactive temporal selection. Data is generated procedurally, simulating guest arrivals and departures over 20 days.

MMarcelo
71% 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
70% 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
70% match
Loading thumbnail…

Map Tutorial

This visualization presents an interactive world map using a Mercator projection, rendered as SVG paths with animated zooming capabilities. Built with D3 v7 alongside the d3-geo and topojson libraries, the map displays countries from the world-atlas 110m JSON dataset as black-filled paths with whitesmoke borders. When users click a country, the map smoothly transitions and scales to center on that region, using d3.geoPath projections and transition animations with cubic easing. Clicking the same country again resets the view to the full world map.

Llupica.matthew@gmail.com
69% 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
69% match
Loading thumbnail…

Map Pan / Zoom with Cities and Text v6

This D3.js (version 6) example displays a world map centered on the Pacific Ocean using a Mercator projection, with red circles marking cities from a CSV data file and city names as text labels. Each city is hyperlinked to a Google search for its name. The visualization supports pan and zoom interactions through the `d3.zoom` API, applying the zoom transform to the map paths, city circles, and text elements. The map geometry comes from a TopoJSON file processed with the `topojson` library, and all rendering uses SVG.

Dd3noob
69% match