Skip to main content
SimilarExport ZIP
100%

Google Map + D3 Generated Layers

✓ Published0🌍 Public
GGordonSmith
Last edited Aug 31, 2017
Created on Dec 29, 2015

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.

AI-generated description

Google Map with several D3 generated layers:

  • Graticule
  • Countries
  • US Counties
  • GeoHash
  • Pins
  • Graph
  • Heat

GitHub

Test Page

Similar vizzes

Loading thumbnail…

D3 ConicEqualArea Projection + D3 Generated Layers

This example demonstrates a multi-layered D3 map visualization using a conic equal-area projection, combining graticules, country choropleths, US county choropleths, geohash cells, heat points, and a graph network overlaid on the same geographic canvas. It uses the HPCC Systems visualization library, with layers such as ChoroplethCountries, GeoHash, ChoroplethUSCounties, Heat, and Graph, all rendered via D3’s geographic path machinery. The data includes country weights, geohash counts, county values, heat coordinates, and graph nodes, each styled with distinct palettes and opacities to reveal spatial patterns. The map is interactive, centered at the equator with a zoom level of two.

GGordonSmith
82% match
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
76% match
Loading thumbnail…

Create a heatmap layer

This example creates an interactive heatmap layer on top of a Mapbox dark basemap, using Mapbox GL JS. It visualizes point data from a GeoJSON source, showing earthquake or seismic intensities across the U.S. The heatmap uses color gradients and zoom-dependent intensity, radius, and opacity, transitioning to a circle layer at higher zoom levels. The circles also encode magnitude via a color scale, with a white stroke. The code loads the GeoJSON data from a remote gist URL and applies heatmap and circle layers with interpolation functions.

WWill Carter
72% 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
72% match
Loading thumbnail…

Google Maps Interactive

This interactive map displays world countries on a natural Earth projection, with hover effects highlighting individual nations. The visualization uses D3 v5’s geoNaturalEarth1 projection and geoPath to render SVG country boundaries from World Atlas TopoJSON data, while country names come from matching TSV metadata. A zoom behavior enables pan and zoom interactions, applied to a group element containing the map. Countries appear as light green shapes with dark strokes, turning red on hover, all rendered client-side in a React framework.

AAnanya157
70% match
Loading thumbnail…

Map

A choropleth-style interactive map displays world country shapes in light gray against a dark background. Hovering over a country highlights it in a darker tone and reveals its name in a label with a blue background, while all labels remain hidden by default. The visualization uses D3 v4 with `d3.geoPath` to render geographic features from GeoJSON data, with CSS classes controlling country fill, stroke, and label visibility. The map fills the entire viewport within a dedicated SVG container.

AArnaudBru
70% match
Loading thumbnail…

Map

A choropleth-style interactive map displays world country shapes in light gray against a dark background. Hovering over a country highlights it in a darker tone and reveals its name in a label with a blue background, while all labels remain hidden by default. The visualization uses D3 v4 with `d3.geoPath` to render geographic features from GeoJSON data, with CSS classes controlling country fill, stroke, and label visibility. The map fills the entire viewport within a dedicated SVG container.

AArnaudBru
70% match
Loading thumbnail…

d3.carto - Basic d3.carto Map

This map uses the d3.carto.map plugin to render a single GeoJSON layer of world country boundaries, styled with a blue fill and black strokes. The page loads the map into a full-screen div, applies zoom/pan controls via the plugin's built-in interface, and enables clickable features for interactivity. Data comes from a local world.geojson file, with countries drawn as SVG polygons; the accompanying CSS defines the visual styling for map elements, controls, and modal dialogs.

663anp3ca
70% match