Meta-issue for democracy gradient map

[Crista2019]

The purpose of the democracy gradient map is to show the evolution of democracy in Africa from the years 1981 - 2018. We want the users to understand how different countries increased or decreased in democracy score over time. We also want the users to understand what the different democracy indices mean and how they are calculated. In the final product, we want to provide an aesthetically pleasing visualization that is both informative and intuitive.

• [x] setup backend #4
  • [x] read csv file and send to frontend
  • [x] add country code to backend once we get the data
• [x] someone can model the scrollbar #10
  • [x] Play button for automatically going through the year
• [x] someone can set up the actual map itself, SVG (D3 for transitions/linear gradients for color, React for binding state changes?) (@JasonLin43212) #9
• [x] clean geojson (@ryaanahmed)
• [x] have a convo with other team (map)
• [x] tests for backend functions
  • [x] Update tests once CSV is updated
• [ ] Hover over country for information on name and score #20
• [ ] Clicking country gives a line graph of score over time #22
• [x] Document code and functions
• [ ] Description and links for score types #27
• [ ] Figure out which scores should be included on the site
• [ ] Find a way to game-ify it

[ryaanahmed]

great! re: color -- check out: https://github.com/d3/d3-scale (the full API reference) https://www.d3indepth.com/scales/ (a much nicer rundown of how this works)

The really cool thing about D3 scales is that you can specify, e.g., colors as the output range. From the d3 in depth thing linked --

var linearScale = d3.scaleLinear()
  .domain([0, 10])
  .range(['yellow', 'red']);

linearScale(0);   // returns "rgb(255, 255, 0)"
linearScale(5);   // returns "rgb(255, 128, 0)"
linearScale(10);  // returns "rgb(255, 0, 0)"

[Crista2019]

Another thing to think about once the parts of the heatmap are all working would be to put the elements of the viz (map, scrollbar, dropdown) into something like a bootstrap layout.

• [ ] organize frontend with bootstrap

[ryaanahmed]

@Mayowa99 -- you mentioned that you had code for the gradient key that didn't get merged at some point. Can you find and let me know the name of the branch, so I can revive that?