Page Templates - Data Story

Tell a story based on your data. Through chapters and sections, narrate a story and use data visualisations to emphasize your story.

ODS Academy Data Story

Use this template to follow the module “Build your first datastory” in ODS Academy.

<ods-dataset-context context="">
    <!-- Header banner. To change the image, go in the CSS tab and search for the .page-header class -->
    <div class="page-header">
        <h1 class="page-title">
            -- Page title --
        </h1>
    </div>
    <!-- Page subtitle -->
    <div class="container">
        <div class="page-subtitle">
            -- Short description of what the page is about -- 
        </div>
    </div>
    <!-- Some KPIs-->
    <section>
        <div class="container">
            <!-- Insert your aggregation widget code in the "three-columns" <div> below -->
            <div class="three-columns">
                <div class="kpi-box">
                    <i class="kpi-icon fa fa-gitlab" aria-hidden="true"></i>
                    <h3 class="kpi-value">
                        --
                    </h3>
                    <p class="kpi-description">
                        -- KPI description goes here --
                    </p>
                </div>
                <div  class="kpi-box">
                    <i class="kpi-icon fa fa-houzz" aria-hidden="true"></i>
                    <h3 class="kpi-value"> 
                        --
                    </h3>
                    <p class="kpi-description">
                        -- KPI description goes here --
                    </p>
                </div>
                <div class="kpi-box">
                    <i class="kpi-icon fa fa-houzz"aria-hidden="true" ></i>
                    <h3 class="kpi-value"> 
                        --
                    </h3>
                    <p class="kpi-description">
                        -- KPI description goes here --
                    </p>
                </div>
            </div>
        </div>
    </section>
    <div class="container">
        <!-- Section 1-->
        <section class="page-section">
            <h2 class="section-title">
                -- Section title --
            </h2>
            <div class="row">
                <div class="col-md-6">
                    <!-- Remove this placeholder and replace it with the visualization of your choice (map, chart, table, etc.) -->
                    <div class="placeholder"></div>
                    <!-- Always provide a link to the dataset for users to dig into the data if they want to-->
                    <div class="small-link">
                        <a href="#">-- link to source --</a>
                    </div>
                </div>
                <div class="col-md-6">
                    <p>
                        -- Description of the visualisation that is being presented -- 
                    </p>
                </div>
            </div>
        </section>
        <!-- End of the first section -->
        <!-- Section 2 -->
        <section class="page-section">
            <h2 class="section-title">
                -- Section title --
            </h2>
            <div class="row">
                <div class="col-md-6">
                    <p>
                        -- Description of the visualisation that is being presented --
                    </p>
                </div>
                <div class="col-md-6">
                    <!-- Remove this placeholder and replace it with the visualization of your choice (map, chart, table, etc.) -->
                    <div class="placeholder"></div>
                    <div class="small-link">
                        <a href="#">-- link to source --</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- Section 3 -->
        <section class="page-section">
            <h2 class="section-title">
                -- Section title --
            </h2>
            <div class="row">
                <div class="col-md-8">
                    <div class="placeholder"></div>
                    <div class="small-link">
                        <a href="#">-- link to source --</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <p>
                        -- Description of the visualisation that is being presented --
                    </p>
                </div>
            </div>
        </section>
    </div>
</ods-dataset-context>
      
