Teaching p5js - what to do about svg?

p5.js Libraries
1

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.

1 Like
2

and you named many external tools working on that,

no idea about current status p5.js, but something was done earlier ( 3 years ago ) here
GitHub - zenozeng/p5.js-svg: SVG runtime for p5.js. !

so i try using that old version
/*! p5.js v0.4.13 September 20, 2015 */
with

/*!!
 *  p5.svg v0.5.2
 *  SVG Runtime for p5.js.
 *
 *  Copyright (C) 2015-2016 Zeno Zeng
 *  Licensed under the LGPL license.
 */

and using your map ( repaired ) here

could be a start

but sure you expect a professional answer and not a hack.

2 Likes
3

In addition to p5.js-svg being on github, it has a documentation site, and is on npm, and available via CDN. It hasn’t been in active development for 3-4 years, but seems reasonably accessible and flexible from a teaching perspective – if it meets your need.

2 Likes
4

What I like about D3 is that there are numerous examples linking data to a US map and the library, it’s built to allow interactions with the data and it is used by places like the NYTimes for very complex graphs (like Obama’s Budget visualization). Seeing how data animates as you change from All spending to Types of spending is very informative.

It’s an advanced library and quickly introduces some of the complex topics like joining data. If the students are going into advanced data visualizations, it’s probably the best to learn. If they are more at an introduction to coding level, I would suggest either using Processing or have them figure out simpler (not map-based) visualizations using standard charts and graphs.

1 Like