Skip to content

Commit

Permalink
Start building diversity dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@taz-chiles
taz-chiles committed Aug 16, 2024
1 parent 02cfa19 commit 6d44408
Show file tree
Hide file tree
Showing 3 changed files with 249 additions and 3 deletions.
7 changes: 6 additions & 1 deletion src/_includes/css/oi.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ header nav ul > li > a { padding: 0.5em 1em; display: inline-block; width: 100%;

.summary { padding-top: 2em; }

.text { padding: 1em; text-align:center; font-weight: 400; font-size: 1.1em;}

.read-more { margin-top: 1em; padding-bottom: 0.5em; }
.read-more a {
font-weight: 600;
Expand Down Expand Up @@ -226,6 +228,9 @@ ul.grid > li > a > h2 {
.legend .legend-item { display: inline-block; line-height: 1em; margin-right: 1em; cursor: pointer; }
.legend .legend-item svg { float: left; }

.oi-legend-inner .oi-legend-item { background: inherit!important; outline: none; }
.oi-legend-inner .oi-legend-item.oi-series-on { background: inherit!important; outline: none!important; }

.big-number {
font-size: 3.5em;
line-height: 1.25em;
Expand Down Expand Up @@ -254,7 +259,7 @@ ul.grid > li > a > h2 {
padding-top: 2em;
font-weight: 400;
}
.note { font-size: 0.8em; text-align: center; color: inherit; font-weight: 400;}
.note { text-align: center; color: inherit; font-weight: 400; padding-bottom: 1em; }

/* Header */

Expand Down
6 changes: 4 additions & 2 deletions src/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@

/* OI Viz */

.axis-grid-title { font-family: var(--oi-main-fontstack); font-weight: 600; font-size: 1.2em;}
.axis-grid-title { font-family: var(--oi-main-fontstack); font-weight: 600; font-size: 1.3em;}
.oi-viz { padding-bottom:0.5em;}
.oi-map-hex { padding-bottom:0;}
.oi-viz tspan { font-family: var(--oi-main-fontstack); font-weight: 600; font-size: 1em; }
.oi-viz tspan { font-family: var(--oi-main-fontstack); font-weight: 600; font-size: 1.2em; }

/* OI dashboard component */
.oi-dashboard .oi-dashboard-inner { --auto-dashboard-min-size: 200px; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--auto-dashboard-min-size)), 1fr)); grid-gap: 1em; }
Expand All @@ -48,6 +48,8 @@
font-family: var(--oi-main-fontstack);
}

