Loading CSV Files Into chart.js – Time Series/Designing With Data
Channel: Jeff Thompson
Date: 2021-02-26

Creating visualizations with hand-typed data won't cut it for long: the kinds of data we'll be using will likely be longer than we'd like to type, plus transcribing by hand will be prone to errors and, if you want to make a change to your data, then you have to type it all again!

Luckily, we can load a CSV (comma-separated values) file with our code! Chart.js can't do this on it's own, so instead we can use D3 (another visualization library) to handle this for us. Our code gets a little more complicated, since we have to load the data and create our chart inside the csv() command, then go through all the entries to create our 'data' and 'labels' lists.

👩‍💻 https://editor.p5js.org/jeffThompson/sketches/jX4UeLtlJ

ALL THE VIDEOS IN THIS UNIT
🎥 https://youtube.com/playlist?list=PLsGCUnpinsDn93L5F0BxBxILZoF5nyeLz

DATA SOURCES
💾 https://crt-climate-explorer.nemac.org/local-climate-charts/?county=New%20York%2BCounty&city=New%20York%2C%20NY&fips=36061&lat=40.7127753&lon=-74.0059728&nav=local-climate-charts

CHALLENGES
❓ How could you style this chart to better present the data?
❓ Can you load one of the other files in the 'data' folder? You'll have to change the filename but also the 'key' for the column you want to visualize