The graph shows a general decreasing trend in happiness over the last several years, but the overall order doesn't change at all, with the small exception of France which was even with Mexico, overtaking them in 2020.

It's clear from this that there has been something causing the world to decrease in happiness and I can think of no better candidate than Coronavirus, initially detected late in 2019 and causing massive impacts that have resonated throughout the last 3 or so years. I think this graph clearly shows the impact of Covid-19 on world happiness

There is only one mark in this graph, each dot, which has 3 channels, X and Y position, and the label.

The Y position notes the listed happiness score, the X position notes the year, and the label notes the country.

I originally wanted to do a line chart to show clearer trends in happiness over time, however multiple line functions refused to ever show any data and so it was cut to a scatterplot, which is similar to the line chart, but without the lines

The original dataset I received had many many countries listed on it, which I cut down to a manageable number, as well as removing extraneous year information without listed happiness scores.

The development process for this project was extremely frustrating, as I had to constantly fight with the data to get it to display, and the lines just refused to ever function once I started trying to use more than one.

The interaction is an increase in scale and a change in color, which I used to highlight the specific data point that is being moused over, to make it's information clearer.

var w = 800;

var h = 500;

var padding = 40;

var xScale, yScale, xAxis, yAxis; //Empty, for now

//For converting Dates to strings

var formatTime = d3.timeFormat("%Y");

const svg = d3.create('svg')

.attr("width", w)

.attr("height", h);

//Print data to console as table, for verification

//console.table(data, ["date", "average"]);

//Create scale functions

xScale = d3.scaleTime()

.domain([

d3.min(dataset, function(d) { return d.date; }),

d3.max(dataset, function(d) { return d.date ; })

])

.range([padding, w-padding]);

yScale = d3.scaleLinear()

.domain([

d3.min(dataset, function(d) { return d.score; }),

d3.max(dataset, function(d) { return d.score; })

])

.range([h - padding, padding]);

//Define axes

xAxis = d3.axisBottom()

.scale(xScale)

.ticks(10)

.tickFormat(formatTime);

//Define Y axis

yAxis = d3.axisLeft()

.scale(yScale)

.ticks(10)

svg.selectAll("circle")

.data(dataset).enter()

.append("circle")

.attr("cx", function(d) {return xScale(d.date)+10})

.attr("cy", function(d) {return yScale(d.score)})

.attr("r", 5)

.attr("fill", "yellow")

.on("mouseover", function() {

d3.select(this)

.transition()

.duration(1000)

.attr("r", "50")

.attr("fill", "blue")

})

.on("mouseout", function() {

d3.select(this)

.transition()

.duration(100)

.attr("r", "5")

.attr("fill", "yellow");

});

svg.append("g")

.attr("class", "axis")

.attr("transform", `translate(10, 460)`)

.call(xAxis);

svg.append("g")

.attr("class", "axis")

.attr("transform", `translate(40, 0)`)

.call(yAxis);

svg.selectAll("text")

.data(dataset).enter()

.append("text")

.attr("x", function(d) {return xScale(d.date)+40})

.attr("y", function(d) {return yScale(d.score)})

.text(function(d) {return d.country})

.attr("font-size", "10px")

return svg.node()

}

return {

date: new Date(+d.Year, 0), //Make a new Date object for each year + month

score: parseFloat(d.Happiness_Score), //Convert from string to float

country: d.Country,

freedom: parseFloat(d.Freedom),

column: parseInt(d.Column)

};

}