Get data for the chart from a Google Sheet document instead of the lo…

…cal CSV file

index.html

@@ -4,6 +4,9 @@
     <script src="js/d3.v4.min.js" charset="utf-8"></script>
     <script src="js/jquery-3.2.1.min.js"></script>
 
+    <!-- Add tabletop to load data for the charts from Google Sheets instead of using a local CSV file -->
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
+
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="css/main.css">
     <meta property="og:image" content="https://p101s2.github.io/pics/KimJongHyun.jpg" />
@@ -66,7 +69,7 @@ <h1>Current Rankings</h1>
 
     <div id="footer">
         <p>Images: <a href="http://101maboy.com/">http://101maboy.com/</a></p>
-        <p>Rankings: <a href="http://tinyurl.com/produce101s2">tinyurl.com/produce101s2</a></p>
+        <p>Rankings: <a href="https://docs.google.com/spreadsheets/d/1L85YpH5MTVN03cleDU9B6hP-ogmWRTYjgLwYxQw9Scc/edit?usp=sharing">Produce101s2 Google Sheet</a></p>
     </div>
 
     <script src="js/main.js"></script>

js/main.js

@@ -37,13 +37,29 @@ var plot = svg.append("g").attr("transform", "translate(" + padding + "," + padd
 
 setXAxis();
 
-// Get data
-d3.csv("produce101.csv", parseLine, function (err, data) {
+// URL of Google Sheets shared file
+var public_spreadsheet_url  = 'https://docs.google.com/spreadsheets/d/1L85YpH5MTVN03cleDU9B6hP-ogmWRTYjgLwYxQw9Scc/pubhtml';
+// Load data from Google Sheets
+function renderSpreadsheetData() {
+    Tabletop.init( { key: public_spreadsheet_url,
+                     callback: draw,
+                     simpleSheet: true } )
+}
+
+function draw(data, tabletop) {
+    // update data
+    data.forEach(function (elem, index, data){
+        elem = parseLine(elem);
+        // update original data array
+        data[index] = elem;
+    });
     totalData = processData(data);
     plotData(data);
     selectLine(dFirst, "#line1");
     showChart("latestRank", true);
-});
+}
+// render the chart using data from Google Sheets
+renderSpreadsheetData();
 
 // Path generator
 var pathGenerator = d3.line()
@@ -126,7 +142,6 @@ function toggleSort(key) {
 // Update chart
 function showChart(key, asc) {
     var sortedData = sortByKey(totalData, key, asc);
-    console.log(sortedData);
     var top = d3.select("#topBody");
 
     top.selectAll("tr.top").remove();