Copy gh-pages from d3Simple

2013-05-21 13:49:16 +01:00 · 2013-05-21 13:49:16 +01:00 · 69b97b7a93
parent 3c64bf0418
commit 69b97b7a93
64 changed files with 9506 additions and 69 deletions
--- a/1
+++ b/1
@ -0,0 +1 @@
+dimplejs.org
--- a/app.js
+++ b/app.js
@ -0,0 +1,6 @@
+var express = require('express');
+var app = express();
+
+app.use('/', express.static(__dirname));
+
+app.listen(process.env.PORT || 3000);
--- a/data/eurovision_gdp.tsv
+++ b/data/eurovision_gdp.tsv
--- a/data/example_data.tsv
+++ b/data/example_data.tsv
--- a/examples_index.html
+++ b/examples_index.html
@ -0,0 +1,82 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <title>dimple by PMSI-AlignAlytics</title>
+
+    <link rel="stylesheet" href="/stylesheets/styles.css">
+    <link rel="stylesheet" href="/stylesheets/pygment_trac.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <script type="application/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+  </head>
+  <body>
+    <div class="wrapper">
+      <header>
+        <h2>Examples</h2>
+        <p>
+          Examples of dimple in action.
+        </p>
+        <table style="width:100%">
+          <tr>
+            <td style="width:50%" align="left"><a style="text-align:left" id="prev" href="/index.html">&lt; Home</a></td>
+            <td style="width:50%" align="right"><a style="text-align:right" id="next"></a></td>
+          </tr>
+        </table>
+        <h3>Libraries</h3>
+        <p>
+        <a href="/dist/dimple.v1.js">Full Javascript Library With Comments</a><br/>
+        <a href="/dist/dimple.v1.min.js">Minified Javascript Library</a><br/>
+        <a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">Zip File</a><br/>
+        <a href="https://github.com/PMSI-AlignAlytics/dimple/tarball/master">Tar Ball</a><br/>
+        </p>
+        <h3>Resources</h3>
+        <p>
+          <a href="/examples_index.html">Examples</a><br/>
+          <a href="https://github.com/PMSI-AlignAlytics/dimple">View On GitHub</a><br/>
+          <a href="https://github.com/PMSI-AlignAlytics/dimple/wiki">Full API Documentation</a><br/>
+        </p>
+      </header>
+      <section>
+        <div id="examples">
+            
+        </div>
+      </section>
+      <footer>
+        <p>
+          This is an open-source project by <br/>
+          <a href="http://www.pmsi-consulting.com">PMSI-AlignAlytics</a>
+        </p>
+      </footer>
+    <script type="text/javascript">
+      // Show all the examples
+      $.getJSON("/examples_meta.json", function(data) {
+        // Set the next links
+        if (data.length > 0) {
+          $("#next").attr("href","/examples_viewer.html?id=" + data[0].id);
+          $("#next").text(data[0].shortTitle + " >");
+        }
+        data.forEach(function (spec, i) {
+          if (i == 0 || spec.group != data[i-1].group) {
+            $("#examples").append("<h3><br/>" + spec.group + "</h3>");
+          }
+          $("#examples").append("<a class=\"example\" href=\"/examples_viewer.html?id=" + spec.id + "\"><img src=\"/images/" + spec.id + ".png\"></a>");
+        });
+      });
+    </script>
+    <script src="javascripts/scale.fix.js"></script>
+    <script type="text/javascript">
+      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+    </script>
+    <script type="text/javascript">
+      try {
+        var pageTracker = _gat._getTracker("UA-40370019-1");
+        pageTracker._trackPageview();
+      } catch(err) {}
+    </script>
+  </body>
+</html>
--- a/examples_meta.json
+++ b/examples_meta.json
@ -0,0 +1,333 @@
+[
+    {
+        "id":"bars_vertical",
+        "title":"Vertical Bar",
+        "shortTitle":"Vt Bar",
+        "group":"Bar Charts",
+        "desc":"A simple unstacked vertical bar chart"
+    },
+    {
+        "id":"bars_vertical_stacked",
+        "title":"Vertical Stacked Bar",
+        "shortTitle":"Vt Stacked Bar",
+        "group":"Bar Charts",
+        "desc":"A simple stacked vertical bar chart"   
+    },
+    {
+        "id":"bars_vertical_stacked_100pct",
+        "title":"Vertical 100% Bar",
+        "shortTitle":"Vt 100% Bar",
+        "group":"Bar Charts",
+        "desc":"A proportional vertical bar chart"      
+    },
+    {
+        "id":"bars_vertical_grouped",
+        "title":"Vertical Grouped Bar",
+        "shortTitle":"Vt Grouped Bar",
+        "group":"Bar Charts",
+        "image":"bars_vertical_grouped.png",
+        "desc":"An unstacked grouped vertical bar chart",
+        "url":"examples/bars_vertical_grouped.html"
+    },
+    {
+        "id":"bars_vertical_grouped_stacked",
+        "title":"Vert Stacked Grouped Bar",
+        "shortTitle":"Vt Group Stack Bar",
+        "group":"Bar Charts",
+        "desc":"A stacked grouped vertical bar chart"
+    },
+    {
+        "id":"bars_vertical_grouped_stacked_100pct",
+        "title":"Vert 100% Grouped Bar",
+        "shortTitle":"Vt 100% Stack Bar",
+        "group":"Bar Charts",
+        "desc":"A proportional grouped vertical bar chart"
+    },
+    {
+        "id":"bars_horizontal",
+        "title":"Horizontal Bar",
+        "shortTitle":"Hz Bar",
+        "group":"Bar Charts",
+        "desc":"A simple unstacked horizontal bar chart"
+    },
+    {
+        "id":"bars_horizontal_stacked",
+        "title":"Horizontal Stacked Bar",
+        "shortTitle":"Hz Stacked Bar",
+        "group":"Bar Charts",
+        "desc":"A simple stacked horizontal bar chart"       
+    },
+    {
+        "id":"bars_horizontal_stacked_100pct",
+        "title":"Horizontal 100% Bar",
+        "shortTitle":"Hz 100% Bar",
+        "group":"Bar Charts",
+        "desc":"A proportional horizontal bar chart"    
+    },
+    {
+        "id":"bars_horizontal_grouped",
+        "title":"Hz Grouped Bar",
+        "shortTitle":"Hz Grouped Bar",
+        "group":"Bar Charts",
+        "desc":"An unstacked grouped horizontal bar chart"
+    },
+    {
+        "id":"bars_horizontal_grouped_stacked",
+        "title":"Horiz Stacked Grouped Bar",
+        "shortTitle":"Hz Group Stack Bar",
+        "group":"Bar Charts",
+        "desc":"A stacked grouped horizontal bar chart"
+    },
+    {
+        "id":"bars_horizontal_grouped_stacked_100pct",
+        "title":"Horiz 100% Grouped Bar",
+        "shortTitle":"Hz 100% Stack Bar",
+        "group":"Bar Charts",
+        "desc":"A proportional grouped horizontal bar chart"
+    },
+    {
+        "id":"bars_vertical_mekko",
+        "title":"Marimekko",
+        "shortTitle":"Vertical Mekko",
+        "group":"Bar Charts",
+        "desc":"A standard vertical marimekko"
+    },
+    {
+        "id":"bars_horizontal_mekko",
+        "title":"Horizontal Mekko",
+        "shortTitle":"Horizontal Mekko",
+        "group":"Bar Charts",
+        "desc":"A horizontally oriented marimekko"
+    },
+    {
+        "id":"bars_matrix",
+        "title":"Block Matrix",
+        "shortTitle":"Block Matrix",
+        "group":"Bar Charts",
+        "desc":"A non-metric display of category presence"
+    },
+    {
+        "id":"scatter_standard",
+        "title":"Scatter",
+        "shortTitle":"Scatter",
+        "group":"Scatter Charts",
+        "desc":"A simple two measure scatter chart"     
+    },
+    {
+        "id":"scatter_vertical_lollipop",
+        "title":"Vertical Lollipop",
+        "shortTitle":"Vt Lollipop",
+        "group":"Scatter Charts",
+        "desc":"A vertically positioned lollipop chart"     
+    },
+    {
+        "id":"scatter_vertical_grouped",
+        "title":"Vertical Grouped Lollipop",
+        "shortTitle":"Vt Group Lollipop",
+        "group":"Scatter Charts",
+        "desc":"A vertically grouped lollipop chart"     
+    },
+    {
+        "id":"scatter_horizontal_lollipop",
+        "title":"Horizontal Lollipop",
+        "shortTitle":"Hz Lollipop",
+        "group":"Scatter Charts",
+        "desc":"A horizontally positioned lollipop chart"     
+    },
+    {
+        "id":"scatter_horizontal_grouped",
+        "title":"Horizontal Grouped Lollipop",
+        "shortTitle":"Hz Group Lollipop",
+        "group":"Scatter Charts",
+        "desc":"A horizontally grouped lollipop chart"     
+    },
+    {
+        "id":"scatter_matrix",
+        "title":"Dot Matrix",
+        "shortTitle":"Dot Matrix",
+        "group":"Scatter Charts",
+        "desc":"A non-metric display of category presence"
+    },
+    {
+        "id":"bubbles_standard",
+        "title":"Bubble",
+        "shortTitle":"Bubble",
+        "group":"Bubble Charts",
+        "desc":"A simple three measure bubble chart"   
+    },
+    {
+        "id":"bubbles_vertical_lollipop",
+        "title":"Vertical Bubble Lollipop",
+        "shortTitle":"Vt Bubblepop",
+        "group":"Bubble Charts",
+        "desc":"A vertically positioned bubble lollipop"     
+    },
+    {
+        "id":"bubbles_vertical_grouped",
+        "title":"Vertical Grouped Bubblepop",
+        "shortTitle":"Vt Group Bubble",
+        "group":"Bubble Charts",
+        "desc":"A vertically grouped bubble lollipop"     
+    },
+    {
+        "id":"bubbles_horizontal_lollipop",
+        "title":"Horizontal Bubble Lollipop",
+        "shortTitle":"Hz Bubblepop",
+        "group":"Bubble Charts",
+        "desc":"A horizontally positioned bubble lollipop"     
+    },
+    {
+        "id":"bubbles_horizontal_grouped",
+        "title":"Horiz Grouped Bubblepop",
+        "shortTitle":"Hz Group Bubble",
+        "group":"Bubble Charts",
+        "desc":"A horizontally grouped bubble lollipop"     
+    },
+    {
+        "id":"bubbles_matrix",
+        "title":"Bubble Matrix",
+        "shortTitle":"Bubble Matrix",
+        "group":"Bubble Charts",
+        "desc":"A metric display of category presence"
+    },
+    {
+        "id":"areas_horizontal",
+        "title":"Area",
+        "shortTitle":"Area",
+        "group":"Area Charts",
+        "desc":"A standard area chart"  
+    },
+    {
+        "id":"areas_horizontal_stacked",
+        "title":"Stacked Area",
+        "shortTitle":"Stacked Area",
+        "group":"Area Charts",
+        "desc":"A standard stacked area chart"  
+    },
+    {
+        "id":"areas_horizontal_stacked_100pct",
+        "title":"100% Stacked Area",
+        "shortTitle":"100% Stacked Area",
+        "group":"Area Charts",
+        "desc":"A 100% stacked area chart"  
+    },
+    {
+        "id":"areas_horizontal_grouped",
+        "title":"Grouped Area",
+        "shortTitle":"Grouped Area",
+        "group":"Area Charts",
+        "desc":"A grouped area chart"  
+    },
+    {
+        "id":"areas_horizontal_grouped_stacked",
+        "title":"Grouped Stacked Area",
+        "shortTitle":"Group Stack Area",
+        "group":"Area Charts",
+        "desc":"A grouped stacked area chart"  
+    },
+    {
+        "id":"areas_horizontal_grouped_100pct",
+        "title":"Grouped 100% Area",
+        "shortTitle":"Group 100% Area",
+        "group":"Area Charts",
+        "desc":"A grouped 100% stacked area chart"  
+    },
+    {
+        "id":"areas_vertical",
+        "title":"Vertical Area",
+        "shortTitle":"Vt Area",
+        "group":"Area Charts",
+        "desc":"A vertical area chart"  
+    },
+    {
+        "id":"areas_vertical_stacked",
+        "title":"Vertical Stacked Area",
+        "shortTitle":"Vt Stacked Area",
+        "group":"Area Charts",
+        "desc":"A vertical stacked area chart"  
+    },
+    {
+        "id":"areas_vertical_stacked_100pct",
+        "title":"100% Vertical Stacked Area",
+        "shortTitle":"Vt 100% Area",
+        "group":"Area Charts",
+        "desc":"A vertical 100% stacked area chart"  
+    },
+    {
+        "id":"areas_vertical_grouped",
+        "title":"Vt Grouped Area",
+        "shortTitle":"Vt Grouped Area",
+        "group":"Area Charts",
+        "desc":"A vertical grouped area chart"  
+    },
+    {
+        "id":"areas_vertical_grouped_stacked",
+        "title":"Vt Grouped Stack Area",
+        "shortTitle":"Vt Grp Stack Area",
+        "group":"Area Charts",
+        "desc":"A vertical grouped stacked area chart"  
+    },
+    {
+        "id":"areas_vertical_grouped_100pct",
+        "title":"Vt Group 100% Area",
+        "shortTitle":"Vt Grp 100% Area",
+        "group":"Area Charts",
+        "desc":"A vertical grouped 100% area chart"  
+    },
+    {
+        "id":"lines_horizontal",
+        "title":"Single Line",
+        "shortTitle":"Single Line",
+        "group":"Line Charts",
+        "desc":"An aggregate line chart"  
+    },
+    {
+        "id":"lines_horizontal_stacked",
+        "title":"Multiple Line",
+        "shortTitle":"Multiple Line",
+        "group":"Line Charts",
+        "desc":"A standard split line chart"  
+    },
+    {
+        "id":"lines_horizontal_grouped",
+        "title":"Grouped Single Line",
+        "shortTitle":"Group Single Line",
+        "group":"Line Charts",
+        "desc":"A grouped single line chart"  
+    },
+    {
+        "id":"lines_horizontal_grouped_stacked",
+        "title":"Grouped Multiple Line",
+        "shortTitle":"Group Multi Line",
+        "group":"Line Charts",
+        "desc":"A grouped multiple line chart"  
+    },
+    {
+        "id":"lines_vertical",
+        "title":"Single Vertical Line",
+        "shortTitle":"Vertical Line",
+        "group":"Line Charts",
+        "desc":"An aggregate vertical line chart"  
+    },
+    {
+        "id":"lines_vertical_stacked",
+        "title":"Multiple Vertical Line",
+        "shortTitle":"Vert Multi Line",
+        "group":"Line Charts",
+        "desc":"A vertical split line chart"  
+    },
+    {
+        "id":"lines_vertical_grouped",
+        "title":"Grouped Vertical Line",
+        "shortTitle":"Group Vert Line",
+        "group":"Line Charts",
+        "desc":"A grouped vertical single line chart"  
+    },
+    {
+        "id":"lines_vertical_grouped_stacked",
+        "title":"Vert Grouped Multi Line",
+        "shortTitle":"Vt Grp Multi Line",
+        "group":"Line Charts",
+        "desc":"A vertical grouped multiple line chart"  
+    }
+]
--- a/examples_viewer.html
+++ b/examples_viewer.html
@ -0,0 +1,129 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <title id="title"></title>
+    <script type="application/javascript" src="//d3js.org/d3.v3.min.js"></script>
+    <script type="application/javascript" src="/dist/dimple.v1.min.js"></script>
+    <link rel="stylesheet" href="/stylesheets/styles.css">
+    <link rel="stylesheet" href="/stylesheets/pygment_trac.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <script type="application/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+  </head>
+  <body>
+    <div class="wrapper">
+      <header>
+        <h2 id="heading"></h2>
+        <p>
+          <span id="desc"></span><br/>
+          <table style="width:100%">
+            <tr>
+              <td style="width:50%" align="left"><a style="text-align:left" id="prev"></a></td>
+              <td style="width:50%" align="right"><a style="text-align:right" id="next"></a></td>
+            </tr>
+          </table>
+        </p>
+        <h3>Libraries</h3>
+        <p>
+        <a href="/dist/dimple.v1.js">Full Javascript Library With Comments</a><br/>
+        <a href="/dist/dimple.v1.min.js">Minified Javascript Library</a><br/>
+        <a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">Zip File</a><br/>
+        <a href="https://github.com/PMSI-AlignAlytics/dimple/tarball/master">Tar Ball</a><br/>
+        </p>
+        <h3>Resources</h3>
+        <p>
+          <a href="/examples_index.html">Examples</a><br/>
+          <a href="https://github.com/PMSI-AlignAlytics/dimple">View On GitHub</a><br/>
+          <a href="https://github.com/PMSI-AlignAlytics/dimple/wiki">Full API Documentation</a><br/>
+        </p>
+      </header>
+      <section>
+        <div id="chartBox" style="height:410px" class="chartWindow">
+          <img src="/images/wait.gif" style="display: table; margin: 0 auto; margin-top: 75px;"></img>
+        </div>
+        <pre><code id="codeContainer">
+          <img src="/images/wait.gif" style="display: table; margin: 0 auto;"></img>
+        </code></pre>
+        <div id="disqus_thread"></div>
+      </section>
+      <footer>
+        <p>
+          This is an open-source project by <br/>
+          <a href="http://www.pmsi-consulting.com">PMSI-AlignAlytics</a>
+        </p>
+      </footer>
+    </div>
+    <script src="/javascripts/scale.fix.js"></script>
+    <script type="text/javascript">
+      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+    </script>
+    <script type="text/javascript">
+      // Get the query string as an object
+      function queryStringObj() {
+        var result = {}, keyValuePairs = location.search.slice(1).split('&');
+        keyValuePairs.forEach(function(keyValuePair) {
+            keyValuePair = keyValuePair.split('=');
+            result[keyValuePair[0]] = keyValuePair[1] || '';
+        });
+        return result;
+      }   
+      // Load the page from the examples.json based on the query string
+      var id = queryStringObj().id;
+      // Prompt if no query string is passed.  Mainly useful for debugging.
+      if (id == undefined) { id = window.prompt("Please enter an example id","bars_vertical"); }
+      $.getJSON("/examples_meta.json", function(data) {
+        data.forEach(function (spec, i) {
+          if (spec.id == id) {
+            // Set the text elements
+            $("#title").text(spec.title);
+            $("#heading").text(spec.title);
+            $("#desc").text(spec.desc);
+            // Set the code display
+            $.get("examples/" + spec.id + ".html", function (page) {
+              $("#codeContainer").text(page.replace("src=\"/dist/dimple.v1.min.js\"", "src=\"http://dimplejs.org/dist/dimple.v1.min.js\""));
+              $("#chartBox").html(page.replace("src=\"http://d3js.org/d3.v3.min.js\"", "").replace("src=\"/dist/dimple.v1.min.js\"", ""));
+            });
+            // Set the previous links
+            if (i == 0) {
+              $("#prev").attr("href","/examples_index.html");
+              $("#prev").text("< Examples Index");
+            }
+            else {
+              $("#prev").attr("href","/examples_viewer.html?id=" + data[i-1].id);
+              $("#prev").text("< " + data[i-1].shortTitle);
+            }
+            // Set the next links
+            if (i == data.length - 1) {
+              $("#next").remove();
+            }
+            else {
+              $("#next").attr("href","/examples_viewer.html?id=" + data[i+1].id);
+              $("#next").text(data[i+1].shortTitle + " >");
+            }
+           }
+        });
+      });
+    </script>
+    <script type="text/javascript">
+      try {
+        var pageTracker = _gat._getTracker("UA-40370019-1");
+        pageTracker._trackPageview();
+      } catch(err) {}
+    </script>
+    <script type="text/javascript">
+    var disqus_shortname = 'dimple';
+    var disqus_identifier = id;
+        /* * * DON'T EDIT BELOW THIS LINE * * */
+        (function() {
+            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+        })();
+    </script>
+  </body>
+</html>
--- a/favicon.ico
+++ b/favicon.ico
--- a/images/advanced_lollipop_with_hover.png
+++ b/images/advanced_lollipop_with_hover.png
--- a/images/advanced_price_range_lollipop.png
+++ b/images/advanced_price_range_lollipop.png
--- a/images/advanced_random_bubble_animation.png
+++ b/images/advanced_random_bubble_animation.png
--- a/images/advanced_random_mekko_animation.png
+++ b/images/advanced_random_mekko_animation.png
--- a/images/areas_horizontal.png
+++ b/images/areas_horizontal.png
--- a/images/areas_horizontal_grouped.png
+++ b/images/areas_horizontal_grouped.png
--- a/images/areas_horizontal_grouped_100pct.png
+++ b/images/areas_horizontal_grouped_100pct.png
--- a/images/areas_horizontal_grouped_stacked.png
+++ b/images/areas_horizontal_grouped_stacked.png
--- a/images/areas_horizontal_stacked.png
+++ b/images/areas_horizontal_stacked.png
--- a/images/areas_horizontal_stacked_100pct.png
+++ b/images/areas_horizontal_stacked_100pct.png
--- a/images/areas_vertical.png
+++ b/images/areas_vertical.png
--- a/images/areas_vertical_grouped.png
+++ b/images/areas_vertical_grouped.png
--- a/images/areas_vertical_grouped_100pct.png
+++ b/images/areas_vertical_grouped_100pct.png
--- a/images/areas_vertical_grouped_stacked.png
+++ b/images/areas_vertical_grouped_stacked.png
--- a/images/areas_vertical_stacked.png
+++ b/images/areas_vertical_stacked.png
--- a/images/areas_vertical_stacked_100pct.png
+++ b/images/areas_vertical_stacked_100pct.png
--- a/images/bars_horizontal.png
+++ b/images/bars_horizontal.png
--- a/images/bars_horizontal_grouped.png
+++ b/images/bars_horizontal_grouped.png
--- a/images/bars_horizontal_grouped_stacked.png
+++ b/images/bars_horizontal_grouped_stacked.png
--- a/images/bars_horizontal_grouped_stacked_100pct.png
+++ b/images/bars_horizontal_grouped_stacked_100pct.png
--- a/images/bars_horizontal_mekko.png
+++ b/images/bars_horizontal_mekko.png
--- a/images/bars_horizontal_stacked.png
+++ b/images/bars_horizontal_stacked.png
--- a/images/bars_horizontal_stacked_100pct.png
+++ b/images/bars_horizontal_stacked_100pct.png
--- a/images/bars_matrix.png
+++ b/images/bars_matrix.png
--- a/images/bars_vertical.png
+++ b/images/bars_vertical.png
--- a/images/bars_vertical_grouped.png
+++ b/images/bars_vertical_grouped.png
--- a/images/bars_vertical_grouped_stacked.png
+++ b/images/bars_vertical_grouped_stacked.png
--- a/images/bars_vertical_grouped_stacked_100pct.png
+++ b/images/bars_vertical_grouped_stacked_100pct.png
--- a/images/bars_vertical_mekko.png
+++ b/images/bars_vertical_mekko.png
--- a/images/bars_vertical_stacked.png
+++ b/images/bars_vertical_stacked.png
--- a/images/bars_vertical_stacked_100pct.png
+++ b/images/bars_vertical_stacked_100pct.png
--- a/images/bubbles_horizontal_grouped.png
+++ b/images/bubbles_horizontal_grouped.png
--- a/images/bubbles_horizontal_lollipop.png
+++ b/images/bubbles_horizontal_lollipop.png
--- a/images/bubbles_matrix.png
+++ b/images/bubbles_matrix.png
--- a/images/bubbles_scatter.png
+++ b/images/bubbles_scatter.png
--- a/images/bubbles_standard.png
+++ b/images/bubbles_standard.png
--- a/images/bubbles_vertical_grouped.png
+++ b/images/bubbles_vertical_grouped.png
--- a/images/bubbles_vertical_lollipop.png
+++ b/images/bubbles_vertical_lollipop.png
--- a/images/lines_horizontal.png
+++ b/images/lines_horizontal.png
--- a/images/lines_horizontal_grouped.png
+++ b/images/lines_horizontal_grouped.png
--- a/images/lines_horizontal_grouped_stacked.png
+++ b/images/lines_horizontal_grouped_stacked.png
--- a/images/lines_horizontal_stacked.png
+++ b/images/lines_horizontal_stacked.png
--- a/images/lines_vertical.png
+++ b/images/lines_vertical.png
--- a/images/lines_vertical_grouped.png
+++ b/images/lines_vertical_grouped.png
--- a/images/lines_vertical_grouped_stacked.png
+++ b/images/lines_vertical_grouped_stacked.png
--- a/images/lines_vertical_stacked.png
+++ b/images/lines_vertical_stacked.png
--- a/images/scatter_horizontal_grouped.png
+++ b/images/scatter_horizontal_grouped.png
--- a/images/scatter_horizontal_lollipop.png
+++ b/images/scatter_horizontal_lollipop.png
--- a/images/scatter_matrix.png
+++ b/images/scatter_matrix.png
--- a/images/scatter_standard.png
+++ b/images/scatter_standard.png
--- a/images/scatter_vertical_grouped.png
+++ b/images/scatter_vertical_grouped.png
--- a/images/scatter_vertical_lollipop.png
+++ b/images/scatter_vertical_lollipop.png
--- a/images/wait.gif
+++ b/images/wait.gif
--- a/index.html
+++ b/index.html
@ -5,72 +5,131 @@
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>dimple by PMSI-AlignAlytics</title>

