Skip to main content
SimilarExport ZIP
100%

Chiasm Crossfilter Integration

✓ Published0🌍 Public
CCurran Kelleher
Last edited Sep 17, 2015
Created on Sep 14, 2015

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.

AI-generated description

An example set of coordinated views that use Crossfilter and Chiasm.

The idea with this is to introduce a general Crossfilter component that can be set up to work with any visualization components in Chiasm.

Draws from:

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

Similar vizzes

Loading thumbnail…

Chiasm Crossfilter Integration

This example shows a linked crossfilter dashboard with a Leaflet bubble map and a bar chart, driven by Chiasm’s reactive component architecture. Brushing the bar chart filters the map’s circles by date, using `ChiasmCrossfilter` to aggregate event data by month and latitude/longitude. D3 v3 renders the bar chart and map, while the layout plugin manages the vertical split and the dataset loader fetches the `events` data. Crossfilter 1.3.12 handles multidimensional filtering across the two visualizations.

Bbasskur
88% match
Loading thumbnail…

Chiasm Crossfilter Integration

This interactive visualization links a bubble map of migrant deaths and disappearances with a time-series bar chart of monthly totals. Brush selection on the bar chart filters events on the map using crossfilter, while map panning updates the chart’s filtered range. Built with Chiasm components, D3 v3, Leaflet, and crossfilter, it renders SVG bars, canvas tiles, and circle markers over map data loaded from CSV/JSON files. Movement is throttled and animated with transitions.

Mmnalk
78% match
Loading thumbnail…

Chiasm Crossfilter Integration

This example integrates a linked bubble map and temporal histogram to explore migrant deaths. The map, built with Leaflet, renders each death as a red circle, while the histogram uses D3 and Crossfilter to show the temporal distribution. Brushing a date range in the histogram filters the map, and panning or zooming the map updates the histogram, enabling interactive cross-filtering between the two views. The visualization combines D3, Leaflet, Crossfilter, and Chiasm to support these coordinated interactions, with panning and zooming on the map refining the time series and brushing on the time axis filtering map points.

CCurran Kelleher
77% 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
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
75% 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
75% 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
73% 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
71% match