Using Google Spreadsheet Data in d3.js Visualizations

written

Google Spreadsheet offers a convenient way to work with data on the web. It is now possible to retrieve live Google Spreadsheet data for d3.js visualizations. In this article, we’ll show you how.

We make use of tabletop.js to abstract data retrieval task. https://github.com/jsoma/tabletop

  1. Publish spreadsheet to the web.
  2. Move d3.js visualization code into a function, e.g. drawChart.
  3. Use tabletop.js to get data and render the visualization.
  4. Copy published spreadsheet URL and replace it in the code below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1n-PIdnAJnxmHqVp_iE2g1k8UpPf-lEXLm_pu7zxuov4/pubhtml';

function renderSpreadsheetData() {
    Tabletop.init( { key: public_spreadsheet_url,
                     callback: draw,
                     simpleSheet: true } )
}

function draw(data, tabletop) {
  // draw chart
  drawChart(data);
}

renderSpreadsheetData();

And a live example:

https://vida.io/documents/9eEyB4R74WWyrPXAi


Comments