This is an exercice on representation done by Santiago Ortiz, remiscent of the Histomap, which is a visualization of 4000 years of History, created in 1931 by John B. Sparks.
Timeline of chronoligcal articles from Wikipedia: millenia (10 000 BC – 5 000 BC), centuries (40th BC – XIX), decades (1990s – 1990s), years (2000 – 2019), decades (2020s – 2090s) and centuries (22nd – 30th).
On this website histomap revisited, you could view the map zoomed in and click on the map, it would direct you to the wikipage.
This viedo is santiago ortiz talking about different ways to represent time.
What I admire of this project is all the theories behind to make data visulized especially focusing on the theme of time. It’s interesting to see the history not only in a linear way but you can ‘map’ it.
For Looking Outwards this week, I chose to do the project This Exquisite Forest, which is a project created by Aaron Koblin and Chris Milk between 2012 and 2014.
This Exquisite Forest Introduction Video.
I admire this project because of how community driven it is. The creators made the framework, but then as shown in the pictures below, the community was in charge of all of the actual content of the ‘forest’. The artist’s sensibilities are actually barely manifested in the final form of the project, as it is community driven for what animations are used. The actual form of the trees is controlled by the creators, however, and is very clean and minimalist. The overall structure was also created by them as well, and I admire how when you click on a leaf at the end of a tree, you can see the entire ‘story’ that it took to get there. As shown below in the first picture, each individual tree’s community creator has the option of adding as detailed of instructions as they want.
An Individual Tree’s instructionsInterface for adding to a segment of a tree.
Studio NAAD is a design firm that focuses on data visualization and interactive design. “Peak Spotting” is one of their projects for Germany railway company, Deutsche Bahn, that helps visualize railway traffic for Germany’s daily passengers. Peak Spotting compiles together Deutsche Bahn’s entire network of load and capacity prediction, and integrates it with task management tools and customizable visualizations to create an accessible and easy to decipher map. This intelligible map allows passengers to plan out trips in advance and optimize their route, and allows conductors to coordinate trains and traffic. I really admire this project because it is difficult to convey the hectic and abundant amount of data that is a train system in an accurate and straightforward manner, especially in major cities such as Berlin.
Sensing Streams – invisible, inaudible (2014) –– Ryuichi Sakamoto and Daito Manabe, Photo by Sarah Kim
This artwork, Sensing Streams – invisible, inaudible, was created by the collaboration between Ryuichi Sakamoto and Daito Manabe in 2014. This piece is made to express electromagnetic waves that are not visible to the human eyes. The waves express the “manifested in mobile and other communication technologies that have become integral to modern society.” The movement of the electromagnetic waves is conducted by antennas that provide data through a collection of electric waves originated by the technology used today. This projection of imagery and symbolism is displayed for people to visualize the cellular energy that is used in real time. I deeply admire this artwork because the visuals are produced through a set of information to convey certain emotions regarding our society’s attachment to technology.
A visual of a chart of the amount of time on average people spend doing different things in one day.
Created by Amanda Cox in 2011, this graph shows how different groups spend their day, broken down by different activities. Within the graph, you can select different groups and demographics to see the differences in how different groups of people spend their day. I find this data extremely interesting because it allows us to see how the activities change based on the group that you are looking at. It provides us a way to compare these different demographic groups that I have never thought of before. Although I am not sure how the artist accomplished this work algorithmically, I suppose that they gathered the data by asking a random selection of people from these different groups how they spend their day over a certain period of time. The creator’s artistic sensibilities are reflected in the final work through her choice of colors and the form in which the graph was displayed, for changing the type of graph used to display the data could easily change how it is perceived.
// Epitrochoid:
// http://mathworld.wolfram.com/Epitrochoid.html
function setup() {
createCanvas(300, 300);
}
function draw() {
background(0);
push();
translate(width / 2, height / 2);
drawEpitrochoid1();
drawEpitrochoid2();
pop();
}
function drawEpitrochoid1() {
var x;
var y;
// constrain mouseX to canvas width
var mX = constrain(mouseX, 0, width);
var a = mX / 5; // size of centre circle
var b = mX / 100; // size of revolving pattern
var h = b + 20; // height of revolving pattern
// epitrochoid
stroke(246, 76, 114);
fill(47, 47, 162);
beginShape();
for (var t = 0; t < 360; t++) {
x = (a + b) * cos(radians(t)) -
h * cos(radians(((a + b) / b) * t));
y = (a + b) * sin(radians(t)) -
h * sin(radians(((a + b) / b) * t));
vertex(x, y);
t += 7;
}
endShape(CLOSE);
}
function drawEpitrochoid2() {
var x;
var y;
var mX = constrain(mouseX, 0, 300);
var a = mX / 10;
var b = mX / 100;
var h = b + 20;
stroke(246, 76, 114);
fill(47, 47, 162);
beginShape();
for (var t = 0; t < 360; t++) {
x = (a + b) * cos(radians(t)) -
h * cos(radians(((a + b) / b) * t));
y = (a + b) * sin(radians(t)) -
h * sin(radians(((a + b) / b) * t));
vertex(x, y);
t += 1;
}
endShape(CLOSE);
}
From initially studying the sample code, I noticed that multiple elements (a, b, h, ph) were being related to the mouse or each other. When I began surfing the MathWorld curves site, I searched for curves with equations that used at least three variables. I chose the epitrochoid because I liked its symmetry and the wide range of complexity to be explored in its form.
In constructing the code, I had a lot of fun playing with different value and observing the effect. I mixed relations and added slight changes to the variable values until I was happy with the outcome. I also added a second epitrochoid for an even more complex shape.
/*Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-07 */
var numLines = 20;
var angle = 0;
var angleX;
var clickCount = 1;
var circleW;
var circleC;
function setup() {
createCanvas(480, 480);
}
function draw() {
background(0);
for(var i = 0; i < numLines; i++){
noFill();
strokeWeight(clickCount);
push();
angleX = map(mouseX, 0, 480, 0, 90); //altering how slow or fast ellipses rotate
circleC = map(mouseX, 0, 480, 20, 255); //altering stroke color from black to white
numLines = map(mouseY, 0, 480, 5, 50); // altering amount of lines drawn
circleW = map(mouseY, 0, 480, 200, 50); //altering ellipse width
stroke(circleC);
translate(width / 2, height / 2);
rotate(radians(angle));
ellipseMode(CENTER);
ellipse(0, 0, circleW, 400);
pop();
angle += angleX;
}
}
function mouseClicked(){
//increases strokeWeight parameter based on mouse clicks
clickCount++;
}
function keyPressed() {
clickCount = 1;
}
For this project, I was inspired by the spirograph curves. I created a set of ellipses that change based on mouseX and mouseY parameters. The mouseX changes the color of the stroke and the angle of rotation for the ellipses. The mouseY changes how many curves are drawn and the width of the curves. Additionally, when the mouse is clicked the strokeWeight will increase. When any key is pressed, the strokeWeight defaults back to its original value.
Screenshot of an example of how ellipses would look if it were not interactive
Windmap created by Wattenberg and Viegas
This week, I decided to look at the wind map developed by Marten Wattenberg and Fernanda Viegas. Featured in the MOMA as the first web artwork to be a part of the museum’s permanent collection, it is a living portrait of the wind currents over the nation. I decided to go with this project because it only uses HTML and Javascript, using the data from the National Digital Forecast Database.
Windmap in context
This was a really interesting project to me because through the wind map you’re also learning about the climate of the states and why the enivronment/terrain is the way that it is. I appreciate the artists’ choices in making the map monochromatic so the viewer isn’t influenced to believe anything about the terrain that the currents are covering. The idea of the map updating in real time allows the viewer at MOMA to apply what they’re seeing to a larger scale. The map also allows the viewer to see the progress of a natural disaster and serves as a learning experience. Hurricane Issac on the map in 2012
For this week’s looking outward, I am choosing to write about The Opportunity Atlas, a collaboration between Opportunity Insights and the Census Bureau. The map application was developed by Darkhorse Analytics.
A description of The Opportunity Atlas and what it can be used for.The Opportunity Atlas looking at the country as a whole, comparing household income currently for each area of the people who grew up there.
I really liked this project because I found it extremely interesting. I grew up in the Bay Area, where it isn’t uncommon to have a six figure salary coming from both parents–but I had a very different experience. It was really interesting just exploring the website, and seeing how different areas of the map, both in all of America and my hometown, had patterns. For example, my hometown is very affluent overall, but the town just next door is exactly the opposite.
My hometown–each colored section represents a different household income today for someone who grew up here, compared locally to the area
Another interesting part of this project was to look at racial differences. Overall in the country, when you compare household income from people who grew up in certain areas, the maps are extremely different for black people than they are for white people.
The Opportunity Atlas only looking at data from white people.The Opportunity Atlas only looking at data from black people.
I thought that this project was not only interesting, but very important. It shines light on something that a lot of people don’t notice, simply because their hometowns are usually in a slight bubble. When everyone around you is at the same place, it is much harder to notice the advantages or disadvantages you might have. It’s really inspiring to me that they were able to compute to visualize this data, because of how important I believe this is.
Stefanie Posavec is an information designer and data visualization designer based in London and focuses on data-related works. Her works of art depict non-traditional representations of data. In her Phantom Terrains project, she worked with Frank Swain and Daniel Jones to create a system that creates visualizations for wireless signals. Through specialized hearing aids, she was able to also convert wireless signals that surround us into sounds. The purpose of the project was to present a visual representation of the mass amount of streaming of wireless data surges that occurs in our everyday lives through internet exchanges and cellphone relays. I admire this information visualization project because amount of data that flows through has become a pervasive, yet invisible presence, and Posavec was able to develop a platform that makes us more aware of these data.
Phantom Terrains: Data Visualization, Stefanie Posavec (2014)
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
