Fundamental visualization techniques from the 1984 paper Graphical Perception: Theory, Experimentation, and Apllication to the Development of Graphical Methods
Chiasm is used to organize and display the images.
Fundamental visualization techniques from the 1984 paper Graphical Perception: Theory, Experimentation, and Apllication to the Development of Graphical Methods
Chiasm is used to organize and display the images.
// 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> |