pbogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ##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.

Note: This demo requires a CORS-enabled service.  As of Dec 2014, URLs with base https://spreadsheets.google.com support CORS, but the URLs in Google Charts documentation do not (i.e., those with https://docs.google.com/spreadsheets). You need JSONP to access the data via Google's non-CORS-enabled servers. I created a D3 plugin (w/JSONP) to show how it's done. But JSONP should be avoided because of related security concerns.
Note 2: This demo works in Chrome & Firefox, but not in Safari 7.1.1.  I'm not sure why.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>gsheet (CORS)</title>
<link rel="stylesheet" href="table.css" type="text/css">
<script src="http://d3js.org/d3.v3.min.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",  // key for demo spreadsheet
    query = "&tqx=out:csv",                       // query returns the first sheet as CSV
    url = "https://spreadsheets.google.com/tq?key=" + key + query;  // CORS-enabled server

var table = d3.select('body').append('table');

d3.selectAll('input').on('change', change)
d3.select('input').property('checked', true).each(change);
var timeout = setTimeout(function() {
  d3.select("input[value=\"Sheet2\"]").property("checked", true).each(change);
}, 3000);

function change() {
  var urlForSheet = url + "&sheet=" + this.value;

  d3.csv(urlForSheet, function(err, 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>gsheet (CORS)</title>
	<link rel="stylesheet" href="table.css" type="text/css">
	<script src="http://d3js.org/d3.v3.min.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", // key for demo spreadsheet
	query = "&tqx=out:csv", // query returns the first sheet as CSV
	url = "https://spreadsheets.google.com/tq?key=" + key + query; // CORS-enabled server

	var table = d3.select('body').append('table');

	d3.selectAll('input').on('change', change)
	d3.select('input').property('checked', true).each(change);
	var timeout = setTimeout(function() {
	d3.select("input[value=\"Sheet2\"]").property("checked", true).each(change);
	}, 3000);

	function change() {
	var urlForSheet = url + "&sheet=" + this.value;

	d3.csv(urlForSheet, function(err, 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;
	}