Should fix most of w3c#216, w3c#281, w3c#282, and probably a few othe…

…rs. We are now namespacing. MG is the top level.

README.md

@@ -1,5 +1,7 @@
 <a href="http://metricsgraphicsjs.org/"><img src="http://metricsgraphicsjs.org/images/logo.svg" hspace="0" vspace="0" width="400" height="63"></a>
 
+(disclaimer: right now please use <a href='https://github.com/mozilla/metrics-graphics/releases'>v1.1 and not the most recent of master.</a> We are migrating to v2.0.0 at the moment and the documentation for v2.0 is unfinished.)
+
 _MetricsGraphics.js_ is a library optimized for visualizing and laying out time-series data. At under 50KB (minified), it provides a simple way to produce common types of graphics in a principled, consistent and responsive way. The library currently supports line charts, scatterplots and histograms as well as features like rug plots and basic linear regression.
 
 A sample set of examples may be found on [the examples page](http://metricsgraphicsjs.org). The example below demonstrates how easy it is to produce a graphic. Our graphics function provides a robust layer of indirection, allowing one to more efficiently build, say, a dashboard of interactive graphics, each of which may be pulling data from a different data source. For the complete list of options, and for download instructions, [take a look at the sections below](https://github.com/mozilla/metrics-graphics/wiki).

examples/dev.htm

@@ -28,6 +28,7 @@
 
 
     <!-- dev start -->
+     <script src='../src/js/MG.js'></script>
     <script src='../src/js/common/data_graphic.js'></script>
     <script src='../src/js/common/bootstrap_tooltip_popover.js'></script>
     <script src='../src/js/common/chart_title.js'></script>

examples/examples.htm

@@ -25,7 +25,7 @@
 
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js' charset='utf-8'></script>
-    <script src='../dist/metricsgraphics.min.js'></script>
+    <script src='../dist/metricsgraphics.js'></script>
     <script src='js/main.js'></script>
 
     <script>

examples/index.htm

@@ -77,7 +77,7 @@
     <div class='api-example'>
         <div class='container'>
 
-<pre><code class='javascript'>data_graphic({
+<pre><code class='javascript'>MG.data_graphic({
     title: "Downloads",
     description: "This graphic shows a time-series of downloads.",
     data: [{'date':new Date('2014-11-01'),'value':12},
@@ -93,7 +93,7 @@
     </div>
 
     <div class='container'>
-        <p>The API is simple. All that's needed to create a graphic is to specify a few default parameters and then, if desired, override one or more of the <a href='https://github.com/mozilla/metrics-graphics/wiki/List-of-Options'>optional parameters on offer</a>. We don't maintain state. To update a graphic, one would call <i>data_graphic</i> on the same target element.</p>
+        <p>The API is simple. All that's needed to create a graphic is to specify a few default parameters and then, if desired, override one or more of the <a href='https://github.com/mozilla/metrics-graphics/wiki/List-of-Options'>optional parameters on offer</a>. We don't maintain state. To update a graphic, one would call <i>MG.data_graphic</i> on the same target element.</p>
         <p>The library is data-source agnostic. While it provides a number of convenience functions and options that allow for graphics to better handle things like missing observations, it doesn't care where the data comes from.</p>
         <p>The library makes it easy to construct narratives by providing a layout template based on Bootstrap. Take a look at <a href='examples.htm'>the examples</a> to see that in action.</p>
         <p>MetricsGraphics.js <a href='https://www.youtube.com/watch?v=ZmkeAlut7KI#t=399'>takes the misery out of</a> creating beautiful interactive graphics. <a href='http://blog.mozilla.org/metrics/2014/11/10/introducing-metricsgraphics-js/'>Read our blog post for more details</a>.</p>
@@ -109,16 +109,16 @@ <h1>Creating your first graphic</h1>
 <pre class='highbottom'><code class='javascript'>d3.json('data/ufo-sightings.json', function(data) {
 })</code></pre>
 
-        <p><i>data_graphic</i> expects the data object to be an array of objects, which is already the case for us. That's good. It also needs dates to be timestamps if they're in a format like <i>yyyy-mm-dd</i>. We've got aggregated yearly data, so we don't need to worry about that. Otherwise, we'd add a line like this one.</p>
+        <p><i>MG.data_graphic</i> expects the data object to be an array of objects, which is already the case for us. That's good. It also needs dates to be timestamps if they're in a format like <i>yyyy-mm-dd</i>. We've got aggregated yearly data, so we don't need to worry about that. Otherwise, we'd add a line like this one.</p>
 
 <pre class='highbottom'><code class='javascript'>d3.json('data/ufo-sightings.json', function(data) {
-    data = convert_dates(data, 'year');
+    data = MG.convert.date(data, 'year');
 })</code></pre>
 
         <p>Finally, we create the graphic and place it in the element specified in <i>target</i>.</p>
 
 <pre class='highbottom'><code class='javascript'>d3.json('data/ufo-sightings.json', function(data) {
-    data_graphic({
+    MG.data_graphic({
         title: "UFO Sightings",
         description: "Yearly UFO sightings from the year 1945 to 2010.",
         data: data,
@@ -133,7 +133,7 @@ <h1>Creating your first graphic</h1>
 
         <p class='highbottom'>And this is what we end up with. In this example, we're adding a marker to draw attention to a particular data point. This is optional of course.</p>
         <div id='ufo-sightings'></div>
-        <p class='hightop'>It's as easy as that. If for whatever reason we decide to update the data in the graphic, we call <i>data_graphic</i> with the updated data object on the same target element. The library will gracefully transition the existing plot to the new one. It's ridiculously easy to modify every aspect of the graphic by setting one or more of the <a href='https://github.com/mozilla/metrics-graphics/wiki/List-of-Options'>available options</a>.</p>
+        <p class='hightop'>It's as easy as that. If for whatever reason we decide to update the data in the graphic, we call <i>MG.data_graphic</i> with the updated data object on the same target element. The library will gracefully transition the existing plot to the new one. It's ridiculously easy to modify every aspect of the graphic by setting one or more of the <a href='https://github.com/mozilla/metrics-graphics/wiki/List-of-Options'>available options</a>.</p>
 
         <h1>Still not convinced?</h1>
         <p>We've set up an interactive version of this example that you can play around with. You don't need to download anything. <a href='interactive-demo.htm'>Check it out</a>.</p>
@@ -279,7 +279,7 @@ <h1>Still not convinced?</h1>
         hljs.initHighlightingOnLoad();
 
         d3.json('data/ufo-sightings.json', function(data) {
-            data_graphic({
+            MG.data_graphic({
                 title: "UFO Sightings",
                 description: "Yearly UFO sightings from the year 1945 to 2010.",
                 data: data,