diff --git a/site/assets/sss.css b/site/assets/sss.css deleted file mode 100644 index de9fa70..0000000 --- a/site/assets/sss.css +++ /dev/null @@ -1,25 +0,0 @@ -/* General */ - -body {margin: 0px auto;} -a {color: #333;} -input:focus {outline: none;} - -/* Table */ - -table {text-align: left; width: 100%} -th {padding: 10px 0px;} -td, text {padding: 3px 20px 3px 0px; font-size: 14px;} -.noMatches {margin-left: 20px; font-size: 11px; font-style: italic; visibility: hidden;} - -/* Line Chart */ - -.axis {shape-rendering: crispEdges;} -.x.axis .minor, .y.axis .minor {stroke-opacity: .5;} -.x.axis {stroke-opacity: 1;} -.y.axis line, .y.axis path {fill: none; stroke: #acacac; stroke-width: 1;} -.bigg {-webkit-transition: all .2s ease-in-out; -webkit-transform: scale(2);} -path.chartLine {stroke: #333; stroke-width: 3; fill: none;} -div.tooltip {position: absolute; text-align: left; padding: 4px 8px; width: auto; font-size: 10px; height: auto; background: #fff; border: 0px; pointer-events: none;} -circle {fill: #e6e6e6;} - -@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1024px) {} diff --git a/site/assets/style.css b/site/assets/style.css deleted file mode 100644 index a1cd61c..0000000 --- a/site/assets/style.css +++ /dev/null @@ -1,51 +0,0 @@ -.container {max-width: 800px; margin: 0 auto; overflow: auto;} - -h3 {padding-top: 18px;} -h1 {font-size: 36px;} - -table {border-spacing: 0;} -tbody tr:nth-child(odd) {background-color: #f3f3f3;} -td {min-width: 140px; vertical-align: top; padding: 8px;} -tr {height: 50px;} -ul, ol {text-indent: 0; margin: 0; padding-left: 20px;} -ul li {padding-bottom: 6px; line-height: 22px;} - -footer {padding-top: 20px; margin-top: 60px; border-top: 1px solid #CCF4FF; -webkit-column-count: 6; column-count: 6; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-count: 6; -moz-column-gap: 20px; height: 125px;} -footer ul {list-style: none; padding-left: 0px; font-family: Libre Baskerville, Baskerville, Georgia, serif;} -footer li {line-height: inherit; font-size: 10px;} -footer h4 {font-size: 10px; -webkit-column-break-before: always; break-before: always; -moz-column-break-before: always; } -footer h4 {margin-top: 0px;} -footer a {border: none;} - -.half {max-width: 50%; display: inline-block; vertical-align: top;} -.half:nth-child(odd) {padding-left: 20px;} - -/* older css */ - -body {font-family: Libre Baskerville, Baskerville, Georgia, serif; font-size: 14px; background: #fff; color: #333; border: 10px #47CCFC solid; margin: 0px; padding: 20px 20px 100px 20px; } -h1, h2, h3, h4, h5, h6 {font-family: Helvetica, Arial, sans-serif;} -h2 {margin-top: 40px;} - -img {width: 100%;} - -p a, a {color: #333; text-decoration: none; padding-bottom: 0px; border-bottom: 2px #CCF4FF solid;} -p a:visted {color: #ff00ff;} -a:hover {color: #47CCFC;} -a:active {color: #47CCFC;} -/*a:visited {color: #333;}*/ -small {padding: 10px 0px;} -p, ol {line-height: 24px;} - -pre {word-wrap: break-word; padding: 6px; background: #f0f0f0;} -code {font-family: "Consolas", "Ubuntu Mono", monospace; line-height: 22px; background: #f0f0f0; color: #636363; font-weight: normal;} - -/* funsies */ -::selection {background: #44FFB4;} -::-moz-selection {background: #44FFB4;} - -/* Table */ -.ssExample table {min-width: 600px;} -.tHeader::after {content: " \2193 \2191 "; font-size: 10px; padding-left: 3px; cursor: hand;} - -/* Map Popup Style */ -.leaflet-popup-content h2 {margin-bottom: 4px; margin-top: auto;} diff --git a/site/assets/styles/atelier-forest.light.css b/site/assets/styles/atelier-forest.light.css deleted file mode 100644 index 806ba73..0000000 --- a/site/assets/styles/atelier-forest.light.css +++ /dev/null @@ -1,93 +0,0 @@ -/* Base16 Atelier Forest Light - Theme */ -/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest) */ -/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ -/* https://github.com/jmblog/color-themes-for-highlightjs */ - -/* Atelier Forest Light Comment */ -.hljs-comment, -.hljs-title { - color: #766e6b; -} - -/* Atelier Forest Light Red */ -.hljs-variable, -.hljs-attribute, -.hljs-tag, -.hljs-regexp, -.ruby .hljs-constant, -.xml .hljs-tag .hljs-title, -.xml .hljs-pi, -.xml .hljs-doctype, -.html .hljs-doctype, -.css .hljs-id, -.css .hljs-class, -.css .hljs-pseudo { - color: #f22c40; -} - -/* Atelier Forest Light Orange */ -.hljs-number, -.hljs-preprocessor, -.hljs-pragma, -.hljs-built_in, -.hljs-literal, -.hljs-params, -.hljs-constant { - color: #df5320; -} - -/* Atelier Forest Light Yellow */ -.hljs-ruby .hljs-class .hljs-title, -.css .hljs-rules .hljs-attribute { - color: #d5911a; -} - -/* Atelier Forest Light Green */ -.hljs-string, -.hljs-value, -.hljs-inheritance, -.hljs-header, -.ruby .hljs-symbol, -.xml .hljs-cdata { - color: #5ab738; -} - -/* Atelier Forest Light Aqua */ -.css .hljs-hexcolor { - color: #00ad9c; -} - -/* Atelier Forest Light Blue */ -.hljs-function, -.python .hljs-decorator, -.python .hljs-title, -.ruby .hljs-function .hljs-title, -.ruby .hljs-title .hljs-keyword, -.perl .hljs-sub, -.javascript .hljs-title, -.coffeescript .hljs-title { - color: #407ee7; -} - -/* Atelier Forest Light Purple */ -.hljs-keyword, -.javascript .hljs-function { - color: #6666ea; -} - -.hljs { - display: block; - background: #f1efee; - color: #68615e; - padding: 0.5em; -} - -.coffeescript .javascript, -.javascript .xml, -.tex .hljs-formula, -.xml .javascript, -.xml .vbscript, -.xml .css, -.xml .hljs-cdata { - opacity: 0.5; -} diff --git a/site/demos/0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc.json b/site/demos/0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc.json deleted file mode 100644 index fc390fc..0000000 --- a/site/demos/0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc.json +++ /dev/null @@ -1 +0,0 @@ -[{"id":"0","placename":"Oakland Zoo","venue":"Oakland Zoo","image":"elephant","noun":"animal","lat":"37.7502645413531","long":"-122.14675065","hexcolor":"#FFE7E7","city":"Oakland","state":"California","year":"2013","photo-url":"","rowNumber":1},{"id":"1","placename":"Winchester Mystery House","venue":"Winchester Mystery House","image":"mansion","noun":"place","lat":"37.3183373","long":"-121.9510439","hexcolor":"#F7CE86","city":"San Jose","state":"California","year":"2012","photo-url":"","rowNumber":2},{"id":"2","placename":"Winchester Mystery House","venue":"Winchester Mystery House","image":"Sarah Winchester","noun":"person","lat":"37.3183373","long":"-121.9510439","hexcolor":"#F78585","city":"San Jose","state":"California","year":"2012","photo-url":"","rowNumber":3},{"id":"3","placename":"Amerian Museum of Natural History","venue":"Amerian Museum of Natural History","image":"mammoth","noun":"animal","lat":"40.7809389","long":"-73.9730135","hexcolor":"#FFE7E7","city":"Washington DC","state":"Washington DC","year":"2011","photo-url":"","rowNumber":4},{"id":"4","placename":"Six Flags Over Georgia","venue":"Six Flags Over Georgia","image":"Viper","noun":"animal, ride","lat":"33.767303","long":"-84.551204","hexcolor":"#F7CE86","city":"Atlanta","state":"Georgia","year":"2000","photo-url":"","rowNumber":5},{"id":"5","placename":"World Trade Center","venue":"","image":"skyline","noun":"place","lat":"40.7143528","long":"-74.0059731","hexcolor":"#F7CE86","city":"New York City","state":"New York","year":"2008","photo-url":"","rowNumber":6},{"id":"6","placename":"The St. Pete Pier","venue":"The St. Pete Pier","image":"pier building","noun":"place","lat":"27.773566","long":"-82.622326","hexcolor":"#F7CE86","city":"St. Petersburg","state":"Florida","year":"1998","photo-url":"","rowNumber":7},{"id":"7","placename":"Miss Katie's Restaurant","venue":"","image":"logo","noun":"graphic","lat":"33.8081608","long":"-84.170196","hexcolor":"#F78585","city":"Stone Mountain","state":"Georgia","year":"1993","photo-url":"","rowNumber":8},{"id":"8","placename":"Rhode Island","venue":"","image":"ship","noun":"thing","lat":"41.8239891","long":"-71.4128343","hexcolor":"#FFE7E7","city":"Providence","state":"Rhode Island","year":"2008","photo-url":"","rowNumber":9},{"id":"9","placename":"River Street, Savannah","venue":"","image":"skyline","noun":"place","lat":"32.0814473472438","long":"-81.0903453826904","hexcolor":"#F78585","city":"Savannah ","state":"Georgia","year":"2004","photo-url":"","rowNumber":10},{"id":"10","placename":"Natchez New Orleans","venue":"","image":"ship","noun":"thing","lat":"29.9510658","long":"-90.0715323","hexcolor":"#FFE7E7","city":"New Orleans","state":"Lousianna","year":"2007","photo-url":"","rowNumber":11},{"id":"11","placename":"Margarittaville","venue":"","image":"drink","noun":"thing","lat":"29.9510658","long":"-90.0715323","hexcolor":"#FFE7E7","city":"New Orleans","state":"Lousianna","year":"2007","photo-url":"","rowNumber":12},{"id":"12","placename":"Woodman's","venue":"Woodman's","image":"clam","noun":"animal","lat":"42.630151","long":"-70.774552","hexcolor":"#F78585","city":"Essex","state":"Massachusetts","year":"2008","photo-url":"","rowNumber":13},{"id":"13","placename":"Summit Pikes Peak","venue":"Summit Pikes Peak","image":"logo","noun":"graphic","lat":"38.840556","long":"-105.044167","hexcolor":"#F78585","city":"Pikes Peak","state":"Colorado","year":"2002","photo-url":"","rowNumber":14},{"id":"14","placename":"Polar Caves Park","venue":"Polar Caves Park","image":"polar bear","noun":"animal","lat":"43.7940757","long":"-71.8508395","hexcolor":"#F78585","city":"Rumney","state":"New Hampshire","year":"2010","photo-url":"","rowNumber":15},{"id":"15","placename":"Rainforest Cafe","venue":"OpryMills","image":"butterfly","noun":"animal","lat":"36.2051067","long":"-86.6938833","hexcolor":"#F7CE86","city":"Nashville","state":"Tennessee","year":"1999","photo-url":"","rowNumber":16},{"id":"16","placename":"National Museum of American History","venue":"National Museum of American History","image":"house","noun":"place","lat":"38.8911993","long":"-77.0300391","hexcolor":"#F78585","city":"Washington DC","state":"Washington DC","year":"2011","photo-url":"","rowNumber":17},{"id":"17","placename":"Boston Celtics","venue":"TD Garden","image":"mascot","noun":"person","lat":"42.3660275025778","long":"-71.0615873336792","hexcolor":"#FFE7E7","city":"Boston","state":"Massachusetts","year":"2010","photo-url":"","rowNumber":18},{"id":"18","placename":"Cafe du Monde","venue":"Cafe Du Monde","image":"coffee and bengiet","noun":"food","lat":"29.9510658","long":"-90.0715323","hexcolor":"#FFE7E7","city":"New Orleans","state":"Lousianna","year":"2012","photo-url":"","rowNumber":19},{"id":"19","placename":"Six Flags Over Georgia","venue":"Six Flags Over Georgia","image":"Wylie Cyotte","noun":"animal","lat":"33.767303","long":"-84.551204","hexcolor":"#FFE7E7","city":"Atlanta","state":"Georgia","year":"2003","photo-url":"","rowNumber":20},{"id":"20","placename":"Mardis Gras","venue":"","image":"masks","noun":"thing","lat":"29.9510658","long":"-90.0715323","hexcolor":"#FFE7E7","city":"New Orleans","state":"Lousianna","year":"2004","photo-url":"","rowNumber":21},{"id":"21","placename":"Buzz Lightyear","venue":"Six Flags Over Georgia","image":"Buzz Lightyear","noun":"person","lat":"28.3702563165193","long":"-81.5497970581055","hexcolor":"#F78585","city":"Walt Disney World","state":"Florida","year":"2001","photo-url":"","rowNumber":22},{"id":"22","placename":"Independence Hall","venue":"Independence Hall","image":"Indepence Hall","noun":"place","lat":"39.952335","long":"-75.163789","hexcolor":"#FFE7E7","city":"Philadelphia","state":"Pennsylvania","year":"2008","photo-url":"","rowNumber":23},{"id":"23","placename":"Golden Gate Bridge","venue":"","image":"Golden Gate Bridge","noun":"thing","lat":"37.809783953011","long":"-122.47740983963","hexcolor":"#FFE7E7","city":"San Francisco","state":"California","year":"2011","photo-url":"","rowNumber":24},{"id":"24","placename":"Pirates of the Caribean","venue":"Magic Kingdom, Walt Disney World","image":"Goofey","noun":"person","lat":"28.3702563165193","long":"-81.5497970581055","hexcolor":"#FFE7E7","city":"Walt Disney World","state":"Florida","year":"2001","photo-url":"","rowNumber":25},{"id":"25","placename":"Boston Skyline","venue":"TD Garden","image":"skyline","noun":"place","lat":"42.3660275025778","long":"-71.0615873336792","hexcolor":"#FFE7E7","city":"Boston","state":"Massachusetts","year":"2009","photo-url":"","rowNumber":26},{"id":"26","placename":"Johnny Bravo","venue":"Six Flags Over Georgia","image":"Johnny Bravo","noun":"person","lat":"33.767303","long":"-84.551204","hexcolor":"#FFE7E7","city":"Atlanta","state":"Georgia","year":"2003","photo-url":"","rowNumber":27},{"id":"27","placename":"Busch Gardens","venue":"Busch Gardens","image":"clydesdale","noun":"animal","lat":"28.033158","long":"-82.420593","hexcolor":"#F78585","city":"Tampa","state":"Florida","year":"2002","photo-url":"","rowNumber":28},{"id":"28","placename":"California Academy of Sciences","venue":"California Academy of Sciences","image":"aligator","noun":"animal","lat":"37.769979","long":"-122.466288","hexcolor":"#FFE7E7","city":"San Francisco","state":"California","year":"2012","photo-url":"","rowNumber":29},{"id":"29","placename":"Santa Monica Pier","venue":"Pacific Park","image":"rollercoaster","noun":"thing","lat":"34.009471","long":"-118.497322","hexcolor":"#F78585","city":"Santa Monica","state":"California","year":"2013","photo-url":"","rowNumber":30},{"id":"30","placename":"Monterey Aquarium","venue":"Monterey Aquarium","image":"animal","noun":"animal","lat":"36.618032","long":"-121.902054","hexcolor":"#FFE7E7","city":"Monterey","state":"California","year":"2013","photo-url":"","rowNumber":31},{"id":"31","placename":"Hearst Castle","venue":"Hearst Castle","image":"architecture","noun":"architecture","lat":"35.685312","long":"-121.16894","hexcolor":"#F78585","city":"San Simeon","state":"California","year":"2013","photo-url":"","rowNumber":32}] \ No newline at end of file diff --git a/site/demos/demo-chart.html b/site/demos/demo-chart.html deleted file mode 100644 index cc94c23..0000000 --- a/site/demos/demo-chart.html +++ /dev/null @@ -1,92 +0,0 @@ - - -
- --
-View Source // View Documentation
- - - - - - diff --git a/site/demos/demo-table.html b/site/demos/demo-table.html deleted file mode 100644 index 5340092..0000000 --- a/site/demos/demo-table.html +++ /dev/null @@ -1,123 +0,0 @@ - - - - -- -
-Sheetsee.js is a JavaScript library, or box of goodies, if you will, that makes it easy to use a Google Spreadsheet as the database feeding the tables, charts and maps on a website. Once set up, any changes to the spreadsheet will auto-saved by Google and be live on your site when a visitor refreshes the page.
-Using Google Spreadsheets as the backend database is awesome because it is easy to use, share and collaborate with.
-To use sheetsee.js you'll definitely need to know HTML, CSS and know JavaScript or be not afraid of it and just type what these docs tell you to type. Also, see JavaScript for Cats, Eloquent JavaScript or Mozilla's Developer Network.
- -Sheetsee.js depends on a few other awesome JavaScript libraries to make all this happen. First, Tabletop.js gets the data from the Google Spreadsheet and makes it nice. Once you have your data Sheetsee.js makes it easy to set up tables or templates with IChanHas.js (built on mustache.js), maps with Mapbox.js, and charts with d3.js. And jQuery of course powers most of the interactions. It also has many sorting and filtering functions built in so that you can display different parts of your data if you want. Each of these are explained in more detail below.
- -Sheetsee.js comes with a bare minimum stylesheet. This way you can customize your site to look the way you want to it or to match an existing site's design.
- -Sheetsee.js comes in two flavors, client-side (this repo) and server-side (sheetsee-cache). The client-side is the most approachable and straightforward, you just include sheetsee.js and the dependencies on your page and use sheetsee.js as normal.
-The server-side version is built with Node.js and you'll need to understand Node and be publishing to a server that runs Node.js apps. This version saves the data on the server so that the browser doesn't have to fetch from Google at every request, which can sometimes be slow. You can set when the cache expires. It also allows for offline development, huzzah!
- -<div>
in your HTML for any chart, map or table you want to have.<script>
tags.Ignoring some HTML things to conserve space, you get the point. This gives you a page with a map of your spreadsheets points.
-<html>
- <head>
- <script type="text/javascript" src="http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js"></script>
- <script type="text/javascript" src="js/ICanHaz.js"></script>
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/tabletop.js"></script>
- <script type="text/javascript" src="js/d3.js"></script>
- <script type="text/javascript" src="js/sheetsee.js"></script>
- <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
- </head>
- <style> #map {height: 600px; width: 600px;} </style>
- <body>
- <div id="map"></div>
- <script type="text/javascript">
- document.addEventListener('DOMContentLoaded', function() {
- var gData
- var URL = "0AvFUWxii39gXdFhqZzdTeU5DTWtOdENkQ1Y5bHdqT0E"
- Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
- })
- function showInfo(data) {
- gData = data
- optionsJSON = ["something", "something"]
- var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
- var map = Sheetsee.loadMap("map")
- Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
- var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map)
- // customize the popup content
- addPopups(map, markerLayer)
- function addPopups(map, markerLayer) {
- markerLayer.on('click', function(e) {
- var feature = e.layer.feature
- var popupContent = '<h3>' + feature.opts.something + '</h3>'
- e.layer.bindPopup(popupContent,{closeButton: false})
- })
- }
- }
- </script>
- </body>
-</html>
-
- This bit is the same for both client-side and server-side versions.
-Your Google Spreadsheet should be set up with row one as your column headers. Row two and beyond should be your data. Each header and row becomes an oject in the final array that Tabletop.js delivers of your data.
-There shouldn't be any breaks or horizontal organization in the spreadsheet. But, feel free to format the style of your spreadsheet as you wish; borders, fonts and colors and such do not transfer or affect your data exporting.
-[{"name":"Coco","breed":"Teacup Maltese","kind":"Dog","cuddlability":"5","lat":"37.74832","long":"-122.402158","picurl":"http://distilleryimage8.s3.amazonaws.com/98580826813011e2bbe622000a9f1270_7.jpg","hexcolor":"#ECECEC","rowNumber":1}...]
-
- You must add a column to your spreadsheet with the heading hexcolor (case insensitive). The maps, charts and such use colors and this is the easiest way to standardize that. The color scheme is up to you, all you need to do is fill the column with hexidecimal color values. This color picker by Devin Hunt is really nice. #Funtip: Coloring the background of the cell it's hexcolor brings delight!
- -If you intend to map your data and only have addresses you'll need to geocode the addresses into lat/long coordinates. Mapbox built a plugin - that does this for you in Google Docs. You can also use websites like latlong.net to get the coordinates and paste them into rows with column headers lat and long.
-You need to do this in order to generate a unique key for your spreadsheet, which Tabletop.js will use to get your spreadsheet data. In your Google Spreadsheet, click File > Publish to the Web. Then in the next window click Start Publishing; it will then turn into a Stop Publishing button.
-You should have an address in a box at the bottom, your key is the portion between the = and the &. You'll retrieve this later when you hook up your site to the spreadsheet.
-Before you get started with Sheetsee.js you should plan out your website. Design it, create the basic markup and stylesheet.
-For now, create empty div
placeholders for the map, chart and tables you plan on including.
Here the paths diverge:
-For client-siders, all you need to do is include the depences and sheetsee in your HTML <head>
and then in a script tag at the bottom of your page, right before the </body>
tag, you'll include this:
<script type="text/javascript">
- document.addEventListener('DOMContentLoaded', function() {
- var gData
- var URL = "0AvFUWxii39gXdFhqZzdTeU5DTWtOdENkQ1Y5bHdqT0E"
- Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
- })
- function showInfo(data) {
- gData = data
- //
- //everything you do with sheetsee goes here
- //
- }
-</script>
- The URL variable is the key from your spreadsheet's longer URL, explained above. Tabletop.init()
takes that URL and execute's Tabletop, when it's done generating the table it executes the callback showInfo
function. It's inside of this function that you'll then use your spreadsheet data, gData, to do all the Sheetsee.js goodness with.
The server-side version is in the repo sheetsee-cache. It uses Node.js to go to Google, get the spreadsheet data (with a Node.js version of Tabletop.js, thanks Max Ogden!) and save it on the server. This means every user that visits the page doesn't have to wait on Google's response to load the charts from the data.
-When the server builds your page, it will build in your data as the variable gData. All you need to do is add your scripts to the bottom of the page. For the tables/templating you'll need to wrap them in an event listener so that it doesn't try and build them before the data has settled.
-<script type="text/javascript">
- document.addEventListener('DOMContentLoaded', function() {
- // table/templating things the rest can be in their own script tags if you'd like
- })
-</script>
- You can run this locally and it will check your internet connection - if you're not online it will use the last saved data allowing you to develop offline, yay!
-Once you clone the repo, navigate there in Terminal, install the node modules and launch the server.
-cd sheetsee-cache
-npm install
-node server.js
- This will launch a local server you can visit and develop locally with in your browser.
-Tabletop.js will return all of your data and it will be passed into your site as an array of objects called gData. Sheetsee.js has functions built in to help you filter or use that data in other ways if you'd like.
-This page is using sheetsee. If you (are in Chrome and) right click on the page and select Inspect Element it will bring up the Web Inspector. Select the Console tab. Now you can interact with the data and functions from Sheetsee. Give the functions below a try - gData is the variable with the data (from this spreadsheet).
-
-
This takes in your data, an array of objects, and searches for a string, keyword, in each piece of your data (formerly the cells of your spreadsheet). It returns an array of each row that contained a keyword match. Similarly, using `getKeywordCount(data, keyword)` will return just the number of times the keyword occured.
-getKeyword(gData, "cat")
-// returns [{breed: "Fat", kind: "cat", hexcolor: "#CDCF83"...}, {breed: "Grey", kind: "cat", hexcolor: "#9C9B9A"...}, {breed: "Creepy", kind: "cat", hexcolor: "#918376"...}]
- Given your data, an array of objects and a string column header, this functions sums each cell in that column, so they best be numbers.
-getColumnTotal(gData, "cuddlability")
-// returns 11
- A really simple function that builds on getColumnTotal()
by returning the average number in a column of numbers.
getColumnAverage(gData, "cuddlability")
-// returns 1.8333333333333333
- This will return an array of object or objects (if there is a tie) of the element with the lowest number value in the column you specify from your data.
-getMin(gData, "cuddlability")
-// returns [{breed: "Fat", cuddlability: "0", hexcolor: "#CDCF83"...}, {breed: "Grey", cuddlability: "0", hexcolor: "#9C9B9A"...}, {breed: "Creepy", cuddlability: "0", hexcolor: "#918376"...}]
-
- This will return an array of object or objects (if there is a tie) of the element with the highest number value in the column you specify from your data.
-getMax(gData, "cuddlability")
-// returns {breed: "Teacup Maltese", cuddlability: "5", hexcolor: "#ECECEC", kind: "Dog", lat: "37.74832", long: "-122.402158", name: "Coco"...}
-
-
-
-
- Create variables that are the sums, differences, multiples and so forth of others. Lots of info on that here on MDN.
-var profit09 = Sheetsee.getColumnTotal(gData, "2009")
-var profit10 = Sheetsee.getColumnTotal(gData, "2010")
-var difference = profit09 - profit10
- You don't have to just create tables of your data. You can have other portions of your page that show things like, "The difference taco consumption between last week and this week is..." These are easy to create with javascirpt math functions and knowing a little bit more about icanhas.js. View source on this page to see how I created "Most Cuddlable".
- -Takes data as an array of objects, a string you'd like to filter and a string of the category you want it to look in (a column header from your spreadsheet).
-getMatches(gData, "dog", "kind")
- Returns an array of objects matching the category's filter.
-[{"name": "coco", "kind": "dog"...}, {"name": "wolfgang", "kind": "dog"...},{"name": "cooc", "kind": "dog"...} ]
-
- Takes data as an array of objects and a string for category (a column header from your spreadsheet) you want tally how often an element occured.
-getOccurance(gData, "kind")
- Returns an object with keys and values for each variation of the category and its occurance.
-{"dog": 3, "cat": 3}
-
-If you use getOccurance()
and want to then chart that data with d3.js, you'll need to make it into an array (instead of an object) and add colors back in (since the hexcolor column applies to the datapoints in your original dataset and not this new dataset).
This function takes in your data, as an object, an array of hexidecimal color strings which you define and the category you used in getOccurance()
.
var kinds = getOccurance(gData, "kind")
-var kindColors = ["#ff00ff", "#DCF13C"]
-var kindData = makeColorArrayOfObjects(mostPopBreeds, kindColors, "kind")
- It will return an array of objects with units as the title of the occurance amount like so:
-[{"kind": "dog", "units": 2, "hexcolor": "#ff00ff"}, {"kind": "cat", "units": 3, "hexcolor": "#DCF13C"}]
- If you pass in an array of just one color it will repeat that color for all items. If you pass fewer colors than data elements it will repeat the sequences of colors for the remainder elements.
- -Sheetsee.js uses Mapbox.js, a Leaflet.js plugin, to make maps.
-Create an empty <div>
in your HTML, with an id.
<div id="map"></div>
- Next you'll need to create geoJSON out of your data so that it can be mapped.
- -This takes in your data and the parts of your data, optionsJSON, that you plan in your map's popups. If you're not going to have popups on your markers, don't worry about it then and just pass in your data.
-var optionsJSON = ["name", "breed", "cuddlability"]
-var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
- It will return an array in the special geoJSON format that map making things love.
-[{
- "geometry": {"type": "Point", "coordinates": [long, lat]},
- "properties": {
- "marker-size": "small",
- "marker-color": lineItem.hexcolor
- },
- "opts": {the options you pass in},
-}}
-
- To create a simple map, with no data, you simply call `.loadMap() and pass in a string of the mapDiv (with no #) from your HTML.
-var map = Sheetsee.loadMap("map")
-
- To add a tile layer, aka a custom map scheme/design/background, you'll use this function which takes in your map and the source of the tileLayer. This source can be a Mapbox id, a URL to a TileJSON or your own generated TileJSON. See Mapbox's Documentation for more information.
-Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
- You can add tiles from awesome mapmakers like Stamen or create your own in Mapbox's Tilemill or online.
- -To add makers to your map, use this function and pass in your geoJSON so that it can get the coordinates and your map so that it places the markers there.
-var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map)
-
- To customize the marker popup content in your map use this function and pass in your map and markerLayer.
- Sheetsee.addPopups(map, markerLayer)
- To customize the marker popup content in your map you'll need to use this entire function on your website.
-function addPopups(map, markerLayer) {
- markerLayer.on('click', function(e) {
- var feature = e.layer.feature
- var popupContent = '<h2>' + feature.opts.name + '</h2>' +
- '<h3>' + feature.opts.breed + '</h3>'
- e.layer.bindPopup(popupContent,{closeButton: false,})
- })
-}
- You will edit the popupContent variable however you'd like your popups to look. To reference the data you sent to you geoJSON you'll use feature.opts
and then one of the column headers you passed into createGeoJSON().
Sheetsee.js supports making multiple tables or templates with IcanHas.js. The tables can have multiple inputs for searches and table headers can be used to sort the data in that column. For each of these you'll need a <div>
in your html, a <script>
template and a <script>
that calls table functions.
<div>
This is as simple as an empty <div>
with an id. This id should match the script tempate id in the next section.
<div id="siteTable"></div>
- <script>
TemplateYour template is the mockup of what you'd like your table to look like and what content it should show. Most of this is up to you but if you want users to be able to click on headers and sort that column you must make a table row with table headers with the class tHeader.
-The variables inside the {{}} must match the column headers in your spreadsheet. Lowercase (?) and remember spaces are ommited, so "Place Name" will become "placename".
-<script id="siteTable" type="text/html">
- <table>
- <tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>
- {{#rows}}
- <tr><td>{{city}}</td><td>{{placename}}</td><td>{{year}}</td><td>{{image}}</td></tr>
- {{/rows}}
- </table>
-</script>
-<script>
Execution<script type="text/javascript">
- document.addEventListener('DOMContentLoaded', function() {
- Sheetsee.makeTable(gData, "#siteTable")
- Sheetsee.initiateTableFilter(gData, "#tableFilter", "#siteTable")
- })
-</script>
- To create another table, simply repeat the steps with the corresponding data and divs.
-<div id="secondTable"></div>
-<script id="secondTable"> // your table template here </script>
-<script>
- Sheetsee.makeTable(otherData, "#secondTable")
- Sheetsee.initiateTableFilter(otherData, "#secondFilter", "#secondTable")
-</script>
-
- Learn more about the things you can do with mustache.js.
- -You'll call this to make a table out of a data and tell it what targetDiv in the html to render it in (this should also be the same id as your script template id).
-Sheetsee.makeTable(gData, "#siteTable")
-
-If you want to have an input to allow users to search/filter the data in the table, you'll add this to your html:
-<input id="tableFilter" type="text" placeholder="filter by.."></input>
-<span class="clear button">Clear</span>
-<span class="noMatches">no matches</span>
-
- You will then call this function to make that input live:
-Sheetsee.initiateTableFilter(gData, "#TableFilter", "#siteTable")
-
-Sheetsee.js comes with a d3.js bar, pie and line chart. Each requires your data be an array of objects, formatted to contain "label" and "units" keys. See the section above on Your Data to learn about formatting.
-You'll have to experiement with the charts to find the correct size your <div>
will need to be to hold the chart with your data in it nicely.
You can also make your own d3 chart in a separate .js file, link to that and pass your data on to it. I'd love to see people building some other charts that will work with Sheetsee.
- -To create a bar chart you'll need to add a placeholder <div>
in your HTML with an id.
<div id="barChart"></div>
- In your CSS, give it dimensions.
-#barChart {height: 400px; max-width: 600px; background: #F8CDCD;}
- In a <script>
tag set up your options.
var barOptions = {labels: "name", units: "cuddleability", m: [60, 60, 30, 150], w: 600, h: 400, div: "#barChart", xaxis: "no. of pennies", hiColor: "#FF317D"}
- <div>
in your HTMLThen call the d3BarChart()
function with your data and options.
Sheetsee.d3BarChart(data, barOptions)
-
- To create a line chart you'll need to add a placeholder <div>
in your html with an id.
<div id="lineChart"></div>
- In your CSS, give it dimensions.
-#lineChart {height: 400px; max-width: 600px; background: #F8CDCD;}
- In a <script>
tag set up your options.
var lineOptions = {labels: "name", units: "cuddleability", m: [80, 100, 120, 100], w: 600, h: 400, div: "#lineChart", yaxis: "no. of pennies", hiColor: "#14ECC8"}
- <div>
in your HTMLThen call the d3LineChart()
function with your data and options.
Sheetsee.d3LineChart(data, lineOptions)
-
- To create a bar chart you'll need to add a placeholder <div>
in your html with an id.
<div id="pieChart"></div>
- In your CSS, give it dimensions.
-#pieChart {height: 400px; max-width: 600px; background: #F8CDCD;}
- In a <script>
tag set up your options. You must include labels and units, this tells it what you're charting. Because for the pie chart we're using data we got from getOccurance()
and makeColorArrayofObject()
, our units are already called units. If we were using original data, we might have units as "cuddleability" or something else.
var pieOptions = {labels: "kind", units: "units", m: [80, 80, 80, 80], w: 600, h: 400, div: "#pieChart", hiColor: "#14ECC8"}
- <div>
in your HTMLThen call the d3PieChart()
function with your data and options.
Sheetsee.d3PieChart(data, pieOptions)
-
-Don't forget, right click this page, select View Source and scroll to the bottom and see exactly how these charts were set up!
- - -Thanks to Code for America for providing the platform me to build the first version of sheetsee.js for Macon, Georga.
-Thanks to Dan Sinker at Open News for having faith and getting things together to make this Code Sprint happen and thanks to Matt Green at WBEZ for being a willing partner.
-Thanks to Max Ogden for emotional support, teaching me JavaScript and working on the harder parts of Sheetsee.js - especially for making Tabletop.js for Node.js.
-Thanks to all the authors and contributors to Tabletop.js, Mapbox.js, Leaflet.js, jQuery, ICanHas.js and d3.js. Thanks to Google and the Internet for existing and to all those who've written tutorials or asked or answered a question on StackOverflow.
-Thanks to Mom and Dad for getting a computer in 1996 and the mIRC scripts I started writing that I suppose would eventually lead me here.
- -
-
-
- Yo, yo, yo!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Sheetsee.js began as a part of my Code for America 2012 Fellowship project, See Penny Work. The idea and original code was to enable cities to easily publish and maintain themselves their budget data. The original sheetsee.js was built into Wordpress templates so that with the See Penny Work template, you could create pages that you only had to name and they would be populated with maps, charts and tables based on the page name corelating with a project in the spreadsheet.
-In early 2013, after the CfA Fellowship, I recieved a grant from Mozilla Open News to pull out the sheetsee.js bits and make it a standalone open source library. That brought us to version 2.
-The present version makes the project modular, customizable and with more maping and table features.
-Sheetsee would not exist were it not for tabletop.js a library that handles the messy interactions with the Google Spreadsheets API for you and returns a lovely array of your data. Every instance of Sheetsee begins with running tabletop.js.
-Once you've got the data, the meat of Sheetsee comes into play. You can now decide if you want to map, chart or display your data in a table. Sheetsee's table module, sheetsee-tables, comes with sorting, filtering and pagination. Sheetsee-maps is built ontop of Leaflet.js and Mapbox.js and allows you to customize colors and popups of points, lines, polygons or multipolygons. Finally, Sheetee-charts comes with three basic d3.js charts: bar, circle and line. It is difficult to make a chart that can suit many types of data, but it is easy to choose your own d3 chart and plug it in to sheetsee. Documentation for creating a d3 module is here.
-Thanks to Code for America for providing the platform me to build the first version of sheetsee.js for Macon, Georgia.
-Thanks to Dan Sinker at Open News for having faith and getting things together to make this Code Sprint happen and thanks to Matt Green at WBEZ for being a willing partner.
-Thanks to Max Ogden for emotional support, teaching me JavaScript and answering lots of questions.
-Thanks to all the authors and contributors to Tabletop.js, Mapbox.js, Leaflet.js, jQuery, ICanHas.js and d3.js. Thanks to Google and the Internet for existing and to all those who've written tutorials or asked or answered a question on StackOverflow.
-Thanks to Mom and Dad for getting a computer in 1996 and the mIRC scripts I started writing that I suppose would eventually lead me here.
- - - -Spreadsheets are a great lightweight databases. Google Spreadsheets in particular are easy to work with and share, making this unlike most traditional database setups. That being said, traditional databases are great for bigger, more secure jobs. If you're storing lots and lots and lots of information, or storing sensitive or complex information -- the spreadsheet is not for you. But if you're working on small to medium sized personal or community projects, try a spreadsheet!
-<div>
in your HTML for any chart, map or table you want to have.<script>
tags.<script>
tag initialize Tabletop.js. It waits for the document to load and then initializes tabletop and calls back a function when it has returned with the spreadsheet data.document.addEventListener('DOMContentLoaded', function() {
- var gData
- var URL = "YOURSPREADSHEETSKEYHERE"
- Tabletop.init( { key: URL, callback: callback, simpleSheet: true } )
-})
-
-function callback(data) {
- // All the sheetsee things you want to do!
-}
-
-Ignoring some HTML things to conserve space, you get the point. This is a basic setup.
-<html>
- <head>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>
- <script type="text/javascript" src='js/sheetsee.js'></script>
- <link rel="stylesheet" type="text/css" href="css/sss.css">
- </head>
- <body>
- <div id="placeholder"></div>
-
- <script id="placeholder" type="text/html">
- // template if you so desire!
- </script>
-
- <script type="text/javascript">
- document.addEventListener('DOMContentLoaded', function() {
- var URL = "YOURSPREADSHEETSKEYHERE"
- Tabletop.init( { key: URL, callback: myData, simpleSheet: true } )
- })
- function myData(data) {
- All the sheetsee things you want to do!
- }
- </script>
- </body>
-</html>
-
-Your Google Spreadsheet should be set up with row one as your column headers. Row two and beyond should be your data. Each header and row becomes an oject in the final array that Tabletop.js delivers of your data.
-There shouldn't be any breaks or horizontal organization in the spreadsheet. But, feel free to format the style of your spreadsheet as you wish; borders, fonts and colors and such do not transfer or affect your data exporting.
-[{"name":"Coco","breed":"Teacup Maltese","kind":"Dog","cuddlability":"5","lat":"37.74832","long":"-122.402158","picurl":"http://distilleryimage8.s3.amazonaws.com/98580826813011e2bbe622000a9f1270_7.jpg","hexcolor":"#ECECEC","rowNumber":1}...]
-
You must add a column to your spreadsheet with the heading hexcolor (case insensitive). The maps, charts and such use colors and this is the easiest way to standardize that. The color scheme is up to you, all you need to do is fill the column with hexidecimal color values. This color picker by Devin Hunt is really nice. #Funtip: Coloring the background of the cell it's hexcolor brings delight!
-If you intend to map your data and only have addresses you'll need to geocode the addresses into lat/long coordinates. Mapbox built a plugin - that does this for you in Google Docs. You can also use websites like latlong.net to get the coordinates and paste them into rows with column headers lat and long.
-You need to do this in order to generate a unique key for your spreadsheet, which Tabletop.js will use to get your spreadsheet data. In your Google Spreadsheet, click File > Publish to the Web. Then in the next window click Start Publishing; it will then turn into a Stop Publishing button.
-You should have an address in a box at the bottom, your key is the portion between the = and the &. You'll retrieve this later when you hook up your site to the spreadsheet. Actually, you technically can use the whole URL, but it's so long...
-Sheetsee.js comes with a bare minimum stylesheet, sss.csss
, which contains elements you'll want to style when using the feature they correspond to.
You can customize your sheetsee.js build with just the parts you want to use. If you want to just use the full version, you can grab it here at github.com/jlord/sheetsee.js.
-All bundle comes with mapbox.js and handlebars.js (since both are available on NPM). Additionally you'll need to also include tabletop.js and jQuery in your HTML head like so:
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>
-
-To build your Sheetsee you'll need Node.js and NPM (the latter comes with the former in most installs) on your computer and a command line.
-Download Node.js from nodejs.org/download. For most users you can just download the Mac .pkg or Windows .msi. Follow the install instructions, both include NPM. Once they're installed, proceed:
-sheetsee
from NPMThe sheetsee
(with no '.js') module is the tool for building custom Sheetsee.js builds. Install sheetsee
globally and then run it within the folder of your soon-to-be sheetsee.js project.
Install globally
-npm install -g sheetsee
-
-Run from within a project folder
-sheetsee [options]
-
-Here are the options for the different modules. If you want save the generated file as sheetsee.js then add the --save
option.
-m
or -maps
for maps-t
or -tables
for tables-c
or -charts
for charts--save
to write out the file** otherwise, defaults to standardout on your console which you can | pbcopy
So for instance, sheetsee -m -t --save
will build you a Sheetsee.js with the basic data functions, the map and tables sections built in and save it as a file named sheetsee.js. Running sheetsee -m -t | pbcopy
will save the output to your clipboard.
D3 charts need an array of objects, and something to chart: the thing itself (aka labels) and the corresponding value (aka units). Your data usually contains more than D3 needs to make the chart, so you have to tell it what to chart from your data to chart.
-Previously Sheetsee required you pass your data through a function, addUnitsAndLabels()
which took in your data and the things you wanted to chart, reformatted your data for you so that you could pass it into one of the d3 charts. This is one more step than actually needs to happen.
Now Sheetsee just asks for what you want your labels and units to be in the options you give it when calling the chart function. It then sorts the data correctly on the inside of the chart function. Yay, easier!
-var options = {
- labels: "name",
- units: "cuddleability",
- m: [60, 60, 30, 150],
- w: 600, h: 400,
- div: "#barChart",
- xaxis: "no. of pennies",
- hiColor: "#FF317D"
-}
-
-Thanks @maxogden for the help with this.
-It's easy to take a D3.js chart of your own and use it with Sheetsee.js. If you make it into a module, anyone can use your chart, too!
-Sheetsee charts currently work by taking in some options, like so:
-var pieOptions = {labels: "name", units: "units", m: [80, 80, 80, 80], w: 600, h: 400, div: "#pieChart", hiColor: "#14ECC8"}
-
-The labels represent the actual thing you're charting and units are how many of those things. Margin, width and height are m, w, h and the <div>
to build your chart in is div. Finally, you can supply a highlight color if you want.
So, your chart could take the same options, but map them into your D3 code with the correct variables. An example from maxogden/sheetsee-d3bubble:
-Append the d3.js code with a map of your sheetsee options
-Sheetsee.d3BubbleChart = function(data, options) {
- var tree = {name: "data", children: []}
- var groups = {}
-
- // data needs to look like this:
- // var data = { name: "wahtever", children: [
- // { name: "group1", children: [
- // { name: 'bob', size: 3},
- // { name: 'judy', size: 5}
- // ]},
- // { name: "group2", children: [
- // { name: 'jim', size: 10},
- // { name: 'bill', size: 5}
- // ]}
- // ]}
-
- data.map(function(r) {
- var groupName = r[options.group]
- groups[groupName] = true
- })
-
- Object.keys(groups).map(function(groupName) {
- var groupMembers = []
- data.map(function(r) {
- if (r[options.group] !== groupName) return
- groupMembers.push({name: r[options.name], size: r[options.size]})
- })
- tree.children.push({name: groupName, children: groupMembers})
- })
-
- // the rest of the code
-
-In your HTML call it like so
-<script type="text/javascript">
- document.addEventListener('DOMContentLoaded', function() {
- var URL = "0AvFUWxii39gXdFhqZzdTeU5DTWtOdENkQ1Y5bHdqT0E"
- Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
- })
-
- function showInfo(data) {
- Sheetsee.d3BubbleChart(data, { name: 'name', size: 'cuddlability', group: 'kind', div: '#stuff'})
- }
-</script>
-
-There are lots of charts to get excited about in the D3 gallery.
-View the entire source
- - - -A Fork-n-Go project is a project on GitHub that in a few clicks and starting with a fork, gives another user a live website that they control with an easy to swap-for-your-own Google Spreadsheet database.
-To awesome things that make this possible: Forking and GitHub Pages.
-On GitHub, a fork is a full copy of a repository, on your account, that you can manage and edit. It's done with the click of a button.
-GitHub Pages is the hosting service that GitHub provides free to all users, organizations and repositories. This means everyone of these entities or project can have it's own website at a predictable domain:
-To have a website for a repository all you need is a branch named gh-pages
. GitHub will then look in that branch for web files and serve them up at the address.
What all of this means is that Sheetsee.js projects, hosted on gh-pages branches on GitHub, can easily be forked and connected to another spreadsheet giving another user a live website of their own really easily.
-A Fork-n-Go example from my blog post on the topic:
-I made this website to collect hack spots all over the world from friends and friends of friends (the spreadsheet is wide open, so you can add some, too!). It’s using sheetsee to power the table, map and other elements of the page. Its source is in this repo, with just a gh-pages branch. To create an instance of this site for yourself all you need to do:
-Now you have the same site connected to a spreadsheet that you manage — it’s live and can be found at yourGitHubName.github.io/theReposName.
-Sheetsee.js provides three D3.js chart options to use with your spreadsheet data: a bar chart, line graph and pie chart. You can also use a custom D3 chart with Sheetsee, read about that here.
-Each chart requires your data be an array of objects, with objects containing label
and units
key/value pairs.
Experiment with the charts to find the correct size your <div>
will need to be to hold the chart with your data in it nicely.
You can also make your own D3 chart in a separate .js file, link to that in your HTML head and pass your data on to it after Tabletop.js returns. Information here on using your own chart.
-To create a bar chart you'll need to add a placeholder <div>
in your HTML with an id.
<div id="barChart"></div>
-
-In your CSS, give it dimensions.
-#barChart {height: 400px; max-width: 600px; background: #F8CDCD;}
-
-You'll also have these CSS elements to style however you'd like:
-.labels text {text-align: right;}
-.bar .labels text {fill: #333;}
-.bar rect {fill: #e6e6e6;}
-.axis {shape-rendering: crispEdges;}
-.x.axis line {stroke: #fff; fill: none;}
-.x.axis path {fill: none;}
-.x.axis text {fill: #333;}
-.xLabel {font-family: sans-serif; font-size: 9px;}
-
-In a <script>
tag set up your options.
var barOptions = {labels: "name", units: "cuddleability", m: [60, 60, 30, 150], w: 600, h: 400, div: "#barChart", xaxis: "no. of pennies", hiColor: "#FF317D"}
-
-<div>
in your HTMLThen call the d3BarChart()
function with your data and options.
Sheetsee.d3BarChart(data, barOptions)
-
-To create a line chart you'll need to add a placeholder <div>
in your html with an id.
<div id="lineChart"></div>
-
-In your CSS, give it dimensions.
-#lineChart {height: 400px; max-width: 600px; background: #F8CDCD;}
-
-And these chart elements to style:
-.axis {shape-rendering: crispEdges;}
-.x.axis .minor, .y.axis .minor {stroke-opacity: .5;}
-.x.axis {stroke-opacity: 1;}
-.y.axis line, .y.axis path {fill: none; stroke: #acacac; stroke-width: 1;}
-.bigg {-webkit-transition: all .2s ease-in-out; -webkit-transform: scale(2);}
-path.chartLine {stroke: #333; stroke-width: 3; fill: none;}
-div.tooltip {position: absolute; text-align: left; padding: 4px 8px; width: auto; font-size: 10px; height: auto; background: #fff; border: 0px; pointer-events: none;}
-circle {fill: #e6e6e6;}
-
-In a <script>
tag set up your options.
var lineOptions = {labels: "name", units: "cuddleability", m: [80, 100, 120, 100], w: 600, h: 400, div: "#lineChart", yaxis: "no. of pennies", hiColor: "#14ECC8"}
-
-<div>
in your HTMLThen call the d3LineChart()
function with your data and options.
Sheetsee.d3LineChart(data, lineOptions)
-
-To create a bar chart you'll need to add a placeholder <div>
in your html with an id.
<div id="pieChart"></div>
-
-In your CSS, give it dimensions.
-#pieChart {height: 400px; max-width: 600px; background: #F8CDCD;}
-
-Style chart elements:
-.arc path { stroke: #fff;}
-
-In a <script>
tag set up your options.
var pieOptions = {labels: "name", units: "units", m: [80, 80, 80, 80], w: 600, h: 400, div: "#pieChart", hiColor: "#14ECC8"}
-
-<div>
in your HTMLThen call the d3PieChart()
function with your data and options.
Sheetsee.d3PieChart(data, pieOptions)
-
-
-
-
- This is the core module in sheetsee and is included in all builds. It contains the functions for building your custom file as well as the basic data manipulation functions.
-Tabletop.js will fetch the data from your spreadsheet and return it as an array of objects. Sheetsee.js has functions built in to help you filter or reorganize the data if you'd like.
-This takes in your data, an array of objects, and searches for a string, groupTerm, in each piece of your data (formerly the cells of your spreadsheet). It returns the number of times it found the groupTerm.
-getGroupCount(data, "cat")
-// returns a number
-
-Given your data, an array of objects, and a string column header, this functions sums each cell in that column(so this collumn you mention best have numbers).
-getColumnTotal(data, "cuddlability")
-// returns number
-
-A really simple function that builds on getColumnTotal()
by returning the average number in a column of numbers.
getColumnAverage(data, "cuddlability")
-// returns number
-
-This will return an array of object or objects (if there is a tie) of the element with the lowest number value in the column you specify from your data.
-getMin(data, "cuddlability")
-// returns array
-
-This will return an array of object or objects (if there is a tie) of the element with the highest number value in the column you specify from your data.
-getMin(data, "cuddlability")
-// returns array
-
-Create variables that are the sums, differences, multiples and so forth of others. Lots of info on that here on MDN.
-var profit09 = Sheetsee.getColumnTotal(data, "2009")
-var profit10 = Sheetsee.getColumnTotal(data, "2010")
-var difference = profit09 - profit10
-
-You don't have to just create tables of your data. You can have other portions of your page that show things like, "The difference taco consumption between last week and this week is..." These are easy to create with JavaScript math functions and knowing a little bit more about icanhaz.js.
-Takes data as an array of objects, a string you'd like to filter and a string of the category you want it to look in (a column header from your spreadsheet).
-getMatches(data, "dog", "kind")
-
-Returns an array of objects matching the category's filter.
-[{"name": "coco", "kind": "dog"...}, {"name": "wolfgang", "kind": "dog"...},{"name": "cooc", "kind": "dog"...} ]
-
-Takes data as an array of objects and a string for category (a column header from your spreadsheet) you want tally how often an element occured.
-getOccurance(data, "kind")
-
-Returns an object with keys and values for each variation of the category and its occurance.
-{"dog": 3, "cat": 3}
-
-If you use getOccurance()
and want to then chart that data with d3.js, you'll need to make it into an array (instead of an object) and add colors back in (since the hexcolor column applies to the datapoints in your original dataset and not this new dataset).
This function takes in your data, as an object, and an array of hexidecimal color strings which you define.
-var kinds = getOccurance(data, "kind")
-var kindColors = ["#ff00ff", "#DCF13C"]
-
-var kindData = makeColorArrayOfObjects(mostPopBreeds, breedColors)
-
-It will return an array of objects formatted to go directly into a d3 chart with the appropriate units and label keys, like so:
-[{"label": "dog", "units": 2, "hexcolor": "#ff00ff"}, {"label": "cat", "units": 3, "hexcolor": "#DCF13C"}]
-
-If you pass in an array of just one color it will repeat that color for all items. If you pass fewer colors than data elements it will repeat the sequences of colors for the remainder elements.
-If you're using data, the data directly from Tabletop, you'll need to format it before you use the d3 charts. You'll need to determine what part of your data you want to chart - what will be your label, what your charting, and what will be your units, how many of them are there (this should be a number).
-var data = [{"name": "coco", "kind": "dog", "cuddablity": 5}, {"name": "unagi", "kind": "cat", "cuddlability": 0}]
-
-For istance, if from our original data above we want to chart the age of each cat, we'll use:
-Sheetsee.addUnitsLabels(data, "name", "cuddlability")
-
-Which will return an array, ready for the d3 charts:
-[{"label": "coco", "kind": "dog", "units": 5}, {"label": "unagi", "kind": "cat", "units": 0}]
-
-
-
-
- Sheetsee.js uses Mapbox.js and Leaflet.js to make maps of your points, polygons, lines or multipolygons (all coordinate based). Details on what that actually looks like here.
-You'll create a placeholder <div>
in your HTML, CSS giving it a size and fire up a map from within <script>
tags. You can also customize your popup content.
<div>
Create an empty <div>
in your HTML, with an id (name). Add CSS to give it dimensions
<div id="map"></div>
-
-CSS
-#map {width: 500px; height: 500px;}
-
-<script>
FunctionsNext you'll need to create geoJSON out of your data so that it can be mapped.
-This takes in your data and the parts of your data, optionsJSON, that you plan on including in your map's popups. These will be column headers in your spreadsheet. If you're not going to have popups on your markers, don't worry about it then and just pass in your data (by default it will use all the row's information).
-var optionsJSON = ["name", "breed", "cuddlability"]
-var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
-
-It will return an array in the special geoJSON format that map making things love.
-[{
- "geometry": {"type": "Point", "coordinates": [long, lat]},
- "properties": {
- "marker-size": "small",
- "marker-color": lineItem.hexcolor
- },
- "opts": {},
-}}
-
-To create a simple map, with no data, you simply call .loadMap()
and pass in a string of the mapDiv (with no '#') from your HTML.
var map = Sheetsee.loadMap("map")
-
-To add a tile layer (aka a custom map scheme/design/background) you'll use this function which takes in your map and the source of the tileLayer. This source can be a Mapbox id, a URL to a TileJSON or your own generated TileJSON. See Mapbox's Documentation for more information.
-Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
-
-You can add tiles from awesome mapmakers like Stamen or create your own in Mapbox's Tilemill or online.
-To add makers, lines or shapes to your map, use this function and pass in your geoJSON so that it can get the coordinates and your map so that it places the markers there. You can customize what the content in your marker's popup looks like with a popupTemplate, which is an ICanHaz.js template in HTML and can reference the column headers you included in your optionsJSON.
-var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, popupTemplate)
-
-Example template:
-var popupTemplate = "<h4>Hello {{name}}</h4>"
-
-<script type="text/javascript">
- document.addEventListener('DOMContentLoaded', function() {
- var gData
- var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
- Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
- })
-
- function showInfo(data) {
- gData = data
- var optionsJSON = ["placename", "photo-url"]
- var template = "<ul><li><a href='{{photo-url}}' target='_blank'>"
- + "<img src='{{photo-url}}'></a></li>"
- + "<li><h4>{{placename}}</h4></li></ul>"
- var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
- var map = Sheetsee.loadMap("map")
- Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
- var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, template)
- }
-</script>
-
-
-
-
- With this module you can create tables of your data that are sortable, searchable and paginate-able.
-You'll need a placeholder <div>
in your html, a <script>
mustache template and a <script>
that initiates the table.
<div>
This is as simple as an empty <div>
with an id. This id should match the script template id in the next section.
<div id="siteTable"></div>
-
-<script>
TemplateYour template is the mockup of what you'd like your table to look like and what content it should show. The style is up to you!
-If you want users to be able to click on headers and sort that column, your template must include table headers with the class tHeader
.
Example
-The variables inside the {{}} must match the column headers in your spreadsheet. They should be lowercase and remember spaces are omitted, so "Place Name" will become "placename".
-<script id="siteTable" type="text/html">
- <table>
- <tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>
- {{#rows}}
- <tr><td>{{city}}</td><td>{{placename}}</td><td>{{year}}</td><td>{{image}}</td></tr>
- {{/rows}}
- </table>
-</script>
-
-<script>
Execution<script type="text/javascript">
- document.addEventListener('DOMContentLoaded', function() {
- var tableOptions = {
- "data": gData,
- "pagination": 10,
- "tableDiv": "#fullTable",
- "filterDiv": "#fullTableFilter"
- }
- Sheetsee.makeTable(tableOptions)
- Sheetsee.initiateTableFilter(tableOptions)
- })
-</script>
-
-To create another table, simply repeat the steps except for initiateTableFilter()
<div id="secondTable"></div>
-<script id="secondTable"> // your table template here </script>
-<script>Sheetsee.makeTable(otherData, "#secondTable", 10)</script>
-
-Learn more about the things you can do with ICanHaz.js.
-You pass in an object containing:
-data
your data arraypagination
how many rows displayed at one time, defaults to alltableDiv
the filterDiv
the <div>
containing your <input>
filter if using searchvar tableOptions = {
- "data": gData,
- "pagination": 10,
- "tableDiv": "#fullTable",
- "filterDiv": "#fullTableFilter"
- }
-Sheetsee.makeTable(tableOptions)
-
-If you do not put in a number for pagination, by default it will show all of the data at once. With pagination, HTML will be added at the bottom of your table for naviagtion, which you can style in your CSS:
-HTML
-<div id='Pagination' currentPage class='table-pagination'>
- Showing page {{currentPage}} of {{totalPages}}
- <a class='pagination-pre'>Previous</a><a class='pagination-next'>Next</a>
-</div>
-
-CSS
-<style>
- #Pagination {background: #eee;}
- .pagination-next, .pagination-pre {cursor: hand;}
- .no-pag {color: #acacac;}
-</style>
-
-If you want to have an input to allow users to search/filter the data in the table, you'll add an input to your HTML. Give it an id and if you want, placeholder text:
-<input id="tableFilter" type="text" placeholder="filter by.."></input>
-
-You will then call this function with your tableOptions
to make that input live and connected to your table:
Sheetsee.initiateTableFilter(tableOptions)
-
-It will connect that input to your data as well as inject this HTML for a button, which you can style yourself in your CSS:
-<span class="clear button">Clear</span>
-<span class="noMatches">no matches</span>
-
-
-
-
-
- This is the core module to create a sheetsee.js library. It contains the functions for building your custom file as well as the basic data manipulation functions.
-Tabletop.js will return all of your data and it will be passed into your site as an array of objects called gData. Sheetsee.js has functions built in to help you filter or use that data in other ways if you'd like.
-This takes in your data, an array of objects, and searches for a string, groupTerm, in each piece of your data (formerly the cells of your spreadsheet). It returns the number of times it found the groupTerm.
-getGroupCount(gData, "cat")
-// returns 2
-
-Given your data, an array of objects and a string column header, this functions sums each cell in that column, so they best be numbers.
-getColumnTotal(gData, "cuddlability")
-// returns 11
-
-A really simple function that builds on getColumnTotal()
by returning the average number in a column of numbers.
getColumnAverage(gData, "cuddlability")
-// returns 1.8333333333333333
-
-This will return an array of object or objects (if there is a tie) of the element with the lowest number value in the column you specify from your data.
-getMin(gData, "cuddlability")
-// returns {breed: "Fat", cuddlability: "0", hexcolor: "#CDCF83"...}, {breed: "Grey", cuddlability: "0", hexcolor: "#9C9B9A"...}, {breed: "Creepy", cuddlability: "0", hexcolor: "#918376"...}
-
-This will return an array of object or objects (if there is a tie) of the element with the highest number value in the column you specify from your data.
-getMin(gData, "cuddlability")
-// returns {breed: "Teacup Maltese", cuddlability: "5", hexcolor: "#ECECEC", kind: "Dog", lat: "37.74832", long: "-122.402158", name: "Coco"...}
-
-Create variables that are the sums, differences, multiples and so forth of others. Lots of info on that here on MDN.
-var profit09 = Sheetsee.getColumnTotal(gData, "2009")
-var profit10 = Sheetsee.getColumnTotal(gData, "2010")
-var difference = profit09 - profit10
-
-You don't have to just create tables of your data. You can have other portions of your page that show things like, "The difference taco consumption between last week and this week is..." These are easy to create with javascirpt math functions and knowing a little bit more about icanhas.js. View source on this page to see how I created "Most Cuddlable".
-Takes data as an array of objects, a string you'd like to filter and a string of the category you want it to look in (a column header from your spreadsheet).
-getMatches(gData, "dog", "kind")
-
-Returns an array of objects matching the category's filter.
-[{"name": "coco", "kind": "dog"...}, {"name": "wolfgang", "kind": "dog"...},{"name": "cooc", "kind": "dog"...} ]
-
-Takes data as an array of objects and a string for category (a column header from your spreadsheet) you want tally how often an element occured.
-getOccurance(gData, "kind")
-
-Returns an object with keys and values for each variation of the category and its occurance.
-{"dog": 3, "cat": 3}
-
-If you use getOccurance()
and want to then chart that data with d3.js, you'll need to make it into an array (instead of an object) and add colors back in (since the hexcolor column applies to the datapoints in your original dataset and not this new dataset).
This function takes in your data, as an object, and an array of hexidecimal color strings which you define.
-var kinds = getOccurance(gData, "kind")
-var kindColors = ["#ff00ff", "#DCF13C"]
-
-var kindData = makeColorArrayOfObjects(mostPopBreeds, breedColors)
-
-It will return an array of objects formatted to go directly into a d3 chart with the appropriate units and label keys, like so:
-[{"label": "dog", "units": 2, "hexcolor": "#ff00ff"}, {"label": "cat", "units": 3, "hexcolor": "#DCF13C"}]
-
-If you pass in an array of just one color it will repeat that color for all items. If you pass fewer colors than data elements it will repeat the sequences of colors for the remainder elements.
-If you're using gData, the data directly from Tabletop, you'll need to format it before you use the d3 charts. You'll need to determine what part of your data you want to chart - what will be your label, what your charting, and what will be your units, how many of them are there (this should be a number).
-var gData = [{"name": "coco", "kind": "dog", "cuddablity": 5}, {"name": "unagi", "kind": "cat", "cuddlability": 0}]
-
-For istance, if from our original data above we want to chart the age of each cat, we'll use:
-Sheetsee.addUnitsLabels(gData, "name", "cuddlability")
-
-Which will return an array, ready for the d3 charts:
-[{"label": "coco", "kind": "dog", "units": 5}, {"label": "unagi", "kind": "cat", "units": 0}]
-
-
- <html>
- <head>
- <title>Yo, yo, yo!</title>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>
- <script type="text/javascript" src='../js/sheetsee.js'></script>
- <meta charset='utf-8'>
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
- <link rel="stylesheet" type="text/css" href="css/sss.css">
- </head>
-
- <body>
- <!-- Your HTML Here -->
-
- <script id="" type="text/html">
- // template if you so desire!
- </script>
-
- <script type="text/javascript">
- // document.addEventListener('DOMContentLoaded', function() {
- // var gData
- // var URL = "YOURSPREADSHEETSKEYHERE"
- // Tabletop.init( { key: URL, callback: myData, simpleSheet: true } )
- // })
- // function myData(data) {
- // All the sheetsee things you want to do!
- // }
- </script>
-
- </body>
-</html>
-
-
-
-
- A few things to think about beyond charts, maps and tables.
-You can use templates for more than just tables. Use them to create lists ol
, ul
; array of images... You'll need a placeholder <div>
in your HTML, a <script>
for your template and a script to call ICanHaz from your Tabletop.js callback. For a live example, see the bottom photo grid of the sheetsee-table demo.
HTML
-<div id="divID"></div>
-
-Template
-<script id="divID" type="text/html">
- {{#rows}}
- <div><img class="photo" src="{{some-variable}}"></div>
- {{/rows}}
-</script>
-
-Script
-<script type="text/html">
- // your other Sheetsee.js, Tabletop code above
- var html = Sheetsee.ich.divID({'rows': data})
- $('#divID').html(html)
-</script>
-
-non-table example output
-If your spreadsheet contains address information, using templates (Sheetsee.js uses a form of Mustache), you can embed those elements into a query string (aka a search URL) like Google Maps URL or Yelp. If you search for a location in Google Maps, you'll notice it creates a URL for that search.
-So, if you have information in your spreadsheet that would go inside a query string, make a template for inserting them into a link on your page.
-The basic elements are: a spreadsheet with address info + HTML template to create the query string.
-The Sheetsee Hack-Spots is an does such a thing. Here is the spreadsheet, with address information
-In the HTML template for the table on the Hack-Spots page, the button’s links look like this:
-<a class="button" href="https://maps.google.com/maps?q={{address}},{{city}},{{state}}" target="_blank">View in Google Maps</a>
-<a class="button" href="http://www.yelp.com/search?find_desc={{name}}&find_loc={{city}},{{state}}" target="_blank">Find on Yelp</a>
-
-Here is the exact line of code on GitHub.
-We’re inserting the address, city, and state details from the spreadsheet into the structure of a query string for Google maps and Yelp. You can figure out the query string of a service by just using it (type in an address in Google Maps) and looking at the resulting URL.
-With a some CSS and such, the resulting website has a table with the hack spots and a button for viewing in Google Maps or Yelp:
-When the page builds, it creates the correct link for each row. When someone clicks on the buttons it takes them directly to the Google Map search result for that address. BAM!
-Ifttt.com offers lots of options sending data from your actions (Twitter, Instagram, GitHub, Pocket...) to Google Spreadsheets.
-When Tabletop.js returns your spreadsheet data, it adds a key/value of rownumber
. This is great to use when you need to uniquely match or find a row in your data.
Your spreadsheet can contain URLs to images which you can use to display the images on the page you build. Your template would look something like this:
-<img src='{{imgurl}}'/>
-
-You can use your data as classes to style with CSS. For instance, if you had data about recipes and a column called 'Taste' that contained either 'savory' or 'sweet'. In a table of the recipes you could do something like:
-<tr><td class="{{taste}}"></tr>
-
-Then in your CSS:
-td .savory {}
-td .sweet {}
-
-
-
-
- Sheetsee.js is a client-side library for connecting Google Spreadsheets to a website and visualizing the information in tables, maps and charts.
-Google Spreadsheets can be used as simple and collaborative databases, they make getting a data driven site going much easier than traditional databases. Read more about using spreadsheets for databases here.
-Each of sheetsee.js's features are divided into modules. Use just the parts you need; see docs on building. If you don't want to build your own, you can just use the full library which includes all modules, it's here on GitHub.
-Module | -Contains | -Docs | -
---|---|---|
sheetsee-core | -Included in any build. Gets you started and has the working-with-your-data functions. | -Doc | -
sheetsee-tables | -Contains everything you'll need to create a table including sortable columns, pagination and search. | -Doc | -
sheetsee-maps | -For making maps with your point, line or polygon spreadsheet data. Built on Mapbox.js. | -Doc | -
sheetsee-charts | -Includes 3 basic d3 charts: bar, line and pie. You can also use your own. | -Doc | -
What can you make with Sheetsee.js? Lost of things, here are some examples:
- -List your sheetsee project here: file an issue or pull request.
-Demos pages for the documentation.
- -More resources on using Sheetsee.js:
-