Skip to main content
Log in
G

GordonSmith

@GordonSmith·27 public vizzes

Loading thumbnail…

Observable JS Demo

This demo shows the Observable JS runtime running inside a plain HTML page using the `@hpcc-js/observable-md` library. It loads a `.ojs` file containing markdown, a generator that emits a ticking counter at 1-second intervals, and an imported brushable scatterplot from `@d3/brushable-scatterplot`. The user’s selection on that plot is displayed as a live JSON preview. The page resizes dynamically via the `Observable` API’s `resize()` and `lazyRender()` methods.

Jul 5, 2020
Loading thumbnail…

Workunit Irish Choropleth

This example visualizes the gender population imbalance across Irish counties as a choropleth map. It shows the percentage difference between females and males for each region using a diverging color palette, with the Republic of Ireland layered alongside Northern Ireland. The map is built with the `@hpcc-js/map` library’s `Layered`, `TopoJSONChoropleth`, and `topoJsonFolder` components, using a Mercator projection. Population data comes from a HPCC Platform workunit fetched via `Workunit.attach` and `fetchResults`, with colors balanced around zero using explicit min/max values.

Oct 21, 2018
Loading thumbnail…

Workunit Column Chart

This example demonstrates a column chart that visualizes Irish population data by location, showing male, female, and total population figures. The chart is dynamically populated by connecting to an HPCC Platform Workunit and fetching its results. Using the `Column` widget from `@hpcc-js/chart` and the `Workunit` class from `@hpcc-js/comms`, the example attaches to a specific workunit, retrieves result rows via the `fetchResults()` and `fetchRows()` Promise-based API, then maps the row data into chart-compatible arrays before rendering the final visualization.

Oct 21, 2018
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.

Aug 9, 2018
Loading thumbnail…

Roxie Column Chart

This example shows population data for Irish counties in an interactive column chart. A dropdown menu allows selection of male, female, or total population figures. The visualization uses the HPCC Platform's Roxie query service, fetching data via the `Query.attach` and `query.submit` APIs from `@hpcc-js/comms`. The retrieved rows are mapped into a data array and rendered using the `Column` chart component from `@hpcc-js/chart`.

Aug 9, 2018
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.

Aug 8, 2018
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.

Aug 8, 2018
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.

Aug 8, 2018
Loading thumbnail…

Hello World

This example displays a simple "Hello World!" message using the `TextBox` widget from the `@hpcc-js/common` library. It demonstrates the basic pattern of importing a visualization class, setting its published properties—such as the target HTML element and text content—and rendering it. The code uses `System.import` via the GetLibs module loader to load the JavaScript, while the widget is styled through a separate CSS file that fills the viewport. No external data source is involved; the text is hardcoded in the widget configuration.

Aug 8, 2018
Loading thumbnail…

JSON DGrid

This example displays a small dataset of twenty JSON objects, each with a "number" and "letter" field, in a tabular grid where rows group by the numeric field and columns correspond to the letters. The visualization uses the HPCC Systems JavaScript libraries, specifically the `@hpcc-js/dgrid` package's `Table` component, to render the data. It loads the raw JSON array from a variable named `WUResultResponse` and passes it to the `importJSON` method, then targets a placeholder `<div>` element for output via the `.target()` and `.render()` calls.

Feb 27, 2018
Loading thumbnail…

LogicalFile Fetch

This example demonstrates asynchronous data fetching from multiple HPCC Systems endpoints and external APIs, logging each response directly into the DOM. It uses the `@hpcc-js/comms` library to instantiate `Result`, `Workunit`, `ESPConnection`, and `Connection` objects, retrieving logical file schemas and row batches with `fetchXMLSchema` and `fetchRows`, querying completed workunits, and sending ESP requests via `DFUQuery`. Results from Google Maps geocoding are also included, with all output rendered as plain text in the placeholder `div`.

Jan 30, 2018
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.

Dec 20, 2017
Loading thumbnail…

HPCC WU Hosted Image

This example demonstrates how to embed a base64-encoded PNG image hosted by an HPCC cluster directly into an HTML page. The visualization shows a single image result retrieved from a workunit’s result set. It uses the `@hpcc-js/comms` library’s `Workunit.attach` method to connect to a remote HPCC server and `fetchResults` with `fetchRows` to obtain the image data. The fetched base64 string is then assigned to an `<img>` element’s `src` attribute via a `data:image/png;base64` URI.

Dec 10, 2017
Loading thumbnail…

Google Map + D3 Generated Layers

This example demonstrates a Google Map with multiple D3-generated layers overlaid, including choropleth countries, GeoHash grid cells, a heat map, a graph, and a graticule. The GMapLayered widget composites these layers, with countries colored by weight using a palette and GeoHash data shown as colored tiles. The visualization also renders a heat map and a graph of weighted points, all anchored to geographic coordinates. The code uses the hpcc-systems Visualization library’s map components to manage layer rendering and interaction.

Aug 31, 2017
Loading thumbnail…

Column Chart

