mappy

jlord · Feb 9, 2014 · 3e8fa55 · 3e8fa55
1 parent 7acf10c
commit 3e8fa55
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 43 deletions.
diff --git a/demos/demo-chart.html b/demos/demo-chart.html
@@ -6,7 +6,6 @@
     <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
     <script type='text/javascript' src='https://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' href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'/>
     <link rel='stylesheet' type='text/css' href='../assets/style.css'>
   </head>
 
@@ -30,7 +29,7 @@
     <h1>Pennies by State</h1>
     <p><em><a href="https://docs.google.com/a/github.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc&usp=drive_web#gid=0" target="_blank">spreadsheet</a></em></p>
     <div id="pennies"></div>
-    <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a></em></p>
+    <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-charts.html">View Documentation</a></</em></p>
 
     <footer>
       <h4 id="getting-started">Getting Started</h4>

diff --git a/demos/demo-map.html b/demos/demo-map.html
@@ -1,14 +1,13 @@
 <html>
   <head>
-    <title>Sheetsee Maps Demo</title>
-    <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>
-    <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' />
     <meta charset='utf-8'>
+    <title>Sheetsee Maps Demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <link rel="stylesheet" type="text/css" href="../assets/sss.css">
-    <link rel="stylesheet" type="text/css" href="../assets/style.css">
+    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
+    <script type='text/javascript' src='https://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='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'  />
+    <link rel='stylesheet' type='text/css' href='../assets/style.css'>
   </head>
   <style>
     #map {max-width: 800px; height: 500px;}
@@ -22,7 +21,7 @@
       <h1>All Pennies  Map</h1>
       <p><em><a href="https://docs.google.com/a/github.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc&usp=drive_web#gid=0" target="_blank">spreadsheet</a></em><p>
       <div id="map"></div>
-      <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a></em></p>
+      <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-maps.html">View Documentation</a></em></p>
 
       <footer>
         <h4 id="getting-started">Getting Started</h4>
@@ -60,18 +59,16 @@ <h4 id="home"><a href="/">Home</a></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 geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
         var map = Sheetsee.loadMap("map")
         Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
         var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, template)

diff --git a/demos/demo-table.html b/demos/demo-table.html
@@ -31,12 +31,12 @@ <h1>California Pennies</h1>
     <h1>Pretty Pennies</h1>
     <div id="photogrid"></div>
     <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a></em></p>
-  
+
     <footer>
       <h4 id="getting-started">Getting Started</h4>
       <ul>
         <li><a href="../docs/about.html">About Sheetsee.js</a></li>
-        <li><a href="../docs/building.html">Building Sheetsee</a></li>        
+        <li><a href="../docs/building.html">Building Sheetsee</a></li>
         <li><a href="../docs/basics.html">Basics</a></li>
       </ul>
       <h4 id="ideas">Ideas</h4>
@@ -63,6 +63,7 @@ <h4 id="use">Contact</h4>
         <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
         <li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
       </ul>
+      <h4 id="home"><a href="/">Home</a></h4>
     </footer>
 </div>
 
@@ -107,7 +108,7 @@ <h4 id="use">Contact</h4>
     var calOptions = {"data": california, "pagination": 5, "tableDiv": "#calTable", "filterDiv": "#calFilter"}
     Sheetsee.makeTable(calOptions)
     Sheetsee.initiateTableFilter(calOptions)
-    
+
     var html = Sheetsee.ich.photogrid({'rows': data})
     $('#photogrid').html(html)
 

diff --git a/docs/sheetsee-maps.md b/docs/sheetsee-maps.md
@@ -25,23 +25,23 @@ 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 on including 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 (by default it will use all the row's information). 
+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).
 
 ```javascript
 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. 
+It will return an _array_ in the special geoJSON format that map making things love.
 
-```javascript
+```JAVASCRIPT
 [{
   "geometry": {"type": "Point", "coordinates": [long, lat]},
   "properties": {
     "marker-size": "small",
     "marker-color": lineItem.hexcolor
   },
-  "opts": {the options you pass in},
+  "opts": {},
 }}
 ```
 
