Harraz Mohd Reza

Case 02 · Commercial real estate · ArcGIS Arcade

Interactive map popups that explain themselves

Data-driven popups with embedded charts, growth analytics, and workforce talent profiles — computed and rendered entirely inside the map, with zero external dependencies.

Role
Solution designer & developer
Platform
ArcGIS Online / Enterprise
Technology
Esri Arcade expressions
Dependencies
None — fully self-contained
0
External dependencies
11
Years visualized
12
Occupation groups
100%
Rendered in-map

The problem

The data was there. The insight wasn’t.

A commercial real estate team needed to read market and workforce data on the map, at the moment of site selection — not by exporting tables into a separate report later.

Clicking a location returned raw fields: eleven population columns, dozens of occupation metrics. Technically complete, practically unreadable. The story — is this market growing? who lives here? — was buried.

  • Analysts exported data to spreadsheets to see any trend at all.
  • Popups showed raw field names, not human meaning.
  • Charting tools meant external libraries, API calls, and offline fragility.
  • Every location had to be interpreted by hand, one at a time.

Deliverable 01 · Population trend

Eleven years of population, read at a glance.

The first popup turns eleven raw population fields (2015–2025) into a horizontal bar chart, a summary panel, and an automatic growth classification — all generated by a single Arcade expression. This is a faithful recreation; switch the sample location to watch the analytics recompute.

How it works

01

Collect

A null-safe helper pulls eleven yearly fields into a clean array, so blank or missing values never break the chart.

02

Compute

CAGR, year-over-year deltas, total change, and density are derived on the fly — no pre-processing, no service call.

03

Classify

The growth rate maps to a labelled, colour-coded trend so the headline reads itself.

04

Render

Inline HTML/CSS and embedded SVG icons draw the whole popup — nothing loaded from the network.

Key technique

The headline classifies itself.

A single block turns a computed growth rate into the label and colour you see at the top of the popup — the same logic driving the live demo above.

Arcade · trend classification
// Dynamic trend classification from the 10-year CAGR
var trend = ""; var color = "";
if      (cagr >= 0.02)  { trend = "High growth";   color = "#1f7a34"; }
else if (cagr >= 0.005) { trend = "Growing";       color = "#3C7A4E"; }
else if (cagr >= -0.005){ trend = "Stable";        color = "#6b6459"; }
else if (cagr >  -0.02) { trend = "Declining";     color = "#B0411F"; }
else                    { trend = "Sharp decline"; color = "#8a2d16"; }

Deliverable 02 · Talent profile

Who works here — by the hexagon.

The second popup profiles the resident workforce for an H3 hex grid: twelve occupation groups, ranked by their share of local workers, with growth-since-2020, median wages, and a full breakdown table — each section collapsible so users drill in only as far as they need.

It also derives a plain-language headline (“Technology stronghold,” “Mixed workforce”) and a day-vs-night ratio that flags whether a hex is a job center, a bedroom community, or mixed use.

H3 hex grid Workforce composition Growth since 2020 ZIP → hex interpolation

Workforce composition · sample hex

Technology22.4%
Banking & Finance17.5%
Registered Nurses13.0%
Engineering9.9%
Warehouse & Logistics7.4%

Headline: Technology-leaning workforce · Job center (ratio 1.6) · Sample data

Outcome & impact

What changed.

Insight at the click

Trends and workforce mix read instantly on the map — no export, no separate report.

Progressive disclosure

Collapsible sections keep popups clean while letting analysts drill all the way to a full table.

Works anywhere, offline

Zero external dependencies means it renders instantly on desktop or a field device, with no API calls.

Scales to thousands

One Arcade expression applies to every feature in a layer without performance cost or maintenance overhead.

Skills demonstrated

What this shows.

Esri Arcade — data, analytics & HTML generation Data visualization from raw fields Defensive, null-safe programming Self-contained, zero-dependency delivery Designing for progressive disclosure

Have map data nobody can read?

I turn raw GIS fields into popups that explain themselves — charts, analytics, and plain-language headlines, right inside the map.