.domain([min_elo, max_elo])

.range([margin.left, width - margin.right])

.nice()

.domain([10, 1])

.range([height - margin.bottom, margin.top])

.nice()

.domain(elodata.map(d => d.country))

.range(["#9edae5", "#17becf", "#dbdb8d", "#bcbd22", "#c7c7c7", "#7f7f7f", "#f7b6d2", "#e377c2", "#c49c94", "#8c564b", "#c5b0d5", "#9467bd", "#ff9896", "#d62728", "#98df8a", "#2ca02c", "#ffbb78", "#ff7f0e", "#aec7e8", "#1f77b4",]) // try other schemes, too!

d3.range(parseInt(years[0]), parseInt(years[1]) + 1, 1), // min to max years in 1 year increments

{ autoplay: false, delay: 1500, loop: false } // experiment with these settings!

function getFilteredDataByYear(year) {

const filteredData = elodata.map(d => d[0])

.filter(d => parseInt(d.year) === parseInt(year))

.filter(d => parseInt(d.rating) >= min_elo)

.sort((a, b) => parseInt(b.rating) - parseInt(a.rating))

.filter((d, i) => i < 10);

return filteredData;

}

// chart

const svg = d3.create('svg')

.attr('width', width)

.attr('height', height);

// title

svg.append("text")

.attr("x", width / 2)

.attr("y", margin.top / 3)

.attr("text-anchor", "middle")

.style("font-size", "20px")

.style("text-decoration", "bold")

.text("Chess Elo Over The Past 20 Years");

// x-axis

svg.append('g')

.attr('transform', `translate(0, ${margin.top})`)

.call(d3.axisTop(x))

.append('text')

.attr('text-anchor', 'middle')

.attr('fill', 'black')

.attr('font-size', '16px')

.attr('x', width / 2)

.attr('y', -30)

.text('Elo Rating');

// y-axis

svg.append('g')

.attr('transform', `translate(${margin.left}, ${barHeight / 2})`)

.call(d3.axisLeft(y))

.append('text')

.attr('transform', `translate(-30, ${height / 2}) rotate(-90)`)

.attr('text-anchor', 'end')

.attr('fill', 'black')

.attr('font-size', '16px')

.text('Player Ranking');

svg.append('line') // janky fix for y-axis style

.style("stroke", "black")

.style("stroke-width", 1)

.attr("x1", margin.left)

.attr("y1", margin.top)

.attr("x2", margin.left)

.attr("y2", height);

// year label - bottom right

const yearLabel = svg.append('text')

.attr('class', 'year')

.attr('x', width - 200)

.attr('y', height - margin.bottom)

.attr('fill', '#ccc')

.attr('font-family', 'Helvetica Neue, Arial')

.attr('font-weight', 500)

.attr('font-size', 80)

.text(years[0]);

// bars

let players = svg

.selectAll('rect')

.data(getFilteredDataByYear(years[0]))

.enter().append('rect')

.attr('class', 'player')

.attr('opacity', 0.85)

.attr('fill', d => color(d.country))

.attr('y', (d, i) => y(i + 1))

.attr('x', margin.left)

.attr('width', d => x(parseInt(d.rating) - 8))

.attr('height', barHeight)

.style('font-size', 'small');

// player name label for each bar chart

let names = svg

.selectAll(".names")

.data(getFilteredDataByYear(years[0]))

.join("text")

.attr('text-anchor', 'end')

.attr('fill', '#ffffff')

.attr('font-size', 16)

.attr('font-family', 'Helvetica Neue, Arial')

.attr('y', (d, i) => y(i + 1) + 20)

.attr('x', d => margin.left + x(parseInt(d.rating) - 8) - 3)

.text(d => d.name);

// elo rating label for each bar chart

let ratings = svg

.selectAll(".ratings")

.data(getFilteredDataByYear(years[0]))

.join("text")

.attr('text-anchor', 'start')

.attr('fill', '#aaaaaa')

.attr('font-size', 16)

.attr('font-family', 'Helvetica Neue, Arial')

.attr('y', (d, i) => y(i + 1) + 20)

.attr('x', d => margin.left + x(parseInt(d.rating) - 8) + 3)

.text(d => d.rating);

updateInfo(years[0]);

function updateInfo(year){

players.selectAll('title').remove();

players.data(getFilteredDataByYear(year))

.append('title')

.text((d) => "Name: " + d.name + "\nCountry : " + d.country + "\nRating: " + d.rating);

players

.on('mouseover', function() {

d3.select(this).attr('stroke', '#333').attr('stroke-width', 2);

})

.on('mouseout', function() {

d3.select(this).attr('stroke', null);

});

}

