Gist 8978952

100%

✓ Published0🌍 Public

Last edited Feb 18, 2014

Created on Feb 13, 2014

This example visualizes a campus map of Vanderbilt University using a GeoJSON FeatureCollection of building points. It displays each location as a marker on a map, with pop-up images and titles for select structures like Kirkland Hall and Old Main. The visualization uses d3.forceSimulation to position the markers, while d3.geoPath renders the geographic features. Images are pulled from Wikimedia Commons, and the data originates from a gist authored by CliffordAnderson.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist e8914af0b0ac89f0bb63ab1ffa0d4f71

This example plots a single geographic point from a GeoJSON file, marking the Vanderbilt Library’s location with a yellow school symbol and a popup containing its title, tour date, and an external Wikimedia image. The visualization uses an SVG map rendered with D3’s `d3.geoPath` and `d3.forceSimulation` to place the marker, while the associated properties are bound to the feature for interactive display. The map’s basemap and styling are not specified in the code, only the one-point feature and its metadata.

CCliffordAnderson

85% match

Loading thumbnail…

Gist 8603058

This example presents an interactive campus tour using GeoJSON point data, mapping two historic landmarks with descriptions and photo links. It renders the geographic points on a map using D3’s `d3.geoPath` and `d3.forceSimulation` to position labels or markers, while pulling tour info from the embedded feature properties. The visualization relies on the GeoJSON FeatureCollection structure and displays Wikipedia URLs and image thumbnails as part of each stop. Coordinate parsing and path generation are handled through standard D3 geo projections, making the tour spatially navigable.

CCliffordAnderson

80% match

Loading thumbnail…

Gist 51fc31ee453f57c3c5ad

This example maps recycling bin locations inside Vanderbilt Law School, pinpointing each spot with a marker on a geographic point feature. The visualization uses a GeoJSON file containing a single point with coordinates for the building, while a linked property array lists 20 image captions describing specific rooms or areas. The code relies on Leaflet or a similar mapping library to render the tile layer and plot the marker, applying the custom `marker-size`, `marker-color`, and `marker-symbol` styling from the GeoJSON properties. It also references local image files for each location, though the actual popup or gallery behavior is not implemented in the visible snippet.

CCliffordAnderson

80% match

Loading thumbnail…

Sample points for Mapping Berlin

This example maps Vanderbilt University as a single point using GeoJSON, displaying the campus location over Nashville. It renders the geometry with `d3.geoPath` and overlays the point, while the code loads the feature properties to show university details. The visualization contrasts the structured GeoJSON format against a simpler JSON version, using D3’s projection and path APIs to draw the geographic context. The dataset source is a gist, and the example focuses on demonstrating point-based mapping with minimal, illustrative data.

CCliffordAnderson

78% match

Loading thumbnail…

Points in our historic tour

This visualization maps the locations of historic buildings on a university campus, where a star-stroked marker designates each designated tour stop. The map is built from a GeoJSON file that encodes each building's coordinates, title, and a collection of linked historical images, with the narrative for each location drawn from accompanying text. The code uses the `d3.geoPath` method to render the geographic base map, while each point is drawn as a path object, allowing for the custom star symbol and color to be applied directly through SVG attributes.

CCliffordAnderson

75% match

Loading thumbnail…

Gist fdfc88707da3d0b9b203

This example shows the clustering and connection of points on a map based on their geographic proximity and shared attributes. It uses a force-directed layout via `d3.forceSimulation` to position nodes while links are drawn as curved paths, with a base projection provided by `d3.geoPath` and `d3.geoMercator`. The data is loaded from an external CSV file, and the visualization updates dynamically as the simulation runs, highlighting node neighborhoods and their interconnections.

MMSCAU

71% match

Loading thumbnail…

Gist cd9f60b16fb12aa5693b

This example visualizes a geolocated point on a Berlin map, showing the Poststadion Football Complex with an interactive marker. The code uses d3.geoPath to render the map geometry and a custom point layer for the marker, with properties like marker-color and marker-symbol styled via SVG. The visualization embeds a popup containing three images—two photographs and a YouTube video—accessed through HTML strings in the feature properties. It relies on the GeoJSON format for data storage and d3.forceSimulation for potential layout adjustments, though the primary rendering uses standard D3 projection and path methods.

CCliffordAnderson

70% match

Loading thumbnail…

Gist 34bad0b124f4effdf99d5555cb3222d8

This example shows how spatial relationships between geographic features can be explored through an interactive map. It uses D3.js with `d3.geoPath` to render country outlines from a GeoJSON source, while a force-directed layout via `d3.forceSimulation` positions non-overlapping markers for data points. The visualization computes marker placement on a Canvas, reading pixel colors with `getImageData` to detect land versus water and ensure points remain on landmasses. Hover interactions trigger a tooltip and highlight neighboring regions, with smooth transitions handled by `transition.attrTween`. The data originates from a public GitHub gist and is embedded in a Power BI report, where the canvas is updated on each zoom or pan event.

HHugoberry

70% match