Events

100%

✓ Published0🌍 Public

Last edited Sep 11, 2019

Created on Aug 29, 2019

This example shows a geographic map of volunteer events across U.S. cities, with clickable markers that open detailed infowindows containing event descriptions, dates, addresses, and volunteer counts. The map uses the Google Maps JavaScript API, with custom top-center controls to pan and zoom between city locations. Event data is fetched from a remote server via jQuery AJAX, and dates are formatted using Moment.js; the visualization also supports URL parameters to filter events by date range.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Gist 6cd6fea1125bc0e25597996d418bc20d

This example shows a React application that displays a Google Map centered on a specific location, with markers loaded from an external JSON file and rendered using the `react-google-maps` library. It also includes a separate "Places" component that fetches employee data from another JSON file via `axios` and lists their first names. The map uses the `GoogleMapLoader` and `GoogleMap` components, with custom marker icons, while the places list demonstrates asynchronous data fetching and state management. The visualization combines geographic positioning with a simple text-based list, illustrating how to integrate map and non-map data in a single React interface.

CCKschneid

66% match

Loading thumbnail…

Gist 6b515fcc2b7c6479d9c31059140eb611

This example displays a full-screen interactive map of the contiguous United States, centered on the country’s geographic midpoint using Mapbox GL JS. The map uses a custom Mapbox style and includes a navigation control for zoom and rotation. The viewport is constrained to the bounding box spanning from the Southwest to the Northeast corners of the lower 48 states. The code sets an initial zoom level and center coordinates derived from that bounding box, but does not load or visualize any external data layers.

WWill Carter

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

65% match

Loading thumbnail…

World map with zoom / pan and cities

This example presents a world map rendered with SVG, featuring zoom and pan controls. It overlays red circular markers on select global cities, which are loaded from a CSV file and positioned using the Mercator projection via `d3.geo.mercator()`. Each city marker is hyperlinked to a Google search for its name. The map’s geography is drawn from a TopoJSON file, with paths generated through `d3.geo.path()`, while zooming and panning are handled by `d3.behavior.zoom()`.

Dd3noob

65% match

Loading thumbnail…

Map Pan / Zoom with Cities v6

This example shows a Mercator map of the world centered on the Pacific Ocean, with red circles marking eleven cities from a CSV file. Users can pan and zoom the entire map and city markers using the d3.zoom behavior, with a scale extent of 1 to 8. The map is rendered as SVG paths from a TopoJSON file via d3.geoPath, while city positions are projected using d3.geoMercator. Each city circle is wrapped in a link that opens a Google search for that city.

Dd3noob

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

64% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v7

This example shows a world map centered on the Pacific with red city markers and text labels for each city, all of which can be panned and zoomed together. The map is rendered using D3 v7 with a Mercator projection and a topojson world dataset. City positions are projected from latitude and longitude coordinates loaded from a CSV file. D3’s zoom behavior applies a transform to the map paths, circles, and text, and each city label links to a Google search for its name.

Dd3noob

63% match

Loading thumbnail…

Advanced Interactive Map

This interactive map visualizes the geographic distribution of cities across the United States, with city locations loaded from a JSON data file. The visualization uses an animated canvas rendering to draw city points onto a map. The map responds to user interaction, likely allowing panning and zooming, and the animation dynamically updates the displayed data. The example is built with Blockbuilder.org and is available under the MIT license.

BBruceHenry

63% match