Skip to content

Instantly share code, notes, and snippets.

@Develer

Develer/country_data.js

Last active January 26, 2019 02:26
Show Gist options
  • Save Develer/adb3eb65c4fb4396d53fecd07cbe15e9 to your computer and use it in GitHub Desktop.
Save Develer/adb3eb65c4fb4396d53fecd07cbe15e9 to your computer and use it in GitHub Desktop.
Download ZIP
gov
Raw
country_data.js
init_data = [
{
param: 'whrs',
description: 'world happiness report score',
scale: 'polled inhabitants rate their quality of life from 1-10 (higher = better)',
domain: [1, 10],
data: [
{
type: 'good',
scale: 'whrsGood',
values: [
{country: 'FIN', value: 7.79},
{country: 'DNK', value: 7.59},
{country: 'NOR', value: 7.58},
{country: 'CHE', value: 7.47},
{country: 'NLD', value: 7.46},
{country: 'ISR', value: 7.33},
{country: 'AUT', value: 7.29},
{country: 'SWE', value: 7.29},
{country: 'AUS', value: 7.26},
{country: 'GBR', value: 7.10},
],
},
{
type: 'bad',
scale: 'whrsBad',
values: [
{country: 'AFG', value: 2.66},
{country: 'SSD', value: 2.82},
{country: 'YEM', value: 3.25},
{country: 'TZA', value: 3.35},
{country: 'MWI', value: 3.42},
{country: 'ZWE', value: 3.64},
{country: 'HTI', value: 3.82},
{country: 'EGY', value: 3.93},
{country: 'ZMB', value: 3.93},
{country: 'UGA', value: 4.00},
]
}
]
},
{
param: 'seda',
description: 'sustainable economic development assessment (SEDA)',
scale: 'an assessment based on 40 indicators in sustainability, economics, & investments (higher = better)',
domain: [1, 100],
data: [
{
type: 'good',
scale: 'sedaGood',
values: [
{country: 'NOR', value: 85.30},
{country: 'CHE', value: 83.80},
{country: 'DNK', value: 82},
{country: 'SWE', value: 81.90},
{country: 'SGP', value: 81.80},
{country: 'FIN', value: 81.3},
{country: 'NLD', value: 80.30},
{country: 'AUT', value: 80.30},
{country: 'DEU', value: 79.6},
{country: 'AUS', value: 78.90},
],
},
{
type: 'bad',
scale: 'sedaBad',
values: [
{country: 'TCD', value: 20.40},
{country: 'YEM', value: 23.90},
{country: 'HTI', value: 24.2},
{country: 'COD', value: 24.8},
{country: 'SDN', value: 26.50},
{country: 'NGA', value: 26.50},
{country: 'MOZ', value: 26.70},
{country: 'PAK', value: 27.90},
{country: 'BDI', value: 28.30},
{country: 'GIN', value: 28.3},
]
}
]
},
{
param: 'ppp',
description: 'GDP per capita (PPP)',
domain: [1, 100000],
data: [
{
type: 'good',
scale: 'pppGood',
values: [
{country: 'SGP', value: 87855},
{country: 'NOR', value: 69250},
{country: 'ARE', value: 67871},
{country: 'CHE', value: 59561},
{country: 'USA', value: 57436},
{country: 'SAU', value: 55158},
{country: 'NLD', value: 51049},
{country: 'SWE', value: 49836},
{country: 'AUS', value: 48899},
{country: 'DEU', value: 48111},
],
},
{
type: 'bad',
scale: 'pppBad',
values: [
{country: 'COD', value: 773},
{country: 'BDI', value: 814},
{country: 'NER', value: 1107},
{country: 'MWI', value: 1135},
{country: 'MOZ', value: 1215},
{country: 'GIN', value: 1265},
{country: 'ERI', value: 1410},
{country: 'MDG', value: 1505},
{country: 'TGO', value: 1550},
{country: 'SLE', value: 1672},
]
}
]
},
{
param: 'hepp',
description: 'health expenditure per person',
domain: [0, 10000],
data: [
{
type: 'good',
scale: 'heppGood',
values: [
{country: 'USA', value: 9536},
{country: 'CHE', value: 7583},
{country: 'NOR', value: 6222},
{country: 'DEU', value: 5357},
{country: 'NLD', value: 5313},
{country: 'SWE', value: 5299},
{country: 'AUT', value: 5138},
{country: 'DNK', value: 5083},
{country: 'BEL', value: 4782},
{country: 'CAN', value: 4600},
],
},
{
type: 'bad',
scale: 'heppBad',
values: [
{country: 'COD', value: 34},
{country: 'ERI', value: 56},
{country: 'GIN', value: 57},
{country: 'BDI', value: 64},
{country: 'MOZ', value: 64},
{country: 'ETH', value: 66},
{country: 'NER', value: 68},
{country: 'SSD', value: 71},
{country: 'MDG', value: 77},
{country: 'BEN', value: 84},
]
}
]
},
{
param: 'eepp',
description: 'education expenditure per person',
domain: [0, 10000],
data: [
{
type: 'good',
scale: 'eeppGood',
values: [
{country: 'NOR', value: 7466},
{country: 'SWE', value: 4546},
{country: 'CHE', value: 4375},
{country: 'FIN', value: 3570},
{country: 'AUS', value: 3236},
{country: 'BEL', value: 3124},
{country: 'NLD', value: 2884},
{country: 'AUT', value: 2817},
{country: 'USA', value: 2729},
{country: 'GBR', value: 2664},
],
},
{
type: 'bad',
scale: 'eeppBad',
values: [
{country: 'UGA', value: 16},
{country: 'MWI', value: 17},
{country: 'GIN', value: 18},
{country: 'SLE', value: 19},
{country: 'KHM', value: 21},
{country: 'SSD', value: 22},
{country: 'AFG', value: 24},
{country: 'NPL', value: 28},
{country: 'NER', value: 29},
{country: 'TGO', value: 30},
]
}
]
},
{
param: 'gis',
description: 'government integrity score',
domain: [0, 100],
data: [
{
type: 'good',
scale: 'gisGood',
values: [
{country: 'NOR', value: 93.60},
{country: 'SWE', value: 92.90},
{country: 'SGP', value: 91.20},
{country: 'FIN', value: 89.80},
{country: 'NLD', value: 86.00},
{country: 'DNK', value: 84.10},
{country: 'CHE', value: 82.80},
{country: 'JPN', value: 79.20},
{country: 'GBR', value: 79.00},
{country: 'CAN', value: 78.30},
],
},
{
type: 'bad',
scale: 'gisBad',
values: [
{country: 'VEN', value: 7.50},
{country: 'NGA', value: 14.40},
{country: 'KHM', value: 17.70},
{country: 'MDG', value: 17.80},
{country: 'SOM', value: 17.80},
{country: 'ZWE', value: 18.90},
{country: 'AGO', value: 18.90},
{country: 'BGD', value: 21.20},
{country: 'YEM', value: 21.20},
{country: 'SDN', value: 21.20},
]
}
]
},
{
param: 'oefs',
description: 'overall economic freedom score',
domain: [0, 100],
data: [
{
type: 'good',
scale: 'oefsGood',
values: [
{country: 'SGP', value: 88.80},
{country: 'CHE', value: 81.70},
{country: 'AUS', value: 80.90},
{country: 'GBR', value: 78.00},
{country: 'CAN', value: 77.70},
{country: 'ARE', value: 77.60},
{country: 'TWN', value: 76.60},
{country: 'DNK', value: 76.60},
{country: 'SWE', value: 76.30},
{country: 'NLD', value: 76.20},
],
},
{
type: 'bad',
scale: 'oefsBad',
values: [
{country: 'PRK', value: 5.80},
{country: 'VEN', value: 25.20},
{country: 'CUB', value: 31.90},
{country: 'ERI', value: 41.70},
{country: 'ZWE', value: 44.00},
{country: 'BOL', value: 44.10},
{country: 'DZA', value: 44.70},
{country: 'MOZ', value: 46.30},
{country: 'TKM', value: 47.10},
{country: 'TGO', value: 47.80},
]
}
]
}
]
Raw
index.html
<!DOCTYPE html>
<style>
svg {
/* border: 1px solid black; */
}
</style>
<svg width="960" height="400"></svg>
<!-- <script src="d3.v5.min.js"></script> -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="country_data.js"></script>
<script>
width = d3.select('svg').attr('width')
height = d3.select('svg').attr('height')
margin = {
top: 40,
right: 40,
bottom: 40,
left: 40,
center: 20
}
goodRangeX = [margin.left, width / 2 - margin.center]
badRangeX = [width / 2 + margin.center, width - margin.right]
whrsGoodX = d3.scaleLinear().domain([10, 1]).nice().range(goodRangeX)
whrsBadX = d3.scaleLinear().domain([1, 10]).range(badRangeX)
sedaGoodX = d3.scaleLinear().domain([100, 0]).nice().range(goodRangeX)
sedaBadX = d3.scaleLinear().domain([0, 100]).range(badRangeX)
pppGoodX = d3.scaleLinear().domain([100000, 0]).nice().range(goodRangeX)
pppBadX = d3.scaleLinear().domain([0, 100000]).range(badRangeX)
heppGoodX = d3.scaleLinear().domain([10000, 0]).nice().range(goodRangeX)
heppBadX = d3.scaleLinear().domain([0, 10000]).range(badRangeX)
eeppGoodX = d3.scaleLinear().domain([10000, 0]).nice().range(goodRangeX)
eeppBadX = d3.scaleLinear().domain([0, 10000]).range(badRangeX)
gisGoodX = d3.scaleLinear().domain([100, 0]).nice().range(goodRangeX)
gisBadX = d3.scaleLinear().domain([0, 100]).range(badRangeX)
oefsGoodX = d3.scaleLinear().domain([100, 0]).nice().range(goodRangeX)
oefsBadX = d3.scaleLinear().domain([0, 100]).range(badRangeX)
const xScales = {
whrsGood: whrsGoodX,
whrsBad: whrsBadX,
sedaGood: sedaGoodX,
sedaBad: sedaBadX,
pppGood: pppGoodX,
pppBad: pppBadX,
heppGood: heppGoodX,
heppBad: heppBadX,
eeppGood: eeppGoodX,
eeppBad: eeppBadX,
gisGood: gisGoodX,
gisBad: gisBadX,
oefsGood: oefsGoodX,
oefsBad: oefsBadX,
};
y = d3.scaleBand()
.domain(init_data.map(d => d.param))
.range([margin.top, height - margin.bottom])
.padding(0.3)
const svg = d3.select('svg');
svg.append('text')
.attr('x', width / 2 - margin.center)
.attr('dy', y.bandwidth() * 0.25)
.attr('y', margin.top / 2)
.attr('text-anchor', 'end')
.text('Top 10 "good" goverments average');
svg.append('text')
.attr('x', width / 2 + margin.center)
.attr('dy', y.bandwidth() * 0.25)
.attr('y', margin.top / 2)
.attr('text-anchor', 'start')
.text('Top 10 "bad" goverments average');
var bars = svg.append("g")
.attr('class', 'bars')
.selectAll("g")
.data(init_data);
bars = bars.enter().append('g')
.attr('class', d => d.param)
.attr('transform', d => `translate(0,${y(d.param)})`)
// params text
bars.append('text')
.attr('x', width / 2)
.attr('dy', y.bandwidth() * (0.7 - 1))
.attr('y', y.bandwidth())
.attr('text-anchor', 'middle')
.style('cursor', 'pointer')
.text(d => d.param)
.on("mouseover", d => {
d3.selectAll('.bars').selectAll(`g:not(.${d.param})`).selectAll('rect')
.transition().duration(500)
.style('fill-opacity', 0.5);
legend
.transition().duration(500)
.style('fill-opacity', 1)
.text(d.description);
})
.on("mouseout", d => {
d3.selectAll('.bars').selectAll(`g:not(.${d.param})`).selectAll('rect')
.transition().duration(500)
.style('fill-opacity', 1);
legend
.transition().duration(500)
.style('fill-opacity', 0)
});
// average values render
bars.selectAll('rect')
.data(d => d.data)
.enter().append('rect')
.style('fill', d => {
if (d.type === 'good') {
return '#28a745'
} else if (d.type === 'bad') {
return '#dc3545'
}
})
.attr("x", d => {
if (d.type === 'good') {
return xScales[d.scale](d.values.reduce((a,b) => a + b.value, 0) / d.values.length);
} else if (d.type === 'bad') {
return xScales[d.scale](d3.min(xScales[d.scale].domain()));
}
})
.attr("height", y.bandwidth())
.attr("width", d => {
if (d.type === 'good') {
return xScales[d.scale](d3.min(xScales[d.scale].domain())) - xScales[d.scale](d.values.reduce((a,b) => a + b.value, 0) / d.values.length);
} else if (d.type === 'bad') {
return xScales[d.scale](d.values.reduce((a,b) => a + b.value, 0) / d.values.length) - xScales[d.scale](d3.min(xScales[d.scale].domain()));
}
});
// average values labels
bars.selectAll('.label')
.data(d => d.data)
.enter().append('text')
.attr("x", d => {
if (d.type === 'good') {
return xScales[d.scale](d.values.reduce((a,b) => a + b.value, 0) / d.values.length) - 5;
} else if (d.type === 'bad') {
return xScales[d.scale](d.values.reduce((a,b) => a + b.value, 0) / d.values.length) + 5;
}
})
.attr('dy', y.bandwidth() * (0.7 - 1))
.attr('y', y.bandwidth())
.attr('text-anchor', d => {
if (d.type === 'good') {
return 'end';
} else if (d.type === 'bad') {
return 'start';
}
})
.text(d => (d.values.reduce((a,b) => a + b.value, 0) / d.values.length).toFixed(2));
// legend
var legend = svg.append('text')
.attr('x', width / 2)
.attr('dy', y.bandwidth() * 0.25)
.attr('y', height - margin.bottom / 2)
.attr('text-anchor', 'middle')
.style('fill-opacity', 0)
.text('Top 10 goverments average legend');
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment