Focus + Context Area Charts

Focus + Context Area Charts using Chiasm.

Draws from

forked from curran's block: Focus + Context Area Charts

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Focus + Context Scatter Plots</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    
    
    <script src="https://curran.github.io/model/cdn/model-v0.2.4.js"></script>

<script src="https://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.1.js"></script>

<script src="dataLoader.js"></script>
    <script src="areaChart.js"></script>
    <script src="bridge.js"></script>

<style>

body {
        background-color: black;
      }

#chiasm-container {
        background-color: white;
        position: fixed;
        left: 20px;
        right: 20px;
        top: 20px;
        bottom: 20px;
      }

/* Style the brush. Draws from https://bl.ocks.org/mbostock/4343214 */
      .brush .extent {
        stroke: black;
        fill-opacity: .2;
        shape-rendering: crispEdges;
      }

</style>
  </head>
  <body>

<div id="chiasm-container"></div>

// Create a new Chiasm instance.
      var chiasm = new Chiasm();

// Register plugins that the configuration can access.
      chiasm.plugins.layout = ChiasmLayout;
      chiasm.plugins.links = ChiasmLinks;
      chiasm.plugins.dataLoader = DataLoader;
      chiasm.plugins.areaChart = AreaChart;
      chiasm.plugins.bridge = Bridge;

// Set the Chaism configuration.
      chiasm.setConfig({
        "layout": {
          "plugin": "layout",
          "state": {
            "containerSelector": "#chiasm-container",
            "layout": {
              "orientation": "vertical",
              "children": [
                "focus",
                "bridge",
                "context"
              ]
            },
            "sizes": {
              "focus": {
                "size": 3
              },
              "bridge": {
                "size": "20px"
              }
            }
          }
        },
        "sp500": {
          "plugin": "dataLoader",
          "state": {
            "path": "sp500"
          }
        },
        "focus": {
          "plugin": "areaChart",
          "state": {
            "xColumn": "date",
            "yColumn": "price",
            "fill": "gray",
            "margin": {
              "left":   20,
              "top":    20,
              "right":  20,
              "bottom": 0
            }
          }
        },
        "context": {
          "plugin": "areaChart",
          "state": {
            "xColumn": "date",
            "yColumn": "price",
            "fill": "#aaaaaa",
            "backgroundColor": "white",
            "border": "none",
            "brushEnabled": true,
            "brushIntervalX": [
              "Sun, 30 Sep 2007 06:16:37 GMT",
              "Mon, 19 Jan 2009 10:19:25 GMT"
            ],
            "margin": {
              "left":   20,
              "top":    0,
              "right":  20,
              "bottom": 20
            }
          }
        },
        "bridge": {
          "plugin": "bridge",
          "state": {
            "xColumn": "date"
          }
        },
        "links": {
          "plugin": "links",
          "state": {
            "bindings": [
              "sp500.data -> focus.data",
              "sp500.data -> context.data",
              "sp500.data -> bridge.data",
              "context.brushIntervalX -> focus.xScaleDomain",
              "context.brushIntervalX -> bridge.brushIntervalX"
            ]
          }
        }
      });
    </script>
  </body>
</html>

Modified http://curran.github.io/model/cdn/model-v0.2.4.js to a secure url

Modified http://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js to a secure url

Modified http://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js to a secure url

Modified http://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js to a secure url

Modified http://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.1.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://curran.github.io/model/cdn/model-v0.2.4.js

https://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js

https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js

https://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js

https://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.1.js