moar chart

jlord · Feb 9, 2014 · 7acf10c · 7acf10c
1 parent 85ec5a1
commit 7acf10c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/docs/custom-charts.md b/docs/custom-charts.md
@@ -1,16 +1,16 @@
 # Custom Charts
 
-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!
+It's easy to take a [D3.js](http://d3js.org/) 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:
 
 ```javascript
 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.
+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](https://github.com/maxogden/sheetsee-d3bubble):
+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](https://github.com/maxogden/sheetsee-d3bubble):
 
 
 _Append the d3.js code with a map of your sheetsee options_
@@ -55,7 +55,7 @@ _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 } ) 
+    Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
   })
 
   function showInfo(data) {
@@ -64,5 +64,6 @@ _In your HTML call it like so_
 </script>
 ```
 
-_View the [entire source](https://github.com/maxogden/sheetsee-d3bubble)_
+There are lots of charts to get excited about in the [D3 gallery](https://github.com/mbostock/d3/wiki/Gallery).
 
+_View the [entire source](https://github.com/maxogden/sheetsee-d3bubble)_
diff --git a/docs/sheetsee-charts.md b/docs/sheetsee-charts.md
@@ -2,15 +2,15 @@
 
 _[View Demo](/demos/demo-chart.html)_
 
-Sheetsee.js provides three [d3.js](http://d3js.org/) 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 [here](custom-charts.md).
+Sheetsee.js provides three [D3.js](http://d3js.org/) 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](custom-charts.md).
 
 ## Make a Chart
 
 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](docs/custom-charts.md) on using your own chart.
+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](custom-charts.md) on using your own chart.
 
 ### Bar Chart
 

diff --git a/site/docs/custom-charts.html b/site/docs/custom-charts.html
@@ -18,7 +18,7 @@
   <body>
     <div class="container">
       <h1 id="custom-charts">Custom Charts</h1>
-<p>It&#39;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!</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>
@@ -61,7 +61,7 @@ <h1 id="custom-charts">Custom Charts</h1>
 <pre><code class="lang-JavaScript">&lt;script type=&quot;text/javascript&quot;&gt;
   document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
     var URL = &quot;0AvFUWxii39gXdFhqZzdTeU5DTWtOdENkQ1Y5bHdqT0E&quot;
-    Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } ) 
+    Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
   })
 
   function showInfo(data) {

diff --git a/site/docs/sheetsee-charts.html b/site/docs/sheetsee-charts.html
@@ -23,7 +23,7 @@ <h1 id="sheetsee-charts">Sheetsee-charts</h1>
 <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="docs/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;