Onsite demo of using sheetsu.com to serve a Google Spreadsheet as a data source for d3.js.
Part of a discussion at the Data Visualisation Melbourne meetup at Common Code.
I mentioned some basic tooling:
bs cli shortcut| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>D3 Sheetsu</title> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: sans-serif; | |
| max-width: 300px; | |
| margin: 0 auto; | |
| } | |
| input { | |
| width: 100%; | |
| border-radius: 8px; | |
| border: 1px solid grey; | |
| padding: 0.5em; | |
| } | |
| input:focus { | |
| outline: none; | |
| background-color: #eee; | |
| } | |
| pre { | |
| padding: 1em; | |
| background-color: #333; | |
| color: whitesmoke; | |
| } | |
| .code, | |
| code { | |
| display: inline-block; | |
| /*margin-left: -2.5em;*/ | |
| tab-size: 2; | |
| } | |
| .result { | |
| display: block; | |
| float: right; | |
| font-weight: bold; | |
| font-size: 1.5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2><a href="http://sheetsu.com/">Sheetsu.com</a></h2> | |
| <ul> | |
| <li> | |
| The spreadsheet: | |
| <a href="https://docs.google.com/spreadsheets/d/18UbT07h3Wz9mND2tGmmfdpVWWMM0GvCZxAwOQG8Z9FE/edit">https://docs.google.com/spreadsheets/d/18U...</a> | |
| </li> | |
| <li> | |
| The sheetshu endpoint: | |
| <a href="http://sheetsu.com/apis/98c3dd6c">http://sheetsu.com/apis/98c3dd6c</a> | |
| </li> | |
| </ul> | |
| <pre class="code"></pre> | |
| <script> | |
| var code = document.querySelector('pre'); | |
| // https://github.com/mbostock/d3/wiki/Requests | |
| var data; | |
| d3.json("http://sheetsu.com/apis/98c3dd6c", function(error, json) { | |
| if (error) return console.warn(error); | |
| data = json; | |
| console.log('data', data); | |
| var formatted = JSON.stringify(data.result, undefined, 4) | |
| formatted = formatted.replace(/\n/g, "<br>").replace(/[ ]/g, " "); | |
| code.innerHTML = formatted; | |
| }); | |
| </script> | |
| </body> |
