SVG Map
SVG Map
What Is This Report Type?
An SVG Map is a custom interactive map built from a Scalable Vector Graphics (SVG) file where each region, zone, or area is a clickable, color-coded shape bound to data. Unlike standard geographic maps tied to country/city boundaries, SVG Maps work with any custom layout—floor plans, stadium seating, human body diagrams, factory floors, network topology diagrams, or custom territory maps.
Why Is It Used?
SVG Maps are used when the spatial layout has domain-specific meaning that standard geographic maps cannot capture. A factory manager doesn’t need a world map—they need their factory floor plan with production zones colored by output rate. An insurance analyst needs a body diagram colored by claim frequency per body part. SVG Maps bring data into the exact spatial context where decisions are made.
Key Features and Characteristics
| Feature | Description |
|---|---|
| Custom SVG Canvas | Any SVG file can serve as the map—floor plans, venue layouts, schematic diagrams. |
| Region Data Binding | Each named SVG element (region/zone) is bound to a corresponding data value. |
| Color-Coded Intensity | Regions are filled with a color scale reflecting their data value (choropleth style). |
| Clickable Zones | Each region is interactive—click to drill down into the data for that specific area. |
| Overlay Labels | Value labels can be displayed directly on each region for at-a-glance reading. |
When to Use It (Use Cases)
- Factory Floor Monitoring: Machine zones colored by output rate, downtime, or defect count.
- Retail Store Layout: Shelf zones colored by product sales velocity or foot traffic density.
- Building/Floor Plans: Office areas colored by occupancy rate, energy consumption, or headcount.
- Insurance Body Claims: Human body diagram colored by claim frequency per body region.
Real-Time Business Example
Scenario: A retail operations manager needs to identify which shelf zones in a flagship store generate the highest sales per square foot.
Visualization: An SVG Map loads the store’s floor plan. Each shelf zone is colored on a scale from pale yellow (low sales/sqft) to dark green (high sales/sqft). The entrance endcaps and checkout lane zones are deep green—high impulse purchase areas. The back-of-store aisles are pale yellow. The manager immediately repositions high-margin products from back aisles to the entrance zone.
Common Metrics Displayed
- Zone Revenue: Sales per zone in retail or event venue layouts.
- Machine Utilization: Output rate or downtime per machine in factory floor diagrams.
- Occupancy Rates: Seat or room occupancy in venue or building floor plans.
- Incident Rates: Safety incident counts per area in facility management diagrams.
User Interactions
| Interaction | Behavior |
|---|---|
| Filters | Apply date range or metric filters to recalculate region color intensity. |
| Hover / Tooltip | Hovering over a region shows the zone name and its exact metric value. |
| Click / Drill-Down | Clicking a region navigates to the detailed record list for that zone. |
| Zoom / Pan | Standard zoom and pan controls for navigating large or detailed SVG layouts. |
| Export | Export to Excel. |
Creation Steps
- Select SVG Map as the report type.
- SVG File: Upload or specify the SVG layout file. Each region must have a named ID attribute.
- Region Field: Drag the field that maps to SVG region IDs (e.g., Zone Code).
- Metrics: Drag the value field for color intensity (e.g., Sales per Sqft).
- Color Scale: Configure the color palette and threshold range.