Even though we are now able to create the Svelte Components for the D3 Graphs and it is easy for other user to write their own graphs, there are still a few issues we need to fix. One problem is that we have to manually enter the height, width, absolute top, absolute left to create the d3 graph. Another problem is that we need to do the same for the sliders, and what Professor Wu want us to do is to link the slider with the graphs the slider could affect (able to change the parameters for that graph), and make them having the same width. Therefore, this week, we tried to fix these issues.

The tool we used is called Svelte Store. According to the Svelte website tutorial, “A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes.” Therefore, we wrote a writable store that stores the width and the height of each graph. For the sliders, they will now be able to read their corresponding graphs’ width and height in the Svelte Store and then treat these values as its width and height. Now we do not need to manually enter the width and the height for each of the D3 graphs as a parameter – we could write all the width and height in the Svelte Store. Also we can now link the Sliders to their corresponding D3 Graphs to have the same width.