project

100%

✓ Published0🌍 Public

Last edited Apr 24, 2018

Created on Apr 24, 2018

This example overlays labeled markers on a Google Map to show population counts and elevation data for locations on the Big Island of Hawaiʻi, with each marker opening an info window containing the full CSV record. It combines the Google Maps JavaScript API with D3.js’s `d3.csv` to load `echteMega.csv` and create custom circular markers whose labels display the population value. The map uses terrain view, and the markers are styled with a red fill and semi-transparent opacity, while the info windows render the location coordinates, color code, number, and elevation for each site.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

project

This example displays geographic markers on a Google Map for several Hawaiian locations, with each marker labeled by its population and linked to an info window showing details like elevation, number, and color coding from a CSV file. The map is initialized using the Google Maps JavaScript API with a terrain view centered on Hawaii. Data from `echteMega.csv` is loaded via D3.js v3, and each row triggers a marker creation with custom SVG icons and click listeners that open info windows. The visualization combines D3’s data loading with the Google Maps API for spatial rendering.

TTylerVaughan

93% match

Loading thumbnail…

PROJECT

This visualization plots five locations on a Google Map of Hawaii, using D3.js to load a CSV and overlay custom markers. Each marker’s label shows the population, while its position comes from the location column’s latitude and longitude. Clicking a marker opens an InfoWindow with details about the site’s elevation, number, and female color code. The map uses Google Maps API with terrain view, and D3 v3 handles the data parsing and marker generation.

TTylerVaughan

85% match

Loading thumbnail…

PROJECT

This example plots five locations from a CSV file as labeled markers on an interactive Google Map. Each marker opens an info window displaying the location’s name, coordinates, female color code, population number, and elevation. The code uses the Google Maps JavaScript API for map rendering and D3.js (v3) for CSV parsing and data binding. Markers use a custom SVG path icon with a red fill, and the map is initialized with terrain view centered on the first data point.

TTylerVaughan

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

72% match

Loading thumbnail…

projet_1

This interactive map visualizes hourly pedestrian sensor data across a city, with the view switching between 24 time-steps via buttons. It uses a Google Maps base layer with a custom D3 overlay to render each sensor as a brown circle sized by pedestrian count, and labels each location. The code employs D3.js for data binding and scaling, Google Maps’ OverlayView for projection, and SVG for markers, with data loaded from two CSV files.

EEssohanamKouyou

68% match

Loading thumbnail…

Map

This map visualizes global population data from a CSV file (accessed via `d3.csv`), with each country’s population represented by a semi-transparent circle overlaid on a geographic projection. The circles’ areas are scaled using `d3.scaleSqrt`, and the map is rendered with `d3.geoPath` and `d3.geoNaturalEarth1` on an SVG. Users can pan and zoom via `d3.zoom`, and hovering over a country reveals a tooltip with its regional name and population. A size legend, built with custom `sizeLegend.js`, and a color legend (`colorLegend.js`) accompany the visualization. Interactive encoding uses the `join` pattern to update SVG elements.

TTajallah-maryam

67% match

Loading thumbnail…

My map

This example presents a choropleth-style map of a single region, likely a state, rendered as a filled polygon in a light blue SVG container. The map uses the Mercator projection and d3.geoPath to draw geographic boundaries from a GeoJSON file, while d3.csv loads city data for potential point markers. The visualization is built with D3 v5 and styled as a responsive SVG using a viewBox, with a custom CSS class for layout. The code demonstrates loading external data files and projecting them onto a large canvas.

Aatree-rohit

67% match

Loading thumbnail…

project_NH_US_Map

This example displays a map of the United States with circles overlaid on major cities, using a square-root scale to size each circle based on the city’s population. The map is rendered with SVG paths generated by d3.geoPath, while the city coordinates are projected using d3.geoAlbersUsa. The visualization loads US state boundaries and city data from external CSV and TopoJSON sources, and is built with React and D3 v5.

NNavak94

67% match