.oi-chart-bar line { stroke: #004563!important; stroke-opacity: 0.3; }

@media screen and (max-width: 1200px) {
.oi-dashboard { grid-gap: 1.5vw; }
.oi-dashboard .footnote { font-size: max(10px, 0.7em); }
Expand Down
239 changes: 239 additions & 0 deletions src/lcip/diversity/index.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
---
title: Diversity Dashboard
---

<div class="summary">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.
</p>
</div>

<h2>Applied</h2>

{% comp "dashboard.panels", { columns: 1 } %}
{% comp "dashboard.pane" %}
<p class="text">
The charts below present the makeup and diversity of people who applied for grants through the LCIP.
</p>
{% endcomp %}
{% endcomp %}

{% comp "dashboard.panels", { columns: 3 } %}

{% comp "dashboard.pane", { link: "/lcip/inspire/advice-sessions" } %}
<h3>Applications received</h3>
{% comp "dashboard.big_number", { number: 'XX', suffix: '%'} %}
{% endcomp %}
{% endcomp %}


{% comp "dashboard.pane", { link: "/lcip/inspire/applications/" } %}
<h3>Disability</h3>
{% comp "dashboard.big_number", { number: 'X', suffix: '%' } %}
{% endcomp %}
{% endcomp %}

{% comp "dashboard.pane", { link: "/lcip/inspire/results/" } %}
<h3>Caring responsibilities</h3>
{% comp "dashboard.big_number", { number: 'XX', suffix: '%' } %}
{% endcomp %}
{% endcomp %}

{% endcomp %}

{% comp "dashboard.panels", { columns: 1 } %}

{% comp "dashboard.pane", { link: "/lcip/inspire/advice-sessions" } %}
<h3>Age</h3>
<p class="note">
The chart below presents the age of applicants across all LCIP programmes.
</p>

{{ comp.oi.viz.chart.bar({ config: {
data: "viz.leeds_2023.medium_count",
category: 'medium',
width: 1600,
series: [
{ title: 'Number of articles', value: 'count', color: 'darkcyan'}
],
legend: {
show: true,
position: "top"
},
axis: {
x: {
title: {
label: "Number of articles"
},
"font-weight": oi_viz.bar.axis.x['font-weight'],
grid: oi_viz.bar.axis.x.grid
},
y: {
"font-weight": oi_viz.bar.axis.y['font-weight'],
grid: oi_viz.bar.axis.y.grid
}
}
} }) | safe }}
{% endcomp %}

{% comp "dashboard.pane", { link: "/lcip/inspire/advice-sessions" } %}
<h3>Gender</h3>
<p class="note">
The chart below presents the gender reported by applicants across all LCIP programmes.
</p>

{{ comp.oi.viz.chart.bar({ config: {
data: "viz.leeds_2023.medium_count",
category: 'medium',
width: 1600,
series: [
{ title: 'Number of articles', value: 'count'}
],
legend: {
show: true,
position: "top"
},
axis: {
x: {
title: {
label: "Number of articles"
},
"font-weight": oi_viz.bar.axis.x['font-weight'],
grid: oi_viz.bar.axis.x.grid
},
y: {
"font-weight": oi_viz.bar.axis.y['font-weight'],
grid: oi_viz.bar.axis.y.grid
}
}
} }) | safe }}
{% endcomp %}

{% comp "dashboard.pane", { link: "/lcip/inspire/advice-sessions" } %}
<h3>Ethnic Group</h3>
<p class="note">
The chart below presents the gender reported by applicants across all LCIP programmes.
</p>

{{ comp.oi.viz.chart.bar({ config: {
data: "viz.leeds_2023.medium_count",
category: 'medium',
width: 1600,
series: [
{ title: 'Number of articles', value: 'count', color: 'darkcyan'}
],
legend: {
show: true,
position: "top"
},
axis: {
x: {
title: {
label: "Number of articles"
},
"font-weight": oi_viz.bar.axis.x['font-weight'],
grid: oi_viz.bar.axis.x.grid
},
y: {
"font-weight": oi_viz.bar.axis.y['font-weight'],
grid: oi_viz.bar.axis.y.grid
}
}
} }) | safe }}
{% endcomp %}

{% comp "dashboard.pane", { link: "/lcip/inspire/advice-sessions" } %}
<h3>Sexual Orientation</h3>
<p class="note">
The chart below presents the gender reported by applicants across all LCIP programmes.
</p>

{{ comp.oi.viz.chart.bar({ config: {
data: "viz.leeds_2023.medium_count",
category: 'medium',
width: 1600,
series: [
{ title: 'Number of articles', value: 'count', color: 'darkcyan'}
],
legend: {
show: true,
position: "top"
},
axis: {
x: {
title: {
label: "Number of articles"
},
"font-weight": oi_viz.bar.axis.x['font-weight'],
grid: oi_viz.bar.axis.x.grid
},
y: {
"font-weight": oi_viz.bar.axis.y['font-weight'],
grid: oi_viz.bar.axis.y.grid
}
}
} }) | safe }}
{% endcomp %}

{% comp "dashboard.pane", { link: "/lcip/inspire/advice-sessions" } %}
<h3>Disability</h3>
<p class="note">
The chart below presents the number of applicants across all LCIP programmes who disclosed that they have a disability in their application.
</p>

{{ comp.oi.viz.chart.bar({ config: {
data: "viz.leeds_2023.medium_count",
category: 'medium',
width: 1600,
series: [
{ title: 'Number of articles', value: 'count', color: 'darkcyan'}
],
legend: {
show: true,
position: "top"
},
axis: {
x: {
title: {
label: "Number of articles"
},
"font-weight": oi_viz.bar.axis.x['font-weight'],
grid: oi_viz.bar.axis.x.grid
},
y: {
"font-weight": oi_viz.bar.axis.y['font-weight'],
grid: oi_viz.bar.axis.y.grid
}
}
} }) | safe }}
{% endcomp %}
{% endcomp %}


<h2>Funded</h2>

{% comp "dashboard.panels", { columns: 3 } %}

{% comp "dashboard.pane", { link: "/lcip/inspire/advice-sessions" } %}
<h3>Advice sessions offered</h3>
{% comp "dashboard.big_number", { number: 26 } %}
{% endcomp %}
<p class="footnote">Advice Sessions</p>
{% endcomp %}


{% comp "dashboard.pane", { link: "/lcip/inspire/applications/" } %}
<h3>Applications received</h3>
{% comp "dashboard.big_number", { number: 25 } %}
{% endcomp %}
<p class="footnote">Applications</p>
{% endcomp %}

{% comp "dashboard.pane", { link: "/lcip/inspire/results/" } %}
<h3>Funded artists</h3>
{% comp "dashboard.big_number", { number: 5 } %}
{% endcomp %}
<p class="footnote">Programme Results</p>
{% endcomp %}

{% endcomp %}

0 comments on commit 6d44408

Please sign in to comment.