Food supply is one of the more critical impacts of global warming. As the world becomes warmer, some countries may end up producing more food, while others' yield rate will decrease.
Take a look at how the major crops (wheat, rice, maize) yield rate will be affected in the next 60 years on my data visualization site and find out your own answers to the question.
- Vanilla Javascript
- D3.js
- CSS
- HTML
Users can hover over the globe and it will stop turning. Users can then choose a specific country. In the near future, users will be able to click on a specific country and see the country's crop yield changes over the years.
Globe.prototype.rotate = function () {
const countries = document.getElementsByClassName("country");
const globe = this;
this.setIntervalId = setInterval(() => {
globe.changeRotationAngle();
for (let i = 0; i < countries.length; i++) {
const country = d3.select(countries[i]);
country
.attr("class", "country rotate-true")
.attr(
"d",
d3.geoPath(
globe.projection.rotate([globe.rotationDegree, globe.axisDegree])
)
);
}
}, 50);
};Based on the CO2 scenario, year, and crop the users choose, the globe and the scatter plot will render different results, and users can observe the changes.
Globe.prototype.updateData = async function (crop, scenario, year) {
const g = d3.select(".countries");
const globe = this;
let cropData = await d3.csv("./src/data/crops-yield-changes.csv");
g.selectAll(".country").style("fill", function (d) {
const currentCountry = cropData.find(
(country) => country["CountryName"] === this.id
);
if (currentCountry) {
const val = currentCountry[`${crop}${scenario}${year}`];
for (let i = 0; i < globe.yieldMarks.length; i++) {
if (val >= globe.yieldMarks[i]) {
return globe.yieldColors[i];
}
}
} else {
return "gray";
}
});
};The website is optimized for mobile users as well!
@media only screen and (max-width: 500px) {
h1 {
font-size: 25px;
}
.globe-container {
flex-direction: column;
}
//...
}