Compound.Heatmap

Generates a KDE-based Heatmap compound SVG Visual using Kernel Density Estimation (KDE) 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, paddingX, paddingY, axisRef, measureRef, samples, bandwidth, color )

Parameter	Type	Required	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
paddingX	DOUBLE		The horizontal padding percentage (0.0-1.0, e.g., 0.1 = 10% padding)
paddingY	DOUBLE		The vertical padding percentage (0.0-1.0, e.g., 0.1 = 10% padding)
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
bandwidth	NUMERIC		Kernel bandwidth for smoothing (default auto-calculated)
color	STRING		The Hex color for high density areas (e.g., "#01B8AA")

STRING An SVG heatmap with smooth color gradients representing data density using kernel density estimation

DaxLib.SVG.SVG(
    500,
    100,
    BLANK(),
    DaxLib.SVG.Compound.Heatmap(
        0,                  // x
        0,                  // y
        500,                // width
        100,                // height
        0.05,               // paddingX
        0.02,               // paddingY
        Dates[Date],        // axisRef
        [Total Cost],       // measureVal
        MAX( Samples[Samples] ), // samples
        MAX( Bandwidth[Bandwidth] ), // bandwidth
        DaxLib.SVG.Colour.Theme(
            "Power BI",
            25
        )                   // Colour
    ),
    BLANK()
)

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

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

        // For totals
        VAR _Data = 
            SELECTCOLUMNS(
                FILTER(
                    VALUES( axisRef ),
                    NOT ISBLANK( measureRef )
                ),
                "@Value", measureRef
            )

        VAR _NumValues =        COUNTROWS( _Data )
        VAR _InvNumValues =     1 / _NumValues
        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 _KDEInput =
            ADDCOLUMNS(
                GENERATESERIES( 0, samples + 1, 1 ),
                "@InputX", _Min + _RangePerSample * [Value]
            )

        VAR _KDE = 
            ADDCOLUMNS(
                _KDEInput,
                "@KDE", _InvNumValues * SUMX( _Data, NORM.DIST( [@InputX], [@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,                         // x
                _Y,                         // y
                _Width,                     // width
                _Height,                    // height
                0,                          // rx
                0,                          // ry
                DaxLib.SVG.Attr.Shapes(
                    "url(#kde-gradient)",   // fill
                    BLANK(),                // fillOpacity
                    BLANK(),                // fillRule
                    BLANK(),                // stroke
                    BLANK(),                // strokeWidth
                    BLANK(),                // strokeOpacity
                    BLANK()                 // opacity
                ),
                BLANK()                     // transforms
            )

        // Combined elements
        VAR _CombinedElements =
            _GradientDef & 
            _HeatmapRect

        RETURN

            IF( NOT ISEMPTY( _Data ), _CombinedElements )

Comments