Note: This example may be possible without Python using just Excel or Sublime Text.
-
Run a simple python server in this folder
python3 -m http.server 8000
-
Navigate to
http://localhost:8000/
-
Look at the original data format.
head input.csv
-
Look at the dummy data that the visualization takes in.
head dummy.csv
-
Create a script,
convert.py
that will transforminput.csv
intooutput.csv
. The output should be in the same format as the dummy data. (check thesolution/
folder if you get stuck)
-
Update the visualization to read the new column headers. For example
- currently
dummy.csv
has the columnsdate
andclose
- however,
output.csv
has the columnsdate
andapprove
You will need to modify the javascript to read the new column
approve
instead of looking for a column namedclose
- currently
-
Navigate to
http://localhost:8000/
in your browser and see the interactive work. -
Split out the HTML, CSS, and JS into separate files and make sure the visualization still works.
Sources
- Data: FiveThirtyEight Trump Approval Ratings
- Visualzation: Scatter Plot