This is a "kitchen sink" demo of the Chiasm visualization runtime engine. It contains various configurations that are loaded at runtime, showing various Chiasm plugins and how they can be used.
Press any key to stop the automated configuration changes.
This is a scatter plot of the Iris data set.
The purpose of this example is to show how to dynamically style D3 axes through JavaScript. This is a first step toward interactively configurable axis styles, and paves the way for creating fully stylized visualization modules that are purely JavaScript and require no addition of CSS tags on the page that will contain the visualization.
The code for this is derived from example 106 of the screencast Introduction to D3.js.
This is a scatter plot of the Iris data set.
The purpose of this example is to show one approach for using Model.js to make reusable visualization modules. This also introduces a way to isolate reusable reactive flows that are reusable between visualizations.
Notice that if you open this in a new window, it responds when you resize the browser window. This is coded in such a way that the visualization size can be controlled via CSS.
This example is a lead-in to The Reactivis Concept, which takes generalization of D3 patterns further.
The code for this is derived from example 106 of the screencast Introduction to D3.js.
This is a scatter plot of the Iris data set.
The purpose of this example is to show one approach to isolate reusable reactive flows that are reusable between visualizations, in an API called Reactivis, which stands for "reactive visualizations". This approach allows one to generalize D3 patterns ad infinitum.
Notice that if you open this in a new window, it responds when you resize the browser window. This is coded in such a way that the visualization size can be controlled via CSS.
The code for this is derived from example 106 of the screencast Introduction to D3.js.
A standalone D3 horizontal bar chart.
This is example 105 of the screencast Introduction to D3
This is a scatter plot of the Iris data set.
This is an experiment to see how far one can go in generalizing D3 visualization patterns. The main file of interest here is reactivis.js. For example, a single code path creates all scales (x, y, size, color) and sets up their reactive dependencies. This is a proof-of-concept for a larger scale project that aims to provide a base layer for many different D3 visualizations.
Notice that if you open this in a new window, it responds when you resize the browser window. This is coded in such a way that the visualization size can be controlled via CSS.
The code for this is derived from example 106 of the screencast Introduction to D3.js.
This is a simple example that uses Model.js to update a "lastName" property based on properties "firstName" and "lastName" using forms.
This example shows how to make an SVG element link to an external page.
This has the expected behavior of normal links when you open it in a new window. When clicked, the link will open in the current tab. When clicked while holding the meta key ("Command" on Macs and "Control" on Windows), the link will open in a new tab.
Clicking the rectangle doesn't work correctly in the bl.ocks viewer, because it is in an iFrame (open the debugging console to see the iFrame-related error), but this technique of adding links to visual marks should work fine in your own D3 projects.
This is addressing the thread href on d3 objects in the D3 Google Group.
This example shows how to make several SVG elements link to different things by constructing URLs from data properties. Each square links to a different Wikipedia page, and the link URL is generated dynamically from the data array.
This has the expected behavior of normal links when you open it in a new window. Clicking the rectangle doesn't work correctly in the bl.ocks viewer, because it is in an iFrame (open the debugging console to see the iFrame-related error), but this technique of adding links to visual marks should work fine in your own D3 projects.
This is addressing the thread Hyperlinks - error "undefined"/ NaN in the D3 Google Group.
A wave simulation using HTML5 Canvas. Click on it!
