Chiasm Foundation

README.md

An example that demonstrates basic features of Chiasm.

The Chiasm plugins demonstrated here are

• dummyVis A placeholder for D3-based visualizations that use SVG.

• wave An example plugin that uses HTML5 Canvas for rendering.

• layout A plugin for nested box layout of arbitrary components.

• links A plugin for connecting components together.

forked from curran's block: Chiasm Foundation

forked from baramuyu's block: Chiasm Foundation

data.tsv

dummy2.js

function Dummy2() {
  
  var my = ChiasmComponent({
//     // The background color, a CSS color string.
//     color: "white",
//     // The string that gets displayed in the center of the box.
//     text: "",
//     // The width in pixels of lines for the X.
//     lineWidth: 8
  });
  my.el = document.createElement("div");
  

  var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);

  var y = d3.scale.linear()
      .range([height, 0]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(10, "%");

  var svg = d3.select(my.el).append("svg")
//       .attr("width", width + margin.left + margin.right)
//       .attr("height", height + margin.top + margin.bottom)
//     .append("g")
//       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  my.when("box", function (box) {
    // Set the size of the SVG.
    svg
      .attr("width", box.width)
      .attr("height", box.height);

  });
  
  
  d3.tsv("data.tsv", type, function(error, data) {
    if (error) throw error;

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Frequency");

    svg.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.letter); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.frequency); })
        .attr("height", function(d) { return height - y(d.frequency); });
  });

  function type(d) {
    d.frequency = +d.frequency;
    return d;
  }
  
  return my;
}

dummyVis.js

// This is an example Chaism plugin that uses D3.  A colored rectangle is
// created with an X in the background and text in the foreground.  The X in the
// background is interactive. Clicking and dragging it updates `lineWidth`.
function DummyVis() {

  // Construct a Chiasm component instance,
  // specifying default values for public properties.
  var my = ChiasmComponent({

    // The background color, a CSS color string.
    color: "white",

    // The string that gets displayed in the center of the box.
    text: "",

    // The width in pixels of lines for the X.
    lineWidth: 8

  });

  // Expose a div element that will be added to the Chiasm container.
  // This is a special property that Chiasm looks for after components are constructed.
  my.el = document.createElement("div");

  // Construct the SVG DOM.
  var svg = d3.select(my.el).append("svg");

  // Add a background rectangle to the SVG.
  // The location of the rect will be fixed at (0, 0)
  // with respect to the containing SVG.
  svg.append("rect")
    .attr("x", 0)
    .attr("y", 0);

  // Add a text element to the SVG,
  // which will render the `text` my property.
  svg.append("text")
    .attr("font-size", "7em")
    .attr("text-anchor", "middle")
    .attr("alignment-baseline", "middle");

  // Update the color and text based on the my.
  my.when("color", function (color){
    svg.select("rect").attr("fill", color);
  });

  // Update the text.
  my.when("text", function (text){
    svg.select("text").text(text);
  });

  // When the size of the visualization is set
  // by the chiasm layout engine,
  my.when("box", function (box) {

    // Set the size of the SVG.
    svg
      .attr("width", box.width)
      .attr("height", box.height);

    // Set the size of the background rectangle.
    svg.select("rect")
      .attr("width", box.width)
      .attr("height", box.height);

    // Update the text label to be centered.
    svg.select("text")
      .attr("x", box.width / 2)
      .attr("y", box.height / 2);

  });

  // Update the X lines whenever either
  // the `box` or `lineWidth` my properties change.
  my.when(["box", "lineWidth"], function (box, lineWidth) {
    var w = box.width,
        h = box.height,
        lines = svg.selectAll("line").data([
          {x1: 0, y1: 0, x2: w, y2: h},
          {x1: 0, y1: h, x2: w, y2: 0}
        ]);
    lines.enter().append("line");
    lines
      .attr("x1", function (d) { return d.x1; })
      .attr("y1", function (d) { return d.y1; })
      .attr("x2", function (d) { return d.x2; })
      .attr("y2", function (d) { return d.y2; })
      .style("stroke-width", lineWidth)
      .style("stroke-opacity", 0.2)
      .style("stroke", "black")
      .call(lineDrag);
  });

  // Make the X lines draggable. This shows how to add interaction to
  // visualization modules.  Dragging updates the `lineWidth` property.
  var lineDrag = (function () {
    var x1, x2;
    return d3.behavior.drag()
      .on("dragstart", function (d) {
        x1 = d3.event.sourceEvent.pageX;
      })
      .on("drag", function (d) {
        var x2 = d3.event.sourceEvent.pageX,
            newLineWidth = my.lineWidth + x2 - x1;

        // Enforce minimum line width of 1 pixel.
        newLineWidth = newLineWidth < 1 ? 1 : newLineWidth;

        // Set the lineWidth property on the component.
        // This change will be propagated into the Chiasm configuration.
        my.lineWidth = newLineWidth;

        x1 = x2;
      });
  }());

  return my;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chiasm Foundation</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="http://curran.github.io/model/cdn/model-v0.2.4.js"></script>

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

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

    <style>

      body {
        background-color: white;
      }

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

    .bar {
      fill: steelblue;
    }

    .bar:hover {
      fill: brown;
    }

    .axis {
      font: 10px sans-serif;
    }

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

    .x.axis path {
      display: none;
    }

    </style>

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

    <script>

      var chiasm = Chiasm();

      chiasm.plugins.layout = ChiasmLayout;
      chiasm.plugins.links = ChiasmLinks;
      chiasm.plugins.dummyVis = DummyVis;
      chiasm.plugins.dummy2 = Dummy2;
//    chiasm.plugins.wave = Wave;

      chiasm.setConfig({
        "layout": {
          "plugin": "layout",
          "state": {
            "containerSelector": "#chiasm-container",
            "layout": {
              "orientation": "vertical",
              "children": [
                {
                  "orientation": "horizontal",
                  "children": [
                    "A",
                    "B",
                    "C"
                  ]
                },
                {
                  "orientation": "horizontal",
                  "children": [
                    "E",
                    "F",
                    "G"
                  ]
                }
              ]
            }
          }
        },
        "A": {
          "plugin": "dummyVis",
          "state": {
            "text": "A",
            "color": "#a8ffd0"
          }
        },
        "B": {
          "plugin": "dummy2",
          "state": {
//             "title": "Time of Day",
//             "yColumn": "frequency",
//             "xColumn": "letter"
          }
        },
        "C": {
          "plugin": "dummyVis",
          "state": {
            "text": "C",
            "color": "#ffe2a8"
          }
        },
        "D": {
          "plugin": "dummyVis",
          "state": {
            "text": "D",
            "color": "#005387",
          }
        },
        "E": {
          "plugin": "dummyVis",
          "state": {
            "text": "E",
            "color": "#a8f0ff"
          }
        },
        "F": {
          "plugin": "dummyVis",
          "state": {
            "text": "F",
            "color": "#d18b00"
          }
        },
        "G": {
          "plugin": "dummyVis",
          "state": {
            "text": "G",
            "color": "#005387",
          }
        }
      });
    
    </script>
  </body>
</html>