Publish Mekko Example

advanced_examples_meta.json

@@ -3,7 +3,7 @@
         "id":"advanced_price_range_lollipop",
         "title":"Price Changes",
         "shortTitle":"Price Changes",
-        "desc":"This examples demonstrates multiple series, multiple axes, different aggregations and a storyboard"
+        "desc":"This examples demonstrates multiple series, multiple axes, different aggregations and a storyboard."
     },
     {
         "id":"advanced_pong",
@@ -21,6 +21,12 @@
         "id":"advanced_dynamic_line_color",
         "title":"Dynamic Line Colors",
         "shortTitle":"Dynamic Colors",
-        "desc":"A line chart plotting unit sales, colored by price"
+        "desc":"A line chart plotting unit sales, colored by price."
+    },
+    {
+        "id":"advanced_grouped_mekko",
+        "title":"Grouped Mekko",
+        "shortTitle":"Grouped Mekko",
+        "desc":"A marimekko chart showing SKUs grouped by owner and brand.  They have dynamic saturation and are animated by month just for good measure."
     }
 ]

examples/advanced_grouped_mekko.html

@@ -4,16 +4,42 @@
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
+    
+      // Create and position the chart
       var myChart = new dimple.chart(svg, data);
       myChart.setBounds(60, 50, 510, 310)
+
+      // Add a Grouped Mekko Axis.  This will show Brands grouped by owners
+      // sized by unit sales.
       var x = myChart.addAxis("x", ["Owner", "Brand"], "Unit Sales");
       x.showPercent = true;
+
+      // Add the vertical measure to also show unit sales, which is standard
+      // for a mekko, but not a requirement in dimple.
       myChart.addPctAxis("y", "Unit Sales");
+
+      // Color by Unit Sales.  By defining this without specifying the color range
+      // in the second parameter, dimple will assign colors as usual and adjust
+      // saturation based on the Unit Sales value.
       var c = myChart.addColorAxis("Unit Sales");
+
+      // Override the minimum axis value to a lower number.  By default the range of
+      // values is used with the minimum being 0 saturation and the maximum being 100%
+      // this causes the bars to be too washed out in this particular case.
       c.overrideMin = -10000;
+
+      // Draw SKU's for the series, by specifying owner second here, it ensures dimple
+      // will color by owner rather than SKU.  This suits the grouping to give blocks of
+      // color for each owner faded by the SKU unit sales value
       myChart.addSeries(["SKU", "Owner"], dimple.plot.bar);
+    
+      // Add a legend
       myChart.addLegend(240, 10, 330, 20, "right");
+
+      // Animate the chart by date values
       myChart.setStoryboard("Date");
+
+      // Draw the chart
       myChart.draw();
     });
   </script>