For last week, we were able to make all the width and height to be stored in the Svelte Store without need to pass the width and height into the component each time when we call the component. We were also able to link the slider with the corresponding graph component, meaning that the width of the slider will match with the component automatically. However, there were still some part we could make it better. One thing is that right now, we still need to manually enter the width and height of each individual graph. We have to manually enter the pixel number for the graph in the Svelte Store, which is not an optimal design. Moreover, it is not responsive. The graph size is fixed. When we resize the screen, the graph and sliders will not change their size. As a result, if people use their phone to open this website, they will have a very large graph that the screen won’t fit. Therefore, for this week, we worked on making the graph responsive without manually entering the width and height. To do so, we first tried to detect the screen size by using Svelte component Window which binds to the innerWidth (finding the browser scrreen size). We then made the width and height in the Svelte Store depend on the innerWidth, so it won’t be a fixed number, and we will not need to manually enter the width and height for each graph. Then we used d3 to pass out the x and y coordinates for each point on the graph to the Svelte Store to better align the sliders with the graph. After that, we now made the graph fully responsive and easy to use.