Light with header and sections - regular box
Dataset in use: evenements-publics-openagenda (See it on userclub domain)
Fields in use:
| location_department | location_region | firstdate_begin (date) |
|---|---|---|
| 2020-05-12 | ||
| Loiret | Centre-Val de Loire | 2020-09-20 |
| Bas-Rhin | Grand Est | 2019-09-22 |
| Haute-Garonne | Occitanie | 2020-08-21 |
<section>
<div class="container">
<div class="heading">
<h1 class="title">Événements sur le territoire Français</h1>
<p class="subtitle">Données collectées et gérées par OpenAgenda</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam atque commodi cupiditate, deserunt
dolores dolorum ducimus ea fugiat non quidem repellat soluta voluptate voluptatem. Illo illum maxime
nemo officia velit.</p>
</div>
<div class="row my-4.5">
<div class="col-md-5">
<div class="content-box text align-right">
<h3>Evenements publics - OpenAgenda</h3>
<p class="subtitle">Top 20 des <b>départements</b> par nombre d'événements recensés</p>
</div>
</div>
<div class="col-md-7">
<div class="content-box tiny-shadow">
<ods-dataset-context context="evenementspublicsopenagenda"
evenementspublicsopenagenda-domain="userclub"
evenementspublicsopenagenda-dataset="evenements-publics-openagenda"
evenementspublicsopenagenda-parameters="{'disjunctive.tags':true,'disjunctive.placename':true,'disjunctive.city':true}">
<ods-chart class="no-bg hide-y-gridline hide-y-values hide-x-legend medium-x-values one-out-of-5-values"
single-y-axis="true" step="10000" scientific-display="true" display-legend="false"
labels-x-length="20" align-month="false">
<ods-chart-query context="evenementspublicsopenagenda" field-x="location_department" maxpoints="20"
sort="serie1-1">
<ods-chart-serie chart-type="bar" function-y="COUNT" label-y="Nombre d'événements"
color="#565656" display-values="true" display-stack-values="false"
scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</ods-dataset-context>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="heading">
<h3 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam atque commodi cupiditate, deserunt
dolores dolorum ducimus ea fugiat non quidem repellat soluta voluptate voluptatem. Illo illum maxime
nemo officia velit.</p>
</div>
<div class="row my-4.5">
<div class="col-md-5 order-md-2">
<div class="content-box text align-left">
<h3>Evenements publics - OpenAgenda</h3>
<p class="subtitle">Top 10 des <b>régions</b> par nombre d'événements recensés</p>
</div>
</div>
<div class="col-md-7">
<div class="order-md-1 content-box tiny-shadow">
<ods-dataset-context context="evenementspublicsopenagenda"
evenementspublicsopenagenda-domain="userclub"
evenementspublicsopenagenda-dataset="evenements-publics-openagenda"
evenementspublicsopenagenda-parameters="{'disjunctive.tags':true,'disjunctive.placename':true,'disjunctive.city':true}">
<ods-chart class="no-bg" labels-x-length="20" align-month="true">
<ods-chart-query context="evenementspublicsopenagenda" field-x="location_region" maxpoints="10"
sort="serie1-1"
category-colors="{'Île-de-France':'#2B3F56','Auvergne-Rhône-Alpes':'#6C7987','Nouvelle-Aquitaine':'#969FAA','Provence-Alpes-Côte d\'Azur':'#C0C5CC','Occitanie':'#2B3F56','Hauts-de-France':'#6C7987','Centre-Val de Loire':'#969FAA','Grand Est':'#C0C5CC','Pays de la Loire':'#2B3F56','Normandie':'#6C7987','Bretagne':'#969FAA','Bourgogne-Franche-Comté':'#C0C5CC','Aquitaine-Limousin-Poitou-Charentes':'#2B3F56','Alsace-Champagne-Ardenne-Lorraine':'#6C7987','Languedoc-Roussillon-Midi-Pyrénées':'#969FAA','Nord-Pas-de-Calais-Picardie':'#C0C5CC','Ile-de-France':'#2B3F56','La Réunion':'#6C7987','Corse':'#969FAA','Guadeloupe':'#C0C5CC'}">
<ods-chart-serie chart-type="treemap" function-y="COUNT"
scientific-display="true" label-y="Nombre d'événements">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</ods-dataset-context>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="heading">
<h3 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam atque commodi cupiditate, deserunt
dolores dolorum ducimus ea fugiat non quidem repellat soluta voluptate voluptatem. Illo illum maxime
nemo officia velit.</p>
</div>
<div class="row my-4.5">
<div class="col-md-12">
<div class="content-box text align-left">
<h3>Evenements publics - OpenAgenda</h3>
<p class="subtitle">Évolution du nombre d'événements par mois</p>
</div>
</div>
<div class="col-md-12">
<div class="content-box tiny-shadow">
<ods-dataset-context context="evenementspublicsopenagenda"
evenementspublicsopenagenda-domain="userclub"
evenementspublicsopenagenda-dataset="evenements-publics-openagenda"
evenementspublicsopenagenda-parameters="{'disjunctive.tags':true,'disjunctive.placename':true,'disjunctive.city':true,'q':'firstdate_begin:[2008 TO 2023]'}">
<ods-chart
class="no-bg small-chart-series small-y-gridline hide-x-legend medium-x-values medium-y-values"
display-legend="false"
timescale="month" single-y-axis="true" scientific-display="true"
align-month="true">
<ods-chart-query context="evenementspublicsopenagenda" field-x="firstdate_begin" maxpoints="0"
timescale="month">
<ods-chart-serie chart-type="areaspline" function-y="COUNT" color="#2B3F56"
label-y="Nombre d'événements"
display-stack-values="false"
scientific-display="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</ods-dataset-context>
</div>
</div>
</div>
</div>
</section>main {
margin: 0;
}
/* Data story */
section {
padding-top: 2rem;
background: linear-gradient(0deg, #F2F3F8, white);
}
.heading {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 2rem;
}
.heading h1.title {
font-size: 3em;
}
.heading h1 ~ .subtitle {
font-size: 2em;
font-weight: 200;
margin: 0 1em 2em;
}
.heading h3.title {
font-size: 1.7em;
}
.heading p {
text-align: center;
}
@media screen and (min-width: 640px) {
.heading {
margin: 2rem 12%;
}
}
.my-4\.5 {
margin-top: 4.5rem;
margin-bottom: 4.5rem;
}
.content-box {
height: 100%;
/* Content management */
word-break: break-word;
position: relative;
}
.content-box.text {
padding: 1rem;
}
.content-box.tiny-shadow {
background: white;
border-radius: 6px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.16);
}
.content-box.heavy-shadow {
box-shadow: 30px 20px 70px lightgrey;
}
.content-box .ods-chart {
height: 400px;
}
.one-out-of-5-values g.highcharts-label.highcharts-data-label {
display: none;
}
.one-out-of-5-values g.highcharts-label.highcharts-data-label:first-child, g.highcharts-label.highcharts-data-label:nth-child(5n) {
display: inherit;
}
/**
* License: MIT License
* Generated on 26 May 2021
* Author: Labs from Huwise
* Version: 0.1
* Description: ods-chart CSS Library
*/
.hide-x-legend .highcharts-xaxis tspan, .hide-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line, .hide-y-values .highcharts-yaxis-labels span, .hide-y-values .highcharts-yaxis-labels text {
display: none !important;
}
.highcharts-axis tspan, .highcharts-data-label tspan, .highcharts-label span, .highcharts-xaxis-labels text, .highcharts-yaxis-labels text {
font-family: Gotham-book, Arial, sans-serif !important;
}
.medium-x-values .highcharts-xaxis-labels span, .medium-x-values .highcharts-xaxis-labels text, .medium-y-values .highcharts-yaxis-labels span, .medium-y-values .highcharts-yaxis-labels text {
font-size: 14px !important;
}
.small-chart-series .highcharts-series path.highcharts-graph, .small-chart-series .highcharts-series rect, .small-y-gridline .highcharts-yaxis-grid path.highcharts-grid-line {
stroke-width: 0.8px !important;
}
.no-bg rect.highcharts-background {
fill: transparent !important;
}
.ods-highcharts__tooltip {
align-items: center;
}
/**
* License: MIT License
* Generated on 25 Jun 2021
* Author: Labs from opendatasoft
* Version: 0.3
* Description: ODS Layout over-ride to Flexbox system
*/
.box,.row.full-height{height:100%}.row{display:flex;flex-wrap:wrap}.row>*{margin-bottom:20px}.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}