search

chiasm-project / chiasm

A browser based environment for interactive data visualizations.
MIT License
184 stars 27 forks source link

Chiasm as WebComponent #55

Open curran opened 8 years ago

curran commented 8 years ago

This code should work one day:

<chiasm>
  {
    "layout": {
      "plugin": "layout",
      "state": {
        "containerSelector": "#chiasm-container",
        "layout": {
          "orientation": "vertical",
          "children": [
            "A", {
              "orientation": "horizontal",
              "children": [
                "B", {
                  "orientation": "vertical",
                  "children": [ "C", "D" ]
                },
                "E"
              ]
            }
          ]
        }
      }
    },
    "A": { "plugin": "coloredRectangle" },
    "B": {
      "plugin": "coloredRectangle",
      "state": { "color": "#a8f0ff" }
    },
    "C": {
      "plugin": "coloredRectangle",
      "state": { "color": "#ffe2a8" }
    },
    "D": {
      "plugin": "coloredRectangle",
      "state": { "color": "#99e2c8" }
    },
    "E": {
      "plugin": "coloredRectangle",
      "state": { "color": "#a8ffd0" }
    }
  }
</chiasm>

Using one of