Skip to main content
SimilarExport ZIP
100%

RAPAD cluster test

✓ Published0🌍 Public
GGerardoFurtado
Last edited Jul 4, 2018
Created on Jul 4, 2018

This example visualizes land parcel clusters from the RAPAD (Remote Area Planning and Development) dataset using a Leaflet map overlaid with D3-generated SVG elements. GeoJSON data loaded from `cluster1.json` defines the cluster polygons, rendered as interactive vector layers on an interactive map. The visualization uses Leaflet for map tiles and D3 v4 for data-driven SVG rendering, with hover effects and tooltips implemented through the `d3-tip` library. The map container is styled with a large height, and the layout includes a title and map area, with custom CSS for tooltips and selections.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

RAPAD cluster test

This interactive map clusters regional development polygons in Queensland, Australia, using Leaflet and D3.js to render GeoJSON features as semi-transparent gray areas with dark outlines. Hovering over a polygon triggers a styled tooltip containing the project name and associated metadata from the loaded cluster1.json file. The visualization is animated through D3 transitions, and the map includes zoom/pan controls, with the base layer omitted to focus attention on the vector features and their spatial relationships.

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

leaflet example

This example shows multiple datasets overlaid as circles on an interactive Leaflet map, with each dataset visualized using a different scale type. It uses the Leaflet library for map tiles and layers, while D3 v5 parses CSV data embedded in `<aside>` elements and binds it to SVG circle markers. The code assigns numerical or categorical attributes to color scales (threshold, quantize, or ordinal) and renders a legend for each group. Map layers for streets, satellite, and grayscale are togglable, and tooltips display an optional address attribute from the data.

EEE2dev
69% match
Loading thumbnail…

Gist ae4b814c65267e5d9299fbb279a83176

This visualization combines a geographical forecast with spatial clustering and outlier detection, showing how raw location data is grouped and analyzed on a map. It uses a custom D3 force simulation to arrange clusters, while the geographic backdrop is rendered through `d3.geoPath` with map projections. The clustering logic relies on KMeans and spatial clustering algorithms from an external library, and outlier detection flags anomalous points via canvas `getImageData` pixel analysis. The code integrates Three.js for enhanced 3D terrain rendering, with transitions driven by `transition.attrTween` to animate cluster movements over time. The data source appears to be simulated forecast points, processed through the clustering pipeline.

HHugoberry
69% match
Loading thumbnail…

D3 + Leaflet

This example combines D3 v3 and Leaflet to show interactive pie charts on a map. Hovering over a Leaflet marker creates a D3-generated donut chart in a tooltip div, displaying the percentage bound to that marker’s options via `L.marker(latlng, { achieve: d.achieve })`. The map offers OSM, Thunderforest, and USGS tile layers, with marker data accessed through `event.target.options`. D3’s `d3.svg.arc` and `d3.layout.pie` render the SVG chart.

11Cr18Ni9
68% match
Loading thumbnail…

Leaflet - markercluster

This example demonstrates how Leaflet.markercluster groups hundreds of nearby map points into cluster icons, with each marker’s label bound as a popup. The map loads geographic coordinates from a `clusterPoints.json` file and renders them as clustered markers using the `L.markerClusterGroup` API and its configurable options like `maxClusterRadius` and `spiderfyOnMaxZoom`. Tile layers come from OpenStreetMap, and the Leaflet 0.7 library handles the base map interaction for zooming and panning.

11Cr18Ni9
68% match
Loading thumbnail…

Learning D3.js

This example shows an interactive radial dendrogram of country population data, rendered as SVG. The visualization uses `d3.cluster` to compute a circular tree layout, with leaf nodes labeled by country name and sized by text depth. Pan and zoom are implemented via `d3.zoom` on a background rectangle, transforming the containing `<g>` element. The code loads hierarchical data from `countryHierarchy.json` and projects node positions using trigonometric functions to map tree coordinates to a radial polar layout.

Mmohdabidali
68% 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
67% match