Hover Markers

100%

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Oct 14, 2010

This example uses Polymaps and the CrimeSpotting API to display a map of Oakland, California, with 100 crime data points as fixed-size circles. The map is created with `po.map()` and `po.geoJson()`, loading GeoJSON features that are styled with CSS classes for hover effects. When hovering, the datapoint markers change color from lightsteelblue to lightcoral, highlighting individual incidents. The map includes a CloudMade tile layer and supports zooming between levels 10 and 16, with crime data filtered for a single day in April 2010.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

85% match

Loading thumbnail…

Fancy Markers

This example shows a Polymaps-based map of Oakland crime data, replacing the default circular GeoJSON point markers with custom pin-style vector icons. The markers are dynamically colored using three categorical linear gradients, each representing a crime category (violent, property, or quality-of-life). The code creates SVG `use` elements referencing a marker path from the Raphael.js icon library, then post-processes loaded GeoJSON features to swap in these styled markers based on crime categorization. The map uses CloudMade tile imagery and CrimeSpotting data, with icons sorted by latitude for render order.

Mmbostock

85% match

Loading thumbnail…

Fancy Markers (No Gradient)

This example displays a map of crime incidents in Oakland for a single day, replacing default GeoJSON point markers with custom SVG icons. It uses Polymaps to build the interactive map, with CloudMade tiles and OpenStreetMap data as the basemap. The code loads crime records from the CrimeSpotting API, then post-processes each feature after the `load` event, swapping the original point element for a marker icon appended from the Raphaël icons library. The markers are scaled and positioned using the existing transform attributes.

Mmbostock

83% match

Loading thumbnail…

Resizable Markers

This example demonstrates an interactive map of crime data for Oakland, California, where a slider dynamically resizes the displayed points. The map is built with the Polymaps library, using a CloudMade tile layer as the base and the `org.polymaps.geoJson` object to render the data. A jQuery UI slider calls the GeoJSON layer’s `reshow()` method, triggering a `show` event that updates the `r` attribute on each plotted circle, effectively scaling the markers based on the slider’s value. The data originates from the Crimespotting API.

Mmbostock

82% match

Loading thumbnail…

Labeled points

This example displays a Polymaps map of Oakland crime incidents as labeled points. It adds a text label to each GeoJSON point feature by creating an `svg:text` element with `po.svg`, positioning it with the circle’s `transform`, and centering it via `text-anchor` and `dy`. The code styles the circles with a steelblue stroke, and the map layers CloudMade tiles with the crime data from crimespotting.org.

Mmbostock

80% match

Loading thumbnail…

Crime Data Analysis - Crime Spots

This visualization displays crime incident locations across a geographic area as individual map markers, with popups revealing details about crime type, weapon used, and date. The map is built using Leaflet with OpenStreetMap base tiles, centered on New York City at coordinates 40.7128, -74.0060. Crime data is loaded from an external CSV file via d3.csv, and each row’s latitude and longitude values are parsed to create markers using L.marker. The popup content is constructed with HTML strings embedding the crime attributes. The visualization provides an immediate spatial overview of crime distribution across the region.

VVinay Vemuri

70% match

Loading thumbnail…

Working Tooltips

A choropleth-style scatterplot maps the geographic distribution of violent crime across U.S. states, using a circle for each crime incident. The visualization relies on vega-lite-api to construct the specification, which is registered with Vega and Vega-Lite, while a custom tooltip handler from vega-tooltip displays the department name on hover. Data is loaded from a GitHub-hosted CSV, with a filter excluding certain states and a calculated field for zip-code prefixes. The Albers USA projection and a color scale generated with d3’s range and hcl functions map coordinates and hue by crime count.

Yyyaaa1

68% match

Loading thumbnail…

Polymaps + D3

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.

Mmbostock

68% match