-    <link rel="stylesheet" href="stylesheets/styles.css">
-    <link rel="stylesheet" href="stylesheets/pygment_trac.css">
+    <link rel="stylesheet" href="/stylesheets/styles.css">
+    <link rel="stylesheet" href="/stylesheets/pygment_trac.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
+    <script type="application/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>
+    <div class="banner">
+    </div>
    <div class="wrapper">
      <header>
        <h1>dimple</h1>
-        <p>An object-oriented API for business analytics</p>
-
-        <p class="view"><a href="https://github.com/PMSI-AlignAlytics/dimple">View the Project on GitHub <small>PMSI-AlignAlytics/dimple</small></a></p>
-
-
-        <ul>
-          <li><a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">Download <strong>ZIP File</strong></a></li>
-          <li><a href="https://github.com/PMSI-AlignAlytics/dimple/tarball/master">Download <strong>TAR Ball</strong></a></li>
-          <li><a href="https://github.com/PMSI-AlignAlytics/dimple">View On <strong>GitHub</strong></a></li>
-        </ul>
+        <p>An object-oriented API for business analytics powered by d3.</p>
+        <h3>Libraries</h3>
+        <p>
+        <a href="/dist/dimple.v1.js">Full Javascript Library With Comments</a><br/>
+        <a href="/dist/dimple.v1.min.js">Minified Javascript Library</a><br/>
+        <a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">Zip File</a><br/>
+        <a href="https://github.com/PMSI-AlignAlytics/dimple/tarball/master">Tar Ball</a><br/>
+        </p>
+        <h3>Resources</h3>
+        <p>
+          <a href="/examples_index.html">Examples</a><br/>
+          <a href="https://github.com/PMSI-AlignAlytics/dimple">View On GitHub</a><br/>
+          <a href="https://github.com/PMSI-AlignAlytics/dimple/wiki">Full API Documentation</a><br/>
+        </p>
      </header>
      <section>
