project

100%

✓ Published0🌍 Public

Last edited Apr 24, 2018

Created on Apr 24, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/TylerVaughan/'>TylerVaughan</a>'s block: <a href='http://bl.ocks.org/TylerVaughan/bc5e7d9fa1f1eaa9e39674550a002197'>project</a>

mit Licensed

Similar vizzes

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

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

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

84% 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…

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

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

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

69% match

Loading thumbnail…

Map Pan / Zoom with Cities v5

This map example displays world country boundaries and major global cities, with interactive pan and zoom functionality centered on the Pacific Ocean. The visualization uses d3.geoMercator for projection and d3.geoPath to render geographic features from a TopoJSON world file. City locations from a CSV dataset are plotted as red circles, each hyperlinked to a Google search. Users can apply d3.zoom with a scale extent of 1 to 8, transforming both paths and circles accordingly. The map is rendered as SVG elements within a d3 selection.

Dd3noob

69% match