Chiasm Charts Example

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.

90% match

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.

87% match

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.

79% match

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.

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.

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.

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.

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.