Postman upload

100%

Postman upload

✓ Published0🌍 Public

Last edited Jan 4, 2016

Created on Jan 4, 2016

This example demonstrates how GeoJSON point data with custom properties can be visualized on an interactive map. It uses D3.js to bind the feature collection and render each point as a marker, with properties like title, series, and image captions driving tooltips or popups. The code leverages d3.geoPath to project geographic coordinates and d3.forceSimulation for optional layout adjustments, while the marker styling (size, color, symbol) is drawn from the properties. The data source is a GeoJSON file loaded from a gist, and the visualization shows three historical images of Friedrichstraße in Berlin, with coordinates provided as strings in the geometry.

AI-generated description

Similar vizzes

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

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

79% match

Loading thumbnail…

Sample Berlin Point

This example maps a single point from a GeoJSON file, representing the Berlin Chancellary, onto a map. The visualization displays the point’s coordinates and associated properties, including a marker symbol, color, and an embedded image with a caption. The code uses d3.geoPath to render geographic features and relies on the GeoJSON data structure to define the point’s location and metadata. The marker is styled using the properties for size, color, and symbol, while the image is presented as an HTML string within the data. The source is a gist authored by CliffordAnderson, with the point data drawn from the Spring 2015 series and a 1970 tour reference.

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…

GeoJSON example

This example visualizes a single point feature from a GeoJSON file, showing the location of the Hippo House at Zoo Berlin. The map uses d3.geoPath to render the geographic coordinates as a projected point, while the properties object supplies the title, series, and tour metadata for tooltips or labels. The code references a YouTube embed link for the featured image, though it does not display the image itself. The data comes from a gist authored by CliffordAnderson, and the marker size and symbol are specified as properties but are not applied in the visible rendering. The example demonstrates how GeoJSON geometry and non-spatial attributes combine in a minimal D3 mapping context.

CCliffordAnderson

74% match

Loading thumbnail…

Sample Point for Mapping Berlin

This example visualizes a single sample point in Berlin, locating Friedrichstraße at coordinates 13.386978, 52.520289 within a geospatial context. It highlights a specific place of interest tied to a spring 2015 series and a 1970 tour, using a yellow medium-sized marker with a rail-metro symbol. The visualization relies on a GeoJSON Feature object, which is parsed and rendered through a mapping library such as D3’s `geoPath` for projecting coordinates, while the marker’s style properties—`marker-size`, `marker-color`, and `marker-symbol`—are applied via SVG or Canvas drawing. The source data is a raw gist file, indicating a minimal, focused point-mapping example rather than a complex thematic map.

CCliffordAnderson

72% match

Loading thumbnail…

Adding a Point to your Map of Berlin

This example demonstrates a clickable map of Berlin with photographic markers. It shows how to add a new point by finding a Creative Commons image with EXIF location data, converting the coordinates, and inserting a GeoJSON feature into an existing collection. The visualization uses Leaflet to render the map and markers, with embedded HTML in the GeoJSON properties to display images and captions in popups. The data source is a hand-edited GeoJSON file containing multiple points of interest, each with associated media and descriptions.

CCliffordAnderson

72% match

Loading thumbnail…

Cloudant Post

This example visualizes the geographic distribution of user-uploaded content from a Cloudant database, rendered as an interactive map. It first retrieves raw GeoJSON data from the Cloudant API, then uses `d3.geoPath` to project and draw country outlines, while `d3.forceSimulation` positions individual point markers based on their latitude and longitude. The map’s tile layer is generated with Canvas `getImageData` to apply a custom color scale to population density, and user interactions trigger `transition.attrTween` for smooth panning and zooming. The code relies on Three.js for the underlying WebGL rendering of the base terrain.

CCliffordAnderson

72% match