forked from jlord/sheetsee.js
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
141 lines (139 loc) · 6.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sheetsee.js</title>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='description' content='sheetsee.js, google, spreadsheet, visualize, data, javascript'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="shortcut icon" href="./favicon.png">
<script type='text/javascript' src='./js/highlight.js'></script>
<link rel='stylesheet' href='./assets/styles/highlight.css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900,400italic|Source+Code+Pro:400' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='./assets/style.css'>
<link rel="shortcut icon" href=''/>
</head>
<body class="index">
<div class="container">
<p><img src="https://raw.github.com/jlord/sheetsee-cache/master/img/sheetsee-03.png" alt="sheetseeimg"></p>
<p><strong>Sheetsee.js</strong> is a client-side library for connecting Google Spreadsheets to a website and visualizing the information in tables, maps and charts.</p>
<h2 id="modules">Modules</h2>
<p>Each of <strong>sheetsee.js</strong>'s features are divided into modules. Use just the parts you need; see <a href="./docs/building.html">docs on building</a>. If you don't want to build your own, you can just use the full library which includes all modules, it's <a href="http://www.github.com/jlord/sheetsee.js">here on GitHub</a>.</p>
<table>
<thead>
<tr>
<th>Module</th>
<th>Contains</th>
<th>Docs</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>sheetsee-core</strong></td>
<td><strong>Included in any build</strong>. Gets you started and has the working-with-your-data functions.</td>
<td><a href="./docs/sheetsee-core.html">Doc</a></td>
</tr>
<tr>
<td><strong>sheetsee-tables</strong></td>
<td>Contains everything you'll need to create a table including sortable columns, pagination and search.</td>
<td><a href="./docs/sheetsee-tables.html">Doc</a></td>
</tr>
<tr>
<td><strong>sheetsee-maps</strong></td>
<td>For making maps with your point, line or polygon spreadsheet data. Built on Mapbox.js.</td>
<td><a href="./docs/sheetsee-maps.html">Doc</a></td>
</tr>
<tr>
<td><strong>sheetsee-charts</strong></td>
<td>Includes 3 basic d3 charts: bar, line and pie. You can also <a href="docs/custom-charts.html">use your own</a>.</td>
<td><a href="./docs/sheetsee-charts.html">Doc</a></td>
</tr>
</tbody>
</table>
<h2 id="spreadsheets-">Spreadsheets!?</h2>
<p>Google Spreadsheets can be used as simple and collaborative databases, they make getting a data driven site going much easier than traditional databases. <a href="./docs/basics.html">Read more about using spreadsheets for databases</a>.</p>
<h2 id="in-the-wild">In the Wild</h2>
<p>What can you make with <strong>Sheetsee.js</strong>? Lots of things, here are some examples:</p>
<ul>
<li><a href="http://jlord.github.io/hack-spots">Hack-Spots</a></li>
<li><a href="http://jlord.us/blog/your-own-instagram.html">Combine with IFTTT</a></li>
<li><a href="http://www.realpython.com/support">Real Python Support Desk</a></li>
</ul>
<p><strong>List your sheetsee project here: <a href="http://www.github.com/jlord/sheetsee.js">file an issue or pull request</a>.</strong></p>
<h1 id="resources-documentation">Resources & Documentation</h1>
<p>More resources on using Sheetsee.js:</p>
<table>
<thead>
<tr>
<th>Getting Started</th>
<th>Ideas</th>
<th>Use</th>
<th>Demos</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="./docs/about.html">About Sheetsee.js</a></td>
<td><a href="./docs/fork-n-go.html">Fork-n-Go</a></td>
<td><a href="./docs/sheetsee-core.html">Sheetsee-core</a></td>
<td><a href="./demos/demo-table.html">Table Demo</a></td>
</tr>
<tr>
<td><a href="./docs/building.html">Building Sheetsee</a></td>
<td><a href="./docs/tips.html">Tips!</a></td>
<td><a href="./docs/sheetsee-tables.html">Sheetsee-tables</a></td>
<td><a href="./demos/demo-table.html">Table Demo</a></td>
</tr>
<tr>
<td><a href="./docs/basics.html">Basics</a></td>
<td><a href="./docs/custom-charts.html">Custom charts</a></td>
<td><a href="./docs/sheetsee-maps.html">Sheetsee-maps</a></td>
<td><a href="./demos/demo-map.html">Map Demo</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a href="./docs/sheetsee-charts.html">Sheetsee-charts</a></td>
<td><a href="./demos/demo-chart.html">Chart Demo</a></td>
</tr>
</tbody>
</table>
<h2 id="note-on-new-google-spreadsheets">Note on New Google Spreadsheets</h2>
<p>Google recently updated their Google Spreadsheets and the API. For a bit this was breaking things using the old API, including Tabletop. This has been fixed and the latest version of tabletop.js works on both old and new spreadsheets. <strong>Be sure to include at least version 1.3.4 in your project.</strong></p>
<footer>
<h4 id="getting-started">Getting Started</h4>
<ul>
<li><a href="docs/about.html">About Sheetsee</a></li>
<li><a href="docs/building.html">Building Sheetsee</a></li>
<li><a href="docs/basics.html">Basics</a></li>
</ul>
<h4 id="ideas">Ideas</h4>
<ul>
<li><a href="docs/fork-n-go.html">Fork-n-Go</a></li>
<li><a href="docs/tips.html">Tips!</a></li>
<li><a href="docs/custom-charts.html">Custom charts</a></li>
</ul>
<h4>Demos</h4>
<ul>
<li><a href="./demos/demo-table.html">Table Demo</a></li>
<li><a href="./demos/demo-map.html">Map Demo</a></li>
<li><a href="./demos/demo-chart.html">Chart Demo</a></li>
</ul>
<h4 id="use">Use</h4>
<ul>
<li><a href="docs/sheetsee-core.html">Sheetsee-core</a></li>
<li><a href="docs/sheetsee-tables.html">Sheetsee-tables</a></li>
<li><a href="docs/sheetsee-maps.html">Sheetsee-maps</a></li>
<li><a href="docs/sheetsee-charts.html">Sheetsee-charts</a></li>
</ul>
<h4 id="use">Contact</h4>
<ul>
<li><a href="http://www.twitter.com/jllord">@jllord</a></li>
<li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
</ul>
<h4><a class="home-link" href="http://jlord.github.io/sheetsee.js">Home Page</a></h4>
</footer>
</div>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>