Loading CSV Files Into chart.js – Time Series/Designing With Data
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/...
ALL THE VIDEOS IN THIS UNIT
🎥 • Designing with Data: Time Series
DATA SOURCES
💾 https://crt-climate-explorer.nemac.or...
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