Skip to content

Instantly share code, notes, and snippets.

@pbogden

pbogden/README.md

Last active May 16, 2019 01:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save pbogden/62244b94a1da2db963db to your computer and use it in GitHub Desktop.
Save pbogden/62244b94a1da2db963db to your computer and use it in GitHub Desktop.
Download ZIP
d3 gsheet plugin (JSONP)
Raw
README.md

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.
  • Obtain the unique spreadsheet key (a long alphanumeric string) from either the "shareable link" or from the URL in the address bar when you edit the spreadsheet in a browser. For example, here is the google spreadsheet used in this demo.

The plugin uses Google's Chart Tools Datasource Protocol.

Note: The plugin uses JSONP. In general, it's a good idea to avoid JSONP because of security issues. The simpler approach uses Google's CORS-enabled servers. But as of Dec 2014, URLs beginning with https://docs.google.com/spreadsheets are not CORS enabled.

The D3 plugin is experimental and has no error checking.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>d3 gsheet (JSONP)</title>
<link rel="stylesheet" href="table.css" type="text/css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://pbogden.github.io/gsheet/gsheet.js"></script>
<body>
<form>
<label><input type="radio" name="mode" value="Sheet1">Sheet1</label>
<label><input type="radio" name="mode" value="Sheet2">Sheet2</label>
</form>
<script>
var key = "1Cj1SSI-GHCRhIAK-LYurwVrE0FOyOJTpUnoHNNPieYo"; // demo.gsheet
var table = d3.select('body').append('table');
d3.selectAll('input').on("change", change);
d3.select("input[value=\"Sheet1\"]").property("checked", true).each(change);
var timeout = setTimeout(function() {
d3.select("input[value=\"Sheet2\"]").property("checked", true).each(change);
}, 3000);
function change() {
var sheet = this.value;
d3.gsheet(key, sheet, function(data) {
table.selectAll("tr").remove()
table.selectAll("tr")
.data(d3.csv.parseRows(d3.csv.format(data)))
.enter()
.append('tr').selectAll('td')
.data(function(d) { return d; })
.enter()
.append('td')
.html(function(d) { return d; })
});
}
</script>
Raw
table.css
body {
font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
font-size: 16px;
}
table {
border-collapse: collapse;
}
tr:nth-child(odd) {
background-color: #eee;
}
tr:first-of-type td {
background-color: #444;
font-weight: bold;
color: #fff;
}
td {
border: 1px solid black;
text-align: center;
padding: 5px;
}
form {
left: 10px;
top: 10px;
padding: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment