basic brushing and zooming feature for line chart and point chart

- change some syntax to ES6 & fix some obvious problems (5.5) - change some format & warning on categorical (5.17) - display warning when axis type is 'categorical' - add some comment - update the example page for this feature and remove outdated addons (5.18)
metricsgraphics · May 19, 2018 · fd92571 · fd92571
1 parent e4798e0
commit fd92571
Show file tree

Hide file tree

Showing 15 changed files with 395 additions and 417 deletions.
diff --git a/dist/metricsgraphics.css b/dist/metricsgraphics.css
@@ -501,3 +501,28 @@ tspan.mg-points-mono {
 .mg-year-marker-small text {
     font-size: 0.6rem;
 }
+
+.mg-brush-container {
+    cursor: crosshair;
+}
+
+.mg-brush-container .mg-brushing {
+    cursor: ew-resize;
+}
+
+.mg-brushed, .mg-brushed * {
+    cursor: zoom-out;
+}
+
+.mg-brush rect.mg-extent {
+    fill: rgba(0, 0, 0, 0.3);
+}
+
+.mg-brushing-in-progress {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
diff --git a/examples/charts/addons.htm b/examples/charts/addons.htm
diff --git a/examples/charts/brushing_zooming.htm b/examples/charts/brushing_zooming.htm
@@ -0,0 +1,166 @@
+            <div class='row trunk-section'>
+                <div class='col-lg-7'>
+                    <div class='row'>
+                        <div class='col-lg-12 text-center' id='basic_brushing'></div>
+                        <div class='col-lg-12 text-center' id='point_chart_brushing'></div>
+                    </div>
+                </div>
+                <div class='col-lg-5'>
+                    <div class='data-column'><a href='data/fake_users3.json'>data</a></div>
+
+<pre><code class='javascript'>d3.json('data/fake_users2.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+    MG.data_graphic({
+        title: "Basic Brushing &amp; Zooming",
+        description: "This is a simple example of brushing and zooming. You can set 'brush' as 'xy', 'x', 'y' to specify the axis(es) that may be brushed.",
+        data: data,
+        top: 70,
+        width: 600,
+        height: 240,
+        right: 40,
+        missing_is_hidden: true,
+        target: '#basic_brushing',
+        brush: 'xy',
+    });
+});
+
+d3.json('data/points1.json', function(data) {
+    MG.data_graphic({
+        title: "Point Chart Brushing",
+        description: "Unlike addons, this feature can also be used for point charts.",
+        data: data,
+        chart_type: 'point',
+        width: 600,
+        height: 240,
+        right: 40,
+        target: '#point_chart_brushing',
+        x_accessor: 'x',
+        y_accessor: 'y',
+        y_rug: true,
+        brush: 'xy',
+    });
+});</code></pre>
+
+                </div>
+            </div>
+
+            <div class='row trunk-section'>
+                    <div class='col-lg-7'>
+                        <div class='row'>
+                            <div class='col-lg-12 text-center' id='main'></div>
+                            <div class='col-lg-12 text-center' id='overview_plot'></div>
+                        </div>
+                    </div>
+                    <div class='col-lg-5'>
+                        <div class='data-column'><a href='data/fake_users3.json'>data</a></div>
+
+<pre><code class='javascript'>d3.json('data/fake_users2.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+    const main = {
+        title: "Overview Plot",
+        description: "This is a simple example of an overview plot. You can create an overview plot by creating another chart with 'zoom_target' option and then setting it as the object of the main chart.",
+        data: data,
+        top: 70,
+        width: 600,
+        height: 200,
+        right: 40,
+        missing_is_hidden: true,
+        target: '#main',
+        brush: 'xy',
+    }
+    MG.data_graphic(main);
+    MG.data_graphic({
+        data: data,
+        width: 600,
+        height: 50,
+        top: 0,
+        bottom: 0,
+        right: 40,
+        missing_is_hidden: true,
+        target: '#overview_plot',
+        brush: 'x',
+        zoom_target: main,
+        x_axis: false,
+        y_axis: false,
+        showActivePoint: false,
+    });
+});</code></pre>
+
+                </div>
+            </div>
+
+<script>
+d3.json('data/fake_users2.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+    MG.data_graphic({
+        title: "Basic Brushing & Zooming",
+        description: "This is a simple example of brushing and zooming. You can set 'brush' as 'xy', 'x', 'y' to specify the axis(es) that may be brushed.",
+        data: data,
+        top: 70,
+        width: 600,
+        height: 240,
+        right: 40,
+        missing_is_hidden: true,
+        target: '#basic_brushing',
+        brush: 'xy',
+    });
+});
+
+d3.json('data/points1.json', function(data) {
+    MG.data_graphic({
+        title: "Point Chart Brushing",
+        description: "Unlike addons, this feature can also be used for point charts.",
+        data: data,
+        chart_type: 'point',
+        width: 600,
+        height: 240,
+        right: 40,
+        target: '#point_chart_brushing',
+        x_accessor: 'x',
+        y_accessor: 'y',
+        y_rug: true,
+        brush: 'xy',
+    });
+});
+
+d3.json('data/fake_users2.json', function(data) {
+    for (var i = 0; i < data.length; i++) {
+        data[i] = MG.convert.date(data[i], 'date');
+    }
+    const main = {
+        title: "Overview Plot",
+        description: "This is a simple example of an overview plot. You can create an overview plot by creating another chart with 'zoom_target' option and then setting it as the object of the main chart.",
+        data: data,
+        top: 70,
+        width: 600,
+        height: 200,
+        right: 40,
+        missing_is_hidden: true,
+        target: '#main',
+        brush: 'xy',
+    }
+    MG.data_graphic(main);
+    MG.data_graphic({
+        data: data,
+        width: 600,
+        height: 50,
+        top: 0,
+        bottom: 0,
+        right: 40,
+        missing_is_hidden: true,
+        target: '#overview_plot',
+        brush: 'x',
+        zoom_target: main,
+        x_axis: false,
+        y_axis: false,
+        showActivePoint: false,
+    });
+});
+
+</script>
diff --git a/examples/css/addons/mg_line_brushing.css b/examples/css/addons/mg_line_brushing.css
diff --git a/examples/examples.htm b/examples/examples.htm
@@ -44,6 +44,8 @@
     <script src='js/common/init.js'></script>
     <script src='js/common/markers.js'></script>
     <script src='js/common/rollover.js'></script>
