Skip to content

Commit 59bbdaf

Browse files
ThatcherKThatcherK
authored
Merge pull request #218 from devinit/feature/climate-bubble-charts
Final chart edits
2 parents 08e2900 + 5a633c3 commit 59bbdaf

8 files changed

+88
-18
lines changed

‎assets/core.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/styles.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/charts/climate-adaptation-funding-bubble.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const renderDefaultChart = (chart, data) => {
2525
Adaptation as % of total ODA: ${Number(params.data[2]).toFixed(1)}%
2626
`,
2727
},
28-
grid: { bottom: '10%', top: '20%', left: '2%' },
28+
grid: { bottom: '10%', top: '15%', left: '2%' },
2929
xAxis: {
3030
name: 'Vulnerability level',
3131
nameLocation: 'center',
@@ -73,7 +73,13 @@ const renderDefaultChart = (chart, data) => {
7373
color: '#7e1850',
7474
},
7575
symbolSize(val) {
76-
return getScaledValue(val[2], 8, 80, symbolDataRange.min, symbolDataRange.max);
76+
return getScaledValue(
77+
Math.sqrt(val[2]),
78+
8,
79+
60,
80+
Math.sqrt(symbolDataRange.min),
81+
Math.sqrt(symbolDataRange.max),
82+
);
7783
},
7884
emphasis: {
7985
itemStyle: {
@@ -143,7 +149,13 @@ const renderDefaultChart = (chart, data) => {
143149
color: '#f9cdd0',
144150
},
145151
symbolSize(val) {
146-
return getScaledValue(val[2], 8, 80, symbolDataRange.min, symbolDataRange.max);
152+
return getScaledValue(
153+
Math.sqrt(val[2]),
154+
8,
155+
60,
156+
Math.sqrt(symbolDataRange.min),
157+
Math.sqrt(symbolDataRange.max),
158+
);
147159
},
148160
emphasis: {
149161
itemStyle: {

‎src/charts/climate-finance-food-insecure.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const renderDefaultChart = (chart, data) => {
2929
Food insecurity gap: ${params.data[1]}%
3030
`,
3131
},
32-
grid: { bottom: '10%', top: '20%', left: '5%' },
32+
grid: { bottom: '10%', top: '15%', left: '5%' },
3333
xAxis: {
3434
name: 'Vulnerability level',
3535
nameLocation: 'center',
@@ -82,7 +82,13 @@ const renderDefaultChart = (chart, data) => {
8282
color: '#7e1850',
8383
},
8484
symbolSize(val) {
85-
return getScaledValue(val[2], 8, 80, symbolDataRange.min, symbolDataRange.max);
85+
return getScaledValue(
86+
Math.sqrt(val[2]),
87+
8,
88+
60,
89+
Math.sqrt(symbolDataRange.min),
90+
Math.sqrt(symbolDataRange.max),
91+
);
8692
},
8793
emphasis: {
8894
itemStyle: {
@@ -146,7 +152,13 @@ const renderDefaultChart = (chart, data) => {
146152
color: '#f9cdd0',
147153
},
148154
symbolSize(val) {
149-
return getScaledValue(val[2], 8, 80, symbolDataRange.min, symbolDataRange.max);
155+
return getScaledValue(
156+
Math.sqrt(val[2]),
157+
8,
158+
60,
159+
Math.sqrt(symbolDataRange.min),
160+
Math.sqrt(symbolDataRange.max),
161+
);
150162
},
151163
emphasis: {
152164
itemStyle: {

‎src/charts/climate-percentage-oda-bubble.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const renderDefaultChart = (chart, data) => {
3030
Share of total ODA: ${Number(params.data[2]).toFixed(1)}%
3131
`,
3232
},
33-
grid: { bottom: '10%', top: '20%', left: '2%' },
33+
grid: { bottom: '10%', top: '15%', left: '2%' },
3434
xAxis: {
3535
name: 'Vulnerability level',
3636
nameLocation: 'center',
@@ -78,7 +78,13 @@ const renderDefaultChart = (chart, data) => {
7878
color: '#7e1850',
7979
},
8080
symbolSize(val) {
81-
return getScaledValue(val[2], 8, 80, symbolDataRange(data).min, symbolDataRange(data).max);
81+
return getScaledValue(
82+
Math.sqrt(val[2]),
83+
8,
84+
120,
85+
Math.sqrt(symbolDataRange(data).min),
86+
Math.sqrt(symbolDataRange(data).max),
87+
);
8288
},
8389
emphasis: {
8490
itemStyle: {
@@ -148,7 +154,13 @@ const renderDefaultChart = (chart, data) => {
148154
color: '#f9cdd0',
149155
},
150156
symbolSize(val) {
151-
return getScaledValue(val[2], 8, 80, symbolDataRange(data).min, symbolDataRange(data).max);
157+
return getScaledValue(
158+
Math.sqrt(val[2]),
159+
8,
160+
120,
161+
Math.sqrt(symbolDataRange(data).min),
162+
Math.sqrt(symbolDataRange(data).max),
163+
);
152164
},
153165
emphasis: {
154166
itemStyle: {

‎src/charts/climate-total-funding-per-capita.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const renderDefaultChart = (chart, data) => {
2020
Climate ODA per person: US$${Number(params.data[2]).toFixed(1)}
2121
`,
2222
},
23-
grid: { bottom: '10%', top: '20%', left: '2%' },
23+
grid: { bottom: '10%', top: '15%', left: '2%' },
2424
xAxis: {
2525
name: 'Vulnerability level',
2626
nameLocation: 'center',
@@ -68,7 +68,13 @@ const renderDefaultChart = (chart, data) => {
6868
color: '#7e1850',
6969
},
7070
symbolSize(val) {
71-
return getScaledValue(val[2], 8, 80, symbolDataRange.min, symbolDataRange.max);
71+
return getScaledValue(
72+
Math.sqrt(val[2]),
73+
8,
74+
120,
75+
Math.sqrt(symbolDataRange.min),
76+
Math.sqrt(symbolDataRange.max),
77+
);
7278
},
7379
emphasis: {
7480
itemStyle: {
@@ -138,7 +144,13 @@ const renderDefaultChart = (chart, data) => {
138144
color: '#f9cdd0',
139145
},
140146
symbolSize(val) {
141-
return getScaledValue(val[2], 8, 80, symbolDataRange.min, symbolDataRange.max);
147+
return getScaledValue(
148+
Math.sqrt(val[2]),
149+
8,
150+
120,
151+
Math.sqrt(symbolDataRange.min),
152+
Math.sqrt(symbolDataRange.max),
153+
);
142154
},
143155
emphasis: {
144156
itemStyle: {

‎src/charts/total-climate-finance.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const renderDefaultChart = (chart, data) => {
2020
Total climate ODA: US$${Number(params.data[2]).toFixed(1)} million
2121
`,
2222
},
23-
grid: { bottom: '10%', top: '20%', left: '2%' },
23+
grid: { bottom: '10%', top: '15%', left: '2%' },
2424
xAxis: {
2525
name: 'Vulnerability level',
2626
nameLocation: 'center',
@@ -70,7 +70,13 @@ const renderDefaultChart = (chart, data) => {
7070
color: '#7e1850',
7171
},
7272
symbolSize(val) {
73-
return getScaledValue(val[2], 8, 80, symbolDataRange.min, symbolDataRange.max);
73+
return getScaledValue(
74+
Math.sqrt(val[2]),
75+
8,
76+
120,
77+
Math.sqrt(symbolDataRange.min),
78+
Math.sqrt(symbolDataRange.max),
79+
);
7480
},
7581
emphasis: {
7682
itemStyle: {
@@ -140,7 +146,13 @@ const renderDefaultChart = (chart, data) => {
140146
color: '#f9cdd0',
141147
},
142148
symbolSize(val) {
143-
return getScaledValue(val[2], 8, 80, symbolDataRange.min, symbolDataRange.max);
149+
return getScaledValue(
150+
Math.sqrt(val[2]),
151+
8,
152+
120,
153+
Math.sqrt(symbolDataRange.min),
154+
Math.sqrt(symbolDataRange.max),
155+
);
144156
},
145157
emphasis: {
146158
itemStyle: {

‎src/styles/styles.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,16 @@
1313
background: white;
1414
}
1515

16+
.dicharts--gha-total-climate-finance,
17+
.dicharts--gha-climate-percentage-oda,
18+
.dicharts--gha-climate-adaptation-funding,
19+
.dicharts--gha-climate-finance-food-insecure,
20+
.dicharts--gha-climate-funding-per-capita {
21+
width: 100%;
22+
min-height: 700px;
23+
background: white;
24+
}
25+
1626
.dicharts--gha-people-affected-by-crisis-leaflet, .dicharts--gha-climate-funding {
1727
z-index: 1;
1828
}

0 commit comments

Comments
 (0)