Skip to main content
100%

harv_samp_cur.geojson - map-overlay-annotation - Online tool to gather 2D GIS data via map annotation and markup. - Google Project Hosting

✓ Published0🌍 Public
Aadkatrit
Last edited Jan 13, 2014
Created on Jan 13, 2014

This example displays a GeoJSON dataset of sample curves overlaid on a map, with the annotation tool providing interactive markup of 2D GIS data. The code renders geographic features using `d3.geoPath` and likely projects them with `d3.geoMercator` or similar. The data file, `harv_samp_cur.geojson`, is loaded from a gist and contains vector geometry for the curves. The visualization emphasizes the overlay of user-annotated spatial data, demonstrating how the map-overlay-annotation tool captures and displays geographic information through browser-based drawing and editing.

AI-generated description

Similar vizzes

Loading thumbnail…

GeoJSON Contours Test

This example tests the rendering of contour lines stored as GeoJSON MultiPolygon features, with each feature carrying a numeric value property. The visualization displays these contours as filled regions across a geographic area, creating a layered map that resembles a topographic or density surface. The code uses D3’s `geoPath` to project and draw the GeoJSON geometry onto an SVG canvas, with the contour values determining the visual appearance of each region. The data comes from a gist by curran, showcasing how pre-generated contour polygons can be directly translated into a map visualization.

CCurran Kelleher
72% 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
Loading thumbnail…

Gist 8393692

This example displays two geolocated markers on a map, each with a title and description of a building. It uses a `map.geojson` file as the data source, containing point features with custom properties for labels and colors. The visualization renders the map using D3’s `d3.geoPath` to draw the geographic features, while the markers are positioned based on their coordinates. The code relies on D3’s force simulation (`d3.forceSimulation`) to potentially handle marker placement or interaction, though the static view shows the two points plotted directly.

Aadkatrit
69% 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
68% match
Loading thumbnail…

Gist 60d493d13e828f2892fa43773cba7d70

This example plots a single GeoJSON point feature representing a cycling detour sign, displaying its direction and timestamps. The map renders via a custom D3.js geographic projection using `d3.geoPath` to draw the basemap and point symbol. Data comes from a GeoJSON FeatureCollection, with properties like `direction` and `first_seen_at` accessible for hover interactions. The visualization relies on D3.js for map rendering and feature styling, while geographic coordinates are projected into 2D space for display.

SStephen
68% match
Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how to work with geospatial data using d3.js projections, visualizing trail points from a GeoJSON file on a Mercator projection. The code uses the d3.geo.path() function with a d3.geo.mercator() projection to render SVG paths, and employs d3.json() to load the data. The map displays points with a transform applied, while path elements are styled with a gray fill and white stroke that turn red on hover.

SSwampGuzzler
68% match
Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example shows a world map with populated places as circles, highlighting countries and cities through mouse interaction. It loads GeoJSON data for country boundaries and populated places from external URLs, then renders them using SVG paths and circles. The code uses D3’s `d3.geo.mercator()` projection and `d3.geo.path()` for map shapes, while circles are positioned via the projection on coordinates. On mouseover, a circle enlarges from radius 5 to 10 and logs its data to the console; mouseout reverts the size. The map uses D3 v3 and TopoJSON, with active states styled via CSS classes.

AAlan McConchie
67% 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
67% match