maulicule
commented
4 years ago P5.js
About the Tool
js=Java Script P5.js is a JS library created by Lauren McCarthy which allows for a sketch-based approach, built on Processing. It was started with the goal of make programming available to artists, designers, educators, beginners, which makes it a good starting point for design students, especially those new to coding.
Here's an Introduction to P5 which has some pretty good documentation covering different aspects of it.
Using P5
P5 allows us execute a lot of creative projects, with easy to handle code. It's not just for handling data, but can be utilized for data visualization. The P5 code is contained in a JavaScript file (the 'sketch'), which uses variables and keywords along with some special functions. Some of these functions are:
- preload(): executed beforehand, especially useful when we want to load data before executing the rest of the code
- setup(): executed once, used mainly to set things up and initialize global variables
- draw(): the main body of code which runs repeatedly ('loops') in the sketch
We can use an HTML file is used to wrap the JavaScript sketch so as to run it on the browser, or can make use of the Web-based P5 editor which runs online (however, it cannot run off a local server, which is often required when we source data locally from our devices). The HTML file looks something like this:
In this example, "sketch.js" is the JavaScript file which contains the actual code for the P5 sketch.
I started learning P5.js only a few days before taking the tool tute in class, meaning to say, the 'newbie' perspective was pretty fresh. From this angle, I can go on and say that it is fairly easy to progress after a couple of false starts/teething trouble, till we get the hang of the basic working of the tool. Once that is out of the way, the tool is flexible and extremely fun to play around with!
Some interesting examples (particularly from our perspective of Data Visualization) that I came across are here: This very Basic Bar Graph example which we can modify as per our requirements This Codepen with an animated Circular Array of Bars This geo-visualization in the form of a Cost of Living Map
There aren't too many DataViz-specific examples of P5, probably owing to the fact that P5 can be used for a variety of creative projects, not all of which are data-driven
I found an article by the Visual Data Analysis Lab here which looks at hands-on data visualization using P5, and I tried to follow along with the project discussed here. The project included a nice, clean dataset of different flights in the airports across the world, which the article discussed how to color-code as international and domestic. I further modified it to generate a tool which could be used to explore connecting flights, which looked somewhat like this:
P5 can handle data by accessing it live from online sources, or in the form of JSON or CSV files.
Extending P5
The advantage of using a JavaScript library (which applies to P5 as well) is that it can be extended to suit our purpose. This is done through using other libraries. Some libraries which can be particularly useful to us in our endeavour to visualize data are:
-
Grafica.js - which is pretty versatile and specifically meant for 2D plotting of data. It is capable of handling a lot of data and some examples such as this bubble plot which lets us hover and zoom interactively.
-
Mappa - lets us create some pretty good geo-visualizations with inbuilt map data
-
P5.Play - a fun library which makes use of sprites for animation, and can be used to quickly scrub through well-designed static visualizations to animate them with a few lines of code
Depending on our intended use-case, there are several libraries which can help us achieve our goals easily, with reduced coding-effort.
Overall
P5. js is a very versatile tool, and can be used effectively for Data Visualization among other forms of visual coding. However, it is not as data-driven as some other tools like D3.js, nor as objective-focussed as Chart.js or Timeline.js. As it is not directed towards dataviz, finding relevant examples or tutorials can be tricky. Certain basic functionalities of the library can be difficult to discover for a newbie, but the documentation helps. That being said, it is a very handy and powerful tool, and is extremely flexible, giving us as much control as we'd like to have. As the essential part of the code is only a few easy-to-apply lines, it makes for a good transition into coding for beginners, while it can be expanded to adapt to our specific goals depending on our skill level.
Hope I've covered the basics of the tool to make you interested enough to try it out for your next design project, especially if you're planning to create something wonderful with lots of data and a bit of code. The original presentation which I made in class is here
Happy Data Visualizing! -Maulashree
mayura7
rishivanukuru
SaiAnjan
GauriTillu
avyayrkashyap
AshmiK
seemskk
Pros:
kaishwary08
prachitank
gyanl
.
akshayrpatil
dhirajdethe
In this assignment each of you will select one of the following 18 tools, explore it as thoroughly as you can (download, install, tryout, and use it to create something), and do a demonstration/overview of the tool to the rest of the class. The objective is to introduce the tool to the class, and highlight its possibilities & limitations so the audience can make a well informed choice of available tools. In your comments include links to the resources you used (if any) in your presentations, capturing your personal insights about the tool, and a carefully curated set of related resources.