Dashboard with ODS layout
Dataset in use: resume-statistique-communes-departements-et-regions-france-2012-2013-2014 (See it on public domain)
Fields in use:
| population_en_2012 (numeric) | menages_en_2012 (numeric) | population_en_2007 (numeric) | naissances_entre_2007_et_2012 (numeric) | actifs_15_64_ans_en_2012 (numeric) | chomeurs_15_64_ans_en_2012 (numeric) |
|---|---|---|---|---|---|
| 765.0 | 316.307793923 | 755.0 | 44.0 | 347.635402906 | 38.4015852048 |
| 224.0 | 100.129032258 | 235.0 | 14.0 | 113.548387097 | 10.3225806452 |
| 357.0 | 151.827586207 | 358.0 | 25.0 | 178.5 | 14.3620689655 |
| 116.0 | 53.0 | 113.0 | 4.0 | 56.0 | 2.0 |
| logements_en_2012 (numeric) | residences_principales_en_2012 (numeric) | res_secondaires_et_logts_occasionnels_en_2012 (numeric) | nombre_de_menages_fiscaux_en_2012 (numeric) | part_des_menages_fiscaux_imposes_en_2012 (numeric) | mediane_du_revenu_disponible_par_uc_en_2012 (numeric) |
|---|---|---|---|---|---|
| 390.451397057 | 316.307793923 | 35.5483028721 | 314.0 | 0 | 16985.0 |
| 148.447872838 | 100.129032258 | 35.4995563443 | 98.0 | 0 | 17943.0 |
| 231.841475096 | 151.827586207 | 44.885840108400004 | 148.0 | 0 | 17258.7083333 |
| 78.8947368421 | 53.0 | 14.5010526316 | 52.0 | 0 | 21945.0 |
<section>
<ods-dataset-context context="stats"
stats-dataset="resume-statistique-communes-departements-et-regions-france-2012-2013-2014"
stats-domain="public">
<div class="container"
ng-init="stats['source'] = 'https://' + stats.dataset.metas.domain + '.opendatasoft.com/explore/dataset/' + stats.dataset.datasetid">
<div class="header">
<h1>
Observatoire statistiques de la population Française
</h1>
<p>
Ensemble de données synthétiques pour les thèmes suivants : population, logement, revenus,
emploi-chômage et établissements.
</p>
</div>
<div class="row">
<div class="col-md-4">
<div class="row full-height">
<div class="col-md-12">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Population
</h3>
<p class="description">
en 2012
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value"
ods-aggregation="agg"
ods-aggregation-context="stats"
ods-aggregation-function="SUM"
ods-aggregation-expression="population_en_2012">
{{ agg | number }}
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 no-mb">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Nombre de ménages
</h3>
<p class="description">
en 2012
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value"
ods-aggregation="agg"
ods-aggregation-context="stats"
ods-aggregation-function="SUM"
ods-aggregation-expression="menages_en_2012">
{{ agg | number : 0 }}
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Evolution de la population
</h3>
<p class="description">
France 2007 et 2012
</p>
</div>
<div class="advanced-kpi--middle no-bg mb-0">
<ods-chart style="height:300px" single-y-axis="true">
<ods-chart-query context="stats" field-x="region" maxpoints="50" sort="serie1-1">
<ods-chart-serie expression-y="population_en_2012" chart-type="column"
function-y="AVG"
color="#2C3F56" scientific-display="true">
</ods-chart-serie>
<ods-chart-serie expression-y="population_en_2007" chart-type="column"
function-y="AVG"
color="#EC643C" scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Naissance par métropole
</h3>
<p class="description">
De 2007 à 2012
</p>
</div>
<div class="advanced-kpi--middle no-bg mb-0">
<ods-chart style="height:300px" single-y-axis="true">
<ods-chart-query context="stats" field-x="metropole" maxpoints="50">
<ods-chart-serie expression-y="naissances_entre_2007_et_2012"
chart-type="treemap"
function-y="AVG" scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row full-height">
<div class="col-md-12">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Actifs
</h3>
<p class="description">
15 - 64 ans en 2012
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value"
ods-aggregation="agg"
ods-aggregation-context="stats"
ods-aggregation-function="SUM"
ods-aggregation-expression="actifs_15_64_ans_en_2012">
{{ agg | number : 0 }}
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 no-mb">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Chomeurs
</h3>
<p class="description">
15 - 64 ans en 2012
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value"
ods-aggregation="agg"
ods-aggregation-context="stats"
ods-aggregation-function="SUM"
ods-aggregation-expression="chomeurs_15_64_ans_en_2012">
{{ agg | number : 0 }}
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i
class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2 class="mb-2">
Logements
</h2>
<div class="row">
<div class="col-md-4">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Nombre de logements
</h3>
<p class="description">
en 2012
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value"
ods-aggregation="agg"
ods-aggregation-context="stats"
ods-aggregation-function="SUM"
ods-aggregation-expression="logements_en_2012">
{{ agg | number : 0 }}
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Résidences principales
</h3>
<p class="description">
en 2012
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value"
ods-aggregation="agg"
ods-aggregation-context="stats"
ods-aggregation-function="SUM"
ods-aggregation-expression="residences_principales_en_2012">
{{ agg | number : 0 }}
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Résidences secondaires et logts occasionnels
</h3>
<p class="description">
en 2012
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value"
ods-aggregation="agg"
ods-aggregation-context="stats"
ods-aggregation-function="SUM"
ods-aggregation-expression="res_secondaires_et_logts_occasionnels_en_2012">
{{ agg | number : 0 }}
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<h2 class="mb-2">
Ménages fiscaux
</h2>
<div class="row">
<div class="col-sm-4">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Nombre de ménages fiscaux
</h3>
<p class="description">
en 2012
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value"
ods-aggregation="agg"
ods-aggregation-context="stats"
ods-aggregation-function="SUM"
ods-aggregation-expression="nombre_de_menages_fiscaux_en_2012">
{{ agg | number : 0 }}
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Part des ménages fiscaux imposés
</h3>
<p class="description">
en 2012
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value"
ods-aggregation="agg"
ods-aggregation-context="stats"
ods-aggregation-function="SUM"
ods-aggregation-expression="part_des_menages_fiscaux_imposes_en_2012">
{{ agg | number : 0 }}
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box white flat">
<div class="advanced-kpi">
<div class="advanced-kpi--top">
<h3 class="title">
Mediane du revenu disponible par US
</h3>
<p class="description">
en 2012
</p>
</div>
<div class="advanced-kpi--middle centered">
<p class="value"
ods-aggregation="agg"
ods-aggregation-context="stats"
ods-aggregation-function="AVG"
ods-aggregation-expression="mediane_du_revenu_disponible_par_uc_en_2012">
{{ agg | number : 0 }}
</p>
</div>
<div class="advanced-kpi--bottom">
<div class="advanced-kpi--bottom-second-stage">
<span class="date">{{ stats.dataset.metas.data_processed | date }}</span>
<a class="source"
href="{{ stats.source }}"
title="{{ stats.dataset.metas.title }}">Source <i class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ods-dataset-context>
</section>:root {
--boxes-radius: 6px;
}
body, main {
margin: 0;
background-color: #F2F3F8;
}
section {
padding: 1.5rem 0;
}
.header {
margin: 3rem 2rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-weight: 500;
}
h3 {
font-weight: 400;
}
.mb-0 {
margin-bottom: 0;
}
.mb-2 {
margin-bottom: 2rem;
}
.box {
position: relative;
padding: 13px;
}
.box.white {
background-color: white;
}
.box.flat {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.16);
border-radius: var(--boxes-radius);
}
.advanced-kpi {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.advanced-kpi--top .title {
font-size: 1.2em;
margin: 0;
}
.advanced-kpi--top .description {
margin: 0 auto;
color: #565656;
font-size: 1em;
font-weight: 400;
}
.advanced-kpi--middle {
display: flex;
flex-direction: column;
margin: 20px 0;
}
.advanced-kpi--middle.centered {
align-items: center;
}
.advanced-kpi--middle > * {
margin: 5px 0;
}
.advanced-kpi--middle .value {
color: var(--highlight);
font-weight: 500;
font-size: 2.5rem;
}
.advanced-kpi--bottom {
font-size: 0.8em;
}
.advanced-kpi--bottom .advanced-kpi--bottom-second-stage {
display: flex;
justify-content: space-between;
}
.advanced-kpi--bottom .source {
text-decoration: underline;
color: var(--links);
}
.advanced-kpi--bottom .source i {
margin-left: 6px;
}
.advanced-kpi--bottom .source:hover {
opacity: 0.65;
}
.advanced-kpi--bottom .source:hover i {
animation: bounce 0.7s ease infinite;
}
@keyframes bounce {
from {
margin-left: 6px;
margin-right: 0;
}
50% {
margin-left: 2px;
margin-right: 4px;
}
to {
margin-left: 6px;
margin-right: 0;
}
}
.no-bg rect.highcharts-background {
fill: transparent !important;
}
/**
* License: MIT License
* Generated on 07 Jun 2021
* Author: Labs from opendatasoft
* Version: 0.2
* Description: ODS Layout over-ride to Flexbox system
*/
.box,.row.full-height{height:100%}.row{display:flex;flex-wrap:wrap;justify-content:center}.row>*{margin-bottom:20px;flex-grow:1}.order-0{order:0}@media screen and (min-width:750px){.order-sm-0{order:0}}@media screen and (min-width:970px){.order-md-0{order:0}}@media screen and (min-width:1170px){.order-lg-0{order:0}.order-lg-1{order:1}}.order-1{order:1}@media screen and (min-width:750px){.order-sm-1{order:1}}@media screen and (min-width:970px){.order-md-1{order:1}.order-md-2{order:2}}.order-2{order:2}@media screen and (min-width:750px){.order-sm-2{order:2}}@media screen and (min-width:1170px){.order-lg-2{order:2}.order-lg-3{order:3}}.order-3{order:3}@media screen and (min-width:750px){.order-sm-3{order:3}}@media screen and (min-width:970px){.order-md-3{order:3}.order-md-4{order:4}}.order-4{order:4}@media screen and (min-width:750px){.order-sm-4{order:4}}@media screen and (min-width:1170px){.order-lg-4{order:4}.order-lg-5{order:5}}.order-5{order:5}@media screen and (min-width:750px){.order-sm-5{order:5}}@media screen and (min-width:970px){.order-md-5{order:5}.order-md-6{order:6}}.order-6{order:6}@media screen and (min-width:750px){.order-sm-6{order:6}}@media screen and (min-width:1170px){.order-lg-6{order:6}.order-lg-7{order:7}}.order-7{order:7}@media screen and (min-width:750px){.order-sm-7{order:7}}@media screen and (min-width:970px){.order-md-7{order:7}.order-md-8{order:8}}.order-8{order:8}@media screen and (min-width:750px){.order-sm-8{order:8}}@media screen and (min-width:1170px){.order-lg-8{order:8}.order-lg-9{order:9}}.order-9{order:9}@media screen and (min-width:750px){.order-sm-9{order:9}}@media screen and (min-width:970px){.order-md-9{order:9}.order-md-10{order:10}}.order-10{order:10}@media screen and (min-width:750px){.order-sm-10{order:10}}@media screen and (min-width:1170px){.order-lg-10{order:10}.order-lg-11{order:11}}.order-11{order:11}@media screen and (min-width:750px){.order-sm-11{order:11}}@media screen and (min-width:970px){.order-md-11{order:11}.order-md-12{order:12}}.order-12{order:12}@media screen and (min-width:750px){.order-sm-12{order:12}}@media screen and (min-width:1170px){.order-lg-12{order:12}}@media screen and (max-width:1169px){:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-1,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-10,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-11,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-12,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-2,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-3,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-4,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-5,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-6,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-7,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-8,:not([class*=col-md]):not([class*=col-sm]):not([class*=col-xs]).col-lg-9{width:100%}}@media screen and (max-width:969px){:not([class*=col-sm]):not([class*=col-xs]).col-md-1,:not([class*=col-sm]):not([class*=col-xs]).col-md-10,:not([class*=col-sm]):not([class*=col-xs]).col-md-11,:not([class*=col-sm]):not([class*=col-xs]).col-md-12,:not([class*=col-sm]):not([class*=col-xs]).col-md-2,:not([class*=col-sm]):not([class*=col-xs]).col-md-3,:not([class*=col-sm]):not([class*=col-xs]).col-md-4,:not([class*=col-sm]):not([class*=col-xs]).col-md-5,:not([class*=col-sm]):not([class*=col-xs]).col-md-6,:not([class*=col-sm]):not([class*=col-xs]).col-md-7,:not([class*=col-sm]):not([class*=col-xs]).col-md-8,:not([class*=col-sm]):not([class*=col-xs]).col-md-9{width:100%}}@media screen and (max-width:749px){.row{flex-direction:column}:not([class*=col-xs]).col-sm-1,:not([class*=col-xs]).col-sm-10,:not([class*=col-xs]).col-sm-11,:not([class*=col-xs]).col-sm-12,:not([class*=col-xs]).col-sm-2,:not([class*=col-xs]).col-sm-3,:not([class*=col-xs]).col-sm-4,:not([class*=col-xs]).col-sm-5,:not([class*=col-xs]).col-sm-6,:not([class*=col-xs]).col-sm-7,:not([class*=col-xs]).col-sm-8,:not([class*=col-xs]).col-sm-9{width:100%}}.no-margin-bottom,.no-mb{margin-bottom:0!important}.no-margin-x,.no-mx{margin-left:0!important;margin-right:0!important}
/* Do not copy below, for Code Library resource only */
.chart-placeholder {
background-color: #fff1f1;
height: 350px;
}
.chart-placeholder:before {
display: block;
font-size: 2rem;
margin: 0.2rem 0.5rem;
content: "Chart";
}