Skip to content

Instantly share code, notes, and snippets.

View pbogden's full-sized avatar

pbogden pbogden

25 followers · 2 following
View GitHub Profile
@pbogden
pbogden / .gitignore
Last active December 19, 2015 18:28
USGS earthquake data
Makefile
@pbogden
pbogden / README.md
Last active December 19, 2015 18:29
data from medicare.gov

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:

  1. 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.
@pbogden
pbogden / .gitignore
Last active December 19, 2015 18:39
sculling ladder
src
@pbogden
pbogden / README.md
Last active December 19, 2015 20:58
fit-to-height x-y plot

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

@pbogden
pbogden / README.md
Last active July 5, 2017 16:07
Google & D3

D3 & Google Maps

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

  1. Sets the viewport with data using google.maps.Map().fitBounds()
  2. Puts all data on a single SVG (rather than one SVG per data point)
  3. Puts the SVG on the overlayMouseTarget pane; this pane receives mouse events
  4. Each station has a gray circle that can be dragged to a new location
@pbogden
pbogden / README.md
Last active December 20, 2015 06:49
USGS shale-gas data

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.

@pbogden
pbogden / README.md
Last active December 20, 2015 14:49
SVG shapes

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

@pbogden
pbogden / README.md
Last active August 17, 2016 10:28
D3 force demo

Simple demo of D3 (v4) force simulation

@pbogden
pbogden / README.md
Last active April 26, 2019 19:23
D3 + OpenLayers

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

Primary differences:

  1. 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.

  2. 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

@pbogden
pbogden / README.md
Last active December 21, 2015 11:49
OpenLayers & GML

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