Chiasm Boilerplate
This example demonstrates a minimal setup for building interactive data visualizations with Chiasm, a reactive data-visualization library. The page loads a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with axis labels for both dimensions. The visualization is constructed declaratively: a Chiasm configuration wires together a layout component, a dataset loader that reads `iris.csv`, a scatter plot component, and a links component that binds the loaded dataset to the plot. The page includes custom CSS for axis styling and labels, and the container fills the viewport with a black border. The code also logs the scatter plot component and dataset to the console for debugging, and includes a commented-out simpler configuration showing a blue rectangle, illustrating how to swap between different visualizations. This example serves as a minimal starting point for building interactive data visualizations with Chiasm, demonstrating the declarative configuration of data flow and component wiring.# Chiasm Boilerplate
A minimal yet complete example of building a reactive data visualization with the Chiasm library. This boilerplate demonstrates how to create a scatter plot of the classic Iris dataset using Chiasm's component-based architecture.
## Visual Overview
The visualization displays a scatter plot with **sepal length** on the x-axis and **petal length** on the y-axis, rendered from the Iris flower dataset. Points are plotted as small circles within a clean white plotting area framed by a black page background.
## Technical Implementation
The example showcases Chiasm's declarative configuration model, where components are wired together through data bindings rather than imperative code. The architecture demonstrates:
1. **Modular component registration** - Plugins for layout, data loading, links, and scatter plot are registered with the Chiasm instance
2. **Declarative configuration** - A JSON configuration defines component instances and their state, including the scatter plot's axis labels, data columns, and margin settings
3. **Reactive data flow** - The `links` component connects the dataset loader output to the scatter plot input
4. **Separation of concerns** - Layout, data loading, and visualization components operate independently
The visualization displays the classic Iris dataset with sepal length on the x-axis and petal length on the y-axis. Both axes are labeled, with "Sepal Length" and "Petal Length" text annotations. The scatter plot uses the Chiasm framework's reactive data flow, where changes to the dataset automatically propagate through the linked components.
The example serves as a minimal template for building Chiasm-based visualizations, showing how to compose a scatter plot from reusable components using a declarative configuration. It also demonstrates how to customize axis labels and offsets. A custom CSS class provides styling for axis labels with font size and text alignment. The page loads required libraries from a CDN and initializes the visualization within a container div that has a black border. This example was created by Curran Kelleher, and the code is available under the MIT License.# Chiasm Boilerplate
This example demonstrates a minimal scatter plot visualization built using the Chiasm reactive data visualization framework. The visualization displays the classic Iris dataset, plotting sepal length against petal length.
## Key Features
- **Framework**: Chiasm, a reactive visualization composition library built on D3
- **Data**: The well-known Iris flower dataset with measurements for 150 samples
- **Visualization**: A scatter plot with configurable axes, showing the relationship between sepal length (x-axis) and petal length (y-axis)
- **Architecture**: Demonstrates Chiasm's declarative configuration approach, where components are wired together using data bindings
- **Components**: Uses layout, dataset loader, scatter plot, and reactive links components from the Chiasm ecosystem
The example showcases how Chiasm enables declarative composition of visualization components, with the configuration specifying the data flow from the dataset loader through to the scatter plot component, including axis labels and margins. The boilerplate provides a starting point for building interactive data visualizations using the Chiasm framework, which is built on top of D3 and uses a reactive data-flow architecture.# Chiasm Boilerplate
This example demonstrates a minimal **Chiasm** application—a reactive, component-based architecture for building data visualizations. The visualization displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis.
## Key Features
The application showcases Chiasm's declarative configuration model, where components are wired together through data bindings rather than imperative code. The architecture consists of four interconnected components:
- **Layout** - Manages the DOM container and arranges visualization components
- **Dataset Loader** - Loads the Iris dataset from a CSV file
- **Scatter Plot** - Renders the visualization with custom axis labels and margins
- **Links** - Declaratively binds the loaded dataset to the scatter plot component
## Technical Implementation
The visualization leverages Chiasm's reactive dataflow architecture, where:
- The layout component creates a full-page container with a black border
- The dataset loader asynchronously fetches the Iris flower dataset
- The scatter plot component renders sepal length against petal length
- Data flows through declarative bindings between components using the "links" plugin
The example demonstrates how to compose a complete interactive visualization from modular, reusable components using Chiasm's dependency injection system. The scatter plot maps the classic Iris dataset, displaying sepal length on the x-axis and petal length on the y-axis with custom axis labels.
This boilerplate provides a foundation for building more complex Chiasm-based visualizations by showing the minimal setup required to connect data loading, layout, and visualization components.# Chiasm Boilerplate
This example demonstrates a minimal yet complete setup for creating interactive data visualizations using the **Chiasm** reactive visualization framework. It showcases how to compose modular visualization components declaratively through a JSON configuration, with the classic Iris dataset loaded from CSV.
## What It Shows
The visualization renders a **scatter plot** of the Iris flower dataset, plotting sepal length against petal length. What makes this example particularly valuable is its architecture: it illustrates the Chiasm pattern of separating concerns into reusable, configurable components that communicate through reactive data bindings.
The page loads the entire Chiasm stack—including the core library, layout manager, dataset loader, data-binding links, and chart components—then wires them together declaratively. A scatter plot component is configured to display the data, with custom axis labels ("Sepal Length" and "Petal Length") and margins. The dataset loader loads the Iris dataset, and the links component binds the loaded data to the scatter plot component. The example also includes logging of the dataset when it becomes available, and a simpler commented-out alternative configuration demonstrates the modular nature of the system.
This boilerplate showcases the Chiasm architecture, where the entire visualization is declared as a configuration object that specifies component instances and their relationships, and the framework handles the reactive data flow between them. It uses a layout plugin to manage the DOM container, a dataset loader to fetch the Iris CSV data, a scatter plot component for rendering, and a links plugin to wire the dataset to the visualization. The end result is an interactive scatter plot of the classic Iris dataset that can be reconfigured without writing additional imperative code. The code also includes styling for the axes and container.
**Chiasm Boilerplate** is a demonstration of the Chiasm reactive visualization framework, showcasing a minimal yet complete setup for building interactive data visualizations. This example uses a scatter plot of the classic Iris dataset to illustrate the core concepts of the Chiasm architecture.
The visualization is constructed declaratively using a JSON configuration that wires together Chiasm's modular components. A layout plugin manages the container, a dataset loader fetches the Iris flower measurements (sepal length, sepal width, petal length, petal width, and species), and a scatter plot component visualizes the data with configurable axis labels, margins, and data column mappings. The `links` plugin establishes a reactive data flow, automatically connecting the dataset to the visualization.
The key strength of this example is its demonstration of the Chiasm architecture: a clear separation between visualization components and the data flow that connects them. This is achieved through a declarative configuration that specifies the plugin instances and their bindings, making it easy to modify the visualization's structure, data source, or styling without touching the underlying code.
The visualization uses D3.js for rendering and the Iris dataset as the data source, showcasing a scatter plot with sepal length on the x-axis and petal length on the y-axis. Custom CSS styles axis labels and lines for a clean presentation. The example includes a minimal HTML container and JavaScript that wires together the components, illustrating how Chiasm enables the composition of reusable visualization components with a clean separation of concerns.# Chiasm Boilerplate
This example demonstrates a minimal setup for building reactive data visualizations using the Chiasm architecture. It creates an interactive scatter plot of the classic Iris dataset, showing sepal length against petal length.
The visualization is constructed by composing several reusable Chiasm components through a declarative JSON configuration. A dataset loader component fetches the Iris flower measurements from a CSV file, a scatter plot component renders the data, and a layout component positions the visualization within the page. Links component wires the data flow between them.
The scatter plot displays sepal length on the x-axis and petal length on the y-axis, with axis labels customized. The HTML page includes custom CSS for styling the axes and labels. The example demonstrates the fundamental Chiasm pattern of declarative configuration, component composition, and reactive data flow.
The example serves as a boilerplate showing how to set up a Chiasm application with multiple plugins and a data-driven visualization using the well-known Iris dataset. It includes a simple hit counter for tracking page views. The code is MIT licensed.
CCurran Kelleher
70% match