Published
Edited
Sep 7, 2021
11 forks
10 stars
currentYear = 2010
height = width * 0.7
svg = d3
.create('svg')
.style('width', width)
.style('height', height);
selectedLayer = svg.append('g').attr('class', 'selected-countries');
layer = svg.append('g').attr('class', 'counties');
countries = topojson.feature(world, world.objects.countries).features
boundaries = topojson.mesh(world,world.objects.countries, (a, b) => a !== b);
paletteScale = d3
.scaleLinear()
.domain([minValue, maxValue])
.range(['#EFEFFF', '#CF4646']);
geoData = countries.map(country => {
const totalPopulationAllYears = data.get(country.id);
const totalPopulationCurrentYear = totalPopulationAllYears === undefined ? 0 : totalPopulationAllYears[currentYear];
return {
...country,
properties: {
totalPopulation: totalPopulationCurrentYear,
fillColor: paletteScale(totalPopulationCurrentYear),
name: totalPopulationAllYears === undefined ? "" : totalPopulationAllYears['Country Name'],
currentYear,
},
}
})
projection = d3
.geoMercator()
.center([4.8357, 45.764]) // this is centered on France
.scale(200)
.translate([width / 2, height / 2]); // The map will appear at the right spot
path = d3.geoPath().projection(projection);
zoom = {
const zoomed = ({ transform }) => {
layer.attr('transform', transform);
selectedLayer.attr('transform', transform);
};
return d3.zoom().scaleExtent([0.5, 40]).on('zoom', zoomed);
}
svg.call(zoom);
countriesSelection = {
layer
.selectAll('path')
.data(geoData, (d) => d.id)
.join(
enter => {
enter
.append('path')
.attr('class', (d) => `country ${d.id}`)
.attr('d', path)
.style('fill', (d) => d.properties.fillColor)
.style('stroke', 'none');
},
() => {},
exit => {
exit
.remove();
},
);
return layer.selectAll('.country');
}
boundariesLayer = {
countriesSelection
layer
.selectAll('.country-boundary')
.data([boundaries])
.join(
enter => {
enter
.append('path')
.attr('d', path)
.attr('class', 'country-boundary')
.style('stroke', 'black')
.style('stroke-width', 1)
.style('stroke-opacity', 0.3)
.style('fill', 'none');
},
() => {},
exit => {
exit.remove()
}
);
return layer.selectAll('.country-boundary');
}
tooltipSelection = d3.select('body')
.append('div')
.attr('class', 'hover-info')
.style('visibility', 'hidden');
tooltipEventListeners = countriesSelection
.on('mouseenter', ({ target }) => {
tooltipSelection.style('visibility', 'visible');
d3.select(target)
.transition()
.duration(150)
.ease(d3.easeCubic)
.style('fill', '#ffba08');
})
.on('mousemove', ({ pageX, pageY, target }) => {
tooltipSelection
.style('top', `${pageY + 20}px`)
.style('left', `${pageX - 10}px`)
.style('z-index', 100)
.html(
`<strong>${
target.__data__.properties.name
}</strong><br>Total population (${target.__data__.properties.currentYear}): <strong>${
target.__data__.properties.totalPopulation
}</strong>`,
)
.append('div')
.attr('class', 'triangle');
d3.selectAll('.triangle').style('top', `${-Math.sqrt(20) - 3}px`);
})
.on('mouseleave', (e) => {
tooltipSelection.style('visibility', 'hidden');
d3.select(e.target)
.transition()
.duration(150)
.ease(d3.easeCubic)
.style('fill', (d) => d.properties.fillColor);
});
buttn = d3.create('button').html('<h3>Reinitialize Selection</h3>');
selectedCountriesSet = {
countriesSelection
return Generators.observe(next => {
let selectedSet = new Set()
// Yield the initial value.
next(selectedSet);
// Define event listeners to yield the next values
svg.selectAll('.country')
.on('click', null)
.on('click', ({ target }) => {
selectedSet.add(target.__data__.id);
next(selectedSet)
});
// Define the event listener of the button
buttn.on('click', () => {
selectedSet = new Set();
next(selectedSet);
});
// When the generator is disposed, detach the event listener.
return () => svg.selectAll('.country').on('click', null);
});
}
selectedCountries = geoData.filter((country) => selectedCountriesSet.has(country.id));
totalPopulationSelection = selectedCountries.reduce((acc, country) => acc + country.properties.totalPopulation, 0);
geo = selectedCountries.map(country => {
const newCountry = {
...country,
properties: {
...country.properties,
totalPopulation: totalPopulationSelection,
name: `${country.properties.name} (Selected)`,
}
};
return newCountry;
});
t = function getTransition() {
return d3.transition().duration(250).ease(d3.easeCubic);
}
changeSelectedLayer = {
const currentTransition = t();
selectedLayer
.selectAll('path')
.data(geo, (d) => d.id)
.join(
(enter) => {
enter
.append('path')
.attr('class', (d) => `selected-country ${d.id}`)
.attr('d', path)
.style('fill', '#ffba08')
.style('fill', '#f4a261')
.style('stroke', 'black')
.style('stroke-width', 1)
.style('stroke-opacity', 0.3)
.call((en) =>
en
.transition(currentTransition)
.style('fill', '#f4a261')
.style('stroke-opacity', 0.1),
);
},
() => {},
(exit) => {
exit.style('fill', '#f4a261').call((ex) =>
ex
.transition(currentTransition)
.style('fill', (d) => d.properties.fillColor)
.remove(),
);
},
);
}
{
changeSelectedLayer
selectedLayer
.on('mouseenter', ({ target }) => {
tooltipSelection.style('visibility', 'visible');
d3.select(target).style('fill', '#ffba08');
})
.on('mousemove', ({ pageX, pageY, target }) => {
const x = pageX;
const y = pageY;
tooltipSelection
.html(
`<strong>${
target.__data__.properties.name
}</strong><br>Total population of the selection (${target.__data__.properties.currentYear}): <strong>${target.__data__.properties.totalPopulation}</strong>`,
)
.style('top', `${y + 20}px`)
.style('left', `${x - 10}px`)
d3.selectAll('.triangle').style('top', `${-Math.sqrt(20) - 3}px`);
})
.on('mouseleave', ({ target }) => {
tooltipSelection.style('visibility', 'hidden');
d3.select(target).style('fill', '#f4a261');
});
}
d3 = require('d3@6')
topojson = require('topojson-client@3')
md`## Data fetching`
world = d3.json('https://gist.githubusercontent.com/olemi/d4fb825df71c2939405e0017e360cd73/raw/d6f9f0e9e8bd33183454250bd8b808953869edd2/world-110m2.json')
rawData = FileAttachment("API_SP.POP.TOTL_DS2_en_csv_v2_2106202@1.csv").csv()
countryCodes = d3.tsv('https://d3js.org/world-110m.v1.tsv')
md`## Data formatting`
letterToNum = {
const letToNum = new Map();
countryCodes.forEach(item => {
if (item.iso_a3 !== "-99" && item.iso_n3 !== "-99") {
letToNum.set(item.iso_a3, item.iso_n3);
}
});
return letToNum;
}
data = {
const arrayData = rawData.map(item => {
let newDatum = Object.assign({}, item);
for (let i = 1960; i < 2020; i++) {
newDatum[`${i}`] = +newDatum[`${i}`]
}
newDatum["Country Code"] = letterToNum.get(item["Country Code"]);
return newDatum;
}).filter(item => {
return item["Country Code"] !== undefined;
})
const data = new Map()
arrayData.forEach(item => {
data.set(+item["Country Code"], item);
})
return data;
}
defaultMinValue = {
let minVal = 100000000000;
data.forEach(value => {
if (value["1960"] === 0) return;
minVal = Math.min(minVal, value["1960"])
})
return minVal;
}
defaultMaxValue = {
let maxVal = 0;
data.forEach(value => {
if (value["2019"] === 0) return;
maxVal = Math.max(maxVal, value["2019"])
})
return maxVal;
}
styles = html`
<style>
.hover-info {
width: 150px;
z-index: 10001;
position: absolute;
background: aliceblue;
border: 2px solid black;
border-radius: 4px;
overflow: visible;
}
.triangle {
position: absolute;
z-index: -1;
width: 10px;
height: 10px;
left: 5px;
transform: rotate(45deg);
background: aliceblue;
border-left: 2px solid black;
border-top: 2px solid black;
}
</style>`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.