Compound.Heatmap

Creates a KDE-based Heatmap compound SVG Visual using Kernel Density Estimation for smooth color gradients

Kernel Density Estimation (KDE)

KDE is a statistical method that estimates the probability density function of your data by placing a "kernel" (typically a normal distribution) at each data point. The heatmap visualizes data density across the range, creating smooth gradients that reveal patterns and concentrations in your dataset.

Key Parameters:

• Samples: Controls the resolution of the density calculation (higher = smoother, but slower performance)

• Bandwidth: Controls the smoothing level - smaller values create sharper peaks around data points, larger values create broader, smoother distributions

SyntaxExampleDefinition

DaxLib.SVG.Compound.Heatmap( x, y, width, height, axisRef, measureRef, samples, bandwidth, color, paddingX, paddingY )

Parameter	Type	Required	Default	Description
x	INT64			The x position of the compound
y	INT64			The y position of the compound
width	INT64			The width of the compound
height	INT64			The height of the compound
axisRef	ANYREF EXPR			The column that the measure will be evaluated against
measureRef	NUMERIC EXPR			The measure to evaluate
samples	INT64			Number of density calculation points (default 50)
bandwidth	NUMERIC			Kernel bandwidth for smoothing (default auto-calculated)
color	STRING		BLANK()	Optional: The hex color for high density areas (e.g., "#01B8AA"). Defaults to "#01B8AA"
paddingX	DECIMAL		0.05	Optional: The horizontal padding percentage (0.0-1.0, e.g., 0.1 = 10% padding). Defaults to 0.05
paddingY	DECIMAL		0.02	Optional: The vertical padding percentage (0.0-1.0, e.g., 0.1 = 10% padding). Defaults to 0.02

STRING SVG Heatmap

DaxLib.SVG.SVG(
    500,
    100,
    BLANK(),
    DaxLib.SVG.Compound.Heatmap(
        0,                  // x
        0,                  // y
        500,                // width
        100,                // height
        Dates[Date],        // axisRef
        [Total Cost],       // measureRef
        MAX( Samples[Samples] ), // samples
        MAX( Bandwidth[Bandwidth] ), // bandwidth
        "#EC008C",          // color
        0.05,               // paddingX
        0.02                // paddingY
    ),
    BLANK()
)

function 'DaxLib.SVG.Compound.Heatmap' =
        (
            x: INT64,
            y: INT64,
            width: INT64,
            height: INT64,
            axisRef: ANYREF EXPR,
            measureRef: NUMERIC EXPR,
            samples: INT64,
            bandwidth: NUMERIC,
            color: STRING = BLANK(),
            paddingX: DOUBLE = 0.05,
            paddingY: DOUBLE = 0.02
        ) =>

            // Apply padding to dimensions
            VAR _X =            x + (width * (IF(ISBLANK(paddingX), 0, paddingX) / 2))
            VAR _Y =            y + (height * (IF(ISBLANK(paddingY), 0, paddingY) / 2))
            VAR _Width =        width * (1 - IF(ISBLANK(paddingX), 0, paddingX))
            VAR _Height =       height * (1 - IF(ISBLANK(paddingY), 0, paddingY))

            VAR _Color = IF( NOT ISBLANK( color ), color, "#01B8AA" )

            // Check if Axis is numeric
            VAR axisSample =    MAX( axisRef )
            VAR axisIsNumeric = ISNUMERIC( axisSample ) || ISDATETIME( axisSample )

            // For totals
            VAR _Data = 
                ADDCOLUMNS(
                    FILTER(
                        VALUES( axisRef ),
                        NOT ISBLANK( measureRef )
                    ),
                    "@AxisIndex",   
                        IF(
                            axisIsNumeric,
                            axisRef,
                            RANK( DENSE, CALCULATETABLE( VALUES( axisRef ), ALLSELECTED() ) )
                        ),
                    "@Value", measureRef
                )

            VAR _NumValues =        COUNTROWS( _Data )
            VAR _Min =              MINX( _Data, [@Value] )
            VAR _Max =              MAXX( _Data, [@Value] )
            VAR _Range =            _Max - _Min
            VAR _RangePerSample =   _Range / samples

            // Calculate Kernel Density Estimation using Normal distribution
            VAR _KDE = 
                ADDCOLUMNS(
                    GENERATESERIES( 0, samples, 1 ),
                    "@InputX", _Min + _RangePerSample * [Value],
                    "@KDE", 
                        ( 1 / _NumValues ) * 
                        SUMX(
                            _Data, 
                            NORM.DIST( 
                                _Min + _RangePerSample * [Value], 
                                [@Value], 
                                bandwidth, 
                                FALSE() 
                            ) 
                        )
                )

            VAR _MaxKDE =       MAXX( _KDE, [@KDE] )

            // Create gradient stops from KDE points
            VAR _GradientStops = 
                CONCATENATEX(
                    _KDE,
                    VAR _Position = DaxLib.SVG.Scale.Normalize( [@InputX], _Min, _Max, 0, 100 )
                    VAR _Intensity = IF( _MaxKDE > 0, [@KDE] / _MaxKDE, 0 )
                    VAR _StopColor = 
                        DaxLib.SVG.Color.Hex.Interpolate(
                            "#FFFFFF",
                            _Color,
                            _Intensity
                        )
                    RETURN
                        "<stop offset='" & _Position & "%' stop-color='" & _StopColor & "' />",
                    "",
                    [Value],
                    ASC
                )

            // Create linear gradient definition
            VAR _GradientDef = 
                "<defs>" &
                    "<linearGradient id='kde-gradient' x1='0%' y1='0%' x2='100%' y2='0%'>" &
                        _GradientStops &
                    "</linearGradient>" &
                "</defs>"

            // Create rectangle with gradient fill
            VAR _HeatmapRect = 
                DaxLib.SVG.Element.Rect(
                    _X,
                    _Y,
                    _Width,
                    _Height,
                    0,
                    0,
                    DaxLib.SVG.Attr.Shapes( "url(#kde-gradient)" )
                )

            // Combined elements
            VAR _CombinedElements =
                _GradientDef & 
                _HeatmapRect

            RETURN

                IF( NOT ISEMPTY( _Data ), _CombinedElements )