Google Map + D3.js

100%

Google Map + D3.js

✓ Published0🌍 Public

Last edited Dec 4, 2017

Created on Dec 4, 2017

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.

AI-generated description

This is an example of using d3.js and Google Maps.

The data.json file is simply the output from the API Console page: https://www.yelp.com/developers/api_console, and was created using the conference hotel address in the "Near" field.

Here's the full query: http://api.yelp.com/v2/search/?term=Bars&location=Hyatt Regency Century Plaza, Los Angeles, CA&sort=2&limit=20&actionlinks=true Built with blockbuilder.org Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/jeremycflin/'>jeremycflin</a>'s block: <a href='http://bl.ocks.org/jeremycflin/2913a5bf30c340d8f8fe'>Google Map + D3 Example</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/e8dc726b051d3149e4afb2fc40e25cb9'>Google Map + D3 Example</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/da0b795313a955e4899b4f740f5a0473'>Google Map + D3 Example</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Mmbostock

77% match

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

72% match

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

71% match

Loading thumbnail…

D3 + leaflet + GForm

This example combines D3.js, Leaflet, and the Google Maps Geocoding API to visualize geocoded data from a Google Form spreadsheet on an interactive map. Circles are drawn on a Leaflet map using D3, with their positions updated based on the map view. The circles' fill colors correspond to categories in the data, and hovering over a circle triggers a smooth elastic transition that enlarges it, while clicking displays the venue's name, formatted address, and timestamp in an HTML tooltip panel. The map and circles animate in response to panning and zooming, and the data is loaded dynamically via Tabletop from a public Google Sheet.

FFedericopvs

71% match

Loading thumbnail…

Google Map + D3 Generated Layers

This example demonstrates a Google Map with multiple D3-generated layers overlaid, including choropleth countries, GeoHash grid cells, a heat map, a graph, and a graticule. The GMapLayered widget composites these layers, with countries colored by weight using a palette and GeoHash data shown as colored tiles. The visualization also renders a heat map and a graph of weighted points, all anchored to geographic coordinates. The code uses the hpcc-systems Visualization library’s map components to manage layer rendering and interaction.

GGordonSmith

68% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to build a map using the D3.js library. It loads GeoJSON data from a file and projects it using the `d3.geo.mercator` projection, with the map centered and scaled to fit the view. The code uses `d3.json` to fetch the data and `d3.geo.path` to generate SVG paths for each feature, styling them as the "zipcode" class. The page includes a YouTube tutorial video in an iframe, and the map is rendered as an SVG element with a blue sphere background.

Ssrrajendran

67% 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

67% match

Loading thumbnail…

d3.js with leaflet.js

This example demonstrates how to combine Leaflet.js and d3.js so that SVG circle markers stay fixed to geographic coordinates while maintaining a constant screen size. It loads five point locations from a local circles.json file and displays them as red, semi-transparent circles over an OpenStreetMap tile layer. The code uses Leaflet’s map.latLngToLayerPoint() method to convert geographic positions into pixel coordinates within the viewreset event handler, applying the result as SVG transform translations. The implementation relies on d3.json for data loading and d3 selections to append and update the circles.

Dd3noob

67% match