HPCC WU Hosted Image

100%

HPCC WU Hosted Image

✓ Published0🌍 Public

Last edited Dec 10, 2017

Created on Dec 10, 2017

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.

AI-generated description

Similar vizzes

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.

GGordonSmith

56% match

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`.

GGordonSmith

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

52% match

Loading thumbnail…

Assignment Q10

This example demonstrates how VizHub integrates D3.js and local ES6 modules, displaying a large base64-encoded PNG image as the background of an SVG canvas. The code loads the D3 library via UNPKG, imports functions like `select` and `csvFormat`, and fetches a remote CSV file to print the first ten rows. A separate module exports a custom message, which is rendered prominently. The visual presentation combines the embedded image with dynamically fetched data, showcasing both module imports and asynchronous data loading.

NNagateja99

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

50% match

Loading thumbnail…

Image as base64

This example renders a single image whose source is a base64-encoded GIF string embedded directly in the code. It uses React to define an `App` component that returns an `<img>` element, with the `src` attribute constructed as a data URI by concatenating `data:image/gif;base64,` with the encoded string. ReactDOM mounts the component into the `#root` DOM element. The page loads React and ReactDOM from unpkg CDN scripts, and the visible result is the decoded GIF displayed at its natural size.

OOleksandr Poplavskyi

49% match

Loading thumbnail…

Assignment ICE-5

This gallery example displays a static image embedded within an SVG element, using a base64-encoded JPEG as the primary visual content. The image is rendered through an SVG pattern defined in the markup, with the pattern referencing the data URI. The page styling, handled by a separate CSS file, centers the content and applies a linen background color. The code loads the D3.js library version 5.11.0 from a CDN, though it does not utilize any D3-specific data visualization methods. The visualization appears to be a simple image display rather than an interactive or data-driven graphic.

MMahitha-Moparthi

49% match

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.

GGordonSmith

49% match