Bootstrap Chiasm Example

100%

Bootstrap Chiasm Example

✓ Published0🌍 Public

Last edited Sep 10, 2015

Created on Sep 10, 2015

This example demonstrates a responsive dashboard layout that arranges four placeholder visualization containers—a scatter plot, bar chart, pie chart, and line chart—using Bootstrap’s grid system. The code relies on jQuery and Bootstrap’s CSS and JavaScript components to structure the fluid container and column spans, while custom styling via CSS classes gives each container a green rounded background. The containers are static placeholders with centered text labels, showing how Chiasm or other visualization libraries could later populate them. The layout adapts across screen sizes, with the first row splitting three charts into equal columns and the second row spanning the full width for the line chart.

AI-generated description

hello markdown

Similar vizzes

Loading thumbnail…

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.

CCurran Kelleher

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

74% match

Loading thumbnail…

Graphical Perception

This example displays a grid of eight static charts—bar, pie, line, scatter, choropleth, and others—derived from the 1984 Cleveland and McGill paper on graphical perception. It uses the Chiasm layout engine to arrange the images in a responsive grid, with each chart rendered via a custom `Image` plugin that sets an `<img>` tag’s `src` attribute to a corresponding PNG file. The code leverages D3.js for DOM manipulation and the Chiasm component API for reactive data flow. The visualization demonstrates how classic chart types encode data, without interactive data handling.

CCurran Kelleher

72% match

Loading thumbnail…

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.

CCurran Kelleher

72% match

Loading thumbnail…

Chiasm Boilerplate

This example shows a Chiasm application that divides the screen into a hierarchical grid of colored rectangles, each of which changes color when clicked. The Chiasm framework coordinates the layout, while the `chiasm-layout` plugin computes nested boxes and the custom `coloredRectangle` component uses D3.js to render and transition rectangle fills. The code sets up five interactive rectangles in a treemap-like arrangement, with each click triggering a smooth color transition via D3's `transition().duration(500)`.

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

71% match

Loading thumbnail…

grids 2

This example presents a dashboard layout with distinct regions for a map, table, slider, and hierarchical data, though the visible code only establishes the Bootstrap-based grid structure and an empty SVG canvas. The page uses Bootstrap 4 for responsive column and row sizing, with a fixed full-height container and color-coded placeholders. D3 v5 is imported and used solely to set the SVG’s width and height based on the document’s client dimensions. The index.js file applies these attributes without additional data binding or rendering, leaving the actual visualizations unimplemented.

AAnimesh Nautiyal

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

71% match