-        <h3>Welcome to GitHub Pages.</h3>
+        <h3>Simple Is As Simple Does</h3>
+        <p>
+          The aim of dimple is to open up the power and flexibility of d3 to analysts. It aims to give a gentle learning curve and minimal code to achieve something productive. It also exposes the d3 objects so you can pick them up and run to create some really cool stuff.
+        </p>
+        <h3>Examples</h3>
+        <p>
+          <div id="examples">
+          </div>
+          <a href="examples_index.html">See More Examples</a>
+        </p> 
+        <h3>Getting Started</h3>
+        <p>
+          Before you can do anything, you must link d3.  Simply add the following to your html:
+        </p>
+        <pre><code>&lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;</code></pre>
+        <p>
+          That's the organ grinder taken care of, next you need the monkey.  Add dimple as follows:
+        </p>
+        <pre><code>&lt;script src="http://dimplejs.org/dist/dimple.v1.min.js"&gt;&lt;/script&gt;</code></pre>
+        <p>
+          That's it, you're ready to get creative!  If you don't know where to start, why not create a blank text document, drop the following in and save it as an html.
+        </p>
+        <pre><code>&lt;head&gt;
+  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
+  &lt;script src="http://dimplejs.org/dist/dimple.v1.min.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;script type="text/javascript"&gt;
+    var svg = dimple.newSvg("body", 800, 600);
+    var data = [
+      { "Word":"Hello", "Awesomeness":2000 },
+      { "Word":"World", "Awesomeness":3000 }
+    ];
+    var chart = new dimple.chart(svg, data);
+    chart.addCategoryAxis("x", "Word");
+    chart.addMeasureAxis("y", "Awesomeness");
+    chart.addSeries(null, dimple.plot.bar);
+    chart.draw();
+  &lt;/script&gt;
+&lt;/body&gt;</code></pre>
+        <p>
+          Congratulations, you are now the proud owner of a dimple bar chart! Start playing and see where you end up.  You might get some extra inspiration from the <a href="examples_index.html">examples</a> section.
+        </p>

