Use Dynamic SVG for Debugging or Teaching DAX

[stevedep]

Hi all,

I am writing this to share an idea to debug/explain the inner working of DAX code to others. The DAX code generates SVG code that allows us to highlight certain rows. Perhaps these are rows we like to work with when an inner DAX statement is at work. 

Hopefully, the below code is self-explanatory. Please mind that you need to change the 'Data Category' of the measure to 'Image URL'. I suggest changing the 'Image height' as well (see highlight in below image). The file is attached. 

DebugMeasure = 
------------SVG - start code & end code
VAR _SvgStart=
"data:image/svg+xml;charset=utf-8," &
"<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'
    width='100' 
    height='150' 
     viewBox = '0 0 100 150'> "
VAR _SvgEnd = " </svg>"
-------------------

------------Our code to debug
VAR _selCat = SELECTEDVALUE('Table'[Category])
VAR _Tbl = FILTER( CALCULATETABLE( 'Table', all('Table'[Measure]), 'Table'[Category] = _selCat), [Measure] > 5)
// Adding a rank for the Y positoin
VAR _TblWithRank = ADDCOLUMNS(_Tbl, "Rank", RANKX(_Tbl, CALCULATE(SUM('Table'[Measure])),,ASC,Skip))

VAR _SvgContent = 

CONCATENATEX(_TblWithRank, "
<text x='10' y='"&[Rank]*15&"' font-size='10' fill='"& IF([Measure] > 8,"Red", "Blue")&"'>"&[Measure]&"</text>" & "
")
return
 _SvgStart&_SvgContent&_SvgEnd

Any (creative) suggestions for improvements or other use cases are welcome. 

Credits to  @matemusic for the inspiration. 

Debug.pbix