add resizing row chart example

for #1001
dc-js · Sep 18, 2015 · e748fc5 · e748fc5
1 parent c7630d0
commit e748fc5
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/web/resizing/index.html b/web/resizing/index.html
@@ -12,6 +12,9 @@ <h2>Eyeball tests for resizing dc.js charts</h2>
     <td><a href="resizing-heatmap.html">resizing heatmap</a></td>
     <td><a href="resizing-pie.html">resizing pie</a></td>
     <td><a href="resizing-right-axis.html">resizing right axis</a></td>
+    <td><a href="resizing-row.html">resizing row</a></td>
+<tr>
+  <tr>
     <td><a href="resizing-series.html">resizing series</a></td>
 <tr>
 </table>

diff --git a/web/resizing/resizing-bar.html b/web/resizing/resizing-bar.html
@@ -41,15 +41,13 @@
     });
     chart.render();
 
-    // respond to browser resize (not necessary if width/height is static)
     window.onresize = function() {
         chart
             .width(window.innerWidth-20)
             .height(window.innerHeight-20)
             .rescale()
             .redraw();
       };
-
 });
 
 </script>

diff --git a/web/resizing/resizing-row.html b/web/resizing/resizing-row.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>dc.js - Row Chart Example</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+</head>
+<body>
+
+<div id="test"></div>
+
+<script type="text/javascript" src="../js/d3.js"></script>
+<script type="text/javascript" src="../js/crossfilter.js"></script>
+<script type="text/javascript" src="../js/dc.js"></script>
+<script type="text/javascript">
+
+var chart = dc.rowChart("#test");
+d3.csv("../examples/morley.csv", function(error, experiments) {
+
+  experiments.forEach(function(x) {
+    x.Speed = +x.Speed;
+  });
+
+  var ndx                 = crossfilter(experiments),
+      runDimension        = ndx.dimension(function(d) {return +d.Run;}),
+      speedSumGroup       = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 1000;});
+
+  chart
+    .width(window.innerWidth-20)
+    .height(window.innerHeight-20)
+    .x(d3.scale.linear().domain([6,20]))
+    .elasticX(true)
+    .dimension(runDimension)
+    .group(speedSumGroup)
+    .render();
+
+  window.onresize = function() {
+      chart
+          .width(window.innerWidth-20)
+          .height(window.innerHeight-20)
+          .redraw();
+    };
+
+});
+
+</script>
+
+</body>
+</html>