pbogden pbogden

This demo uses a small sampling of the data from medicare.gov. Scores plotted below the map provide a measure the quality of care from Medicare-certified hospitals across the country. This visualization uses tooltips and color change to extend the capabilities of the USGS earthake demo.

Functionality includes:

Sub-sampling -- As with the earthake demo, you can run your mouse along the lower plot to sub-sample medicare providers. The plot shows score versus (east-west) location on the map for each provider.

Simple x-y plot with axes, labels & margins (and a transition). Plot region resizes to fit window.innerHeight.

D3 & Google Maps

This version of mbostock's block does a couple things differently.

Sets the viewport with data using google.maps.Map().fitBounds()
Puts all data on a single SVG (rather than one SVG per data point)
Puts the SVG on the overlayMouseTarget pane; this pane receives mouse events
Each station has a gray circle that can be dragged to a new location

Using D3 to show USGS shale-gas data from a national assessment that was completed in 2012. You can run your mouse over each region to see related metadata.

The state boundaries come from Natural Earth. You can click on a state to zoom in/out.

Multiple overlapping shapes with event-driven opacity changes and a tooltip

Simple demo of D3 (v4) force simulation

This D3 + OpenLayers example mirrors as closely as possible Mike Bostock's D3 + Leaflet example. See his example for an explanation.

Primary differences:

OpenLayers uses Mercator (EPSG:4326) by default, which appears distorted (for example). It's easy to switch to "Spherical Mercator" (EPSG:900913), but then you need to be careful to convert lon/lat to the OpenLayers default x/y coordinates in meters.
As in this example, the code below uses an OpenLayers Vector Layer in place of Leaflet's overlay pane. Whereas Leaflet requires repositioning only on zoom, OpenLayers needs repositioning for both zoom and pan. This makes it easier to size the SVG with OpenLayers -- it need only fit the viewport, as long as you're willing to wait for clipped features to be drawn after pan events. Fo

Rendering GML polygons with OpenLayers.

Adapted from: http://openlayers.org/dev/examples/gml-layer.html

-- added <styles> section to index.html and removed links to remote css.
-- removed <body> content, except for the map.

How it works:

-- creates an OpenLayers.Map