Interactive Scatter Plot

This example shows one way to add interactive column selection widgets to a scatter plot.

The data shown here is the classic Auto MPG Data Set.

Uses Chiasm.

forked from curran's block: Iris Dataset Scatter Plot

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Interactive Scatterplot</title>
    
    
    <script src="https://curran.github.io/model/cdn/model-v0.2.4.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.3.js"></script>
    <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://chiasm-project.github.io/chiasm/chiasm-v0.3.0.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-dataset-loader/chiasm-dataset-loader-v0.3.1.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-links/chiasm-links-v0.2.1.js"></script>
    <script src="https://chiasm-project.github.io/chiasm-charts/chiasm-charts-v0.1.0.js"></script>
        
    
    <style>

body {
        background-color: black;
      }

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

.axis {
        font: 0.8em sans-serif;
      }

.axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

/* Custom CSS for axis labels. */
      .axis-label {
        text-anchor: middle;
        font-size: 2em;
      } 
    </style>
  </head>
  <body>

<div id="chiasm-container"></div>
    
    
    <script>
      function ColumnSelector() {

var my = ChiasmComponent();

var div = my.initDIV();
        var select = d3.select(div).append("select");

var supportedTypes = [{
          type: "number",
          interval: false
        }];

my.when(["dataset", "selected"], function (dataset, selected){

var columns = dataset.metadata.columns.filter(function (column){
            return supportedTypes.some(function (supported){
              return (
                (supported.type === column.type)
                &&
                ((!!supported.interval) === (!!column.interval))
              );
            });
          });

var options = select.selectAll(".column-option").data(columns);
          options.enter().append("option").attr("class", "column-option");
          options.exit().remove();
          options
            .attr("value", function (d){ return d.name; })
            .text(function (d){ return d.label; });

select.node().value = selected;

// TODO get rid of this hack.
          // https://github.com/chiasm-project/chiasm-charts/issues/13
          my.selectedLabel = dataset.metadata.columns.filter(function (d){
            return d.name === selected;
          })[0].label;
        });

select.on("change", function (){
          my.selected = this.value;
          console.log("d");
        });

return my;
      }

</script>
    
    
    <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.datasetLoader = ChiasmDatasetLoader;
      chiasm.plugins.scatterPlot = ChiasmCharts.components.scatterPlot;
      chiasm.plugins.columnSelector = ColumnSelector;

// Set the Chaism configuration.
      chiasm.setConfig({
        "layout": {
          "plugin": "layout",
          "state": {
            "containerSelector": "#chiasm-container",
            "layout": {
              "orientation": "vertical",
              "children": [
                {
                  "orientation": "horizontal",
                  "size": "15px",
                  "children": [
                    "yColumnSelector",
                    "xColumnSelector"
                  ]
                },
                "vis"
              ]
            }
          }
        },
        "loader": {
          "plugin": "datasetLoader",
          "state": {
            "path": "auto-mpg"
          }
        },
        "vis": {
          "plugin": "scatterPlot",
          "state": {
            "xColumn": "mpg",
            "yColumn": "weight",
            "xAxisLabelTextOffset": 40,
            "yAxisLabelTextOffset": 50,
            "margin": { top: 10, right: 10, bottom: 50, left: 80 },

// TODO get rid of this hack.
            // https://github.com/chiasm-project/chiasm-charts/issues/13
            "xAxisLabelText": "Sepal Length",
            "yAxisLabelText": "Petal Length"
          }
        },
        "xColumnSelector": { "plugin": "columnSelector" },
        "yColumnSelector": { "plugin": "columnSelector" },
        "myLinks": {
          "plugin": "links",
          "state": {
            "bindings": [
              "loader.dataset -> vis.dataset",
              "loader.dataset -> xColumnSelector.dataset",
              "loader.dataset -> yColumnSelector.dataset",

"vis.xColumn <-> xColumnSelector.selected",
              "vis.yColumn <-> yColumnSelector.selected",

// TODO get rid of this hack.
              // https://github.com/chiasm-project/chiasm-charts/issues/13
              "xColumnSelector.selectedLabel -> vis.xAxisLabelText",
              "yColumnSelector.selectedLabel -> vis.yAxisLabelText"
            ]
          }
        }
      }); 
      
      chiasm.getComponent("myScatterPlot").then(function (scatterPlotDataLoader){
        console.log(scatterPlotDataLoader)
        scatterPlotDataLoader.when("dataset", function(dataset){
          console.log(dataset)
        });
      });

</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-component/chiasm-component-v0.2.3.js to a secure url

Modified http://chiasm-project.github.io/chiasm/chiasm-v0.3.0.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-dataset-loader/chiasm-dataset-loader-v0.3.1.js to a secure url

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

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

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

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

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://chiasm-project.github.io/chiasm/chiasm-v0.3.0.js

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

https://chiasm-project.github.io/chiasm-dataset-loader/chiasm-dataset-loader-v0.3.1.js

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

https://chiasm-project.github.io/chiasm-charts/chiasm-charts-v0.1.0.js