-<p>This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:</p>
-
-<pre><code>$ cd your_repo_root/repo_name
-$ git fetch origin
-$ git checkout gh-pages
-</code></pre>
-
-<p>If you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.</p>
-
-<h3>Designer Templates</h3>
-
-<p>We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.</p>
-
-<h3>Rather Drive Stick?</h3>
-
-<p>If you prefer to not use the automatic generator, push a branch named <code>gh-pages</code> to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.</p>
-
-<h3>Authors and Contributors</h3>
-
-<p>You can <a href="https://github.com/blog/821" class="user-mention">@mention</a> a GitHub username to generate a link to their profile. The resulting <code>&lt;a&gt;</code> element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (<a href="https://github.com/defunkt" class="user-mention">@defunkt</a>), PJ Hyett (<a href="https://github.com/pjhyett" class="user-mention">@pjhyett</a>), and Tom Preston-Werner (<a href="https://github.com/mojombo" class="user-mention">@mojombo</a>) founded GitHub.</p>
-
-<h3>Support or Contact</h3>
-
-<p>Having trouble with Pages? Check out the documentation at <a href="http://help.github.com/pages">http://help.github.com/pages</a> or contact <a href="mailto:support@github.com">support@github.com</a> and we’ll help you sort it out.</p>
+        <h3>What's up Doc(umentation)!</h3>
+        <p>
+          To understand how to use a particular dimple object or method please see the <a href="https://github.com/PMSI-AlignAlytics/dimple/wiki">Full API Documentation</a><br/>
+        </p>
+        
+        <h3>Authors and Contributors</h3>
+        
+        <p>John Kiernander (<a href="https://twitter.com/jkiernander" class="user-mention">@jkiernander</a>)</p>
+        
      </section>
      <footer>
