<ul class="years-chart">
<li class="years-chart__item" style="--opacity: 0.15;">
<div class="years-chart__block" aria-label="1.5k grants awarded before 2011" title="1.5k grants awarded before 2011"><span>1.5k</span></div>
<div class="years-chart__label">Older data</div>
</li>
<li class="years-chart__item" style="--opacity: 0;">
<div class="years-chart__block" aria-label="No grants awarded in 2011" title="No grants awarded in 2011"><span></span></div>
<div class="years-chart__label">2011</div>
</li>
<li class="years-chart__item" style="--opacity: 0;">
<div class="years-chart__block" aria-label="No grants awarded in 2012" title="No grants awarded in 2012"><span></span></div>
<div class="years-chart__label">2012</div>
</li>
<li class="years-chart__item" style="--opacity: 1;">
<div class="years-chart__block" aria-label="10k+ grants awarded in 2013" title="10k+ grants awarded in 2013"><span>10k+</span></div>
<div class="years-chart__label">2013</div>
</li>
<li class="years-chart__item" style="--opacity: 0.2;">
<div class="years-chart__block" aria-label="2k grants awarded in 2014" title="2k grants awarded in 2014"><span>2k</span></div>
<div class="years-chart__label">2014</div>
</li>
<li class="years-chart__item" style="--opacity: 0.2;">
<div class="years-chart__block" aria-label="2k grants awarded in 2015" title="2k grants awarded in 2015"><span>2k</span></div>
<div class="years-chart__label">2015</div>
</li>
<li class="years-chart__item" style="--opacity: 0.2;">
<div class="years-chart__block" aria-label="2k grants awarded in 2016" title="2k grants awarded in 2016"><span>2k</span></div>
<div class="years-chart__label">2016</div>
</li>
<li class="years-chart__item" style="--opacity: 0.25;">
<div class="years-chart__block" aria-label="2.5k grants awarded in 2017" title="2.5k grants awarded in 2017"><span>2.5k</span></div>
<div class="years-chart__label">2017</div>
</li>
<li class="years-chart__item" style="--opacity: 0.05;">
<div class="years-chart__block" aria-label="0.5k grants awarded in 2018" title="0.5k grants awarded in 2018"><span>0.5k</span></div>
<div class="years-chart__label">2018</div>
</li>
<li class="years-chart__item" style="--opacity: 0.05;">
<div class="years-chart__block" aria-label="0.5k grants awarded in 2019" title="0.5k grants awarded in 2019"><span>0.5k</span></div>
<div class="years-chart__label">2019</div>
</li>
<li class="years-chart__item" style="--opacity: 0.05;">
<div class="years-chart__block" aria-label="0.5k grants awarded in 2020" title="0.5k grants awarded in 2020"><span>0.5k</span></div>
<div class="years-chart__label">2020</div>
</li>
<li class="years-chart__item" style="--opacity: 1.5;">
<div class="years-chart__block" aria-label="15k+ grants awarded in 2018" title="15k+ grants awarded in 2018"><span>15k+</span></div>
<div class="years-chart__label">2021</div>
</li>
</ul>
<ul class="years-chart">
{% for item in chart %}
<li
class="years-chart__item"
style="--opacity: {{ item.value }};"
>
<div
class="years-chart__block"
aria-label="{{ item.detail }}"
title="{{ item.detail }}"
><span>{{ item.value_text }}</span></div>
<div class="years-chart__label">{{ item.label }}</div>
</li>
{% endfor %}
</ul>
{
"chart": [
{
"label": "Older data",
"value": 0.15,
"value_text": "1.5k",
"detail": "1.5k grants awarded before 2011"
},
{
"label": 2011,
"value": 0,
"value_text": "",
"detail": "No grants awarded in 2011"
},
{
"label": 2012,
"value": 0,
"value_text": "",
"detail": "No grants awarded in 2012"
},
{
"label": 2013,
"value": 1,
"value_text": "10k+",
"detail": "10k+ grants awarded in 2013"
},
{
"label": 2014,
"value": 0.2,
"value_text": "2k",
"detail": "2k grants awarded in 2014"
},
{
"label": 2015,
"value": 0.2,
"value_text": "2k",
"detail": "2k grants awarded in 2015"
},
{
"label": 2016,
"value": 0.2,
"value_text": "2k",
"detail": "2k grants awarded in 2016"
},
{
"label": 2017,
"value": 0.25,
"value_text": "2.5k",
"detail": "2.5k grants awarded in 2017"
},
{
"label": 2018,
"value": 0.05,
"value_text": "0.5k",
"detail": "0.5k grants awarded in 2018"
},
{
"label": 2019,
"value": 0.05,
"value_text": "0.5k",
"detail": "0.5k grants awarded in 2019"
},
{
"label": 2020,
"value": 0.05,
"value_text": "0.5k",
"detail": "0.5k grants awarded in 2020"
},
{
"label": 2021,
"value": 1.5,
"value_text": "15k+",
"detail": "15k+ grants awarded in 2018"
}
]
}
.years-chart {
--block-size: 42px;
--label-colour: #A3A3A3;
--separator-colour: #F0F0F0;
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
max-width: 100%;
flex-wrap: wrap;
&__block {
padding: 0 1px;
border: solid 1px var(--separator-colour);
border-left-width: 0;
border-collapse: collapse;
text-align: center;
height: var(--block-size);
&:first {
border-left-width: 1px;
}
> span {
display: inline-block;
background-color: rgba($orange, var(--opacity));
width: var(--block-size);
height: 100%;
font-size: 0.75rem;
text-align: center;
padding-top: 0.5rem;
}
}
&__label {
color: --label-colour;
text-align: center;
font-size: 0.8rem;
margin-bottom: 6px;
}
// Fill the row space on larger viewports but don't needlessly
// vary block size when multiple rows are likely.
@include breakpoint($medium) {
&__item {
flex-grow: 1;
}
}
}
Visualise distinctions in grants published – on a scale from 0 to 1 to feed into items’ opacity – per year.
e.g. if the absolute scale should max out at £100k, you would pass:
Pass in the same number of years for each data point which renders this component, to keep the shading and widths comparable.