pbogden/README.md

## README.md

      
    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.

  
## 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>

## 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;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>
	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;
	}