Last week, we were able to analyze the raw data and generate the final tables we need to send to the server (combined payout, each individual payout, and capped climatology). This week, we are starting to build the actual server and frontend plots. We first wrote our server via Python and Flask. It is similar to the demo app we did two weeks ago. We wrote more routes to retrieve different tables. We also did a little bit data cleaning too to make our data easy to use. For this week, we will not make the website dynamic, which means user would not be able to change parameters through sliders or dropdown menu to see different results. We will just try to display the table we have in backend. Therefore, we did not write the update_variable route as yet.

After we wrote the servers, we started to build the front-end plots in Svelte. For the demo project we did two weeks ago, we were able to display one single graph in our page. However, for the actual one, we need to have three graphs with different types. We not only need to display regular bar graph and line graph, but also a grouped bar graph. The first challenge for us would be building the grouped bar graph. We read D3 document and some examples online, and figured out that we need to create 2 different x domains for D3.js, one for the actual axis, and one for the grouped elements. The second challenge for us is that we need to have multiple graphs displaying on the same page. We spent some time worked on this issue, and finally made it work, and we then created a function that includes the creation of the D3 graphs, so we can just call the function, and it will generate the graphs for us. The third challenge is that line graph uses different syntax in D3.js, so we needed to find the correct way to create the line graph. In the end, we are successfully created the page that can display all three graphs.