Creating Interactive Maps with CSS

Label Clip-Path

{% for name, item in regions %}
<div id="label-{{name}}" style="clip-path: url(#clip-{{name}});">
    <label class="color1 color1-{{name}}" for="color1-{{name}}" ></label>
    <label class="color2 color2-{{name}}" for="color2-{{name}}" ></label>
    <label class="color3 color3-{{name}}" for="color3-{{name}}" ></label>
</div>
{% endfor %}

#labels > div > label:Not(.color1) {
    display: none;
}
.color1 {
    background: var(--color3);
}
.color2 {
    background: var(--color1);
} 
.color3 {
    background: var(--color2);
} 
{% for name, item in regions %}
.color1-{{name}}:checked ~ #labels label.color2-{{name}} {
    display: block;
}
.color2-{{name}}:checked ~ #labels label.color3-{{name}} {
    display: block;
}
{% endfor %}

Info Box

{% for name, item in regions %}
input[name=radio-{{name}}]:focus ~ #info #info-{{name}} {
    display: block;
    z-index: 1;
}
#label-{{name}}:hover ~ #info #info-{{name}} {
    display: block;
    z-index: 2;
}
{% endfor %}

Computing Sums

{% for name, item in regions %}
    {% for c in colors %}
    .color{{loop.index}}-{{name}}:checked ~ .map-container #info .visual-{{name}} {
        background: var(--color{{loop.index}});
        order: {{loop.index}};
    }
    {% endfor %}
{% endfor %}

{% for name, item in regions %}
	{% for c in colors %}
	.color{{loop.index}}-{{name}}:checked ~ .map-container #info #blocker-{{loop.index}}-{{name}} {
    	display: inline-block;
	}
	{% endfor %}
{% endfor %}

<div>
Color 1:
<span class="scoreHolder">
    <span class="scoreInner">
        {% for name, item in regions %}
        <span id="blocker-1-{{name}}" class="blocker" style="width: calc(48px * {{ item['ev']}});">
        </span>
        {% endfor %}
        {% for i in range(0,538+1) %}
        <span class="score">{{538 - i}}</span>
        {% endfor %}
    </span>
</span>
</div>

.scoreHolder {
	width: 48px;
	overflow: hidden;
}
.scoreInner {
    width: calc((538 + 1) * 48px);
	right: 0px;
	overflow: hidden;
}
.score {
    width: 48px;
}