Gist 8603058

100%

✓ Published0🌍 Public

Last edited Jan 24, 2014

Created on Jan 24, 2014

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.

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

81% match

Loading thumbnail…

Gist 8978952

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.

CCliffordAnderson

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

79% match

Loading thumbnail…

Gist 10676346

This map displays labeled points from a GeoJSON file, plotting locations like "Internet Archive," "China," and "New York" at their geographic coordinates. The visualization likely renders a large-scale point cloud, with overlapping labels suggesting a messy or aggregated dataset. Using a mapping library, likely D3.js with `d3.geoPath` for drawing map features and standard SVG or Canvas techniques for placing text labels, the code creates a simple geographical scatter plot. The rendering emphasizes the spatial distribution of these named places across the globe.

CCliffordAnderson

78% match

Loading thumbnail…

Gist 54a4da81bb77308303fc5537ac587fe5

This example creates a minimal map visualization using a single GeoJSON Point feature representing the Dinagat Islands, positioned at coordinates (-86.8098, 36.1442). It first renders the point’s geometry using `d3.geoPath` and a standard geographic projection, then applies `d3.forceSimulation` to animate the point’s position, demonstrating how a fixed geographic coordinate can be displaced by a force-directed layout. The code uses both Canvas and SVG elements, with the simulation updating the point’s screen location each tick while the underlying projection remains static.

CCliffordAnderson

78% match

Loading thumbnail…

Gist 9bd5ca69fc039cff50383b3a3459858b

This example shows how to render a spatial distribution of data points on a map using D3.js. It uses `d3.geoPath` to draw geographic boundaries and `d3.forceSimulation` to position overlapping points, while Canvas `getImageData` is used to read pixel data for collision detection. The visualization reads from a PGP-encrypted text file, suggesting the underlying dataset is not directly accessible. The code relies on D3’s selection and transition APIs to animate point movements, and it appears to use a projection to convert latitude and longitude coordinates into screen positions. The result is an interactive scatterplot overlaid on a map, with points dynamically adjusting to avoid overlap.

CCliffordAnderson

78% match

Loading thumbnail…

Gist 9af806e8acc168aa10c06099d668b711

This example presents an interactive map of historical Berlin locations from 1947, using GeoJSON point features to mark sites like the Synagogue Fasanenstrasse and Charlottenburg Gate. Each marker opens a popup with period photographs and captions, rendered through a Mapbox-like interface. The visualization relies on a custom marker system with symbol and color properties, while the underlying tour.json data drives the geographic placement and content. The implementation uses standard web mapping libraries to handle GeoJSON rendering and marker interactions, showing how archival image collections can be geolocated and explored.

CCliffordAnderson

76% match

Loading thumbnail…

test

This example visualizes a single point feature from a GeoJSON file, marking the location of Friedrichstraße in Berlin. The map uses D3’s `d3.geoPath` to render geographic outlines, while the point itself is drawn with SVG markers. The feature’s properties include an image carousel with historical photos, toggled by user interaction. The code relies on D3’s data binding and event handling to update the displayed images, and the geographic coordinates are parsed from string values in the GeoJSON. The rendering approach uses a standard Canvas or SVG projection, though the specific projection library is not shown. The source is a gist by CliffordAnderson, with data embedded directly in the file.

CCliffordAnderson

76% match