Chiasm Foundation

100%

Chiasm Foundation

✓ Published0🌍 Public

Last edited Sep 9, 2015

Created on Sep 1, 2015

This example showcases the Chiasm foundation by composing three interactive visualization components within a nested layout. Using SVG, a dummy visualization component renders colored rectangles with draggable X patterns that dynamically adjust stroke width via mouse interaction. An HTML5 Canvas-based wave simulation responds to clicks, while the layout plugin arranges all components in a flexible vertical/horizontal nested structure. A links plugin connects the line width of component B to component C, demonstrating reactive dataflow between components. The page is set against a black background with the visualization container filling the viewport, and all components are coordinated through Chiasm's functional reactive model.

AI-generated description

An example that demonstrates basic features of Chiasm.

The Chiasm plugins demonstrated here are

dummyVis A placeholder for D3-based visualizations that use SVG.
wave An example plugin that uses HTML5 Canvas for rendering.
layout A plugin for nested box layout of arbitrary components.
links A plugin for connecting components together.

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1948658&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

Similar vizzes

Loading thumbnail…

Chiasm Boilerplate

This example demonstrates a minimal Chiasm application with two custom components: a colored rectangle and a download button. The colored rectangle component, defined in `coloredRectangle.js`, uses D3.js to draw an SVG rectangle whose fill color changes to a random RGB value on click. The download button component, based on the rectangle, triggers SVG or PNG export of the visualization using the `svgsaver` library. The `chiasm-layout` plugin arranges these components within a nested box layout, enabling dynamic resizing and positioning. The page is styled with a black background and a white container with a fixed black border, showcasing how Chiasm can compose reusable, interactive data-driven components. The example is intended as a starting point for building custom Chiasm components and applications, and includes the necessary dependencies for a functional reactive model, D3.js, and the Chiasm framework.

HHypercubed

82% match

Loading thumbnail…

Chiasm Boilerplate

This example shows a Chiasm application that divides the screen into a hierarchical grid of colored rectangles, each of which changes color when clicked. The Chiasm framework coordinates the layout, while the `chiasm-layout` plugin computes nested boxes and the custom `coloredRectangle` component uses D3.js to render and transition rectangle fills. The code sets up five interactive rectangles in a treemap-like arrangement, with each click triggering a smooth color transition via D3's `transition().duration(500)`.

CCurran Kelleher

79% match

Loading thumbnail…

Chiasm Charts Example

This example demonstrates the chiasm-charts package (v0.1.0), rendered with SVG and animation. It shows a bar chart and a line chart side by side, each with its own data loaded from CSV files. The visualizations support interactive editing—users can drag the chart margins to adjust the layout. The charts are part of the Chiasm Project, a reactive visualization framework, and this example highlights early-stage functionality with known limitations around build tooling and component registration.

CCurran Kelleher

78% match

Loading thumbnail…

Chiasm Charts Example

The Chiasm Charts example presents a grid of multiple coordinated visualizations—bar chart, scatter plots, box plot, heatmaps, and a line chart—arranged in a vertical layout. Built with the Chiasm framework, it links data loaders and chart components via declarative JSON state. Using d3-scale for axes and d3-time for temporal binning, it renders interactive SVG animations from CSV datasets like the Iris flower measurements and a time-series of temperatures.

CCurran Kelleher

78% match

Loading thumbnail…

Fundamental Visualizations

This example showcases six fundamental visualization techniques—bar charts, line charts, pie charts, scatter plots, and choropleths—implemented as reusable Chiasm plugins with D3.js. Each chart is an independent component with no shared dependencies, demonstrating how common visualization methods can be modularized and combined in a single dashboard layout. The bar charts support both vertical and horizontal orientations with configurable margins and spacing, the line chart uses historical trade data, the pie and donut charts show categorical proportions, the scatter plot uses Fisher's Iris data, and the choropleth displays US demographic data. The design emphasizes encapsulation and simplicity, with duplicated styling code across components to illustrate a standalone-component architecture. This serves as a foundation for building more advanced visualizations with axes, labels, and interactions.

CCurran Kelleher

77% match

Loading thumbnail…

Visualization Editor

This animated demo of Chiasm, a visualization runtime engine, cycles through configurations that combine a bar chart and a line chart in a split view, alongside a live configuration editor. The interactive editor lets you modify chart properties—such as data bindings, axes, colors, and titles—and see the updates render instantly. Built with reusable D3-based plugins, the example demonstrates how different chart types and data sources can be composed dynamically, with the bar chart plotting letter frequencies and the line chart showing temperature over time.

CCurran Kelleher

77% match

Loading thumbnail…

Chiasm Crossfilter Integration

This example demonstrates coordinated views using Crossfilter and Chiasm, where user interactions with a bar chart brush filter the data across multiple visualizations. The bar chart plugin, built with D3, supports configurable margins, titles, and brush-based filtering. The ChiasmCrossfilter component bridges Chiasm and Crossfilter, enabling dynamic data grouping and aggregation for linked views. Rendered in SVG, this setup allows flexible, reusable crossfiltering for any visualization component within the Chiasm ecosystem.

CCurran Kelleher

75% match

Loading thumbnail…

Example

This example demonstrates how to use Chiasm and reactive mixins to compose interactive bar chart and line chart visualizations side by side on a single page. The bar chart renders categorical data from a CSV file, mapping the `name` column to the x-axis and the `amount` column to the y-axis, while the line chart plots time-series temperature data over time. Both visualizations are built using reusable mixins for axes, scales, and labels, and they update dynamically in response to changes in their data bindings. The SVG-based rendering animates transitions when data or layout properties change, showcasing the power of reactive programming in data visualization.

CCurran Kelleher

75% match