@@ -65,7 +65,7 @@ You can add tiles from awesome mapmakers like [Stamen](examples.map-20v6611k) or
 
 ### Sheetsee.addMarkerLayer(geoJSON, map)
 
-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. 
+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.
 
 ```javascript
 var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, popupTemplate)
@@ -99,4 +99,4 @@ var popupTemplate = "<h4>Hello {{name}}</h4>"
     var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, template)
   }
 </script>
-```
+```
diff --git a/site/demos/demo-chart.html b/site/demos/demo-chart.html
@@ -6,7 +6,6 @@
     <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
     <script type='text/javascript' src='https://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' href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'/>
     <link rel='stylesheet' type='text/css' href='../assets/style.css'>
   </head>
 
@@ -30,7 +29,7 @@
     <h1>Pennies by State</h1>
     <p><em><a href="https://docs.google.com/a/github.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc&usp=drive_web#gid=0" target="_blank">spreadsheet</a></em></p>
     <div id="pennies"></div>
-    <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a></em></p>
+    <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-charts.html">View Documentation</a></</em></p>
 
     <footer>
       <h4 id="getting-started">Getting Started</h4>

diff --git a/site/demos/demo-map.html b/site/demos/demo-map.html
@@ -1,14 +1,13 @@
 <html>
   <head>
-    <title>Sheetsee Maps Demo</title>
-    <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>
-    <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' />
     <meta charset='utf-8'>
+    <title>Sheetsee Maps Demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <link rel="stylesheet" type="text/css" href="../assets/sss.css">
-    <link rel="stylesheet" type="text/css" href="../assets/style.css">
+    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
+    <script type='text/javascript' src='https://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='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'  />
+    <link rel='stylesheet' type='text/css' href='../assets/style.css'>
   </head>
   <style>
     #map {max-width: 800px; height: 500px;}
@@ -22,7 +21,7 @@
       <h1>All Pennies  Map</h1>
       <p><em><a href="https://docs.google.com/a/github.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc&usp=drive_web#gid=0" target="_blank">spreadsheet</a></em><p>
       <div id="map"></div>
-      <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a></em></p>
+      <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-maps.html">View Documentation</a></em></p>
 
       <footer>
         <h4 id="getting-started">Getting Started</h4>
@@ -60,18 +59,16 @@ <h4 id="home"><a href="/">Home</a></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 geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
         var map = Sheetsee.loadMap("map")
         Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
         var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, template)

diff --git a/site/demos/demo-table.html b/site/demos/demo-table.html
@@ -31,12 +31,12 @@ <h1>California Pennies</h1>
     <h1>Pretty Pennies</h1>
     <div id="photogrid"></div>
     <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a></em></p>
-  
+
     <footer>
       <h4 id="getting-started">Getting Started</h4>
       <ul>
         <li><a href="../docs/about.html">About Sheetsee.js</a></li>
-        <li><a href="../docs/building.html">Building Sheetsee</a></li>        
+        <li><a href="../docs/building.html">Building Sheetsee</a></li>
         <li><a href="../docs/basics.html">Basics</a></li>
       </ul>
       <h4 id="ideas">Ideas</h4>
@@ -63,6 +63,7 @@ <h4 id="use">Contact</h4>
         <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
         <li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
       </ul>
+      <h4 id="home"><a href="/">Home</a></h4>
     </footer>
 </div>
 
@@ -107,7 +108,7 @@ <h4 id="use">Contact</h4>
     var calOptions = {"data": california, "pagination": 5, "tableDiv": "#calTable", "filterDiv": "#calFilter"}
     Sheetsee.makeTable(calOptions)
     Sheetsee.initiateTableFilter(calOptions)
-    
+
     var html = Sheetsee.ich.photogrid({'rows': data})
     $('#photogrid').html(html)
 

diff --git a/site/docs/custom-charts.html b/site/docs/custom-charts.html
@@ -18,12 +18,12 @@
   <body>
     <div class="container">
       <h1 id="custom-charts">Custom Charts</h1>
-<p>It&#39;s easy to take a <a href="http://d3js.org/">d3.js</a> chart of your own and use it with Sheetsee.js. If you make it into a module, anyone can use your chart, too!</p>
+<p>It&#39;s easy to take a <a href="http://d3js.org/">D3.js</a> chart of your own and use it with Sheetsee.js. If you make it into a module, anyone can use your chart, too!</p>
 <p>Sheetsee charts currently work by taking in some options, like so:</p>
 <pre><code class="lang-javascript">var pieOptions = {labels: &quot;name&quot;, units: &quot;units&quot;, m: [80, 80, 80, 80], w: 600, h: 400, div: &quot;#pieChart&quot;, hiColor: &quot;#14ECC8&quot;}
 </code></pre>
-<p>The <em>labels</em> represent the actual thing you&#39;re charting and <em>units</em> are how many of those things. Margin, width and height are <em>m, w, h</em> and the div to build your chart in is <em>div</em>. Finally, you can supply a highlight color if you want.</p>
-<p>So, your chart could take the same options, but map them into your d3 code with the correct variables. An example from <a href="https://github.com/maxogden/sheetsee-d3bubble">maxogden/sheetsee-d3bubble</a>:</p>
+<p>The <em>labels</em> represent the actual thing you&#39;re charting and <em>units</em> are how many of those things. Margin, width and height are <em>m, w, h</em> and the <code>&lt;div&gt;</code> to build your chart in is <em>div</em>. Finally, you can supply a highlight color if you want.</p>
+<p>So, your chart could take the same options, but map them into your D3 code with the correct variables. An example from <a href="https://github.com/maxogden/sheetsee-d3bubble">maxogden/sheetsee-d3bubble</a>:</p>
 <p><em>Append the d3.js code with a map of your sheetsee options</em></p>
 <pre><code class="lang-JavaScript">Sheetsee.d3BubbleChart = function(data, options) {
     var tree = {name: &quot;data&quot;, children: []}
@@ -69,6 +69,7 @@ <h1 id="custom-charts">Custom Charts</h1>
   }
 &lt;/script&gt;
 </code></pre>
+<p>There are lots of charts to get excited about in the <a href="https://github.com/mbostock/d3/wiki/Gallery">D3 gallery</a>.</p>
 <p><em>View the <a href="https://github.com/maxogden/sheetsee-d3bubble">entire source</a></em></p>
 
 

diff --git a/site/docs/sheetsee-charts.html b/site/docs/sheetsee-charts.html
@@ -19,11 +19,11 @@
     <div class="container">
       <h1 id="sheetsee-charts">Sheetsee-charts</h1>
 <p><em><a href="/demos/demo-chart.html">View Demo</a></em></p>
-<p>Sheetsee.js provides three <a href="http://d3js.org/">d3.js</a> chart options to use with your spreadsheet data: a bar chart, line graph and pie chart. You can also use a custom d3.js chart with Sheetsee, read about that <a href="custom-charts.html">here</a>.</p>
+<p>Sheetsee.js provides three <a href="http://d3js.org/">D3.js</a> 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 <a href="custom-charts.html">here</a>.</p>
 <h2 id="make-a-chart">Make a Chart</h2>
 <p>Each chart requires your data be an <em>array of objects</em>, with objects containing <code>label</code> and <code>units</code> key/value pairs.</p>
 <p>Experiment with the charts to find the correct size your <code>&lt;div&gt;</code> will need to be to hold the chart with your data in it nicely.</p>
-<p>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 <a href="custom-charts.html">here</a> on using your own chart.</p>
+<p>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 <a href="custom-charts.html">here</a> on using your own chart.</p>
 <h3 id="bar-chart">Bar Chart</h3>
 <p>To create a bar chart you&#39;ll need to add a placeholder <code>&lt;div&gt;</code> in your HTML with an id.</p>
 <pre><code class="lang-HTML">&lt;div id=&quot;barChart&quot;&gt;&lt;/div&gt;