Graph Demo 2

100%

✓ Published0🌍 Public

Last edited Apr 13, 2016

Created on Apr 13, 2016

This example demonstrates the HPCC Platform Graph Widget’s ability to use any widget as a graph vertex, showing diverse node types like shapes, text boxes, icons, menus, and even an embedded column chart. The graph supports multiple layouts (Hierarchy, Force Directed, Spring, Circle) and scaling options via dropdown menus. Built with the HPCC viz library, it uses the `Graph`, `Vertex`, and `Edge` APIs, along with common widgets like `FAChar` and `ResizeSurface`, to assemble a connected network of interactive elements.

AI-generated description

HPCC Platform Graph Widget - Using any widget as a vertex.

Similar vizzes

Loading thumbnail…

Graph Demo

This interactive graph visualization displays the character relationships from Les Misérables as a node-link diagram. Users can switch between Force Directed, Spring, Circle, and Hierarchy layouts, and adjust the rendering scale. Built with the HPCC Platform’s `hpcc-viz` library, it uses `Graph`, `Vertex`, and `Edge` objects to map characters and their connections, with color-coded groups and random annotation icons. The example showcases the library’s interactive capabilities, including highlight on hover and layout options.

GGordonSmith

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

68% match

Loading thumbnail…

A8 - Graph Visualization in D3

This example presents a graph visualization as a series of four interactive demonstrations. It first shows a node-link diagram using a force-directed layout, then compares it to an adjacency matrix representation. The visualization then implements edge-bundling for the node-link diagram and concludes with a slider that allows users to modulate the amount of tension in the edge bundling. The examples use D3.js and are embedded from VizHub, with each part linked to its source code.

DDuc Pham

65% match

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

64% match

Loading thumbnail…

Pie Chart

This example demonstrates a basic pie chart visualization using the `@hpcc-js/chart` library, specifically the `Pie` widget. It displays subject results across five categories—English, Irish, Math, Geography, and Science—with the chart rendering the data as proportional slices. The code instantiates the `Pie` widget, targets the `placeholder` div, and supplies data through the `columns` and `data` methods, which define the spreadsheet-like structure. The visualization is rendered entirely in the browser via `render()`, with styling handled by the included CSS.

GGordonSmith

64% match

Loading thumbnail…

Hello VizHub

This example shows an interactive dendrogram layout of a hierarchical data structure, rendered as SVG circles connected by curved paths. Users can click nodes to inspect them, press Shift-click to add random "florps" children, or Cmd-click to delete entire subtrees, triggering re-renders that change link and node colors. The code relies on d3.hierarchy, d3.cluster, d3.zoom, and the d3 v5 event handling, with data defined as a plain JavaScript object and layout computed at 500x900 pixels.

MMatt Morris

64% match

Loading thumbnail…

Column Chart

This example demonstrates a column chart displaying five school subjects and their corresponding exam results. Built with the @hpcc-js/chart framework, it uses a `Column` widget imported from the library to render the visualization. The code defines columns and data via the widget’s `.columns()` and `.data()` methods, then targets an HTML placeholder and calls `.render()`. While the data is hardcoded in the script, the approach highlights how switching from a Pie to a Column chart requires only a single class change, showcasing the framework’s interchangeable visualization components.

GGordonSmith

63% match

Loading thumbnail…

Hamiltonian Graph Builder

This interactive tool visualizes the construction of cubic Hamiltonian graphs from LCF notation, a compact representation for such graphs. Users can input or edit an LCF code, and the visualization animates the step-by-step building of the graph through a force-directed layout. The interface uses the Ember.js framework for routing and state management, while the rendering relies on D3.js, specifically `d3.layout.Force` for the physics simulation and SVG shapes for vertices and edges. The code also incorporates jQuery for input handling and URL parameter parsing to share specific graph configurations.

TThanaporn-sk

62% match