This is a mini presentation framework for the meetup talk SF Big Analytics - Open Source Project: The Chiasm Data Visualization Platform. For best viewing, open in a new window.
Here’s the YouTube Video of this presentation: Story of Chiasm.
See also github.com/chiasm-project/chiasm.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chiasm By Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<style>
html, body {
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
}
img{
width: 230px;
}
/* Split the page vertically into two parts. */
/* See //stackoverflow.com/questions/13530741/css-fill-horizonal-space */
#split {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
#left {
float: left;
height: 100%;
width: 250px;
padding: 5px;
overflow: auto;
margin: 0;
padding: 0;
}
#right {
height: 100%;
width: auto;
overflow: auto;
}
#content {
height: 100%;
width: 100%;
border: none;
}
video{
position: fixed;
bottom: 10px;
right: 10px;
border-radius:150px;
}
</style>
</head>
<body>
<div id="split">
<div id="left">
</div>
<div id="right">
<iframe src="intro.html" id="content" name="content"></iframe>
</div>
</div>
<!-- This box shows my face live from the camera. -->
<video width="300" autoplay></video>
<script>
d3.select("#right");
d3.xhr("outline.md", function (xhr){
var html = marked(xhr.response);
d3.select("#left").node().innerHTML = html;
// Make links open in the iFrame.
d3.selectAll("a").attr("target", "content");
});
// Display video from the camera on the video element.
// Example code from //www.html5rocks.com/en/tutorials/getusermedia/intro/
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getUserMedia({ video: true }, function (localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
}, function (e) {
console.log("Error " + e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ingress Dashboard</title>
<style>
img {
width: 100%
}
</style>
</head>
<body>
<img src="//curran.github.io/vis2013Tutorial/images/mapDocs6.png">
<img src="//curran.github.io/vis2013Tutorial/images/mapDocs7.png">
<img src="//curran.github.io/vis2013Tutorial/images/mapDocs8.png">
<img src="//curran.github.io/vis2013Tutorial/images/mapDocs9.png">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ingress Dashboard</title>
<style>
body {
background-color: black;
}
img {
width: 100%;
}
</style>
</head>
<body>
<img src="intro.png">
</body>
</html>
[HTML5 Canvas Code Examples](http://curran.github.io/HTML5Examples/) August 2012
<a href="ingressDashboardImage.html"><img src="http://curran.github.io/vis2013Tutorial/images/mapDocs6.png"></a>
<a href="https://github.com/curran/dashboardScaffoldExample"><img src="http://farm6.staticflickr.com/5532/9449466691_6c55d58033_z.jpg"></a>
[curran.github.io/phd/prototype/](http://curran.github.io/phd/prototype/) March 2014 ([code](https://github.com/curran/phd/tree/gh-pages/prototype))
[Model.js](https://github.com/curran/model) April 2014
* [HTML Table](http://curran.github.io/model/examples/bootstrapTable)
* [Linked Scatter Plot & Bar Chart](http://curran.github.io/model-contrib/#/examples/linkedViews) Aug 14, 2014
* [Stacked Area Chart](http://curran.github.io/model/examples/d3StackedArea/)
* [Parallel Coordinates](http://curran.github.io/model/examples/d3ParallelCoordinates/)
* [Force Directed Graph](http://curran.github.io/model/examples/d3ForceDirectedGraph)
[](http://curran.github.io/model/examples/d3LinkedChoropleth/) November 2014 ([source](https://github.com/curran/model/blob/gh-pages/examples/d3LinkedChoropleth/index.html))
[](http://bl.ocks.org/curran/cf4b98fff0517ca04667)
[](http://bl.ocks.org/curran/9e04ccfebeb84bcdc76c)
[](http://bl.ocks.org/curran/9aafca5fba0c7fde13aa)
[](http://bl.ocks.org/curran/015402cce2caa074551e)
[](http://bl.ocks.org/curran/3b811f05a0ce39d0d7cd)
[](http://bl.ocks.org/curran/015d34d6d3d562877e51)
Chiasm.js v0.1.X
| | |
|---|---|
| [](http://bl.ocks.org/curran/3f0b1128d74308fc8fe1) | A demo of the Chiasm configuration editor and nested box layout. |
| [](http://bl.ocks.org/curran/4ce2ee825811f1c32125) | An example Chiasm configuration with a bar chart and line chart. |
| [](http://bl.ocks.org/curran/70ae30ab3b3eea62f84e) | The Chiasm kitchen sink (<a href="https://github.com/curran/chiasm/tree/gh-pages/kitchenSink">code</a>), showing various configurations including scatter plot, line chart, and bar chart. |
| [](http://bl.ocks.org/curran/5a9767b5c23982c89632) | An example demonstrating linked views and having a common color scale. |
| [](http://bl.ocks.org/curran/19d42e98ce25291eb45d) | A more complex example with linked views using Crossfilter and loading data from an API. |
Chiasm v0.2.X
| | |
|---|---|
| [](http://bl.ocks.org/curran/b4aa88691528c0f0b1fa) | A self-contained example showing the new v0.2.0 plugin API. |
| [](http://bl.ocks.org/curran/01aa2685f083b6c1b9fb) | Map & Globe based on [Leaflet.js](leafletjs.com) and [This is a Globe](http://bl.ocks.org/mbostock/ba63c55dd2dbc3ab0127). |
| [](http://bl.ocks.org/curran/81271937fa94fdbdd854) | Migrant Deaths Map. |
| [](http://bl.ocks.org/curran/f01e2a07ece4a9ad62cb) | Thumbnails of visualization techniques from a 1984 paper. |
| [](http://bl.ocks.org/curran/3cc1a2a289dddbd64688) | Fundamental visualization techniques in Chiasm. |
| [](http://bl.ocks.org/curran/d1e9ea2850047562be09) | Focus + Context Scatter Plots.|
| [](http://bl.ocks.org/curran/d5252d37917ab6eab032) | Focus + Context Area Charts.|
| [](http://bl.ocks.org/curran/87d038562333a7ad4a64) | Crossfilter & Chiasm.|
| [](http://bl.ocks.org/curran/1af08ad6cdb01707c33f) | Chiasm Boilerplate. |
[Future Plans](https://docs.google.com/presentation/d/1FS4FIhsAGg7sIN3EEc5jCkymPYJh65p_0--CsQIi5uY/pub?start=false&loop=false&delayms=3000)