-
Notifications
You must be signed in to change notification settings - Fork 871
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
jlord
committed
Nov 27, 2013
1 parent
e527d69
commit 14791d7
Showing
16 changed files
with
25,610 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| [{"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}] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| More about Sheetsee's development and the libraries it's built on. | ||
|
|
||
| ## In the Beginning | ||
| 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. View the [changelog]() for a timeline of features and states. | ||
|
|
||
| ## Built ontop of Tabletop.js | ||
| Sheetsee would not exist were it not for [tabletop.js]() a library built in ___ by ___ that handles the messy interactions with the Google Spreadsheets API for you and returns a lovely JSON of your data. Every instance of Sheetsee begins with running tabletop.js. | ||
|
|
||
| ### Sheetsee.js + Mapbox.js + Leaflet.js + d3.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](). | ||
|
|
||
| ## Hacked on Openly | ||
| - Sheetsee.js is open source software with a [BSD license](docs/license.md). | ||
| - Sheetsee.js is built and maintained by [jlord](http://www.github.com/jlord) ([twitter](http://www.twitter.com/jllord)) with support from [contributors]() and a lot of support and knowledge passed on by [Max Ogden](). | ||
|
|
||
| ## Contact | ||
| - File a [new issue]() for ideas and bug reports. | ||
| - If your issue falls specifically with one of the modules, you can file it on its particular repo: | ||
| - [sheetsee](http://www.github.com/jlord/sheetsee) | ||
| - [sheetsee-tables](http://www.github.com/jlord/sheetsee-tables) | ||
| - [sheetsee-maps](http://www.github.com/jlord/sheetsee-maps) | ||
| - [sheetsee-charts](http://www.github.com/jlord/sheetsee-charts) | ||
| - [jllord](http://www.twitter.com/jllord) on Twitter. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| You can customize your sheetsee build with just the parts you want to use. If you want to just use the full version, you can grab it here in [js/sheetsee.js](). | ||
|
|
||
| **To build your sheetsee you'll need [Node.js]() on your computer and a commandline** | ||
|
|
||
| ## Install sheetsee from NPM | ||
| The sheetsee module contains the basic sorting, organizing data functions and the script for building on the other modules. Create a folder for you new project and `cd` into it. Then install `sheetsee`. | ||
|
|
||
| ```cd myNewProject``` | ||
| ```npm install sheetsee``` | ||
|
|
||
| Once you've decided which modules you want run this command `sheetsee ` adding: | ||
|
|
||
| - `-m` or `-maps` for maps | ||
| - `-t` or `-tables` for tables | ||
| - `-c` or `-charts` for charts | ||
| - `--save` to write out the file* | ||
|
|
||
| * _defaults to standardout on your console which you can `| pbcopy` | ||
|
|
||
| So for instance, `sheetsee -m -t --save` will build you a sheetsee with the map and tables sections built in and save it as a file named sheetsee.js. |
Empty file.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| # Fork-n-Go |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| # sheetsee-charts | ||
|
|
||
|  | ||
|
|
||
| Module for working with charts with sheetsee.js. It provides three d3 chart options to use with your spreadsheet data. Below is a portion of the sheetsee.js documentation regarding charts, for the full sheetsee.js documentation, go [here](http://jlord.github.io/sheetsee.js)! | ||
|
|
||
| --- | ||
|
|
||
| ## Make a Chart | ||
|
|
||
| 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. | ||
|
|
||
| ### Bar 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;} | ||
|
|
||
| In a `<script>` tag set up your options. | ||
|
|
||
| var barOptions = {m: [60, 60, 30, 150], w: 600, h: 400, div: "#barChart", xaxis: "no. of pennies", hiColor: "#FF317D"} | ||
|
|
||
| * **m** is margins: top, right, bottom, left | ||
| * **w** and **h** are width and height, this should match your CSS specs | ||
| * **div** is the id for the `<div>` in your HTML | ||
| * **xaxis** is optional text label for your x axis | ||
| * **hiColor** is the highlight color of your choosing! | ||
|
|
||
| Then call the `d3BarChart()` function with your **data** and **options**. | ||
|
|
||
| Sheetsee.d3BarChart(data, barOptions) | ||
|
|
||
| ### Line Chart | ||
|
|
||
| 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 = {m: [80, 100, 120, 100], w: 600, h: 400, div: "#lineChart", yaxis: "no. of pennies", hiColor: "#14ECC8"} | ||
|
|
||
| * **m** is your margins: top, right, bottom, left | ||
| * **w** and **h** are width and height, this should match your CSS specs | ||
| * **div** is the id for the `<div>` in your HTML | ||
| * **yaxis** is optional text label for your y axis | ||
| * **hiColor** is the highlight color of your choosing! | ||
|
|
||
| Then call the `d3LineChart()` function with your **data** and **options**. | ||
|
|
||
| Sheetsee.d3LineChart(data, lineOptions) | ||
|
|
||
| ### Pie Chart | ||
|
|
||
| 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. | ||
|
|
||
| var pieOptions = {m: [80, 80, 80, 80], w: 600, h: 400, div: "#pieChart", hiColor: "#14ECC8"} | ||
|
|
||
| * **m** is your margins: top, right, bottom, left | ||
| * **w** and **h** are width and height, this should match your CSS specs | ||
| * **div** is the id for the `<div>` in your HTML | ||
| * **hiColor** is the highlight color of your choosing! | ||
|
|
||
| Then call the `d3PieChart()` function with your **data** and **options**. | ||
|
|
||
| Sheetsee.d3PieChart(data, pieOptions) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| # sheetsee-maps | ||
|
|
||
|  | ||
|
|
||
| Module for creating maps with [sheetsee.js](http://jlord.github.io/sheetsee.js). It turns your spreadsheet data into geoJSON to use with mapbox.js. Below is the portion of the sheetsee.js documentation relevant to mapping. For all the documentation, go [here](http://jlord.github.io/sheetsee.js)! | ||
|
|
||
| --- | ||
|
|
||
| ## Make a Map | ||
|
|
||
| Sheetsee.js uses [Mapbox.js](http://mapbox.com/mapbox.js), a [Leaflet.js](http://leafletjs.com/) 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. | ||
|
|
||
| ### Sheetsee.createGeoJSON(data, optionsJSON) | ||
|
|
||
| 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}, | ||
| }} | ||
|
|
||
|
|
||
| ### Sheetsee.loadMap(mapDiv) | ||
|
|
||
| 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") | ||
|
|
||
| ### Sheetsee.addTileLayer(map, tileLayer) | ||
|
|
||
| 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](http://mapbox.com/mapbox.js/api/v1.0.2/#L.mapbox.tileLayer) for more information. | ||
|
|
||
| Sheetsee.addTileLayer(map, 'examples.map-20v6611k') | ||
|
|
||
| You can add tiles from awesome mapmakers like [Stamen](examples.map-20v6611k) or create your own in Mapbox's [Tilemill](http://www.mapbox.com/tilemill) or [online](https://tiles.mapbox.com/newmap#3.00/0.00/0.00). | ||
|
|
||
| ### Sheetsee.addMarkerLayer(geoJSON, map) | ||
|
|
||
| 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) | ||
|
|
||
| ### Sheetsee.addPopups(map, markerLayer) | ||
|
|
||
| To customize the marker popup content in your map use this function and pass in your **map** and **markerLayer**. | ||
|
|
||
| Sheetsee.addPopups(map, markerLayer) |
Oops, something went wrong.