Last week, we were able to create the javascript functions that we can call to generate different graphs. This week, Professor Wu, our advisor, suggested us to change our existing javascript functions to Svelte components to make it more user friendly. For the javascript function we previously wrote, in order to implement and use these functions, we will need to find the proper place in the svelte script to locate the functions and pass the parameters in the correct order. If we switch the order we pass in the parameter, the graph will not be able to generate correctly. Also, for d3 in javascript, we will need to manually clear the SVG plots and redraw it again whenever we change the parameters in the sliders. After changing the functions into Svelte components, we will just need to place the component in the html body by the order we want to display them. Another advantage is that we do not need to pass the parameter in the exact order. For svelte components, we can now pass the parameters in as key value pairs. Also we can use Svelte {#key} blocks to automatically refresh the d3 content without us manually create the clear SVG functions. It is much more convenient now for other users to create their own d3 graphs.