After making the basic app working correctly and able to change the graphs dynamically as users make changes through the dropdown menu or the sliders, we started to organize and clean our current code and tried to make it more concise, easy to read, and reusable. For now, the D3 function is just a block of code in the main svelte file, and the main svelte file is containning thousands of lines of code. It would be very difficult to find it, and it would be difficult for other people to read it as well. I started to create separate javascript functions in different files for each of the graph. We have created 3 different files for the 3 different type of graphs. For this way, the main file is a lot shorter and easy to read, and also it would be very easy for people to add new graphs. Since we are making the d3 components into javascript functions, whenever we want to add another graph, all we need to do is to call the function and pass in some necessary parameters. Originally, if we want to add a new graph, we will need to copy and paste the previous code, find all the places that we need to make changes, and manually make the updates. It would be really easy to make mistakes, and it is not user friendly. But now, after we organized our file, if we want to add a new graph, we just need to type the function name, and type in the parameters such as the title name, x axis name, y axis name, and etc, and it will automatically update everything for us, so that even people don’t know a lot on coding would be able to create their own graphs.