pbogden

pbogden

Data source: https://visibleearth.nasa.gov/view.php?id=73909

pbogden

https://www.ctdatacollaborative.org/node/153/api

pbogden

index.html has been copied without modification from the OpenLayers examples:

https://openlayers.org/en/latest/examples/heatmap-earthquakes.html

pbogden

This example comes directly from https://plot.ly/javascript/line-and-scatter/, and includes all the HTML needed to render in a browser.

pbogden

x=42;
console.log('bar')

pbogden

HTML button

Uses CSS

• linear-gradient
• box-shadow

Check out an SVG button

pbogden

license: gpl-3.0
height: 960
border: no

pbogden

Side-by-side responsive graphics

The key is to use appropriate CSS for the containers...

• display: inline-block; for side-by-side containers
• vertical-align: top; so content aligns along the top (default is baseline of parent)
• float: left; otherwise carriage-return between containers will take up space
• width: 48%; must account for padding on left & right

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.