Exploring Data-Driven SVG Part 2 (Rotation)

Published Categorized as Creative, Experimentation, HTML Content Visual, Infographic, SVG No Comments on Exploring Data-Driven SVG Part 2 (Rotation)

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.

Leave a comment

Your email address will not be published.