Example

100%

✓ Published0🌍 Public

Last edited Dec 4, 2015

Created on Oct 10, 2015

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.

AI-generated description

This is one example from the screencast Introduction to Chiasm. It shows how you can use "reactive mixins" to encapsulate chunks of dynamic behavior in data visualizations, and use Chiasm to put multiple visualizations on the same page.

Check out the resize behavior.

This example was the starting point for chiasm-charts, a collection of reactive mixins and reusable visualizations including bar chart, histogram, scatter plot, line chart, and box plot.

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

MIT Licensed

Similar vizzes

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

82% match

Loading thumbnail…

Chiasm Charts Example

This example demonstrates the Chiasm Charts library’s ability to dynamically adjust scale types based on input data, such as switching between linear and ordinal scales in scatter plots. Axis labels are positioned relative to the outer container, allowing interactive margin adjustments to prevent overlapping tick labels. The bar chart includes configurable color options and a new background color mixin. The visualization is rendered with SVG and supports animation, as shown in the provided bar chart and Iris dataset examples.

CCurran Kelleher

79% 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

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…

Magic Bar Chart

This example demonstrates a Magic Bar Chart, a reusable visualization component built with Chiasm and bundled with Browserify for production use. The chart animates the transition of bar positions and heights based on changing data, rendering smooth, dynamic updates with SVG. The visualization reads from the `adult.csv` dataset, which contains demographic records including age, education, occupation, and income category. The chart likely groups or aggregates this data by income category and animates between different categorical groupings (such as sex, race, or workclass) using Chiasm's reactive dataflow. The SVG-based rendering and animation make the bar chart transitions fluid, providing an interactive and engaging way to explore the dataset. The example demonstrates how Chiasm can be used to build a reusable, production-ready data visualization component.# Magic Bar Chart This example demonstrates a reusable bar chart built with Chiasm and bundled using Browserify. It visualizes the UCI Adult dataset, showing income distributions across demographic categories. The chart uses animated SVG transitions to smoothly morph between different data groupings, making it easy to compare income patterns across attributes like education, occupation, and native country. The visualization showcases how Chiasm's reactive dataflow architecture enables clean, maintainable visualization code in production environments. The "magic" refers to the chart's ability to automatically update and animate when the underlying data or configuration changes. ---

CCurran Kelleher

77% match

Loading thumbnail…

Visualization Editor

This example demonstrates the Chiasm visualization runtime engine, which enables live configuration of visualizations through an interactive editor. The layout divides the screen between a configuration editor and two charts—a bar chart and a line chart—displaying data from CSV files. Users can click on numbers and colors in the editor to open interactive widgets that adjust the visual properties of the charts in real time. The runtime uses a reactive data model, where changes to the configuration JSON propagate to the visualizations instantly. The bar chart shows categorical frequencies from `simpleBars.csv`, while the line chart plots temperature over time from `simpleTime.csv`, styled with axes from a shared stylesheet. This setup demonstrates how Chiasm's reactive architecture enables dynamic, code-free customization of visualizations.

CCurran Kelleher

77% match

Loading thumbnail…

Bootstrap Chiasm Example

This example demonstrates how to embed multiple interactive visualizations—a bar chart, line chart, scatter plot, and pie chart—into a webpage whose layout is managed by Bootstrap’s grid system. Each chart is wrapped in its own Chiasm component, instantiated from the `barChart.js`, `lineChart.js`, and other visualization modules, and injected into the corresponding DIVs defined in `index.html`. The page uses D3.js for rendering and animation, with Chiasm managing reactive data flow so that updates to shared datasets propagate automatically to all charts. The Bootstrap grid provides a responsive layout: three visualizations sit side-by-side in one row, with a full-width line chart below. The example demonstrates how to integrate multiple Chiasm instances with an external CSS framework, combining the strengths of Bootstrap’s layout with D3’s data-driven rendering.

CCurran Kelleher

76% match

Loading thumbnail…

Chiasm Foundation

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.

CCurran Kelleher

75% match