This column chart displays Irish population data broken down by county and gender, with interactive click alerts showing the selected column and row values. The example uses the HPCC Systems visualization library, loading the `Column` chart module via `require(["src/chart/Column"])` and binding data through the `.columns()` and `.data()` methods. It renders through the `.target()` method into a full-height placeholder div, with click events handled by the `.on("click", ...)` callback. The chart visualizes census figures for males, females, and total population across all Irish counties.

Aug 31, 2016
Loading thumbnail…

Static Loader II

This example demonstrates a dashboard visualization framework’s ability to load an older version (1.12.4) of the HPCC Systems visualization library while still running a dashboard definition built with version 1.14.0-rc7. It shows a choropleth map, pie chart, and multiple detail tables that update based on selections. The visualization uses the `hpcc-viz.js` library, with data embedded as a databomb containing aggregated error counts by state and error code.

Jul 25, 2016
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.

Jul 25, 2016
Loading thumbnail…

Dashboard I

This interactive dashboard explores healthcare data breach submissions, showing how incident counts vary by state, breach type, and submission quarter, with a time-series of affected individuals. The interface uses a choropleth map, bar chart, pie chart, and tabbed line/table views. Selections in any chart filter the others, updating the visualizations via the `d3.nest()` API. The dashboard is built with the HPCC Systems visualization library, including `ChoroplethStates`, `Bar`, `Pie`, `Line`, `Table`, and `Grid` components.

Apr 20, 2016
Loading thumbnail…

Graph Demo 2

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.

Apr 13, 2016
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.

Apr 13, 2016
Loading thumbnail…

British Isles

This example combines multiple choropleth layers into a single map of the British Isles, rendered with an orthographic projection centered near the Irish Sea. It uses the `hpcc-viz` library’s `Layered` widget to stack three `TopoJSONChoropleth` layers for Great Britain, Northern Ireland, and Ireland, each at 75% opacity, over a `Graticule` layer for latitude/longitude lines. The code loads TopoJSON region data directly via the `region()` API and applies a zoom level to focus the view.

Apr 8, 2016
Loading thumbnail…

Databomb Dashboard

The Databomb Dashboard demonstrates a linked multi-view interface for exploring error codes by state. It uses the HPCC Platform visualization library’s marshaller API to define a choropleth map, a pie chart, and three tables from inline databomb data. Clicking a state on the choropleth filters the state-details table and the combined details table, while selecting an error slice updates the error-details table similarly. The dashboard is built entirely with `require.config` and the `HTML` widget, relying on client-side aggregation for the pie chart.

Mar 23, 2016
Loading thumbnail…

Router

This visualization presents flight routing options between airports on an interactive map, with a side panel displaying a Gantt-style chart of the journey's timeline for each route. It highlights the two flight legs and layover durations for connections, such as from Atlanta to Cork. The map is rendered using the layered map component with WebGL, while the timeline uses the Column chart with time-based axes. The application dynamically loads airport data from a CSV file and uses the ESP connection API to fetch flight data, with a pre-canned demo fallback.

Mar 2, 2016
Loading thumbnail…

Custom Ordinal Palette

This pie chart uses a custom ordinal palette from the HPCC Systems visualization library to assign specific colors to categories. The example creates a palette named “RBI” with four colors, then explicitly maps each country to a color by calling the palette function in order. The Pie chart widget, configured with a paletteID, renders data for England, Wales, Scotland, and Ireland using these defined colors. The code relies on HPCC’s `Pie` and `Palette` APIs for chart creation and color assignment.

Feb 4, 2016
Loading thumbnail…

Sample MegaChart

The HPCC MegaChart example displays Irish population data across multiple counties, with columns for location, males, females, and total population. A selector above the chart lets users switch between different visualization types. The code loads the HPCC visualization library and its composite MegaChart module from a CDN, then instantiates a MegaChart widget bound to a placeholder div. The widget receives its dataset and column configuration through chained method calls, with `.render()` triggering the display.

Jan 29, 2016
Loading thumbnail…

D3 ConicEqualArea Projection + D3 Generated Layers

This example demonstrates a multi-layered D3 map visualization using a conic equal-area projection, combining graticules, country choropleths, US county choropleths, geohash cells, heat points, and a graph network overlaid on the same geographic canvas. It uses the HPCC Systems visualization library, with layers such as ChoroplethCountries, GeoHash, ChoroplethUSCounties, Heat, and Graph, all rendered via D3’s geographic path machinery. The data includes country weights, geohash counts, county values, heat coordinates, and graph nodes, each styled with distinct palettes and opacities to reveal spatial patterns. The map is interactive, centered at the equator with a zoom level of two.

Dec 31, 2015
Loading thumbnail…

D3 Adapter for JS Arrays

This example demonstrates a custom D3 adapter that lets D3 selection operations manipulate plain JavaScript arrays as if they were DOM nodes. Using d3.select and d3.selectAll, the code joins two arrays, logging enter, update, and exit events, then reorders elements and removes matches. It also appends paragraph elements to the body, showing how the adapter bridges array data with standard D3 rendering. The adapter implements createElement, querySelectorAll, appendChild, insertBefore, and removeChild to mimic a minimal document tree, enabling D3’s data join and order methods to directly modify array contents.

Oct 31, 2015