Graphical Perception

100%

Graphical Perception

✓ Published0🌍 Public

Last edited Sep 6, 2015

Created on Sep 5, 2015

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.

AI-generated description

Fundamental visualization techniques from the 1984 paper Graphical Perception: Theory, Experimentation, and Apllication to the Development of Graphical Methods

Chiasm is used to organize and display the images.

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

Similar vizzes

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

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

77% match

Loading thumbnail…

Charts, Charts, Charts

This visualization displays four distinct chart types side by side: a doughnut chart, bar chart, radar chart, and pie chart. Each chart presents a different dataset, such as airline passenger numbers, player skill ratings, and EU population figures. The code uses Chart.js 2.8.0 for rendering all charts onto canvas elements, while D3.js v7 handles loading CSV data from a GitHub gist. The bar chart and pie chart use hardcoded arrays, but the doughnut chart demonstrates fetching and parsing external CSV data.

Ddevvansh1997

74% match

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

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

73% match

Loading thumbnail…

LayoutChart

This example demonstrates a dashboard combining multiple interactive visualizations in a single resizable, draggable view using the `DockPanel` layout. It shows bar, pie, line, and hex bin charts alongside a layered map and a data table. The map layers several choropleth and thematic overlays—including countries, states, counties, GeoHash cells, a graticule, and a heat layer—using the `@hpcc-js/map` library. The code leverages APIs such as `ChoroplethCountries`, `GeoHash`, and `Layered`, with sample data derived from exam results and geographic counts.

GGordonSmith

73% match

Loading thumbnail…

Bootstrap Chiasm Example

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.

CCurran Kelleher

72% match

Loading thumbnail…

Document

The visualization generates a random sequence of twenty charts, cycling through line charts, pie charts, and bar charts. Each line chart displays four smoothed monotone curves with colored dots, while the pie chart and bar chart render categorical and time-based data. Built with D3 v4, the code uses `d3.line`, `d3.arc`, and `d3.axisBottom`/`d3.axisLeft` to produce SVG output. Data is procedurally generated using `d3.randomUniform` and `d3.range`, with each chart styled via inline attributes and CSS classes.

DDabbar

71% match