Workunit Irish Choropleth

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.

76% match

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.

72% match

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.

68% match

Map with Borehole

A choropleth-style map of Ireland displays each county as a green SVG path with semi-transparent black borders. Using d3.geoPath and d3.geoMercator, the code projects TopoJSON county boundaries sourced from deldersveld’s GitHub repository. It loads the data via d3.json, converts it with topojson.feature, and appends path elements to the SVG, relying on d3.v5 and the geoMercator projection centered on Ireland.

SShane Carey

65% match

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.

Projected Choropleth

A choropleth map shows unemployment rates by U.S. county, using a blue sequential color scale with nine quantized classes for rates from 0 to 15 percent. State boundaries appear as white lines, while counties are drawn as SVG paths. The map uses pre-projected TopoJSON data, created via the `topojson` command-line tool with the `d3.geo.albersUsa()` projection, and renders using `d3.geo.path()`. County geometries and unemployment rates are joined into a single file during preprocessing, eliminating separate data loads. This variation of the classic unemployment choropleth simplifies the workflow by embedding the projection and data join directly into the TopoJSON generation step.

Mmbostock

Map of Ireland

This interactive map of Ireland visualizes COVID-19 confirmed cases per county over time, with a color gradient from yellow to red indicating case counts and a slider to scrub through dates. The choropleth uses `geoMercator` projection via `d3.geoPath` to render county boundaries from TopoJSON, while a `scaleSequential` with `interpolateYlOrRd` maps case numbers to colors. Data comes from a CSV of HPSC county statistics, with a React-based `Slider` component powered by `d3.sliderBottom` controlling the temporal filter.

TThomas Cormican

Choropleth Map

This choropleth map displays global population data from the UN’s 2019 dataset, coloring each country according to its population value. The visualization uses D3’s geoMercator projection and geoPath to render country outlines from World Atlas TopoJSON data, while the D3 scaleOrdinal and schemeSpectral functions generate the color scale. A custom color legend shows the mapping between colors and population values, and hovering over a country highlights it in red.

SSophia Murage