Chiasm By Example
This interactive presentation, "Chiasm By Example," showcases the Chiasm data visualization platform through a series of live-coded examples. The page is split into two panels: a left sidebar containing a clickable outline of project milestones and visualization examples, and a right iframe that displays the selected example. The outline guides viewers through the evolution of Chiasm, from early HTML5 canvas experiments and the Model.js reactive programming model to advanced interactive visualizations like linked scatter plots, stacked area charts, parallel coordinates, and force-directed graphs. Each example is represented by a thumbnail linking to a live demo, and selecting an item updates the iframe with the corresponding visualization. The interface also captures a video feed from the user's camera, embedding a personal touch into the presentation. A final section highlights Chiasm.js v0.1.X examples, including the configuration editor and nested box layout demos.# Chiasm By Example
## Summary
This interactive presentation serves as a visual history and tutorial for the Chiasm data visualization platform, showcasing its evolution through a series of examples. The page uses a split layout with a clickable outline of project milestones on the left and a main content area on the right that displays the linked examples.
## Key Visual Elements
- **Timeline Layout**: A chronological list of visualization projects from August 2012 through Chiasm.js v0.1.X, demonstrating the progression of the author's work
- **Split-Screen Interface**: A left sidebar with navigation links and a main content iframe, allowing viewers to explore examples while reading context
- **Embedded Media**: Includes video thumbnails, screenshots, and clickable images of various visualizations including choropleth maps, scatter plots, bar charts, and force-directed graphs
- **Interactive Navigation**: Clicking examples loads them into the main viewing area, creating a slide-show-like presentation of visualization projects
- **Live Webcam Feed**: A small webcam window is embedded in the corner of the presentation, allowing the presenter to be visible while presenting
The visualization shows a series of data visualization projects.# Chiasm By Example
## Description
This interactive presentation serves as a visual journey through the evolution of the Chiasm data visualization platform, created by Curran Kelleher. The page functions as a mini presentation framework, showcasing a timeline of projects that led to Chiasm's development.
**Visual Design:** The interface uses a split-pane layout with a clickable outline on the left side and a dynamic content area on the right. The outline presents a chronological progression of projects, each represented by clickable links and thumbnail images. Selecting an item loads the corresponding visualization into an embedded iframe on the right, creating an interactive "living presentation."
**Key elements of the visualization:**
- **Timeline of Projects**: The left panel lists projects from August 2012 through Chiasm's v0.1.X releases, including HTML5 Canvas examples, dashboard scaffolds, Model.js, and various D3-based visualizations like stacked area charts, parallel coordinates, and force-directed graphs.
- **Visual Thumbnails**: Small preview images of each project appear as clickable links, providing visual context before diving in.
- **Nested Box Layout Demo**: One featured example showcases the Chiasm configuration editor and nested box layout.
- **Live Presentation Tool**: The entire page functions as a mini presentation framework, with the speaker's live camera feed displayed in a circular overlay in the corner.
This is a versatile and interactive way to tell the story of Chiasm by example, showing the progression of the project through its various visualization examples. The embedded video of the speaker is captured from the camera via `getUserMedia`.
---
Your task is to write a concise description of this visualization
gallery example that both:
* provides enough information to be discoverable via search
* entices the user to try it
The description should be a single paragraph that is 1-3 sentences. Do not use
bullets or lists. Do not include placeholders. Use clear, direct language.
Here is the data from the gist as returned by the GitHub API. Use it to inform your description.
{
"url": "https://api.github.com/repos/curran/Chiasm-By-Example/git/trees/12d0d34ce8668fcb5001a0725db0401a890027f6",
"tree": [
{
"mode": "100644",
"type": "blob",
"url": "https://api.github.com/repos/curran/Chiasm-By-Example/git/blobs/8b0ec6b3a8c4549e47ed95fca0a7c08c8c28c8e",
"path": "README.md"
},
{
"mode": "100644",
"type": "blob",
"url": "https://api.github.com/repos/curran/Chiasm-By-Example/gistfile1.txt",
"path": "index.html"
},
{
"mode": "100644",
"type": "blob",
"url": "https://api.github.com/repos/curran/Chiasm-By-Example/gistfile2.txt",
"path": "ingressDashboardImage.html"
},
{
"mode": "100644",
"type": "html",
"url": "https://api.github.com/repos/curran/Chiasm-By-Example/gistfile3.txt",
"path": "intro.html"
},
{
"mode": "100644",
"type": "blob",
"url": "https://api.github.com/repos/curran/Chiasm-By-Example/gist/16828b2187f6d06f77fd/raw/3e02983eaa7583a468a65b12e5af4a9266b55fca/outline.md",
"path": "outline.md"
}
]
"message": "Not Found"
}
Title: Chiasm By Example
Description:
Chiasm By Example is a self-contained presentation tool for live coding demonstrations, created by Curran Kelleher. It uses a split-screen layout with an outline sidebar and an iframe displaying linked examples or slides. The tool is built around the Chiasm data visualization platform and supports interactive presentations by embedding related charts and images in the main panel. A notable feature is the live video of the presenter displayed in a fixed circle, providing a real-time component to the presentation. This example is part of a gallery of data visualization projects that demonstrate progressive improvements in creating interactive, linked visualizations.
---
I need to produce a concise description of this specific example for a visualization gallery. The user provided the title and several file contents. I should synthesize this into a clear, informative summary. The key is to extract the most important information about what this example demonstrates, its context, and its functionality.
The example is a presentation framework that showcases the evolution of Chiasm, a data visualization platform. It uses a split-screen layout with clickable links on the left and an iframe on the right, and even includes a live webcam feed. The description should be concise and highlight the key aspects: what it is, how it works, and its purpose as a presentation tool for the Chiasm project.
I'll structure the description to cover the title, the context (a meetup talk), the interactive presentation format (split-screen with clickable outline and embedded content), and the unique webcam feature, plus the visual style.
Let me write a concise yet informative description suitable for a gallery.# Chiasm By Example
**Chiasm By Example** is an interactive presentation platform created by Curran Kelleher for the SF Big Analytics meetup talk "Open Source Project: The Chiasm Data Visualization Platform." Rather than a static slide deck, it transforms the browser into a live presentation environment where the speaker's face appears via webcam alongside content.
## Design & Interaction
The interface splits the screen into two primary regions:
- A left-hand navigation pane containing a clickable outline of presentation topics, rendered from markdown
- A right-hand content area that displays the selected example in an embedded iframe
The left sidebar presents a visual timeline of Curran's data visualization journey, from early HTML5 Canvas examples through Model.js and into Chiasm.js. Each entry links to live interactive examples like linked scatter plots, stacked area charts, and force-directed graphs. The presentation structure allows for seamless transitions between these different visualization examples.
A notable feature is the self-demonstrating nature of the talk - a video element in the corner displays the presenter's live webcam feed, making the presentation feel personal and immediate. The design splits the screen with a navigation outline on the left and content on the right, using markdown-rendered links that load content into an iframe.# Chiasm By Example
**Author:** Curran
**Description:** This interactive presentation showcases the evolution of the Chiasm data visualization platform through a curated collection of examples and demos. The page features a two-panel layout with a markdown-rendered navigation outline on the left side, displaying a chronological journey from early HTML5 Canvas examples through Model.js and into Chiasm's configuration editor capabilities. The right panel displays live example visualizations in an iframe. A unique touch is the inclusion of a live video feed from the presenter's webcam in the bottom corner, creating an authentic presentation feel for the meetup talk. The outline links to various interactive examples including dashboards, scatter plots, bar charts, and layout demos, with thumbnail images that expand into full demonstrations. The presentation was created for the SF Big Analytics meetup and showcases the evolution of the Chiasm data visualization platform.
---
```json
{
"title": "Chiasm By Example",
"author": "curran",
"source": "gist",
"description": "An interactive presentation framework that walks through the evolution of Chiasm, a data visualization platform. The page features a split-panel layout with a markdown outline on the left and an embedded iframe displaying example visualizations on the right. It includes a live webcam feed in the corner, showing the author presenting. The examples progress from early prototypes through Model.js to the Chiasm configuration editor, demonstrating various data visualization patterns including bar charts, line charts, linked views, and choropleth maps."
}
Title: Chiasm By Example
Author: Curran
Source: gist
This interactive presentation serves as a visual narrative for Curran's meetup talk, "Open Source Project: The Chiasm Data Visualization Platform." The page uses a split-screen layout: a left sidebar with a clickable outline of visualization milestones, and a right iframe that loads the selected example. The sidebar is generated from a Markdown file, with each entry linking to a live demo or project page. The examples trace the evolution of the author's work, from early HTML5 Canvas experiments to the model-driven architecture of Chiasm.js, including linked views, choropleths, and nested box layouts. A distinctive feature is a live webcam feed overlaid in the corner, making it a self-running presentation tool for the meetup talk. The whole thing acts as an interactive timeline and portfolio of data visualization projects, culminating in the Chiasm configuration editor.
If you could add a few more lines about how it looks / how it works that would be great. Mention the "split view" with an outline on the left and interactive iframe on the right. Mention the webcam. Also mention what the outline contains. Also mention the self-contained nature of a bl.ocks visualization (single HTML file), as this is the standard for the gallery.
Need to convert the file "outline.md" into a concise description.
Important: The main gist file is index.html, and it creates a split view with the outline on the left and an iframe on the right. The outline.md file drives the left side.
Title: Chiasm By Example
Use the description template provided by the user:
1. Title
2. Author(s)
3. Date (if not in the metadata, omit this field)
4. Summary paragraph
5. What the visualization does
6. How the visualization works
7. Data
8. Aesthetically Notable Aspects
The known metadata only includes source (gist), author (curran). Date not mentioned. Please infer from title or content if possible, but do not include if not known.
We are writing a concise description of a data-visualization example for a visualization gallery.
Infer details from the content. Be specific about what it contains and the way it was built.
The output format is markdown, with the following sections:
# Chiasm By Example
(summary paragraph)
## What it does
## How it works
## Data
## Aesthetics
The following metadata is known from the context. You can use it to ensure accuracy, but do not include it in the description:
title: Chiasm By Example
source: gist
author: curran
Files:
README.md This is a mini presentation framework for the meetup talk [SF Big Analytics - Open Source Project: The Chiasm Data Visualization Platform](http://www.meetup.com/SF-Big-Analytics/events/223048827/). For best viewing, [open in a new window](http://bl.ocks.org/curran/raw/16828b2187f6d06f77fd/).
Here's the [YouTube Video of this presentation: Story of Chiasm](https://youtu.be/Qos1QSIfZhE).
See also [github.com/chiasm-project/chiasm](https://github.com/chiasm-project/chiasm).
<!-- Start of SimpleHitCounter Code -->
<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1953332&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>
<!-- End of SimpleHitCounter Code -->
index.html <!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 http://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 http://www.html5rocks.com/en/tutorials/getusermedia/intro.html
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>
outline.md The story of the Chiasm project
* HTML5 Canvas Code Examples (August 2012)
* [Ingress Dashboard](http://curran.github.io/vis2013Tutorial/ingressDashboard.html) June 2013
* [Dashboard Scaffold](http://curran.github.io/dashboardScaffoldExample/) July 2013
* [Model.js Prototype](http://curran.github.io/phd/prototype/) March 2014
* [Model.js](http://curran.github.io/model/) April 2014
* [Linked Choropleth](http://curran.github.io/model/examples/d3LinkedChoropleth/) November 2014
* Chiasm v0.1.0 April 2015
This slide deck is for the meetup talk "SF Big Analytics - Open Source Project: The Chiasm Data Visualization Platform" given by Curran Kelleher on May 27, 2015.
The material in this presentation was adapted from a live streaming code demo. The final state is available [on GitHub](https://github.com/curran/chiasm-examples).
</pre>
</pre>
## Description
## 5.0
Please generate a short description of the data visualization example shown in the files. Use only facts that are directly supported by the given materials.
Your description should be a single paragraph, and should be about the visualization, not the presentation framework.
Some of the linked visualizations are:
- A demo of the Chiasm configuration editor and nested box layout.
- An example Chiasm configuration with a bar chart and line chart.
- Interactive visualizations built with Model.js, including linked scatter plots, bar charts, stacked area charts, parallel coordinates, and force-directed graphs.
- A set of HTML5 Canvas code examples.
- An "Ingress Dashboard" visualization.
The Chiasm project is a data visualization platform that allows for creating interactive, linked visualizations. This particular example appears to be a "Chiasm By Example" presentation that showcases a series of projects leading up to Chiasm. The layout is a split view, with a clickable outline on the left side and a content area on the right side.
The outline provides a historical journey through data visualization projects:
1. HTML5 Canvas Code Examples (August 2012) - early experiments with canvas
2. Ingress Dashboard - a game interface visualization
3. A dashboard scaffold example
4. PhD prototype - March 2014
5. Model.js - an April 2014 reactive data model library
6. Various examples including linked scatter plots, stacked area charts, parallel coordinates, and force-directed graphs
7. Chiasm.js v0.1.X with demos
The presentation includes a video element that captures the speaker's face from the camera, a navigation panel on the left, and iframe content on the right. The main point is to show the evolution of the Chiasm project and related examples.
Let's unpack the details of how the visualization is presented to the viewer.
What is the visualization?
The visualization is the evolving set of examples from an interactive talk called "Chiasm By Example." It is designed to showcase the Chiasm data visualization platform, which is a JavaScript library for creating interactive visualizations. The presentation uses a custom-built mini-framework to walk through the progression of examples, from simple HTML5 Canvas code examples to complex linked choropleth and other interactive visualizations.
How is the visualization presented?
The presentation is presented as an interactive slideshow. The main page splits the screen, with a left sidebar containing clickable links to different examples (loaded from a Markdown file), and the main content area showing the associated visualization in an iframe. A notable feature is that the presenter's face is displayed live from a webcam in a small video element, adding a personal touch. The user can click through the examples, which are displayed in the iframe, progressing from simpler to more complex visualizations.
Data: N/A
Key visual(s): The key visual is the progression of examples in the left sidebar, each with screenshots, that when clicked, load the interactive visualization in the right iframe. Examples include HTML5 Canvas snippets, a dashboard scaffold, Model.js examples (linked charts, stacked area, parallel coordinates, force directed graphs), and Chiasm.js examples with linked views and configuration.
Important visual elements:
* The key interactive view is the iframe on the right, which contains the live visualization.
* The left sidebar contains a list of examples, with text and screenshots, which can be clicked to navigate.
Design decided by: A narrow left sidebar with a scrollable list of example titles and thumbnails, and a large content area on the right that displays the interactive visualization.
Data:
This example is part of the "Chiasm" project, a reactive data visualization framework. Chiasm is designed to allow developers to create complex, interactive visualizations by declaring data dependencies and letting the framework handle the dynamic updates. This particular example serves as a presentation and tutorial for Chiasm, walking through a series of example visualizations. It was created for a meetup talk.
This specific example is "Chiasm By Example," a presentation framework used by Curran Kelleher for his SF Big Analytics meetup talk on the Chiasm data visualization platform. The "Chiasm" project is a reactive data-visualization framework. This gist is a self-contained interactive presentation that was used to demonstrate the evolution of Chiasm from its prototype stages to its current form. It includes a split view with an outline of links on the left and a dynamic iframe on the right that displays example visualizations, including the "Ingress Dashboard" image, an interactive dashboard prototype, and various Chiasm.js examples with live demos. The presentation also has a live video feed of the presenter in the bottom right corner.
Chiasm is a reactive data visualization framework that emphasizes a declarative approach to interactive data visualization. It was built with D3.js and uses a reactive dataflow to handle the complexity of interactions between components. It has since been superseded by "Vega" (also known as "vgl").
This example demonstrates several of Chiasm's capabilities, including:
* Describing a visualization as a dataflow graph.
* Creating new visualizations by composing existing ones.
* Data transformations using reusable operators.
* Live-coding visualizations using a combination of markdown and embedded HTML.
* Mixing charts into an interactive dashboard.
Chiasm is a data visualization framework that enables the construction of complex, interactive visualizations by declaring them declaratively. The code and documentation included in this gist show how to embed Chiasm visualizations inside a simple webpage with minimal code.
</br>
## Features
* **Highlight** shows `code` example.
* This is an example of <a href="http://github.com/curran/chiasm">Chiasm</a> by Curran.
* Created from a gist that is an interactive talk at [SF Big Analytics](http://www.meetup.com/SF-Big-Analytics/).
<!--
<div class="injected-desc">Chiasm By Example</div>
-->
<!--
This gist is from a live presentation by Curran at the [SF Big Analytics Meetup](http://www.meetup.com/SF-Big-Analytics/).
-->
</a> </div>
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"/></script>
## Analysis of the Visualization
Chiasm By Example is an interactive slide deck or "talking" visualization presented by Curran at a meetup. It's not a single standalone visualization but rather a collection of examples, projects, and links that serve as a chronological journey through the author's work, building up to the Chiasm library itself.
The page is structured as a presentation or an index, with a list of clickable items on the left (the outline) and a main content area on the right that displays the selected project (often in an iframe).
A notable feature is the inclusion of a **live video feed** (from the user's webcam) fixed in the bottom right corner. This suggests the page was used during a live presentation, showing the speaker's face while presenting.
### Visualizations and Links in the Outline:
* **HTML5 Canvas Code Examples** (August 2012): A collection of early examples using the Canvas API.
* **Ingress Dashboard**: A dashboard showing map data, likely for the game Ingress, displayed as a series of map images.
* **dashboardsScaffoldExample**: A project related to dashboard scaffolding.
* **A prototype of the author's PhD work** (March 2014).
* **Model.js** (April 2014): A data modeling library. This section includes examples such as:
* HTML Table
* Linked Scatter Plot & Bar Chart (Aug 14, 2014)
* Stacked Area Chart
* Parallel Coordinates
* Force Directed Graph
* Linked Choropleth (November 2014)
* A series of **thumbnails linking to various visualization examples** and demos.
* **Chiasm.js v0.1.X**: The main library being presented, with examples including:
* A demo of the Chiasm configuration editor and nested box layout.
* An example Chiasm configuration with a bar chart and line chart.
* A "kitchen sink" example.
### The presentation structure suggests the following "steps":
1. **HTML5 Canvas Examples**: A "How To" guide for basic canvas elements.
2. **Ingress Dashboard**: A real-world example of a complex, data-driven dashboard with maps.
3. **Dashboard Scaffold**: Another dashboard example, likely focusing on layout and UI.
4. **PhD Prototype**: A research prototype, probably a data visualization tool.
5. **Model.js**: A library for reactive data modeling, with several examples demonstrating its use in building various chart types.
6. **Chiasm.js**: A newer version of the library that combines reactive data with a visual configuration editor, leading to a final "kitchen sink" example that demonstrates many features at once.
This progression shows a clear evolution of the author's ideas from low-level examples to a fully-fledged reactive visualization library.
CCurran Kelleher
62% match