Widget Tricks - Static maps, a quick introduction

When your goal is to share a precise analysis of a theme, such as employment or demography, for given administrative territories, you may want to disable all interactions with the map. You will even probably want to have overseas territories right next to the other territories in order to visualize immediately how the measurement varies across these administrative areas.

In this situation, you might prefer a static colored picture over a classic map widget. The resource below shows you how to create such static analyses of administrative divisions.

Static maps with colored SVG images

Powered by ods-picto and ods-color-gradient, an example of combinaison to display a fast and lightweight map for analytic purposes

NOTE: Note: this resource showcase positionning possibilities and demonstrate how flexible SVG usage can be. On the other hand beware that reusing this code can be difficult. If you feel confortable with ng-model and ng-class you can copy and simplify it by removing unecessary positions and code.

<ods-dataset-context context="ctx"
                     ctx-dataset="liste-des-departements-metropole-dom"
                     ctx-domain="discovery">
    <div ods-color-gradient="analysis"
         ods-color-gradient-context="ctx"
         ods-color-gradient-x="code_texte"
         ods-color-gradient-serie="MAX(code)"
         ods-color-gradient-logarithmic-scale-factor="1"
         ng-init="idf = 'svgmap-idf-top-left';
                  drom = 'svgmap-drom-right';">
        <div class="ods-box">
            <span>
                Position de l'île de France
            </span>
            <select ng-model="idf">
                <option value="svgmap-idf-top-left">Haut gauche</option>
                <option value="svgmap-idf-top-right">Haut droit</option>
                <option value="svgmap-idf-none">Désactivé</option>
            </select>
            <br/>
            <span>
                Position des départements et régions d'outre mer
            </span>
            <select ng-model="drom">
                <option value="svgmap-drom-left">Gauche</option>
                <option value="svgmap-drom-right">Droite</option>
                <option value="svgmap-drom-bottom">En dessous</option>
                <option value="svgmap-drom-none">Désactivé</option>
            </select>
        </div>
        <div class="svgmap-france">
            <div class="svgmap-drom"
                 ng-class="drom">
                <div class="svgmap-martinique">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_mtq.svg'"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
                <div class="svgmap-reunion">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_reu.svg'"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
                <div class="svgmap-guyane">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_guf.svg'"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
                <div class="svgmap-guadeloupe">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_glp.svg'"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
                <div class="svgmap-mayotte">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_myt.svg'"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
            </div>
            <div class="svgmap-idf"
                 ng-class="idf">
                <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_idf.svg'"
                           color-by-attribute="analysis.colors"></ods-picto>
            </div>
            <div class="svgmap-francemetro">
                <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_fxx.svg'"
                           color-by-attribute="analysis.colors"></ods-picto>
            </div>
        </div>
    </div>
</ods-dataset-context>
/******** SVG MAPS *************/
/************ Conteneur France ***************/
.svgmap-france {
    width: 500px;
    margin: auto;
    position: relative;
    background-color: white;
}
/* France Métropole */
.svgmap-francemetro {
    padding: 0;
}
/********** DROM ************/
/* Position en colonne left */
.svgmap-drom-left ~ .svgmap-francemetro {
    padding-left: 17%;
}
.svgmap-drom.svgmap-drom-left {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 1%;
    top: 2%;
    width: 12.1%;
}
/* Position en colonne right */
.svgmap-drom.svgmap-drom-right {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 1%;
    top: 3%;
    width: 11%;
}
/* Position en ligne bottom */
.svgmap-drom-bottom ~ .svgmap-francemetro {
    padding-bottom: 16%;
}
.svgmap-drom.svgmap-drom-bottom {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 1%;
    width: 90%;
    height: 17%;
}
.svgmap-drom.svgmap-drom-bottom > * {
    margin: 2%;
}
/****** Ile de France ZOOM ********/
/* Position Top Left */
.svgmap-idf-top-left ~ .svgmap-francemetro {
    padding-top: 7%;
    padding-left: 7%;
}
.svgmap-idf.svgmap-idf-top-left {
    position: absolute;
    left: 2%;
    top: 2%;
    width: 20%;
}
/* Position Top Right */
.svgmap-idf.svgmap-idf-top-right {
    position: absolute;
    right: 10%;
    top: 3%;
    width: 20%;
}
.svgmap-idf-top-right ~ .svgmap-francemetro {
    padding-top: 8%;
}
/* DROM Right + IDF Top Right */
.svgmap-drom-right ~ .svgmap-idf-top-right ~ .svgmap-francemetro {
    padding-right: 3%;
}
.svgmap-drom-right ~ .svgmap-idf-top-right {
    right: 16%;
}
/* DROM Right + IDF Top Left */
.svgmap-drom-right ~ .svgmap-idf.svgmap-idf-top-left {
    left: 3%;
}
/* DROM Left + IDF Top Right */
.svgmap-drom-left ~ .svgmap-idf-top-right {
    right: 1%;
}
/* DROM Left + IDF Top Left */
.svgmap-drom-left ~ .svgmap-francemetro ~ .svgmap-idf.svgmap-idf-top-left {
    padding-top: 11%;
    padding-left: 20%;
}
.svgmap-drom-left ~ .svgmap-idf.svgmap-idf-top-left ~ .svgmap-francemetro{
    padding-left: 22%;
    padding-top: 5%;
}
.svgmap-drom-left ~ .svgmap-idf.svgmap-idf-top-left {
    left: 17%;
    width: 17%;
}
/* Some CSS override to manage picto sizes */
.ods-svginliner__svg-container {
    height: 100%;
}
.odswidget.odswidget-picto {
    height: 100%;
}
/* None styles */
.svgmap-idf-none, .svgmap-drom-none {
    display: none;
}

