Week 11: April 8: Visualizations Continued


  • Studio and working on Visualizations
  • HTML Interaction with Data
  • Tabulating data – adding columns and checking names
  • Data to Object
  • Object to HTML
  • Visualization Studio Continued
  • Sketch for Now
  • Sketch for Now II

HTML + CSS Interactions with Data

One of the benefits of working with data visualization and the web, is that we can use the data to influence the HTML and CSS elements of our page. We can take advantage of built in hover and animation effects here.  For this we will have to use functions from the DOM library,

Such as: createP(), .addClass(), .position(), and .style()

let data = [10, 20, 30, 40, 50, 60];

//run a for loop to cycle through the data
for (let i = 0; i < data.length; i++) {

  //store each index of the data array in a variable 
  let p = createP(data[i]);

  //use dot notation on the variable to give it a position on the canvas
  p.position(random(width / 2), random(height / 2))

  //add a style that changes based on the data itself
  p.style("padding", data[i] + 'px')

  //add a class in css - in the css file I have created a hover on the class
  //and added a transition to the class


Notice in the example above, the size of the padding of each element is changing based on the number inside the data set. Remember, when + is used with a string and a variable, it joins them together, this is called concatenate.

p.style("padding", data[i] + 'px')

Inside the CSS File:

  transition:background-color 1s;

  background-color: green;

HTML + CSS + Data Basic Example

Min/Max Updated with Filter

In last week’s class, we looked at what happens when you have the column of data stored as an array, and you want to find the minimum and maximum values. We ran into an issue with some columns not having any data inside of them, or NaN, not a number, or undefined. To get around this, especially with working with min and max values of latitudes and longitudes, we can filter the array. 

To do this, we use .filter(Number);
will search through the whole array, by whatever argument you pass on the inside of the parenthesis, and remove everything it does not see as true for that argument. In this case, we pass it Number. Number is a built in javascript function which means what it says, a number. Because .filter is Dot Notation, we add the array to the front of it, and make it equal to a new variable. We then pass this variable which stores our new clean into the min() and max() 

Example Working Lat/Long

//store the clean array in a new variable  
let testLat = lat.filter(Number); 

//run min and max on the clean array
  let minLat = min(testLat);
  let maxLat = max(testLat);
  print("latitudes", minLat, maxLat);

//store the clean array in a new variable 
  let testLng = lng.filter(Number);

//run min and max on the clean array
  let minLng = min(testLng);
  let maxLng = max(testLng);
  print("longitudes", minLng, maxLng);

Preventing errors/undefined data

When we call the map function on the lat and long, sometimes we may have columns without data or random zeros. In this case, we need a way to create a conditional to let our good data pass through and keep out the undefined or incorrect data.

In this case:

if( data[i] != isNaN ){  statements; }

This statement above says literally: if the data does not equal an undefined number, do what would come afterwards. It uses =! which means does not equal

In our usage, we would use it like this:

// if the data coming in is a number...
if (lng[i]!=isNaN) {
newLng = map(lng[i], minLng, maxLng, 0, width);

if (lat[i]!=isNaN) {
newLat = map(lat[i], minLat, maxLat, height, 0);
//combine into one statement using logical or

if (lng[i]!=isNaN || (lat[i]!=isNaN) {
  newLng = map(lng[i], minLng, maxLng, 0, width);
  newLat = map(lat[i], minLat, maxLat, height, 0);

Tabulating Addition

For those who are adding up numbers columns the following examples might be helpful. They contain examples of logic and conditional statements to help you parse your data.

Example without comments

Example with comments

Example with drawing to the screen

Example with storing data in an array

Storing Data to Object

If you want to create mouseMoved – also known as hover – or mousePressed effects on your data, the best way to do this is to store each point of data inside an object. This will require creating a class, like we did for the organism project, and storing the latitude, longitude, name, and other associated information inside of it. In the meantime, and example is here.

Basic Data to Object

Basic Data to Object with mouseMoved

The above example is loaded with comments describing how it works

USA Population Map to Data

Converting your data to an object should come after you’ve already worked it into an image you like. This is because you need to know which information you want to store in your object. Just like in the organism project, we created a class to store information. In this project, its a little more straightforward.

If we wanted to store every piece of data from the population map of the US, we would want to store as the data: the name, the latitude, the longitude, and the population data.

class City {
constructor(city, lat, lng, ppl) {
this.city = city;
this.lat = lat;
this.lng = lng;
this.ppl = ppl;
this.longmap = 0;
this.latmap = 0;
this.pplMap = 0;

The method we would use for drawing the image to the screen would be similar to how we displayed the organism. In this example, I passed it the lat and long min and max, as well as the population min and max because it’s easier to pass that information rather than store it in each object to start – we were already passing it four attributes, imagine passing it nine. That could get confusing. By breaking up what gets passed it helps us keep track of what we’re creating a little easier.

display(latmin, latmax, lngmin, lngmax, pplmin, pplmax) {

if (this.lng!=isNaN) {
this.longMap = map(this.lng, lngmin, lngmax, 0, width);

if (this.lat!=isNaN) {
this.latMap = map(this.lat, latmin, latmax, height, 0);

fill(255, 50);
this.pplMap = map(this.ppl, pplmin, pplmax, 2, 10);
ellipse(this.longMap, this.latMap, this.pplMap);

The process inside here is similar to what we had in function setup(){}, but instead we need to use the this. in order to make the elements inside the object unique.


  • Read this article on making a visualization from Ideo
  • Come in with a draft of your Visualization printed on 8.5″ x 11″ paper.
    • Include a legend/key to reading your information
    • You will have half the class to continue working on these.
  • Complete Visualization!
    • Add a link on your website to the visualization
    • Print visualization at 16″ x 20″ – take a screenshot on the largest monitor possible in order to maximize quality.
  • Update portfolio site