/example7

Primary LanguageHTML

example7: scatter plot

Note: This example may be possible without Python using just Excel or Sublime Text.

Step 1: Run the example visuzalization

  1. Run a simple python server in this folder

    python3 -m http.server 8000

  2. Navigate to http://localhost:8000/

Step 2: Change out the data

  1. Look at the original data format.

    head input.csv

  2. Look at the dummy data that the visualization takes in.

    head dummy.csv

  3. Create a script, convert.py that will transform input.csv into output.csv. The output should be in the same format as the dummy data. (check the solution/ folder if you get stuck)

Step 3: Change the visualization to read the new data

  1. Update the visualization to read the new column headers. For example

    • currently dummy.csv has the columns date and close
    • however, output.csv has the columns date and approve

    You will need to modify the javascript to read the new column approve instead of looking for a column named close

  2. Navigate to http://localhost:8000/ in your browser and see the interactive work.

  3. Split out the HTML, CSS, and JS into separate files and make sure the visualization still works.

Sources