Chapter 6 Interactive component

6.2 Descriptions

The interactive part of our analysis was built with D3 version 6, which the code has been uploaded to VizHub. You can also find code here in our github repo.
The interactive plot shows the selected 10 stock price related to a highlighted date. The y axis shows the volume of a day divided by the volume of the highlighted day. Since the y value is relative, we choose to use the log scale so that the plot is stable. Our data source for the plot is yahoo finance. You can also find the data here under the data folder of our repo. It has four columns: Symbol, Date, Close(Price in the plot) and Volume.

6.3 Instructions for using the map

The plot is initialized with 10 lines showing the stock price aligned with date Dec 31, 2020. We provide the following interactive options:

  1. Users can hover the mouse over the plot to align the price with any date. The y value will become price in a day divided by the price in the highlighted day.
  2. Users can click the legends to select the stocks they want to view. Click twice to bring the stock back.
  3. Users can select volume / price to view.

Notes:

  • Since the y axis reflects a division, we use log scale to make the plot stable.

  • Once a legend or a variable is clicked, the entire plot will be initialized to align with the first date, Dec 31, 2020.

References:

  1. Observable: Line Chart, Index Chart (https://observablehq.com/@d3/index-chart)
  2. D3 Gallery: Line chart (https://www.d3-graph-gallery.com/line.html)