I'm trying to create an infographic which creates 36 circles in a formation where the color of the circles is derived from 36 divided by a percentage value in a data set.
*** EDIT - I have changed to a working script which has no loops ****
I have made the variables work correctly, it now knows that on_value is 15 (36 * input_data.metric_value percentage of 0.42), off_value is 21 and square is 36. I made 100% be 36 because I can divide by 2 and 3 easily.
I also know that my ROUND function is working correctly.
The script below now produces a single circle. However, the logic I want to implement is for it to create 36 circles using either first color for the first 15 circles then change to the second color for the next 21 circles as it works its way through a loop.
I believe there it should loop 6 times through columns per row and loop through 6 rows which is a total of 36.
<!DOCTYPE html>
<html>
<body>
<svg id="mysvg" height="310" width="250">
<text x="125" y="260" fill="#FF9900"
font-family="Arial, Helvetica, sans-serif"
text-anchor="middle"
font-size="42">42%</text>
<text x="125" y="290" fill="#FF9900"
font-family="Arial, Helvetica, sans-serif"
text-anchor="middle"
font-size="28">PROFITABLE</text>
<script type="application/ecmascript">
<![CDATA[
var mysvg = document.getElementById("mysvg");
var input_data = {performance_metrics: [
{metric_name: "Profitability",
metric_value: 0.42}
]};
var on_value = 0;
var off_value = 0;
input_data.performance_metrics.forEach(e=>{
on_value = Math.round(36 * e.metric_value)
off_value = 36 - on_value});
var square = 36;
var row = 1;
var col = 1;
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", 20 + (1 * 30));
circle.setAttribute("cy", 20 + (1 * 30));
circle.setAttribute("r", "10");
if (square < on_value) {
circle.setAttribute("style", "fill","#FF9900");
circle.setAttribute("stroke","black");
circle.setAttribute("stroke-width","0")
circle.setAttribute("opacity","1");
}
else {
circle.setAttribute("style", "fill","#E8E8E8");
circle.setAttribute("stroke","black");
circle.setAttribute("stroke-width","0")
circle.setAttribute("opacity","1")};
mysvg.appendChild(circle);
function formatNumber(num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}
]]>
</script>
</svg>
</body>
The finished output should look like the image in this post
I started with doing the svg manually and then committed to creating it using while looks. Here's the code of it working explicitly
<svg height="310" width="250">
<text x="125" y="260" fill="#FF9900"
font-family="Arial, Helvetica, sans-serif"
text-anchor="middle"
font-size="42">42%</text>
<text x="125" y="290" fill="#FF9900"
font-family="Arial, Helvetica, sans-serif"
text-anchor="middle"
font-size="28">PROFITABLE</text>
<circle cx="50" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="80" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="110" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="140" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="170" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="200" cy="50" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="50" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="80" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="110" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="140" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="170" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="200" cy="80" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="50" cy="110" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="80" cy="110" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="110" cy="110" r="10" stroke="black" stroke-width="0" fill="#FF9900" />
<circle cx="140" cy="110" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="170" cy="110" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="200" cy="110" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="50" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="80" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="110" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="140" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="170" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="200" cy="140" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="50" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="80" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="110" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="140" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="170" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="200" cy="170" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="50" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="80" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="110" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="140" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="170" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
<circle cx="200" cy="200" r="10" stroke="black" stroke-width="0" fill="#E8E8E8" />
Sorry, your browser does not support inline SVG.
</svg>
The calculations for on_value is round(36 × performance_metrics.metric_value)
42% = 15 dots.
I made it 6 x 6 because you can divide by 2 and 3.
There is a row loop 1 to 6 inside of a column loop 1 - 6
Sets colour to color 1 (orange) until count 1 to 36 surpasses 15 then color 2 (grey)
Circle x is 20 + (row loop value x 30) Circle y is 20 + (column loop Vale x 30)
Circle radius is 10
