pbogden

###Overlay SVG on canvas

• Use a positioned container (#myContainer is position: relative) for the overlay
• Overlay the canvas and svg elements using position: absolute
• A CSS border on the canvas element displaces the canvas relative to the SVG
• d3.selection.insert can help when ordering SVG and canvas elements
• Uses globalAlpha and d3.timer to gradually fade in the canvas element

pbogden

Google spreadsheet as a data source (JSONP).

#d3.gsheet(key [, sheet], callback)

Retrieves data from the Google Spreadsheet associated with the spreadsheet key. The optional sheet is a string that corresponds to the name of the desired sheet in the spreadsheet. The default is to read the first sheet. The callback is invoked with an array of objects as the argument, consistent with d3.csv().

To adapt this demo to another spreadsheet, you must:

• Share the spreadsheet so that "Anyone with the link can view" it.

pbogden

Playing around with three.js

pbogden

##Google spreadsheet as a data source (CORS)

This demo retrieves data as CSV from the Google spreadsheet at this URL.

To adapt this demo to another spreadsheet:

• You must share the spreadsheet so that "Anyone with the link can view" it.
• You need a unique spreadsheet key (the long string 1Cj1...ieYo in the URL above). You can get it from the "shareable link", or from the address bar when you edit the spreadsheet in a browser.

pbogden

Interactive version of MDN's CSS position documentation

pbogden

Demo of leaflet & D3 from Mike Bostock's tutorial, updated with an openstreetmap URL that works.

pbogden

This version of Mike Bostock's Zoom Center shows the values for translate & scale and allows you to change the center.

pbogden

add/remove/readd DOM elements

pbogden

The missing gist for this nice tutorial.

pbogden

D3 symbols