Web visualization has been one of the most interesting themes to have emerged in the last 4-5 years. It allows developers to create interesting insight based apps, interactive maps business intelligence based charts & reports and then compile them right in your browser. Three.js, D3.js, Chart.js are few of the top libraries and frameworks that are most popular presently. The latest addition to this list is P5.js.
P5.js is a JavaScript library that acts as a software sketchbook and allows the developers to use the whole browser as a canvas. The main goal of P5.js is to make coding accessible for artists, designers, entrepreneurs and others who want to create their own browser based visualizations with a custom touch.
The inherent technology behind P5.js is Processing which is a sketch software/language for artists. To include a larger set of developers and designers into the fold, P5.js has incorporated coding in JavaScript. You can use it with DOM and hence this is as developer friendly as it is easily accessible by artists. P5.js has also add-on libraries that make it easier to interact with other HTML5 objects including text, video, webcam, sound etc.
You can get started with P5.js by downloading the complete set-up file or the minified version of it from the official P5.js page. You can also start from one of the online versions of P5.js stored in CDN. It comes packed with the Sublime text code editor by default but you can use any code editor of your choice. Other good editor options include Brackets, Atom and OpenProcessing. If you are not using the p5 web editor, then Notepad++ or Eclipse might be good choices for you.
P5.js comes with an option to customize the mouse and touch options while you are drawing. Unless a particular touch behavior is declared, the mouse touch assumes the touch of a mobile device which is intuitive and practical. P5.js also allows for Asynchronous JavaScript calls and functions. Loading images, external files, and URLs are generally handled by async functions which makes the overall process faster.
There are a few variables and functions that make browser interaction easier, many more to come!
Any native JS function can be used easily with you p5.js sketch. One of the core ideas behind p5.js is that your sketch is not just the graphics canvas but the you can draw using the complete length and breadth of your browser. For this reason, there is the p5.dom library that makes it easy to interact with other HTML5 objects, including text, hyperlink, image, input, video, audio, and webcam. There is also a p5.sound library that provides a friendly interface to HTML5 web audio API for loading, playing, and synthesizing sounds.
Read Next
8 ways to improve your data visualizations
Getting started with Data Visualization in Tableau
What is Seaborn and why should you use it for data visualization?
