D3 Examples - Focus + Context Scatter Plots

Focus + Context Scatter Plots
forked from this block and updated to experiment with using a shared fill color to emphasize the connection between the brush extent on the left (darkgray) and the focus area on the right (also darkgray).
Focus + Context Scatter Plots using Chiasm.
Draws from
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Focus + Context Scatter Plots</title>
​
    <!-- Chiasm depends on Lodash, D3.js, and Model.js. -->
    <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>
    
    <!-- A functional reactive model library. github.com/curran/model -->
    <script src="https://curran.github.io/model/cdn/model-v0.2.4.js"></script>
​
    <!-- Chiasm core and plugins. github.com/chiasm-project -->
    <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>
​
    <!-- Custom Chiasm components for this example. -->
    <script src="dataLoader.js"></script>
    <script src="scatterPlot.js"></script>
​
    <!-- Make the Chiasm container fill the page and have a 20px black border. -->
    <style>
​
      body {
        background-color: black;
      }
​
      #chiasm-container {
        background-color: white;
        position: fixed;
        left: 20px;
        right: 20px;
        top: 20px;
        bottom: 20px;
      }
​
      /* style the background of the focus area */
      .chiasm-component-focus rect {
        fill: #B9B9B9;
      }
​
      /* Style the brush. Draws from https://bl.ocks.org/mbostock/4343214 */
      .brush .extent {
        stroke: gray;
        fill-opacity: .125;
        shape-rendering: crispEdges;
      }
​
    </style>
  </head>
  <body>
​
    <!-- Chiasm component instances will be injected into this div. -->
    <div id="chiasm-container"></div>
​
    <script>
​
      // 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.scatterPlot = ScatterPlot;
​
      // Set the Chiasm configuration.
      chiasm.setConfig({
        "layout": {
          "plugin": "layout",
          "state": {
            "containerSelector": "#chiasm-container",
            "layout": {
              "orientation": "horizontal",
              "children": [
                "context",
                "focus"
              ]
            }
          }
        },
        "scatterPlotData": {
          "plugin": "dataLoader",
          "state": {
            "path": "scatterPlotData"
          }
        },
        "focus": {
          "plugin": "scatterPlot",
          "state": {
            "xColumn": "sepal_length",
            "yColumn": "petal_length",
            "rColumn": "sepal_width",
            "colorColumn": "class",
            "borderRectFill": "#b9b9b9"
          }
        },
        "context": {
          "plugin": "scatterPlot",
          "state": {
            "xColumn": "sepal_length",
            "yColumn": "petal_length",
            "rColumn": "sepal_width",
            "colorColumn": "class",
            "brushEnabled": true,
            "brushIntervalX": [5.3, 6.5],
            "brushIntervalY": [3.2, 5.6]
          }
        },
        "links": {
          "plugin": "links",
          "state": {
            "bindings": [
              "scatterPlotData.data -> focus.data",
              "scatterPlotData.data -> context.data",
              "context.brushIntervalX -> focus.xScaleDomain",
              "context.brushIntervalY -> focus.yScaleDomain"
            ]
          }
        }
      });
    </script>
  </body>
</html>
​
    