-        <p>This project is maintained by <a href="https://github.com/PMSI-AlignAlytics">PMSI-AlignAlytics</a></p>
-        <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
+        <p>
+          This is an open-source project by <br/>
+          <a href="http://www.pmsi-consulting.com">PMSI-AlignAlytics</a>
+        </p>
      </footer>
    </div>
-    <script src="javascripts/scale.fix.js"></script>
-              <script type="text/javascript">
-            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-          </script>
-          <script type="text/javascript">
-            try {
-              var pageTracker = _gat._getTracker("UA-41100937-1");
-            pageTracker._trackPageview();
-            } catch(err) {}
-          </script>
-
+    <script type="text/javascript">
+        $.getJSON("/examples_meta.json", function(data) {
+        // Get 6 random charts
+        var chartCount = 6;
+        // Limit the array to the max length of the data
+        chartCount = (chartCount < data.length ? chartCount : data.length);
+        // Shuffle the reports
+        for (var i = 0; i < chartCount; i++) {
+          var j = i + Math.round(Math.random() * (data.length - (i + 1)));
+          var s = data[i];
+          data[i] = data[j];
+          data[j] = s;
+        }
+        // Chop the array to the correct length
+        data = data.slice(0, chartCount);
+        // Add the elements in the new random array
+        data.forEach(function (spec, i) {
+          $("#examples").append("<a class=\"example\" href=\"/examples_viewer.html?id=" + spec.id + "\"><img src=\"/images/" + spec.id + ".png\"></a>");
+        });
+      });
+    </script>
+    <script src="/javascripts/scale.fix.js"></script>
+    <script type="text/javascript">
+      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+    </script>
+    <script type="text/javascript">
+      try {
+        var pageTracker = _gat._getTracker("UA-40370019-1");
+        pageTracker._trackPageview();
+      } catch(err) {}
+    </script>
+    <a href="https://github.com/PMSI-AlignAlytics/dimple/fork">
+        <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
+    </a>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,19 @@
+{
+  "name": "dimple",
+  "version": "1.0.0",
+  "private": true,
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
+    }
+  ],
+  "dependencies": {
+    "express": "3.x",
+    "grunt": "~0.4.1",
+    "grunt-contrib-jshint": "~0.1.1",
+    "grunt-contrib-nodeunit": "~0.1.2",
+    "grunt-contrib-concat": "~0.2.0",
+    "grunt-contrib-uglify": "~0.2.0"
+  }
+}
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@ -46,7 +46,7 @@ a small {
 }

 .wrapper {
-  width:860px;
+  width:960px;
  margin:0 auto;
 }