+    <script src='js/common/zoom.js'></script>
+    <script src='js/common/brush.js'></script>
     <script src='js/common/window_listeners.js'></script>
     <script src='js/layout/bootstrap_dropdown.js'></script>
     <script src='js/layout/button.js'></script>
@@ -99,8 +101,8 @@
             <li><a href='#' id='goto-annotations' class='pill'>Annotations</a></li>
             <li><a href='#' id='goto-updating' class='pill'>Updating</a></li>
             <li><a href='#' id='goto-other' class='pill'>Other</a></li>
+            <li><a href='#' id='goto-brushing_zooming' class='pill'>Brushing &amp; Zooming</a></li>
             <li><a href='#' id='goto-experimental' class='pill'>Experimental</a></li>
-            <li><a href='#' id='goto-addons' class='pill'>Addons</a></li>
         </ul>
 
         <div id='trunk'></div>

diff --git a/examples/interactive-demo.htm b/examples/interactive-demo.htm
@@ -40,6 +40,8 @@
     <script src='../src/js/common/init.js'></script>
     <script src='../src/js/common/markers.js'></script>
     <script src='../src/js/common/rollover.js'></script>
+    <script src='../src/js/common/zoom.js'></script>
+    <script src='../src/js/common/brush.js'></script>
     <script src='../src/js/common/window_listeners.js'></script>
     <script src='../src/js/layout/bootstrap_dropdown.js'></script>
     <script src='../src/js/layout/button.js'></script>