PROJECT

100%

✓ Published0🌍 Public

Last edited Apr 24, 2018

Created on Apr 17, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

84% match

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

84% match

Loading thumbnail…

project

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.

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

73% match

Loading thumbnail…

Gist e5accfd5c404e44ded12

This example maps the locations of parks from a CSV of city park attributes, encoding facility types with colored dots overlaid on a blank canvas. The visualization reads latitude/longitude coordinates from the data and uses a custom projection to plot each park, with legend markers indicating amenities like playgrounds or beaches. It relies on the D3 library for CSV parsing and SVG element creation, while the rendering itself is driven by plain JavaScript loops rather than a dedicated geographic mapping API.

11pixelzz

73% match

Loading thumbnail…

Adding names to places

This example shows a world map with red dots marking cities and their names placed just above each point. It uses D3.js version 3.5.17 with a Mercator projection and TopoJSON to render country outlines from a world-110m2.json file. City coordinates are loaded from a CSV file and plotted using `d3.geo.path`. The city labels are SVG text elements anchored above each circle, and each dot links to a Google search for that city. The map supports zoom and pan through `d3.behavior.zoom`.

Dd3noob

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

71% match

Loading thumbnail…

Map Example

This map example displays geographic markers by loading latitude and longitude coordinates from an external CSV file using D3’s `d3.csv` function. The map itself is rendered with the Mappls API, while an OpenStreetMap tile layer provides the base imagery. Using the `mappls.Marker` class, each data point is placed on the map at its corresponding position, creating a straightforward point-based visualization of the dataset’s locations.

SSriyaI

70% match