main.main--page {
    margin: 0;
}
body {
    font-size: 1.4rem;
    background-color: #FFFFFF;
    line-height: 1.6;
    font-weight: 300;
}
/* Body text */
p {
    text-align: justify;
    margin-top: 0;
    margin-bottom: 1.5rem;
}
.three-columns {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;
}
@media (min-width: 994px) {
    .three-columns {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
.small-link {
    font-size: 0.9rem;
    font-style: italic;
}
.placeholder {
    width: 100%;
    height: 400px;
    border-radius: 6px;
    background-color: #eee;
}
/* Header
    ========================================================================== */
.page-header {
    background-color: var(--highlight);
    /* Banner image. Put your image in the "Assets" tab of your back-office. Then, take copy/paste here the address begininng with "/assets" */
    background-image: url('/assets/theme_image/Capture d’écran 2019-11-22 à 14.51.30.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 190px; /* Change the height of the image here by increasing or decreasing the pixels. */
    /* Properties of the title located within the image banner */
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;    
} 
.page-title {
    color: #142E7B;
    text-align: center; 
    background-color: #FFFFFF;  
    position: relative;
    vertical-align: bottom;
    margin: 0;
    font-weight: 400;
    font-size: 2.5rem;
    padding: 15px 20px 10px 20px;
    border-radius: 7px 7px 0px 0px;    
}
.page-subtitle {
    margin-top: 4rem;
    margin-bottom: 2rem;
}
/* KPIs
    ========================================================================== */
.kpi-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-align: center;
    padding: 26px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 4px 6px 0 rgba(100,100,100,0.2);
    border-radius: 7px;
}
@media (min-width: 994px) { 
    .kpi-box {
        margin-bottom: 2rem;
    }
}
.kpi-icon {
    color: #142E7B;;
    font-size: 4rem;
    margin-top: 0;
    margin-bottom: 13px;    
    max-width: 100%;
}
.kpi-value {
    color: #142E7B;
    font-size: 3.2rem;
    font-weight: 400;
    margin: 0;
}
.kpi-description {
    margin: 0;
    padding: 0;
}
/* Sections
    ========================================================================== */
.page-section {
    margin-top: 2rem;
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    box-shadow: 0 15px 13px -15px rgba(100,100,100,0.2);
}
.section-title {
    font-size: 2.2rem;
    font-weight: 400;
    color: #142E7B;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
      

Blog Article Style

A blog-like template to narrate a story and insert charts or maps to enhance the storytelling experience.

<section class="container datastory-header">
    <h1 class="datastory-title">
        Data story title
    </h1>
    <h2 class="datastory-tagline">
        Proinde concepta rabie saeviore, quam desperatio incendebat et fames, 
        amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, 
        quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.
    </h2>
    <h3 class="datastory-intro">
        Ex his quidam aeternitati se commendari posse per statuas aestimantes eas 
        ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, 
        quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, 
        quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. 
        quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, 
        ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... 
        statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.
    </h3>
</section>

<section class="container datastory-body">
    <h2 class="datastory-subtitle">
        A block
    </h2>
    <p class="datastory-text">
        Adolescebat autem obstinatum propositum erga haec et similia multa scrutanda, 
        stimulos admovente regina, quae abrupte mariti fortunas trudebat in exitium praeceps, 
        cum eum potius lenitate feminea ad veritatis humanitatisque viam reducere utilia suadendo deberet, 
        ut in Gordianorum actibus factitasse Maximini truculenti illius imperatoris rettulimus coniugem.
    </p>

    <h2 class="datastory-subtitle">
        A block with list
    </h2>
    <p class="datastory-text">
        Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque 
        adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato 
        repente consilio ad placidiora deverti.
    </p>
    <ul class="datastory-text">
        <li>
            Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque.
        </li>
        <li>
            adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut 
            mutato repente consilio ad placidiora deverti.
        </li>
    </ul>

    <h2 class="datastory-body">
        A block with a graph and an image
    </h2>
    <ods-dataset-context context="prixdescarburantsj7" 
                         prixdescarburantsj7-domain="public"
                         prixdescarburantsj7-dataset="prix_des_carburants_j_7" 
                         prixdescarburantsj7-parameters="{'sort':'update'}">
        <ods-chart single-y-axis="true" 
                align-month="true">
            <ods-chart-query context="prixdescarburantsj7" 
                            field-x="update" 
                            maxpoints="50" 
                            timescale="month">
                <ods-chart-serie expression-y="price_gazole" 
                                chart-type="arearange" 
                                function-y="COUNT" 
                                color="#FF515A" 
                                scientific-display="true" 
                                subseries='[{"func":"MIN","yAxis":"price_gazole"},{"func":"MAX","yAxis":"price_gazole"}]'>
                </ods-chart-serie>
                <ods-chart-serie expression-y="price_sp95" 
                                chart-type="arearange" 
                                function-y="COUNT" 
                                color="#1B6698" 
                                scientific-display="true" 
                                subseries='[{"func":"MIN","yAxis":"price_sp95"},{"func":"MAX","yAxis":"price_sp95"}]'>
                </ods-chart-serie>
                <ods-chart-serie expression-y="price_sp98" 
                                chart-type="arearange" 
                                function-y="COUNT" 
                                color="#FCD23B" 
                                scientific-display="true" 
                                subseries='[{"func":"MIN","yAxis":"price_sp98"},{"func":"MAX","yAxis":"price_sp98"}]'>
                </ods-chart-serie>
            </ods-chart-query>
        </ods-chart>
    </ods-dataset-context>

    <p class="datastory-text">
        Adolescebat autem obstinatum propositum erga haec et similia multa scrutanda, 
        stimulos admovente regina, quae abrupte mariti fortunas trudebat in exitium praeceps, 
        cum eum potius lenitate feminea ad veritatis humanitatisque viam reducere utilia suadendo deberet, 
        ut in Gordianorum actibus factitasse Maximini truculenti illius imperatoris rettulimus coniugem.
    </p>
    <p class="datastory-text">
        <a href="#">Lorem ipsum !</a>
    </p>
    <img src="/img/datastory-image.png" 
         class="datastory-image">
</section>
main.main--page {
    margin: 0;
    background-color: #FFFFFF;
    line-height: 1.6;
}

.datastory-header {
    margin-top: 40px;
    margin-bottom: 60px;
    max-width: 1000px;
    text-align: center;
}

.datastory-title {
    font-size: 3rem;
    font-weight: normal;
    margin-bottom: 1.5rem;
}

.datastory-tagline {
    font-size: 1.4rem;
    font-style: italic;
    margin-top: 0;
    margin-bottom: 40px;
    font-weight: 300;    
}

.datastory-intro {
    font-size: 1.4rem;
    font-weight: normal;
    text-align: justify;
}

.datastory-body {
    max-width: 750px;
}

.datastory-subtitle {
    font-size: 1.44rem;
    border-left: 3px solid var(--highlight);
    padding-left: 12px;
    font-weight: 400; 
}

.datastory-text {
    font-size: 1.2rem;
    margin-left: 15px;
}
 
.datastory-image {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
}

Data Story with sections

<section class="block-grey">
    <div class="container">
        <h1 class="header-title">
            Interesting title
        </h1>
        <h2 class="header-subtitle">
            Quam ob rem ut ii qui superiores sunt submittere se debent in amicitia, sic quodam modo inferiores extollere.
        </h2>
    </div>
</section>


<section class="block-white">
    <div class="container">
        <h2 class="block-title">
            A block subtitle
        </h2>
        <h3 class="block-subtitle">
            Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt.
        </h3>

        <div class="block-section">
            <div class="row">
                <div class="col-md-6">
                    <p class="block-text">
                        Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.
                    </p>
                </div>
                <div class="col-md-6">
                    <p class="block-text">
                        Paphius quin etiam et Cornelius senatores, <a href="#">ambo venenorum artibus</a> pravis se polluisse confessi, eodem pronuntiante Maximino sunt interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim et Asbolium supra dictos, quoniam cum hortaretur passim nominare, quos vellent, adiecta religione firmarat, nullum igni vel ferro se puniri iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem aruspicem dedit, in negotio eius nullo sacramento constrictus.
                    </p>
                </div>
            </div>
        </div>
        <ods-dataset-context context="chart"
                             chart-domain="public"
                             chart-dataset="modis_c6_global_7d"
                             chart-parameters="{'disjunctive.country':true}">
            <ods-chart align-month="true">
                <ods-chart-query context="chart" 
                                field-x="country" 
                                maxpoints="50">
                    <ods-chart-serie expression-y="brightness" 
                                    chart-type="areasplinerange" 
                                    function-y="COUNT" 
                                    color="#FF9810" 
                                    scientific-display="true" 
                                    subseries='[{"func":"MIN","yAxis":"brightness"},{"func":"MAX","yAxis":"brightness"}]'>
                    </ods-chart-serie>
                </ods-chart-query>
            </ods-chart>
        </ods-dataset-context>
    </div>
</section>


<section class="block-grey">
    <div class="container">
        <h2 class="block-title">
            A block subtitle
        </h2>
        <h3 class="block-subtitle">
            Unde Rufinus ea tempestate praefectus praetorio
        </h3>

        <p class="block-text center-text">
            Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum.
        </p>

        <div class="block-section">
            <div class="row">
                <div class="col-md-6">
                    <ods-dataset-context context="map" 
                                         map-domain="public"
                                         map-dataset="modis_c6_global_7d" 
                                         map-parameters="{'disjunctive.country':true}">
                        <ods-map context="map" 
                                 scroll-wheel-zoom="false" 
                                 location="2,19.68257,-0.02081" 
                                 basemap="jawg.streets"></ods-map>
                    </ods-dataset-context>
                </div>
                <div class="col-md-6">
                    <p class="block-text justify-text">
                        Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.
                        <br>
                        <a href="#">precari ab indigno</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="block-section">
            <div class="row">
                <div class="col-md-6">
                    <p class="block-text justify-text">
                        Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.
                    </p>
                </div>
                <div class="col-md-6">
                    <ods-dataset-context context="chart2" 
                                         chart2-domain="public" 
                                         chart2-dataset="modis_c6_global_7d" 
                                         chart2-parameters="{'disjunctive.country':true,'timezone':'Europe/Berlin'}">
                        <ods-chart align-month="true">
                            <ods-chart-query context="chart2" 
                                             field-x="country" 
                                             maxpoints="10" 
                                             sort="serie1-1">
                                <ods-chart-serie expression-y="brightness" 
                                                 chart-type="column" 
                                                 function-y="COUNT" 
                                                 color="#FF9810" 
                                                 scientific-display="true">
                                </ods-chart-serie>
                            </ods-chart-query>
                        </ods-chart>
                    </ods-dataset-context>
                </div>
            </div>
        </div>
    </div>
</section>
main.main--page {
    margin: 0;
}

.justify-text {
    text-align: justify;
}

.center-text {
    text-align: center;
}

.header-title {
    text-align: center;
    font-size: 4rem;
    font-weight: normal;
    margin-bottom: 0;
    color: var(--highlight);
}

.header-subtitle {
    font-size: 1.7rem;
    text-align: center;
    margin: 0;
    font-weight: normal;
}

.block-section {
    margin: 26px 0px;
}

.block-white {
    padding: 65px 0;
    background-color: #FFFFFF;
}

.block-grey {
    padding: 65px 0;
    background-color: #f7f8f8;
}

.block-title {
    font-size: 2.2rem;
    text-align: center;
    font-weight: 500;
    color: var(--highlight);
    margin-bottom: .5rem;
}

.block-subtitle {
    font-size: 1.44rem;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--titles);
}

.block-text {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

rect.highcharts-background {
    fill: rgba(0, 0, 0, 0) !important;
}