LayoutChart

100%

✓ Published0🌍 Public

Last edited Aug 9, 2018

Created on Jun 19, 2017

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.

AI-generated description

Tutorial 7: Layout

Non trivial example using the "Dock Panel" and "Layered Map" layouts to display many visualizations in a resizable and draggable view.

apache-2.0 Licensed

Similar vizzes

Loading thumbnail…

Multi Chart

This example shows a multi chart interface that lets users switch between twelve chart types—including Area, Bar, Bubble, Column, Pie, and Radar—for the same five-subject score dataset. A dropdown menu triggers a re-render, clearing the previous chart and instantiating a new widget from the `@hpcc-js/chart` package via dynamic property access. The code uses `d3Select` from `d3-selection` to clear the placeholder, then applies columns and data to the selected chart constructor before calling `.render()`. The default view is a Column chart.

GGordonSmith

75% match

Loading thumbnail…

Dashy Generated Dashboard 1

This dashboard presents a multi-panel view of people and account data, combining a US state choropleth, a gender bubble chart, a customer table, and an account summary line chart. It uses the HPCC-js composite, marshaller, and map libraries, with a RoxieRequest and WUResult fetching data from a remote ECL server. Linked selections filter results across panels, while a resizable layout arranges the widgets.

GGordonSmith

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

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

Static Loader

This example demonstrates a static dashboard of US state error data, presenting a choropleth map, pie chart, and three data tables that update based on user selections. The visualization is built using the HPCC Systems visualization framework, loaded via a persist string that specifies version 1.10.6. The code constructs multiple interactive views—a map using the CHORO type, a pie chart, and tables—all driven by databomb data sources. It employs the `hpcc-viz.js` library from the specified URL to render the dashboard components.

GGordonSmith

72% match

Loading thumbnail…

DashBoard

This dashboard example shows how linked views can be used for interactive data exploration. A bar chart of state frequencies and a pie chart with a legend are initially displayed together, and hovering over a bar in the histogram updates the pie chart and legend to show that state's breakdown by low, mid, and high segments. Conversely, hovering over a pie slice triggers a transition that updates the histogram to reflect the frequencies of that segment across the states. The code uses D3 v3 with an SVG rendering approach, relying on d3.scale.ordinal, d3.scale.linear, and transition methods to animate the changes.

KKirun1

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

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

70% match