Chiasm Crossfilter Integration

100%

Chiasm Crossfilter Integration

✓ Published0🌍 Public

Last edited Jan 7, 2020

Created on Jan 7, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Chiasm Crossfilter Integration

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.

CCurran Kelleher

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

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

81% match

Loading thumbnail…

HTML Starter

This example demonstrates a multi-chart interactive dashboard for exploring vehicle traffic data from the Lekagul sensor dataset. It uses crossfilter to enable linked filtering between a time series chart, two bar charts, and a scatter plot, all rendered as SVG. The time series chart provides brush-based time range selection, while bar charts for car type and gate name respond to mouse hover events. The visualization is built with D3.js and leverages its modular chart functions including `d3.brushX`, `d3.axisBottom`, and `d3.scaleBand` to coordinate user interactions across all views.

SSarahKiyani

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

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

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

69% match

Loading thumbnail…

dc.js Experiment

This dc.js experiment uses a crossfilter to coordinate multiple linked charts—bar charts, a line chart, a row chart, and a pie chart—to explore a dataset of 2013 earthquakes from New Zealand's GeoNet service. The visualization includes a data table and a filter count, with all charts updating dynamically to reflect selections. The dimensions (magnitude, depth, time of day, day of week, and island location) are defined via `crossfilter` and used by `dc.barChart`, `dc.lineChart`, `dc.rowChart`, and `dc.pieChart`. Data loading and parsing rely on `d3.csv` and `d3.time.format`, while charts render as SVG elements.

Dd3noob

68% match