I teach p5js to undergraduates as part of a Screen-Based Interaction Design course. It’s great until we get to intermediate data visualization. Importing json and drawing circles is fine, but what everyone wants to do, especially with the elections in 2020, is fill in maps with real time data (think coloring states red and blue from https://commons.wikimedia.org/wiki/File:Blank_US_Map_(states_only).svg).
This is easy in java/processing with loadShape etc, but p5js doesn't seem suited until someone does the heavy lifting needed to make svg native.
So what would you all recommend? I could go with shifting to D3, which would give the students experience with a widely used library. Or there are more specific ones like two.js, paper.js. and rune.js. It looks like bonsai.js and snap.svg are no longer in development.
Which would be an easier shift for students who only have experience with p5js and a little bit of tweaking someone else's jQuery? Which are more reliable for my red state, blue state example across browsers? And will p5js ever make this native?
Thanks in advance.