Funnel and Hannoi Visualization with lc_funnel_or_hannoi_*

The lc_funnel_or_hannoi_* prefix is used for SVG element IDs that need to display funnel or hannoi chart visualizations. The handler automatically detects whether to render as a funnel or hannoi chart based on your data patterns, making it perfect for conversion funnels, sales processes, department comparisons, and categorical data analysis.



Automatic Chart Type Detection

  • Funnel Chart: Values in descending order → Trapezoid shapes that narrow from top to bottom
  • Hannoi Chart: Values in mixed order → Uniform rounded rectangles with varying widths

Use Cases

Funnel Charts (Descending Values):

  • Conversion funnels and sales processes
  • User journey analysis and drop-off tracking
  • Marketing campaign effectiveness
  • Lead qualification and pipeline analysis
  • Customer acquisition funnels
  • Website conversion optimization

Hannoi Charts (Mixed Values):

  • Department performance comparisons
  • Category analysis and benchmarking
  • Product or service comparisons
  • Regional performance analysis
  • Resource allocation visualization
  • Non-sequential data comparison

Element Identification

The target element must be a <rect> with an ID that starts with lc_funnel_or_hannoi_* for automatic funnel or hannoi chart visualization.

Input Format

The input value must be provided as a JSON array of objects with the following structure:

JSON Format

A JSON string containing an array of objects with the following structure:

[
  {
    "name": "Awareness",
    "value": 12000,
    "colorOverride": "#D32F2F",
    "labelTextColor": "#595551"
  },
  {
    "name": "Interest",
    "value": 11000,
    "colorOverride": "#F57C00",
    "labelTextColor": "#595551"
  },
  {
    "name": "Consideration",
    "value": 10000
  }
]

Dataset/CSV Format

Alternatively, you can use tabular data from your datasets with the following columns:

name value colorOverride labelTextColor
Awareness 12000 #D32F2F #595551
Interest 11000 #F57C00 #595551
Consideration 10000 - -
Evaluation 8500 #2196F3 #333333
Purchase 6000 #4CAF50 -

Dataset Usage:

  • Connect your funnel/hannoi chart to a dataset containing the required columns
  • The system will automatically map the columns to the appropriate chart properties
  • Filter data by categories or time ranges to show relevant comparisons
  • Multiple rows create comprehensive funnel or hannoi visualizations

Important Notes:

  • Column names must match exactly as shown in the example (name, value, colorOverride, labelTextColor)
  • Column names are case-sensitive and must be spelled exactly as specified
  • If data is not passed in the correct format or column names don’t match, the element will display as a plain <rect> without any chart visualization
  • The name field supports auto-truncation at 22 characters for long names

Implementation Steps for Dataset Usage

To use dataset/CSV format with funnel/hannoi charts, follow these steps:

Create Dataset: Import your data containing the required columns (name, value, colorOverride, labelTextColor)

Create Field: Create a field from your dataset that contains the funnel/hannoi chart data

Set Value Formatting: In the field settings, set Value Formatting to “JSON” - this is crucial for proper data formatting


Override SVG Variables: In the SVG slide design tab, go to “Override SVG Variables”

Select Variable: Choose your funnel/hannoi chart variable and use the format with your field


Include JSON Filter: Critical: Always include the | json filter with your field, otherwise the funnel/hannoi chart will not work

Configuration Properties

Required Properties:

  • name: Display name for the segment (mandatory, auto-truncated at 22 characters)
  • value: Numeric value for the segment (mandatory, negative values converted to 0)

Optional Properties:

  • colorOverride: Custom hex color code or color name for segment fill (optional)
  • labelTextColor: Custom hex color code or color name for label text (optional)

Color Specifications

Color Override:

  • Provide hex color codes: "#D32F2F", "#F57C00"
  • Use CSS color names: "red", "blue", "green"
  • Each segment can have its own individual color specification

Label Text Color:

  • Provide hex color codes: "#595551", "#333333"
  • Use CSS color names for consistent text styling
  • Controls the color of value labels and segment names

Color Behavior:

  • If no colors are provided, colors will be auto-assigned from the appearance settings and project color palette
  • Individual segments can override default colors for visual emphasis
  • Colors ensure visual distinction between different segments

Compatibility: Works with <rect> elements only

Example Usage

Example 1: Sales Funnel (Descending Values → Funnel Chart)

JSON Data:

[
  { "name": "Leads Generated", "value": 10000, "colorOverride": "#3498db" },
  { "name": "Qualified Leads", "value": 7500, "colorOverride": "#2ecc71" },
  { "name": "Proposals Sent", "value": 5000, "colorOverride": "#f39c12" },
  { "name": "Negotiations", "value": 3000, "colorOverride": "#e74c3c" },
  { "name": "Closed Deals", "value": 1500, "colorOverride": "#9b59b6" }
]

Example 2: Department Performance (Mixed Values → Hannoi Chart)

JSON Data:

[
  { "name": "Marketing", "value": 8500, "labelTextColor": "#2c3e50" },
  { "name": "Sales", "value": 12000, "labelTextColor": "#2c3e50" },
  { "name": "Support", "value": 6500, "labelTextColor": "#2c3e50" },
  { "name": "Development", "value": 15000, "labelTextColor": "#2c3e50" },
  { "name": "Design", "value": 4200, "labelTextColor": "#2c3e50" }
]

Example 3: Customer Journey (Long Names with Truncation)

JSON Data:

[
  { "name": "Initial Brand Awareness and Discovery", "value": 50000 },
  { "name": "Active Research and Consideration", "value": 35000 },
  { "name": "Evaluation and Comparison Shopping", "value": 25000 },
  { "name": "Purchase Decision and Transaction", "value": 15000 },
  { "name": "Post-Purchase Experience and Support", "value": 12000 },
  { "name": "Loyalty and Repeat Purchase Behavior", "value": 8000 }
]

Example 4: Website Analytics (Custom Colors)

JSON Data:

[
  {
    "name": "Page Views",
    "value": 125000,
    "colorOverride": "#FF6B6B",
    "labelTextColor": "#2C3E50"
  },
  {
    "name": "Unique Visitors",
    "value": 95000,
    "colorOverride": "#4ECDC4",
    "labelTextColor": "#2C3E50"
  },
  {
    "name": "Engaged Sessions",
    "value": 67000,
    "colorOverride": "#45B7D1",
    "labelTextColor": "#2C3E50"
  },
  {
    "name": "Goal Completions",
    "value": 23000,
    "colorOverride": "#96CEB4",
    "labelTextColor": "#2C3E50"
  },
  {
    "name": "Conversions",
    "value": 8500,
    "colorOverride": "#FFEAA7",
    "labelTextColor": "#2C3E50"
  }
]

Best Practices

  • Ensure all values are numeric and positive (negative values are converted to 0)
  • Keep segment names concise (auto-truncated at 22 characters)
  • Use consistent color schemes for better visual appeal