Chiasm Charts Example

100%

Chiasm Charts Example

✓ Published0🌍 Public

Last edited Dec 10, 2015

Created on Dec 10, 2015

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.

AI-generated description

This release of chiasm-charts adds dynamic scale types chat change based on the input data. This allows, for example, ordinal scales on a scatter plot.

Also, the axis labels are now relative to the outer box, rather than relative to the margin. This allows the user to interactively adjust the margin such that axis tick labels do not overlap with the axis labels.

Color options have also been included in the bar chart, and a new "backgroundColor" mixin has been introduced.

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

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

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

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

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

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

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

75% match

Loading thumbnail…

Magic Bar Chart

This interactive bar chart, built with SVG and powered by a Chiasm + AngularJS architecture, lets users explore UCI Machine Learning datasets. Users select a dataset, choose a column to visualize, and adjust orientation and color via linked widgets. For numeric columns, values are binned into histograms; categorical columns produce bars for each unique value. The visualization reads data such as the adult census data, illustrating that changing the data or encoding triggers declarative configuration updates that the Chiasm runtime applies by diffing against the previous state. Note that tick labels may overlap on dense axes.

CCurran Kelleher

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

73% match