SVG Paths styling

Path and other geometries can easily be styled with few CSS lines.

<ods-dataset-context context="ctx"
                     ctx-dataset="liste-des-departements-metropole-dom"
                     ctx-domain="discovery">
    <div ods-color-gradient="analysis"
         ods-color-gradient-context="ctx"
         ods-color-gradient-x="code_texte"
         ods-color-gradient-serie="MAX(code)"
         ods-color-gradient-logarithmic-scale-factor="1">
        <div class="svgmap-france" id="style1">
            <div class="svgmap-idf svgmap-idf-top-left"
                 ng-class="idf">
                <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_idf.svg'"
                           color-by-attribute="analysis.colors"></ods-picto>
            </div>
            <div class="svgmap-francemetro">
                <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_fxx.svg'"
                           color-by-attribute="analysis.colors"></ods-picto>
            </div>
        </div>
    </div>
</ods-dataset-context>
/******** SVG MAPS *************/
/******************** Custom Style *************************/
/* Path stroke : lines between whapes */
#style1 {
    stroke: white;
    stroke-width: 2px;
}
/************ Conteneur France ***************/
.svgmap-france {
    width: 500px;
    margin: auto;
    position: relative;
    background-color: white;
}
/* France Métropole */
.svgmap-francemetro {
    padding: 0;
}
/********** DROM ************/
/* Position en colonne left */
.svgmap-drom-left ~ .svgmap-francemetro {
    padding-left: 17%;
}
.svgmap-drom.svgmap-drom-left {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 1%;
    top: 2%;
    width: 12.1%;
}
/* Position en colonne right */
.svgmap-drom.svgmap-drom-right {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 1%;
    top: 3%;
    width: 11%;
}
/* Position en ligne bottom */
.svgmap-drom-bottom ~ .svgmap-francemetro {
    padding-bottom: 16%;
}
.svgmap-drom.svgmap-drom-bottom {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 1%;
    width: 90%;
    height: 17%;
}
.svgmap-drom.svgmap-drom-bottom > * {
    margin: 2%;
}
/****** Ile de France ZOOM ********/
/* Position Top Left */
.svgmap-idf-top-left ~ .svgmap-francemetro {
    padding-top: 7%;
    padding-left: 7%;
}
.svgmap-idf.svgmap-idf-top-left {
    position: absolute;
    left: 2%;
    top: 2%;
    width: 20%;
}
/* Position Top Right */
.svgmap-idf.svgmap-idf-top-right {
    position: absolute;
    right: 10%;
    top: 3%;
    width: 20%;
}
.svgmap-idf-top-right ~ .svgmap-francemetro {
    padding-top: 8%;
}
/* DROM Right + IDF Top Right */
.svgmap-drom-right ~ .svgmap-idf-top-right ~ .svgmap-francemetro {
    padding-right: 3%;
}
.svgmap-drom-right ~ .svgmap-idf-top-right {
    right: 16%;
}
/* DROM Right + IDF Top Left */
.svgmap-drom-right ~ .svgmap-idf.svgmap-idf-top-left {
    left: 3%;
}
/* DROM Left + IDF Top Right */
.svgmap-drom-left ~ .svgmap-idf-top-right {
    right: 1%;
}
/* DROM Left + IDF Top Left */
.svgmap-drom-left ~ .svgmap-francemetro ~ .svgmap-idf.svgmap-idf-top-left {
    padding-top: 11%;
    padding-left: 20%;
}
.svgmap-drom-left ~ .svgmap-idf.svgmap-idf-top-left ~ .svgmap-francemetro{
    padding-left: 22%;
    padding-top: 5%;
}
.svgmap-drom-left ~ .svgmap-idf.svgmap-idf-top-left {
    left: 17%;
    width: 17%;
}
/* Some CSS override to manage picto sizes */
.ods-svginliner__svg-container {
    height: 100%;
}
.odswidget.odswidget-picto {
    height: 100%;
}
/* None styles */
.svgmap-idf-none, .svgmap-drom-none {
    display: none;
}

SVG Paths + Text

Hover paths to display it’s label.

<ods-dataset-context context="ctx"
                     ctx-dataset="liste-des-departements-metropole-dom"
                     ctx-domain="discovery">
    <div ods-color-gradient="analysis"
         ods-color-gradient-context="ctx"
         ods-color-gradient-x="code_texte"
         ods-color-gradient-serie="MAX(code)"
         ods-color-gradient-logarithmic-scale-factor="1">
        <div class="svgmap-france svgmap-with-text">
            <div class="svgmap-francemetro">
                <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_fxx_text.svg'"
                           color-by-attribute="analysis.colors"></ods-picto>
            </div>
        </div>
    </div>
</ods-dataset-context>
/******** SVG MAPS *************/
/************ Conteneur France ***************/
.svgmap-france {
    width: 500px;
    margin: auto;
    position: relative;
    background-color: white;
}
/* France Métropole */
.svgmap-francemetro {
    padding: 0;
}
/********** DROM ************/
/* Position en colonne left */
.svgmap-drom-left ~ .svgmap-francemetro {
    padding-left: 17%;
}
.svgmap-drom.svgmap-drom-left {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 1%;
    top: 2%;
    width: 12.1%;
}
/* Position en colonne right */
.svgmap-drom.svgmap-drom-right {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 1%;
    top: 3%;
    width: 11%;
}
/* Position en ligne bottom */
.svgmap-drom-bottom ~ .svgmap-francemetro {
    padding-bottom: 16%;
}
.svgmap-drom.svgmap-drom-bottom {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 1%;
    width: 90%;
    height: 17%;
}
.svgmap-drom.svgmap-drom-bottom > * {
    margin: 2%;
}
/****** Ile de France ZOOM ********/
/* Position Top Left */
.svgmap-idf-top-left ~ .svgmap-francemetro {
    padding-top: 7%;
    padding-left: 7%;
}
.svgmap-idf.svgmap-idf-top-left {
    position: absolute;
    left: 2%;
    top: 2%;
    width: 20%;
}
/* Position Top Right */
.svgmap-idf.svgmap-idf-top-right {
    position: absolute;
    right: 10%;
    top: 3%;
    width: 20%;
}
.svgmap-idf-top-right ~ .svgmap-francemetro {
    padding-top: 8%;
}
/* DROM Right + IDF Top Right */
.svgmap-drom-right ~ .svgmap-idf-top-right ~ .svgmap-francemetro {
    padding-right: 3%;
}
.svgmap-drom-right ~ .svgmap-idf-top-right {
    right: 16%;
}
/* DROM Right + IDF Top Left */
.svgmap-drom-right ~ .svgmap-idf.svgmap-idf-top-left {
    left: 3%;
}
/* DROM Left + IDF Top Right */
.svgmap-drom-left ~ .svgmap-idf-top-right {
    right: 1%;
}
/* DROM Left + IDF Top Left */
.svgmap-drom-left ~ .svgmap-francemetro ~ .svgmap-idf.svgmap-idf-top-left {
    padding-top: 11%;
    padding-left: 20%;
}
.svgmap-drom-left ~ .svgmap-idf.svgmap-idf-top-left ~ .svgmap-francemetro{
    padding-left: 22%;
    padding-top: 5%;
}
.svgmap-drom-left ~ .svgmap-idf.svgmap-idf-top-left {
    left: 17%;
    width: 17%;
}
/* Some CSS override to manage picto sizes */
.ods-svginliner__svg-container {
    height: 100%;
}
.odswidget.odswidget-picto {
    height: 100%;
}
/* None styles */
.svgmap-idf-none, .svgmap-drom-none {
    display: none;
}
/******************** Style *************************/
/* Texts */
.svgmap-with-text svg a path {
    fill: transparent !important;
    stroke: transparent !important;
}
.svgmap-with-text svg a text {
    display: none;
    font-size: 1.3em;
    font-weight: 300;
    font-family: sans-serif;
    fill: white !important;
    text-shadow: 2px 2px 5px black;
    stroke: none;
    pointer-events: none;
}
.svgmap-with-text svg a:hover {
    cursor: default;
    text-decoration: none;
}
.svgmap-with-text svg a:hover text {
    display: inherit;
}
/* Custom hover styling */
.svgmap-with-text svg a:hover path {
    stroke: white !important;
}
/* Custom positionning */
/* DEP */
#text-dep_idf-92 {
    text-anchor: start;
}
#text-dep_fxx-29, #text-dep_fxx-22 {
    text-anchor: start;
}
#text-dep_fxx-2A, #text-dep_fxx-2B {
    text-anchor: end;
}

SVG Paths + Text with multiple sources

Same example with different multiple picto sources for overseas or zoom-in.

<ods-dataset-context context="ctx"
                     ctx-dataset="liste-des-departements-metropole-dom"
                     ctx-domain="discovery">
    <div ods-color-gradient="analysis"
         ods-color-gradient-context="ctx"
         ods-color-gradient-x="code_texte"
         ods-color-gradient-serie="MAX(code)"
         ods-color-gradient-logarithmic-scale-factor="1"
         ng-init="shapeColor = 'white'">
        <div id="map" class="svgmap-france-region svgmap-with-text">
            <div class="svgmap-drom-region">
                <div class="svgmap-region-martinique">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/reg_mtq_text.svg'"
                               color="shapeColor"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
                <div class="svgmap-region-reunion">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/reg_reu_text.svg'"
                               color="shapeColor"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
                <div class="svgmap-region-guyane">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/reg_guf_text.svg'"
                               color="shapeColor"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
                <div class="svgmap-region-guadeloupe">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/reg_glp_text.svg'"
                               color="shapeColor"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
                <div class="svgmap-region-mayotte">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/reg_myt_text.svg'"
                               color="shapeColor"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
            </div>
            <div class="svgmap-francemetro-region">
                <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/reg_fxx_text.svg'"
                           color="shapeColor"
                           color-by-attribute="analysis.colors"></ods-picto>
            </div>
        </div>
    </div>
</ods-dataset-context>
/******** SVG MAPS REGION *************/
/************ Conteneur France ***************/
.svgmap-france-region {
    width: 500px;
    margin: auto;
    position: relative;
    background-color: white;
}
/* France Métropole */
.svgmap-francemetro-region {
    padding-left: 17%;
}
/********** DROM ************/
/* Position en colonne left */
.svgmap-drom-region {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 1%;
    top: 2%;
    bottom: 2%;
    width: 12%;
}
/******************** Style *************************/
/* Texts */
.svgmap-with-text svg a path {
    fill: transparent !important;
    stroke: transparent !important;
}
.svgmap-with-text svg a text {
    display: none;
    font-size: 1.3em;
    font-weight: 300;
    font-family: sans-serif;
    fill: white !important;
    text-shadow: 2px 2px 5px black;
    stroke: none;
    pointer-events: none;
}
.svgmap-with-text svg a:hover {
    cursor: default;
    text-decoration: none;
}
.svgmap-with-text svg a:hover text {
    display: inherit;
}
/* Custom hover styling */
.svgmap-with-text svg a:hover path {
    stroke: white !important;
}

The complete exemple - France with overseas regions, departments and cities + text hover paths

Click on HTML or CSS tab to edit and see the results. The code proposes only one positioning, therefore it’s lighter and cleaner.

<!-- IE 11 requires height style on the container, and height:100% on all children -->
<div style="width: 600px; margin: auto">

    <ods-dataset-context style="height: 100%"
                         context="ctx"
                         ctx-dataset="liste-des-departements-metropole-dom"
                         ctx-parameters="{'q':'code > 3'}"
                         ctx-domain="discovery">

        <!-- To Test default color when values are missing, add :
  ctx-parameters="{'q':'code <= 70 OR code > 972 OR code:95 OR code:78'}"
  -->

        <div style="height: 100%" ods-color-gradient="analysis"
             ods-color-gradient-context="ctx"
             ods-color-gradient-x="code_texte"
             ods-color-gradient-serie="MAX(code)"
             ods-color-gradient-logarithmic-scale-factor="1"

             ng-init="shapeColor = 'white'">

            <div id="map" class="svgmap-france">

                <div class="svgmap-drom">
                    <div class="svgmap-martinique">
                        <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_mtq_text.svg'"
                                   color="shapeColor"
                                   color-by-attribute="analysis.colors"></ods-picto>
                    </div>
                    <div class="svgmap-reunion">
                        <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_reu_text.svg'"
                                   color="shapeColor"
                                   color-by-attribute="analysis.colors"></ods-picto>
                    </div>
                    <div class="svgmap-guyane">
                        <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_guf_text.svg'"
                                   color="shapeColor"
                                   color-by-attribute="analysis.colors"></ods-picto>
                    </div>
                    <div class="svgmap-guadeloupe">
                        <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_glp_text.svg'"
                                   color="shapeColor"
                                   color-by-attribute="analysis.colors"></ods-picto>
                    </div>
                    <div class="svgmap-mayotte">
                        <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_myt_text.svg'"
                                   color="shapeColor"
                                   color-by-attribute="analysis.colors"></ods-picto>
                    </div>
                </div>
                <div class="svgmap-com">
                    <div class="svgmap-maf_blm">
                        <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/com_maf_blm_text.svg'"
                                   color="shapeColor"
                                   color-by-attribute="analysis.colors"></ods-picto>
                    </div>
                    <div class="svgmap-ncl">
                        <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/com_ncl_text.svg'"
                                   color="shapeColor"
                                   color-by-attribute="analysis.colors"></ods-picto>
                    </div>
                    <div class="svgmap-spm">
                        <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/com_spm_text.svg'"
                                   color="shapeColor"
                                   color-by-attribute="analysis.colors"></ods-picto>
                    </div>
                </div>
                <div class="svgmap-idf">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_idf_text.svg'"
                               color="shapeColor"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
                <div class="svgmap-francemetro">
                    <ods-picto url="'https://static.opendatasoft.com/georef/svg/fr/dep_fxx_text.svg'"
                               color="shapeColor"
                               color-by-attribute="analysis.colors"></ods-picto>
                </div>
            </div>

        </div>
    </ods-dataset-context>

</div>
/******** SVG MAPS *************/

/************ Conteneur France ***************/
.svgmap-france {
  width: 100%;
  height: 100%; /* IE Fix */
  margin: auto;
  position: relative;
  background-color: white;
}
/* France Métropole */
.svgmap-francemetro {
  padding-left: 17%;
  padding-bottom: 15%;
  padding-right: 0%;
  padding-top: 7%;
  height: 100%; /* IE Fix */
}
/********** DROM ************/
/* Position en colonne left */
.svgmap-drom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  left: 1%;
  top: 2%;
  bottom: 2%;
  width: 12%;
}
.svgmap-drom > * {
  height: 12%;
}
/********** COM ************/
/* Position en ligne bottom */
.svgmap-com {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 1%;
  height: 15%;
}
.svgmap-com > * {
  width: 15%;
}

/****** Ile de France ZOOM ********/
/* Position Top Right */
.svgmap-idf {
  position: absolute;
  top: 1%;
  right: 3%;
  width: 20%;
}


/* Some CSS override to manage picto sizes */
.ods-svginliner__svg-container {
  height: 100%;
}
.odswidget.odswidget-picto {
  height: 100%;
}


/******************** Style *************************/

/* Colored shapes */
svg g > path {
  stroke: black;
  stroke-width: 2px;
}

/* Texts */
svg a path {
  fill: transparent !important;
  stroke: transparent !important;
}
svg a text {
  display: none;
  font-size: 1.3em;
  font-weight: 300;
  font-family: sans-serif;
  fill: white !important;
  text-shadow: 2px 2px 5px black;
  stroke: none;
  pointer-events: none;
}
svg a:hover {
  cursor: default;
  text-decoration: none;
}
svg a:hover text {
  display: inherit;
}

/* Custom hover styling */
svg a:hover path {
  stroke: white !important;
}

/* Custom positionning */
/* DEP */
#text-dep_idf-92 {
  text-anchor: start;
}
#text-dep_fxx-29, #text-dep_fxx-22 {
  text-anchor: start;
}
#text-dep_fxx-2A, #text-dep_fxx-2B {
  text-anchor: end;
}
/* COM */
#text-com_maf_blm-978 {
  font-size: 1.2em;
  text-anchor: start;
}
#text-com_maf_blm-977 {
  text-anchor: end;
  font-size: 1em;
}
#text-com_spm-975 {
  font-size: 0.75em;
}
#text-com_ncl-988 {
  font-size: 0.95em;
}