PROJECT

100%

✓ Published0🌍 Public

Last edited Apr 24, 2018

Created on Apr 24, 2018

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.

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/e093fb38de2f944d9da1f4ff0f78c371'>PROJECT</a>

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

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

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

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

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

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

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…

地图的交互

This visualization displays a world map rendered with D3 v5 using the geoMercator projection and topojson data from the world-atlas package. Country boundaries are drawn as SVG paths, colored green with a red hover effect, and each country includes a title tooltip showing its name from the accompanying TSV file. The map supports interactive zooming and panning through d3.zoom, which applies a transform to the grouped SVG elements. Population data from a local CSV is loaded but not yet visualized, leaving the focus on the geographic interaction.

HHillKinsh

67% match