I am creating a table displaying the results of a tournament. Each team's final placement and original seeding will be listed. I plan to include a small bubble next to each team showing how their final placement compares to their initial seeding. To visually represent this, I want the background color to become darker red for teams that performed worse and darker green for teams that performed better.
For instance:
Team A finished 1st but was seeded 3rd -> light green
Team B finished 2nd yet they were seeded 30th -> dark green
Team C finished 10th after being seeded 8th -> light red
Team D finished in 30th place despite having been seeded 1st -> dark red
I also want to establish a threshold so that teams that over or underperformed by a certain margin will have the same intensity of color.
While my website is created using Angular, I wonder if achieving this effect can be as simple as adjusting some CSS properties?
Here is a screenshot from another website where this feature is already implemented:
In the image, you can see the final rankings on the left side and the comparison between performance and initial seeding on the right. An empty field indicates that the seed matches the finish position