Skip to content

Data visualization through an interactive bubble chart of relationship between wealth of nations and Olympic success

License

Notifications You must be signed in to change notification settings

ed-xiao/olympics

Repository files navigation

Olympic Success & Wealth of Nations

Interactive bubble chart of relationship between Olympic success and GDP of nations since the start of the Modern Olympics. A reimagination of Gapminder's Wealth & Health of Nations.

Live Link

Architecture and Technologies

  • HTML, CSS, JS, D3.js
  • Data sourced from: Gapminder, Wikipedia

Background

Data visualization on the relationship of GDP and Olympic success through an interactive bubble chart with the below dimensions:

  • x-axis: GDP
  • y-axis: total number of summer Olympic medals
  • size of bubbles: population
  • color: region
  • the circles on the chart will adjust accordingly by year

demo

Technical Implementation

  • Creating a tooltip with detailed information on population, GDP/capita and total summer Olympic medals with a couple of event handlers:
//create tooltip div element
var tooltip = d3.select('#root')
            .append("div")
            .style("opacity", 0)
            .attr("class", "tooltip")

//tooltip mouseover event handler
var tipMouseover = function (d) {
    var html = d.name + "<br/>" + "pop: " + d3.format(",.2r")(d.population) + "<br/>" +
        "income: " + d3.format(",.2r")(d.income) + "<br/>" + "medals: " + d3.format(",.2r")(d.medals)

    tooltip.html(html)
        .style("left", (d3.event.pageX + 15) + "px")
        .style("top", (d3.event.pageY - 28) + "px")
        .transition()
        .duration(200)
        .style("opacity", .9)
};

// tooltip mouseout event handler
var tipMouseout = function (d) {
    tooltip.transition()
        .duration(300)
        .style("opacity", 0);
};
  • Updating the circle position and size based on the slider value:
//update circles based on input year
const update = (year) => {
            circle
                .data(getData(year), d => d.name)
                .sort((a, b) => d3.descending(a.population, b.population))
                .transition()
                .duration(500)
                .attr("cx", d => {
                    if (xVar === 'income') {
                        return (xScale(d[xVar]))
                    }
                    if (xVar === 'totalGDP') {
                        return (xScale2(d[xVar]))
                    }
                })
                .attr("cy", d => yAxis(d.medals))
                .attr("r", d => radius(d.population));
            yearLabel.text(year);
        }
  • Starting auto-play on page load, adding event handlers to update circles based on slider position, and constructing play/pause button to control auto-play:
const slider = d3.select("#year-slider")

//event handler on play slider to trigger update on circles
slider.on("mousemove", function () {
    update(this.value);
})

//increment year by one and update circles
const updateSlider = () => {
    let currentYear = slider.property("value")
    slider.property("value", parseInt(currentYear)+1);
    update(slider.property("value"));
}

//autoplay on load
let moveSlider = setInterval(updateSlider, 500);
const clearPlay = () => {clearInterval(moveSlider)};
//clear interval after 70 seconds
setTimeout(clearPlay, 70000)

const button = d3.select("button");

//stop auto-play on mousedown
slider.on("mousedown", () => {
    clearPlay();
    button.property("innerHTML","Play")
});

//update circles on click event handler
slider.on("click", () => {
    update(slider.property("value"));
});

//update button text and play when paused
button.on("click", () => {
    if (button.property("innerHTML") === "Play") {
        moveSlider = setInterval(updateSlider, 500);
        button.property("innerHTML", "Pause");
    } else {
        clearPlay();
        button.property("innerHTML", "Play");
    }
});

Future Features

  • On hover show a greyed out path for the country over the entire timeline of the chart
  • Have a sidebar of checkboxes to filter the chart by categories (country, continent, sporting event, etc.)
  • Add additional data points for x-axis and y-axis (winter olympic medals)

About

Data visualization through an interactive bubble chart of relationship between wealth of nations and Olympic success

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published