Finished Example
Here is the the finished example of the Database Visualization I have been explaining in the previous 2 posts. A couple of things I added were rectangles based on the engine displacement, a for loop to create a dot representing the number of cylinders for the car and finally a rollover effect so that the viewer can concentrate on the imagery before knowing which car is represented. I don’t know if it’s a useful visualization or not, but I think it is attractive and I will spend more time viewing data like this than a chart.
A couple of final notes on exporting and making this applet function correctly:
- You need to include the cars2.tsv file in your Sketch before exporting. Go to Sketch>Add File… and select the file. This puts the file into the data folder so that when Exporting a Java App it is included.
- The above technique did not automatically include the cars2.tsv in the Export as an applet. I had to manually drag the cars2.tsv into the same folder as the applet
- Firefox requires you to restart to reload a new java applet. This caused me some problems as I had tried to use a variable ‘y’ to position elements vertically, it seemed like the applet did not like that although it worked fine in Processing
As you look through the source code, it may look a lot more confusing than my previous examples. It’s really not, most of the complexity is simply positioning the elements using math. Since our list is built dynamically, I need to position each piece of data logically on the page. So, instead of simply positioning x=50, I need to run some math like x=(x-(linewidth)+c*10)+3. Just watch for the commas, that means the math is over and we’re moving to the next variable. That last equation is for positioning each dot based on the displacement (linewidth) which I used to draw the rectangle line, and then add to it based on which cylinder I am currently drawing ‘c’. It makes sense, trust me. :-)