Polymaps + D3

100%

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Apr 2, 2011

This example combines Polymaps and D3 to render an interactive map with a custom data layer. The map displays image tiles from CloudMade as a base layer, and overlays circles representing weather station locations from a local `stations.json` file. Each station is positioned using geographic coordinates projected through a `locationPoint` function within the Polymaps layer, with circle and text elements added via D3's selection API. The map includes interactive pan and zoom controls and a compass overlay.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Polymaps + D3, Part 2

This example combines Polymaps and D3 to display weather station locations across California on a tiled base map. The map uses CloudMade image tiles with a compass control, while D3 renders SVG circles and labels for each station from a JSON file. As the map pans or zooms, the `map.on("move")` event updates the marker transforms using `map.locationPoint` to project geographic coordinates into screen positions. The stations are grouped in an SVG `<g>` element inserted beneath the compass layer, with circles styled with a brown semi-transparent fill.

Mmbostock

90% match

Loading thumbnail…

d3.geo.tiler

This example demonstrates an interactive map of weather stations in California using tiled image layers from CloudMade and custom point overlays. The `d3.geo.tiler` API organizes station locations from stations.json into a quadtree structure, enabling efficient data retrieval per map tile. The Polymaps library handles map navigation, while D3.js manages the tile-specific SVG rendering of station markers and labels. The visualization showcases the integration of D3's geographic projections with Polymaps' tile-based mapping system for scalable point data visualization.

Mmbostock

80% match

Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Mmbostock

79% match

Loading thumbnail…

Pale Dawn

This example displays a tiled map of the world using the Polymaps library, with a calm “Pale Dawn” tileset from CloudMade that provides a subdued background for overlaying data points. The map renders spherical mercator tiles from OpenStreetMap data through an `org.polymaps` map instance, adding standard interaction controls via `po.interact()` and a compass. The visualization uses a single `po.image()` layer with a URL template for fetching 256x256 PNG tiles, and includes attribution to CloudMade and OpenStreetMap contributors under a CCBYSA license.

Mmbostock

74% match

Loading thumbnail…

Heatmap

This heatmap blends a base map with three point locations that are transformed into radial gradients, showing how they are highlighted on a map. The visualization combines a CloudMade tile layer and OpenStreetMap data, with the points loaded as GeoJSON features. The map uses the Polymaps library, and its `load` callback dynamically adjusts each point’s radius based on the current zoom level while assigning a green gradient fill with fading opacity.

Mmbostock

72% match

Loading thumbnail…

d3.carto - Basic d3.carto Map

This map uses the d3.carto.map plugin to render a single GeoJSON layer of world country boundaries, styled with a blue fill and black strokes. The page loads the map into a full-screen div, applies zoom/pan controls via the plugin's built-in interface, and enables clickable features for interactivity. Data comes from a local world.geojson file, with countries drawn as SVG polygons; the accompanying CSS defines the visual styling for map elements, controls, and modal dialogs.

663anp3ca

71% match

Loading thumbnail…

Image Markers

This example uses Polymaps to display an interactive map centered on Oakland, California, with CloudMade tile imagery. It loads GeoJSON crime data from the Oakland CrimeSpotting API and replaces each geographic point with a small Twitter favicon image marker. The map supports pan and zoom via `po.interact()`, and the markers are positioned using fixed scaling at zoom level 12.

Mmbostock

71% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v5

This example displays an interactive map of the world centered on the Pacific, overlaid with red circular markers for eleven cities and their labels. Pan and zoom controls are implemented using the `d3.zoom` API, which applies SVG `transform` attributes to all map paths, circles, and text. The map geometry and city positions are projected using `d3.geoMercator` and `d3.geoPath`, with country outlines loaded from a TopoJSON file. City coordinates come from a CSV loaded via `d3.csv`, and text labels are placed above each marker, each linking to a web search.

Dd3noob

71% match