Skip to content

Instantly share code, notes, and snippets.

@curran
Last active September 9, 2015 23:55
Show Gist options
  • Save curran/b4aa88691528c0f0b1fa to your computer and use it in GitHub Desktop.
Save curran/b4aa88691528c0f0b1fa to your computer and use it in GitHub Desktop.
Chiasm Foundation

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.

web counter
// 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;
}
<!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.2.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="wave.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.links = ChiasmLinks;
chiasm.plugins.dummyVis = DummyVis;
chiasm.plugins.wave = Wave;
chiasm.setConfig({
"layout": {
"plugin": "layout",
"state": {
"containerSelector": "#chiasm-container",
"layout": {
"orientation": "vertical",
"children": [
"A",
{
"orientation": "horizontal",
"children": [
"B",
"wave",
"C"
]
}
]
},
"sizes": {
"wave": {
"size": 3
}
}
}
},
"A": {
"plugin": "dummyVis",
"state": {
"text": "A",
"color": "#a8ffd0"
}
},
"B": {
"plugin": "dummyVis",
"state": {
"text": "B",
"color": "#a8f0ff"
}
},
"C": {
"plugin": "dummyVis",
"state": {
"text": "C",
"color": "#ffe2a8"
}
},
"wave": {
"plugin": "wave",
"state": {
"waterColor": "#005387",
"skyColor": "#7DCDFF"
}
},
"links": {
"plugin": "links",
"state": {
"bindings": [
"B.lineWidth -> C.lineWidth"
]
}
}
});
</script>
</body>
</html>
// This is an example Chiasm plugin based on HTML5 Canvas.
// This displays a wave simulation.
// Clicking on the canvas interacts with the simulation.
// Note that D3.js is not used at all here.
function Wave (){
var my = ChiasmComponent({
waterColor: "red",
skyColor: Model.None,
gridSize: 50,
pullStrength: 0.01,
dampeningFactor: 0.99,
initialHeight: 0.5
});
// These functions will be populated later when the canvas is available.
var drawCells = function (){};
var clearCanvas = function (){};
var executeMouseInteraction = function (){};
var iterateSimulation = function (){};
var canvas = document.createElement("canvas");
var c = canvas.getContext("2d");
var cells = [];
// Poor man's RAF polyfill
var nextFrame = requestAnimationFrame || setTimeout;
// Expose the canvas as the element that Chiasm will append to its container.
my.el = canvas;
// This function executes once per animation frame
function executeFrame(){
nextFrame(executeFrame);
clearCanvas();
drawCells();
iterateSimulation();
executeMouseInteraction();
}
// Initialize the cells.
my.when(["gridSize", "initialHeight"], function (gridSize, initialHeight) {
cells = [];
// Initialize the water height
for(var i = 0; i < gridSize; i++){
cells.push({
// for a still initial surface
//height: 0.5,
// for an initial wave:
height: i === Math.floor(gridSize*1/4) ? 2 : initialHeight,
velocity: 0
});
}
});
my.when(["box", "gridSize", "waterColor", "skyColor"],
function (box, gridSize, waterColor, skyColor){
clearCanvas = function (){
canvas.width = box.width;
canvas.height = box.height;
if(skyColor !== Model.None){
c.fillStyle = skyColor;
c.fillRect(0, 0, box.width, box.height);
}
}
drawCells = function (){
c.beginPath();
c.moveTo(box.width, box.height);
c.lineTo(0, box.height);
for(var i = 0; i < gridSize; i++){
var cell = cells[i];
var x = i / (gridSize-1) * box.width;
var y = box.height - cell.height * box.height;
c.lineTo(x,y);
}
c.closePath();
c.fillStyle = waterColor;
c.fill();
}
});
my.when(["gridSize", "pullStrength", "dampeningFactor", "initialHeight"],
function (gridSize, pullStrength, dampeningFactor, initialHeight){
var conservationOfMassCorrection = 0;
// Increment the wave simulation:
// Neighboring cells pull on one another.
iterateSimulation = function(){
var avgHeight = 0;
for(var i = 0; i < gridSize; i++){
// center cell
var c = cells[i];
// left neighbor
var l = cells[((i - 1) + gridSize) % gridSize];
// right neighbor
var r = cells[(i + 1) % gridSize];
// pull toward neighbors
c.velocity += pullStrength * (l.height - c.height);
c.velocity += pullStrength * (r.height - c.height);
// increment velocity
c.height += c.velocity;
// ensure conservation of mass
c.height += conservationOfMassCorrection;
// apply dampening
c.velocity *= dampeningFactor;
avgHeight += c.height;
}
avgHeight /= (gridSize - 1);
conservationOfMassCorrection = initialHeight - avgHeight;
}
});
my.when(["mouseDown", "mouseX", "mouseY", "box"], function (mouseDown, mouseX, mouseY, box){
var cellWidth = 1 / (cells.length - 1) * box.width;
// Pull the wave cell closest to the mouse
executeMouseInteraction = function(){
if(mouseDown){
for(var i = 0; i < cells.length; i++){
var x = i / (cells.length - 1) * box.width;
if(Math.abs(x - mouseX) < cellWidth){
var cell = cells[i];
cell.height = 1 - mouseY / box.height;
cell.velocity = 0;
}
}
}
}
});
// Record when the mouse is pressed
canvas.addEventListener("mousedown", function (e){
my.mouseDown = true;
// This line prevents unintended drag behavior, like selecting page elements.
e.preventDefault();
});
// Record when the mouse is moved
canvas.addEventListener("mousemove", function (e){
var rect = canvas.getBoundingClientRect();
my.mouseX = e.clientX - rect.left;
my.mouseY = e.clientY - rect.top;
});
// Record when the mouse is released
canvas.addEventListener("mouseup", function (e){
my.mouseDown = false;
});
// Draw the first frame
executeFrame();
return my;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment