Skip to content

Commit

Permalink
update examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@joewdavies
joewdavies committed Sep 11, 2024
1 parent 734b1d8 commit 8ca3cfd
Show file tree
Hide file tree
Showing 12 changed files with 7,785 additions and 6,825 deletions.
13,721 changes: 7,155 additions & 6,566 deletions build/dorling.js
View file

Large diffs are not rendered by default.

50 changes: 31 additions & 19 deletions examples/agriculture/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<script src="../assets/js/d3-format.v2.min.js"></script>
<script src="../assets/js/d3-interpolate.v2.min.js"></script>
<script src="../assets/js/d3-scale.v3.min.js"></script>
<script src="../../build/dorling.js"></script>
<script src="../../build/dorling.min.js"></script>
<script src="../assets/js/slimselect.min.js"></script>
<script src="../assets/js/d3-fetch.min.js"></script>
<script src="../assets/js/region-selector.js"></script>
Expand All @@ -36,7 +36,12 @@

<style>
.dorling-svg {
max-height: 73%;
max-height: 70%;
}
@media only screen and (max-width: 1080px) {
.dorling-svg {
max-height: 67%;
}
}
</style>
</head>
Expand All @@ -45,7 +50,7 @@
<div class="dorling-header">
<!-- TITLE -->
<div class="dorling-title">
<h4>Cereal production and share of total regional cereal production, 2021</h4>
<h4>Cereal production and share of total regional cereal production, 2022</h4>
<h5>(1 000 tonnes and %)</h5>
</div>

Expand Down Expand Up @@ -78,43 +83,43 @@ <h5>(1 000 tonnes and %)</h5>
C1200: {
maxCircleRadius: { 2: 40 },
sizeLegend: {
values: { 2: [5000, 100] },
values: { 2: [5000, 100] },
},
},
C1120: {
maxCircleRadius: { 2: 40 },
sizeLegend: {
values: { 2: [5000, 100] },
values: { 2: [5000, 100] },
},
},
C1300: {
maxCircleRadius: { 2: 40 },
sizeLegend: {
values: { 2: [5000, 100] },
values: { 2: [5000, 100] },
},
},
C1410: {
maxCircleRadius: { 2: 40 },
sizeLegend: {
values: { 2: [5000, 100] },
values: { 2: [5000, 100] },
},
},
C1500: {
maxCircleRadius: { 2: 30 },
sizeLegend: {
values: { 2: [5000, 100] },
values: { 2: [5000, 100] },
},
},
C1600: {
maxCircleRadius: { 2: 30 },
sizeLegend: {
values: { 2: [5000, 100] },
values: { 2: [5000, 100] },
},
},
C2000: {
maxCircleRadius: { 2: 30 },
sizeLegend: {
values: { 2: [5000, 100] },
values: { 2: [5000, 100] },
},
},
}
Expand All @@ -127,7 +132,7 @@ <h5>(1 000 tonnes and %)</h5>
var dorling = NutsDorlingCartogram.dorling()
.standalone(standalone)
.containerId('dorling-container-div')
// .nuts2JsonBaseURL('https://ec.europa.eu/assets/estat/E/E4/gisco/pub/nuts2json/v2/')
.nuts2JsonBaseURL('https://ec.europa.eu/assets/estat/E/E4/gisco/pub/nuts2json/v2/')
.overseasGeometriesBaseURL(
'https://ec.europa.eu/eurostat/cache/interactive-publications/regions/2023/vis/cartograms/assets/topojson/overseas/'
)
Expand Down Expand Up @@ -161,13 +166,13 @@ <h5>(1 000 tonnes and %)</h5>
.colors(['#ffeb99', '#c7e9b4', '#7fcdbb', '#41b6c4', '#104f99', '#17256b'])
.thresholdValues([10, 25, 50, 75, 90, 100])
.sizeDatasetCode('apro_cpshr')
.sizeDatasetFilters('crops=C1110&strucpro=PR_HU_EU&time=2021')
.sizeDatasetFilters('crops=C1110&strucpro=PR_HU_EU&time=2022')
.colorDatasetCode('apro_cpshr')
.colorDatasetName('crop production')
.colorDatasetFilters('crops=C1110&strucpro=PR_HU_EU&time=2021')
.colorDatasetFilters('crops=C1110&strucpro=PR_HU_EU&time=2022')
.colorCalculation('percentage')
.colorCalculationDatasetCode('apro_cpshr')
.colorCalculationDatasetFilters('crops=C0000&strucpro=PR_HU_EU&time=2021')
.colorCalculationDatasetFilters('crops=C0000&strucpro=PR_HU_EU&time=2022')
//.maxCircleRadius(cropConfig.C1110.maxCircleRadius)
// here we manually define the same scale for all cereal types
.circleSizeFunction(d3.scaleSqrt().range([5, 50]).domain([0, 4889]))
Expand All @@ -183,11 +188,11 @@ <h5>(1 000 tonnes and %)</h5>
shape: 'circle',
})
.sizeLegend({
title: 'Harvested production, 2021 (1 000 tonnes)',
title: 'Harvested production, 2022 (1 000 tonnes)',
textFunction: function (d) {
return d.toLocaleString('en').replace(/,/gi, '\xA0')
},
values: { 2: [5000, 100] },
values: { 2: [5000, 100] },
})
.tooltip({
colorLabel: 'Share of total regional cereal production',
Expand All @@ -205,6 +210,7 @@ <h5>(1 000 tonnes and %)</h5>
'https://ec.europa.eu/eurostat/databrowser/bookmark/6ab93ae3-58c7-4a5d-9721-fb2b5586262d?lang=en'
)
.onNutsLevelChange((nutsLevel) => updateRegionSelect(nutsLevel))

// pan and zoom for screen widths between 1081 and 500px
if (window.innerWidth < 900 && window.innerWidth > 500) {
dorling.translateX(-550) //-390;
Expand All @@ -228,8 +234,8 @@ <h5>(1 000 tonnes and %)</h5>

function optionSelected(id) {
dorling
.sizeDatasetFilters('crops=' + id + '&strucpro=PR_HU_EU&time=2021')
.colorDatasetFilters('crops=' + id + '&strucpro=PR_HU_EU&time=2021')
.sizeDatasetFilters('crops=' + id + '&strucpro=PR_HU_EU&time=2022')
.colorDatasetFilters('crops=' + id + '&strucpro=PR_HU_EU&time=2022')
.maxCircleRadius(cropConfig[id].maxCircleRadius)
if (cropConfig[id].sizeLegend) {
dorling.sizeLegend(cropConfig[id].sizeLegend)
Expand All @@ -247,9 +253,9 @@ <h5>(1 000 tonnes and %)</h5>
{ value: 'C1500', text: 'Grain maize and corn-cob mix' },
{ value: 'C1300', text: 'Barley' },
{ value: 'C1600', text: 'Triticale' },
{ value: 'C1200', text: 'Rye and winter cereal mixtures (maslin)' },
{ value: 'C1120', text: 'Durum wheat' },
{ value: 'C1410', text: 'Oats' },
{ value: 'C1200', text: 'Rye and winter cereal mixtures (maslin)' },
{ value: 'C2000', text: 'Rice' },
]
let cropSelect = new SlimSelect({
Expand All @@ -263,6 +269,12 @@ <h5>(1 000 tonnes and %)</h5>
},
})
cropSelect.setSelected('C1110')

//for DRYB codebase
function changeIndicator(indicatorCode) {
cropSelect.setSelected(indicatorCode)
}
window.changeIndicator = changeIndicator
</script>
</body>
</html>
53 changes: 26 additions & 27 deletions examples/assets/css/region-selector.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,34 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
}
h4 {
}
h4 {
margin-bottom: 0.2rem;
color: #262b38;
font-size: 1.4rem;
font-weight: 600;
line-height: 1.2;
margin-top: 0;
}
h5 {
}
h5 {
color: #262b38;
font-size: 1.1rem;
font-weight: 400;
line-height: 1.2;
margin-bottom: 0.2rem;
margin-top: 0;
}
.dorling-region-selector {
}
.dorling-region-selector {
max-width: 330px;
min-width: 200px;
}
.dorling-region-selector-wrapper {
}
.dorling-region-selector-wrapper {
width: 100%;
display: flex;
justify-content: center;
padding: 3px;
}
.ss-main {
}
.ss-main {
font-size: 0.9rem;
min-height: 34px;
top: 0px;
Expand All @@ -41,34 +41,33 @@
border-radius: 3px;
background-color: #fff;
height: 34px;
}
.ss-main .ss-arrow {
}
.ss-main .ss-arrow {
margin: 0px !important;
background: #0e47cb;
width: 32px;
padding-right: 10px;
height: 33px;
}
.ss-main .ss-arrow span {
}
.ss-main .ss-arrow span {
border: solid #fff !important;
border-width: 0 2px 2px 0 !important;
}
.ss-main .ss-single-selected {
}
.ss-main .ss-single-selected {
padding: 0px;
border: 1px solid #0e47cb;
border-radius: 3px;
background-color: #fff;
height: 34px;
}
.ss-main .ss-single-selected .placeholder {
box-shadow: inset 0 2px 4px rgba(9, 49, 142, 0.08),
inset 0 0 10px rgba(9, 49, 142, 0.04),
inset 0 4px 5px rgba(9, 49, 142, 0.04),
inset 0 -4px 4px rgba(9, 49, 142, 0.04);
}
.ss-main .ss-single-selected .placeholder {
box-shadow: inset 0 2px 4px rgba(9, 49, 142, 0.08), inset 0 0 10px rgba(9, 49, 142, 0.04),
inset 0 4px 5px rgba(9, 49, 142, 0.04), inset 0 -4px 4px rgba(9, 49, 142, 0.04);
padding: 4px 5px 5px 8px;
min-height: 32px;
}
.ss-main .ss-single-selected .placeholder .ss-disabled {
color: #333;
}

background: #fff;
opacity: 1;
}
.ss-main .ss-single-selected .placeholder .ss-disabled {
color: #000;
}
Loading

0 comments on commit 8ca3cfd

Please sign in to comment.