Data Driven Design | Week 2

computational typography and design

Rachel Dowdy
3 min readSep 12, 2017
Jeff Johnston | Before and After Eyeo 2012

This is one example of data driven design. The data he collected can be looked at on his website which will be provided in the works cited section at the bottom. It seems that the program consists of a grid of dots, which was determined by the number of people that tweeted things during this event. Then the connections are made by the people at this event ‘following’ and ‘connecting’ with the other people at the event. The blue design is for the beginning of the event and the same thing was done for the end of the event. Then they were overlapped together to show the overall ‘connections’ from the event. The dots could be objects that contain the data for each follower on twitter. Based off of that the program would run the connecting lines, depending on patterns and data that are the same.

Phil Guo | Computational Typography

This starts out as a vector for its base or start. Note also that this was created using JavaScript in Rune.js. This program allows you to create programs with vectors and SVG files. He changed this line vectors into shapes, which are circles in this case. He seems to add a blurring effect and glowing effect using the shapes he already has and changing opacity, value, and hue. The blurring effect is done by increasing the size of the circles and changing opacity values. He then attached lines to the ‘balloons’ to add to the play-full effect. This is more like drawing with JS, but this is still interesting to me and I would like to explore this in the future.

Kyuha Shim | Formation (2016) AIGA

This reminds me of my first lesson sketch with the rectangles that appear in random places within the frame. So based off that knowledge I would think that this was created using a Class for circles which contained the circle Objects. These Objects would give the information for the random color, size, and position for the circles. Then since there seems to be a certain amount of circles always of the screen here I would think the program uses an Array, so that the program can keep the information for each circle. In the Array, you can tell the program how many Circle Objects you want on the screen. This one moves its positions after a few seconds, so I think in the program there could be a for statement that can tell the program to change color, size, and position after so many seconds have happened.

Interesting Reads and Possible Future Project with Type

Works Cited | In Order

--

--