function setYear(year) {

yearLabel.text(year);

players = players.data(getFilteredDataByYear(year), d => d.name)

.join(

enter => enter.append('rect')

.attr('class', 'player')

.attr('opacity', 0.0)

.attr('y', (d, i) => y(i + 1))

.attr('x', margin.left)

.attr('width', d => x(parseInt(d.rating) - 8))

.attr('height', barHeight),

update => update,

exit => exit.remove()

);

players.transition().duration(1000).ease(d3.easeCubic)

.attr('opacity', 0.75)

.attr('fill', d => color(d.country))

.attr('y', (d, i) => y(i + 1))

.attr('x', margin.left)

.attr('width', d => x(parseInt(d.rating) - 8))

.attr('height', barHeight)

.style('font-size', 'small');

names = names.data(getFilteredDataByYear(year), d => d.name)

.join(

enter => enter.append("text")

.attr('text-anchor', 'end')

.attr('fill', '#ffffff')

.attr('font-size', 16)

.attr('font-family', 'Helvetica Neue, Arial')

.attr('y', (d, i) => y(i + 1) + 20)

.attr('x', d => margin.left + x(parseInt(d.rating) - 8) - 3)

.text(d => d.name),

update => update,

exit => exit.remove()

);

names.transition().duration(1000).ease(d3.easeCubic)

.attr('text-anchor', 'end')

.attr('fill', '#ffffff')

.attr('font-size', 16)

.attr('font-family', 'Helvetica Neue, Arial')

.attr('y', (d, i) => y(i + 1) + 20)

.attr('x', d => margin.left + x(parseInt(d.rating) - 8) - 3)

.text(d => d.name);

ratings = ratings.data(getFilteredDataByYear(year), d => d.name)

.join(

enter => enter.append("text")

.attr('text-anchor', 'start')

.attr('fill', '#aaaaaa')

.attr('font-size', 16)

.attr('font-family', 'Helvetica Neue, Arial')

.attr('y', (d, i) => y(i + 1) + 20)

.attr('x', d => margin.left + x(parseInt(d.rating) - 8) + 3)

.text(d => d.rating),

update => update,

exit => exit.remove()

);

ratings.transition().duration(1000).ease(d3.easeCubic)

.attr('text-anchor', 'start')

.attr('fill', '#aaaaaa')

.attr('font-size', 16)

.attr('font-family', 'Helvetica Neue, Arial')

.attr('y', (d, i) => y(i + 1) + 20)

.attr('x', d => margin.left + x(parseInt(d.rating) - 8) + 3)

.text(d => d.rating);

updateInfo(year);

}

return Object.assign(svg.node(), { setYear });

}

We ended up deciding to make a simple bar chart sorted by player elo ratings, showing the top ten player (there was a cap on file size that can be imported into observable notebook), and the interactive elements include filtering by year, and mouseover events for more details shown in the tooltip. We also decided to forgo a legend that would support filtering by nationality since our visualization already have color encodings tied to nationalities. We also included animations (up and down transitions) to show the change of players rankings year over year.

If we had more time and experience with d3, we would have certainly wanted to implement previously mentioned ideas or change this current visualization to be a line chart that plots players' elo ratings to a changing x-axis marking year that is updated overtime to show the rise and fall or retirement of players. This would make it easier to compare career or elo rating trajectories of players overtime, which cannot be encoded by the current bar chart visualization.

**Development Process: ** Describe how the work was split among the team members.

We first explored many different datasets to use and decided to use the International Chess Federation's (known as FIDE) provided dataset with data going back to 2000. John Li handled the data wrangling, aggregating many datasets into one, validating data accuracy, reformatting data into JSON formats, performed cleanup of data whenever we encountered problems with the provided data. There are some notable flaws of the dataset such as the inclusion of retired players' elo ratings, i.e., retired players' elos remain the same even after they retire. This means that our top 10 list is the current top 10 FIDE rated players in the given year including retired players. In the future we might want to update this visual to only include top 10 active players by manually filtering out retired players for data in years after their retirement. We also encountered many problems such as missing data over many periods of months, as well as inconsistencies in player names and elo ratings.

We then utilized the provided code in the D3 demo notebook to form the foundation for our code for the visualization. Connor, Kevin, and Phuong worked together to adapt the base code to form our visualization for our dataset, and added time/elo filters to data, text labels for each bar or data points, tooltip on mouseover events, animations for transitions of player rankings year over year (as well as other text label elements for consistency). We worked together to debug our D3 code, as well as validate data inaccuracies whenever we spot any.

We then all worked together to complete this write up.

We worked approximately 7 hours on first day, 3 on second day, 4 on third day, totaling 14 hours.

We all agreed that the two most time-consuming parts was data wrangling and debugging D3 code to fix minor visual alignment issues. It is incredibly time consuming to wrangle data and validate data when dealing with less than subpar datasets. It is also very time consuming to learn to use a new technology and use it well. The gulf of execution is much larger when working with a visualization grammar like D3, and it is frustrating at times when it is difficult to realize a simple conceptual model. However, we do realize that there is power that comes with finer specificity controls when working with D3.

`