Having experimented with colour-fill and width I next wanted to play with rotation. How the devil was I to do that?
Google is my friend. And so is CSS Tricks.
Something simple that rotates? Clock hands.
Admittedly, I had quite a bit of fun with this one. I had to be sure the hands rotated around the origin else the clock pieces went flying across the page in a spectacular Picasso-style fashion.
Clock =
VAR Hour = (360/12)*MAX('Table'[Hour])
Return
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 600 600'>
<defs><style>.a,.b{fill:none;}.a,.b,.c{stroke:#000;}.a{stroke-width:5px;}.b{stroke-width:5px;}.c{fill:#0006b6;stroke-width:8px;</style></defs>"
&[clockface]&
"<line id='minute' class='b' x1='237.5' x2='237.5' y2='237.5'/>
<line id='hour' class='c' x1='237.5' y1='237.5' x2='237.5' y2='97.46' transform='translate(237.5,237.5) rotate("&Hour&") translate(-237.5,-237.5)'/>
<circle cx='237.5' cy='237.5' r='22.5'/></svg>"Once complete, I dropped the measure in the HTML Content Visual and saw that it rendered wonderfully. Now that I had created the clock, what kind of viz was I going to create with it? I had a number of ideas but a finite amount of time (heh).
I went with something simple and created a table of daily habits, perhaps inspired by Georgia Lupi of Dear Data fame, perhaps because I felt like a drink… But on the Dear Data theme, I’d thought I’d decorate the page with a hand-drawn styling, rather like a journal or a homework assignment.
The pictogram style chart was created using custom conditional icons in the matrix visual. I drew the icons in Adobe Illustrator and loaded them into the report’s JSON theme file. I had originally attempted the pictogram in Charticulator. I found it looked great in the browser but scaled oddly upon export. User error I suspect.
In considering font choice I was a bit stumped as to what to do. I have a great dislike for Comic Sans, the only font in PBI I would consider close to handwriting. This presented the perfect opportunity to try Google Web Fonts. My first attempts failed. After a search “Google Web Fonts Power BI”. David Eldersveld’s blog came to the rescue.
Somewhat expectedly, the result was… well… not the best. *Sigh* it would be a dream to have a greater choice of fonts, but hey, I would pick legible web-safe fonts over fancy fonts any other day.
The bars were an afterthought as I felt the page needed some colour. In keeping with the styling, I filled the bars with a cross-hatch pattern in what could be considered highlighter or biro ink colours. This was a little finicky as I needed to remember to place the patterns in the <defs> and reference the pattern id names (pattern id=””indigo””) in the rect style (fill:url(#indigo)).
VAR WaterColour = "<pattern id=""indigo"" patternUnits=""userSpaceOnUse"" width=""4"" height=""4"" patternTransform=""rotate(45 2 2)"">
<rect x=""0"" width=""10"" height=""10"" y=""0"" fill=""indigo""></rect>
<path d=""M -1,2 l 6,0"" stroke=""white"" stroke-width=""1""></path>
<path d=""M 1, 2 l 6,0"" stroke=""white"" stroke-width=""2""></path>
</pattern>"Return
"<head>
<link href='https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap' rel='stylesheet'>
</head>
<body></body>" & "
<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 300 150"">
<title>Bar Chart</title>
---Pattern IDs---
<defs>"& TeaColour & CoffeeColour & WaterColour & AlcoholColour &"</defs>
---Bar Outlines---
<rect x=""69"" y=""0.81"" width=""200"" height=""20"" style=""fill:none;stroke:#1b1464;stroke-miterlimit:10""/>
<rect x=""69"" y=""37.81"" width=""200"" height=""20"" style=""fill:#fff;stroke:#1b1464;stroke-miterlimit:10""/>
<rect x=""69"" y=""74.81"" width=""200"" height=""20"" style=""fill:#fff;stroke:#1b1464;stroke-miterlimit:10""/>
<rect x=""69"" y=""111.81"" width=""200"" height=""20"" style=""fill:#fff;stroke:#1b1464;stroke-miterlimit:10""/>
---Axis Titles---
<text transform=""translate(0 11.01)"" style=""font-size:16px;fill:#1b1464;font-family:IndieFlower, Indie Flower"">Tea</text>
<text transform=""translate(0 47.8)"" style=""font-size:16px;fill:#1b1464;font-family:IndieFlower, Indie Flower"">Coffee</text>
<text transform=""translate(0 84.8)"" style=""font-size:16px;fill:#1b1464;font-family:IndieFlower, Indie Flower"">Water</text>
<text transform=""translate(0 121.8)"" style=""font-size:16px;fill:#1b1464;font-family:IndieFlower, Indie Flower"">Alcohol</text>
---Bar Fill---
<rect x=""69"" y=""0.81"" width="&""""&200/5*TeaValue&""""&" height=""20"" style=""fill:url(#gold);stroke:#1b1464;stroke-miterlimit:10"">
<title>Tea: "& TeaValue &"</title>
</rect>
<rect x=""69"" y=""37.81"" width="&""""&200/5*CoffeeValue&""""&" height=""20"" style=""fill:url(#black);stroke:#1b1464;stroke-miterlimit:10"">
<title>Coffee: "& CoffeeValue &"</title>
</rect>
<rect x=""69"" y=""74.81"" width="&""""&200/5*WaterValue&""""&" height=""20"" style=""fill:url(#indigo);stroke:#1b1464;stroke-miterlimit:10"">
<title>Water: "& WaterValue &"</title>
</rect>
<rect x=""69"" y=""111.81"" width="&""""&200/5*AlcoholValue&""""&" height=""20"" style=""fill:url(#maroon);stroke:#1b1464;stroke-miterlimit:10"">
<title>Wine: "& AlcoholValue &"</title>
</rect>
</svg>"
A rather hefty measure, but for this experiment in design, no particular bother.