Skip to content

Instantly share code, notes, and snippets.

@curran
Last active September 6, 2015 22:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save curran/f01e2a07ece4a9ad62cb to your computer and use it in GitHub Desktop.
Save curran/f01e2a07ece4a9ad62cb to your computer and use it in GitHub Desktop.
Graphical Perception
// 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;
}
<!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="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>
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment