Graphical Perception by curran

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Graphical Perception</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>
    
    <!-- A functional reactive model library. github.com/curran/model -->
    <script src="//curran.github.io/model/cdn/model-v0.2.4.js"></script>

    <!-- Chiasm core and plugins. github.com/chiasm-project -->
    <script src="//chiasm-project.github.io/chiasm/chiasm-v0.2.0.js"></script>
    <script src="//chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.0.js"></script>
    <script src="//chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.1.js"></script>

    <!-- Custom Chiasm plugins for this example. -->
    <script src="image.js"></script>

    <style>

      body {
        background-color: black;
      }

      /* Make the chart container fill the page using CSS. */
      #chiasm-container {
        position: fixed;
        left: 20px;
        right: 20px;
        top: 20px;
        bottom: 20px;
      }
    </style>

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

    <script>

      var chiasm = Chiasm();

      chiasm.plugins.layout = ChiasmLayout;
      chiasm.plugins.image = Image;

      chiasm.setConfig({
        "layout": {
          "plugin": "layout",
          "state": {
            "containerSelector": "#chiasm-container",
            "layout": {
              "orientation": "vertical",
              "children": [
                {
                  "orientation": "horizontal",
                  "size": 0.8,
                  "children": [
                    "title"
                  ]
                },
                {
                  "orientation": "horizontal",
                  "children": [
                    "scatterPlot",
                    "pieChart",
                    "barChart",
                    "barChartGrouped",
                    "barChartStacked"
                  ]
                },
                {
                  "orientation": "horizontal",
                  "children": [
                    "scatterPlotSize",
                    "lineChart",
                    "choropleth"
                  ]
                }
              ]
            },
            "sizes": {
              "title": {
                "size": 4
              }
            }
          }
        },
        "title": {
          "plugin": "image",
          "state": {
            "url": "title.png"
          }
        },
        "pieChart": {
          "plugin": "image",
          "state": {
            "url": "pieChart.png"
          }
        },
        "barChart": {
          "plugin": "image",
          "state": {
            "url": "barChart.png"
          }
        },
        "barChartGrouped": {
          "plugin": "image",
          "state": {
            "url": "barChartGrouped.png"
          }
        },
        "barChartStacked": {
          "plugin": "image",
          "state": {
            "url": "barChartStacked.png"
          }
        },
        "lineChart": {
          "plugin": "image",
          "state": {
            "url": "lineChart.png"
          }
        },
        "scatterPlot": {
          "plugin": "image",
          "state": {
            "url": "scatterPlot.png"
          }
        },
        "scatterPlotSize": {
          "plugin": "image",
          "state": {
            "url": "scatterPlotSize.png"
          }
        },
        "choropleth": {
          "plugin": "image",
          "state": {
            "url": "choropleth.png"
          }
        }
      });
    
    </script>
  </body>
</html>

image.js

// This is an example Chaism plugin that uses <img> tags to display images.
function Image() {

  var my = ChiasmComponent({
    url: "http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg"
  });

  my.el = document.createElement("div");

  var img = d3.select(my.el)
      .style("background-color", "white")
    .append("img")
      .style("max-height", "100%")
      .style("max-width", "100%")
      .style("display", "block")
      .style("margin", "auto");

  my.when("url", function (url){
    img.attr("src", url);
  });
  
  // When the size of the visualization is set
  // by the chiasm layout engine,
  my.when("box", function (box) {

    // Set the size of the SVG.
    d3.select(my.el)
      .style("width", box.width + "px")
      .style("height", box.height + "px");

  });
  return my;
}