@ -71,15 +71,11 @@ pre {
  overflow-x: auto;
 }

-table {
-  width:100%;
-  border-collapse:collapse;
-}
-
-th, td {
-  text-align:left;
-  padding:5px 10px;
-  border-bottom:1px solid #e5e5e5;
+.chartWindow {
+  border-radius:5px;
+  border:1px solid #e5e5e5;
+  margin-bottom: 15px;
+  overflow-x: auto;
 }

 dt {
@ -160,7 +156,7 @@ header ul a strong {
 }

 section {
-  width:500px;
+  width:600px;
  float:right;
  padding-bottom:50px;
 }
@ -183,7 +179,17 @@ footer {
  bottom:50px;
 }

-@media print, screen and (max-width: 960px) {
+div#examples img {
+  border-radius:5px;
+  border:1px solid #d2d2d2;
+  margin-left:0px;
+  margin-right:5px;
+  margin-top:0px;
+  margin-bottom:0px;
+  padding:5px;
+}
+
+@media print, screen and (max-width: 1060px) {
  
  div.wrapper {
    width:auto;
@ -196,10 +202,6 @@ footer {
    width:auto;
  }
  
-  header {
-    padding-right:320px;
-  }
-  
  section {
    border:1px solid #e5e5e5;
    border-width:1px 0;
@ -218,7 +220,7 @@ footer {
  }
 }

-@media print, screen and (max-width: 720px) {
+@media print, screen and (max-width: 820px) {
  body {
    word-wrap:break-word;
  }
@ -236,7 +238,7 @@ footer {
  }
 }

-@media print, screen and (max-width: 480px) {
+@media print, screen and (max-width: 680px) {
  body {
    padding:15px;
  }