Skip to content

Instantly share code, notes, and snippets.

@JoBerkner

JoBerkner/useEffect.js

Last active July 23, 2020 04:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JoBerkner/2081846406ed92c1925a54e7a90ffb9d to your computer and use it in GitHub Desktop.
Save JoBerkner/2081846406ed92c1925a54e7a90ffb9d to your computer and use it in GitHub Desktop.
Download ZIP
useEffect hook to create SVG paths for each country
Raw
useEffect.js
useEffect(() => {
setCountryList(
countryPaths.map((path, i) => {
const curCountry = COUNTRIES[i].properties.name;
const isCountryNameInData = data.some(country => country.name === curCountry);
const curCountryData = isCountryNameInData
? data.find(country => country.name === curCountry)["data"]
: null;
const isDataAvailable = isCountryNameInData
? curCountryData.some(data => data.date === date)
: false;
const dateIndex = isDataAvailable
? curCountryData.findIndex(x => x.date === date)
: null;
return (
<Path
key={curCountry}
d={path}
stroke={"#aaa"}
strokeOpacity={0.3}
strokeWidth={0.6}
fill={
isDataAvailable
? colorScale(curCountryData[dateIndex][stat])
: "#aaa"
}
opacity={isDataAvailable ? 1 : 0.4}
/>
)
})
)
}, [])
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment