Skip to content

Commit

Permalink
dryb24
Browse files Browse the repository at this point in the history
  • Loading branch information
@joewdavies
joewdavies committed Sep 20, 2024
1 parent 4d8649a commit b4c7d90
Show file tree
Hide file tree
Showing 6 changed files with 320 additions and 92 deletions.
84 changes: 66 additions & 18 deletions examples/agriculture/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,30 +47,78 @@
</head>

<body style="margin: 0">
<div class="dorling-header">
<!-- TITLE -->
<div class="dorling-title">
<h4>Cereal production and share of total regional cereal production, 2022</h4>
<h5>(1 000 tonnes and %)</h5>
</div>
<div class="main-container">
<div id="dorling-header" class="dorling-header row">
<!-- TITLE -->
<div class="dorling-title">
<h4>
Cereal production and share of total regional cereal production, 2022
<a class="infoIconText" data-bs-toggle="modal" data-bs-target="#info-modal" aria-label="Info">
<svg
focusable="false"
aria-hidden="true"
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon"
width="26px"
height="26px"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
></path>
</svg>
</a>
</h4>
<h5>(1 000 tonnes and %)</h5>
</div>

<!-- REGION SELECTOR -->
<div class="dorling-selector-wrapper">
<div class="dorling-selector">
<select id="dorling-region-select"></select>
<div class="dorling-selectors-container col-12">
<!-- REGION SELECTOR -->
<div class="dorling-selector-wrapper">
<div class="dorling-selector">
<select id="dorling-region-select"></select>
</div>
</div>

<!-- CROP SELECTOR -->
<div class="dorling-selector-wrapper">
<div class="dorling-selector">
<select id="dorling-crop-select"></select>
</div>
</div>
</div>
</div>
<!-- dorling container -->
<div id="dorling-container-div"></div>
</div>

<!-- CROP SELECTOR -->
<div class="dorling-selector-wrapper">
<div class="dorling-selector">
<select id="dorling-crop-select"></select>
<!-- Modal -->
<div id="info-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<p class="dorling-standalone-instructions-text" translate="instructions.text">
Germany, NUTS level 1 regions.
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-warning"
data-bs-dismiss="modal"
translate="instructions.closebutton"
>
Close
</button>
</div>
</div>
</div>
</div>

<!-- dorling container -->
<div id="dorling-container-div"></div>
<!-- DORLING JS CODE -->

<script>
let cropConfig = {
Expand Down Expand Up @@ -202,8 +250,8 @@ <h5>(1 000 tonnes and %)</h5>
shareLabel: 'Share of national harvested production',
shareUnit: '%',
})
.showFootnotes(true)
.footnotesText('Germany, NUTS level 1 regions.')
.showFootnotes(false)
.footnotesText('')
.exclude(['MK', 'ME', 'TR', 'AL', 'RS', 'UK'])
.showNutsSelector(false)
.customSourceURL(
Expand Down
79 changes: 64 additions & 15 deletions examples/gdp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,23 +43,74 @@
</head>

<body style="margin: 0">
<div class="dorling-header">
<!-- TITLE -->
<div class="dorling-title">
<h4>Gross domestic product, 2022</h4>
<h5>(€ million and PPS per inhabitant)</h5>
<div class="main-container">
<div id="dorling-header" class="dorling-header row">
<!-- TITLE -->
<div class="dorling-title">
<h4>
Gross domestic product, 2022
<a class="infoIconText" data-bs-toggle="modal" data-bs-target="#info-modal" aria-label="Info">
<svg
focusable="false"
aria-hidden="true"
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon"
width="26px"
height="26px"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
></path>
</svg>
</a>
</h4>
<h5>(€ million and PPS per inhabitant)</h5>
</div>

<div class="dorling-selectors-container col-12">
<!-- REGION SELECTOR -->
<div class="dorling-selector-wrapper">
<div class="dorling-selector">
<select id="dorling-region-select"></select>
</div>
</div>
</div>
</div>

<!-- REGION SELECTOR -->
<div class="dorling-selector-wrapper">
<div class="dorling-selector">
<select id="dorling-region-select"></select>
<!-- DORLING CONTAINER -->
<div id="dorling-container-div"></div>
</div>

<!-- Modal -->
<div id="info-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<p class="dorling-standalone-instructions-text" translate="instructions.text">
Data for NUTS level 3 regions are for 2021 (note this period was during the COVID-19
pandemic – caution advised if comparing with data for higher NUTS aggregates that refer to
2022).
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-warning"
data-bs-dismiss="modal"
translate="instructions.closebutton"
>
Close
</button>
</div>
</div>
</div>
</div>

<!-- DORLING CONTAINER -->
<div id="dorling-container-div"></div>
<!-- DORLING JS CODE -->

<script>
let standalone = true
Expand Down Expand Up @@ -122,14 +173,12 @@ <h5>(€ million and PPS per inhabitant)</h5>
})
.exclude(['MK', 'ME', 'TR', 'AL', 'RS', 'UK'])
.graticule(false)
.showFootnotes(true)
.showFootnotes(false)
.positionStrength(0.3)
.customSourceURL(
'https://ec.europa.eu/eurostat/databrowser/bookmark/50e0b1b7-0a2d-4058-b7ce-3b30ea1991f5?lang=en'
)
.footnotesText(
'Data for NUTS level 3 regions are for 2021 (note this period was during the COVID-19 pandemic – caution advised if comparing with data for higher NUTS aggregates that refer to 2022).'
)
.footnotesText('')
.onNutsLevelChange((nutsLevel) => updateRegionSelect(nutsLevel))

// pan and zoom for screen widths between 1081 and 500px
Expand Down
88 changes: 68 additions & 20 deletions examples/livestock/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,30 +48,80 @@
</head>

<body style="margin: 0">
<div class="dorling-header">
<!-- TITLE -->
<div class="dorling-title">
<h4>Livestock and share of total regional livestock, December 2023</h4>
<h5>(1 000 head and %)</h5>
</div>
<div class="main-container">
<div id="dorling-header" class="dorling-header row">
<!-- TITLE -->
<div class="dorling-title">
<h4>
Livestock and share of total regional livestock, December 2023
<a class="infoIconText" data-bs-toggle="modal" data-bs-target="#info-modal" aria-label="Info">
<svg
focusable="false"
aria-hidden="true"
class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-share__icon"
width="26px"
height="26px"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
></path>
</svg>
</a>
</h4>
<h5>(1 000 head and %)</h5>
</div>

<!-- REGION SELECTOR -->
<div class="dorling-selectors-container col-12">
<div class="dorling-selector-wrapper">
<div class="dorling-selector">
<select id="dorling-region-select"></select>
</div>
</div>

<!-- REGION SELECTOR -->
<div class="dorling-selector-wrapper">
<div class="dorling-selector">
<select id="dorling-region-select"></select>
<!-- ANIMAL SELECTOR -->
<div class="dorling-selector-wrapper">
<div class="dorling-selector">
<select id="dorling-animal-select"></select>
</div>
</div>
</div>
</div>

<!-- ANIMAL SELECTOR -->
<div class="dorling-selector-wrapper">
<div class="dorling-selector">
<select id="dorling-animal-select"></select>
<!-- dorling container -->
<div id="containerDiv"></div>
</div>

<!-- Modal -->
<div id="info-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<p class="dorling-standalone-instructions-text" translate="instructions.text">
Only those countries with at least 500 000 sheep or 500 000 goats have to provide statistics
for their livestock populations. Germany, NUTS level 1 regions.
</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-warning"
data-bs-dismiss="modal"
translate="instructions.closebutton"
>
Close
</button>
</div>
</div>
</div>
</div>

<!-- dorling container -->
<div id="containerDiv"></div>
<!-- DORLING JS CODE -->

<script>
let animalConfig = {
Expand Down Expand Up @@ -183,10 +233,8 @@ <h5>(1 000 head and %)</h5>
shareLabel: 'Share of national livestock',
shareUnit: '%',
})
.showFootnotes(true)
.footnotesText(
'Only those countries with at least 500 000 sheep or 500 000 goats have to provide statistics for their livestock populations. Germany, NUTS level 1 regions.'
)
.showFootnotes(false)
.footnotesText('')
.customSourceURL(
'https://ec.europa.eu/eurostat/databrowser/bookmark/4263da2c-0751-4677-8075-78101d6d92ce?lang=en'
)
Expand Down
Loading

0 comments on commit b4c7d90

Please sign in to comment.