/
100daysofdata.html
129 lines (115 loc) · 5.2 KB
/
100daysofdata.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Analog Visualizations of my own data</title>
<!-- Include jQuery -->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<!-- PJ5.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My CSS -->
<link href="css/main2.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono: 400, 400i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans: 400, 400i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700, 700i, 900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<!-- **************** END HEAD *********************** -->
<div class="navbar-doyung">
<a href="index.html" class="navbar-link"><p class="navbar-heading">< Home</p></a>
</div>
<div class="header-wrapper">
<h1>Analog Visualizations of My Own Data</h1>
</div>
<div class="body-wrapper">
<p id="quote-style">"How do we uncover patterns, routines, and actions that have become invisible to us?"
</p>
</br>
</br>
</br>
<p id="regular-text"> #100Daysofdata is a project a friend and I’ve been doing where each day, we pick a prompt, track it throughout the day, and produce an analog ‘data visualization’ on a post-it at the end of the day. So far, we’ve tracked things like “How many ads did I see today?” and “How many times did I say “Hello” today?” We’ve also been documenting these (along with snippets of reflections) on Instagram, under #100DaysOfData. </p>
<img src="Images/100days/datasquares.png" class="content-photo-big">
<p id="photo-caption">Some personally collected data visualizations.</p>
<br>
<p id="regular-text"> This project started as a way to think about our relationship to data in our everyday lives. In a world where we are defined by small patterns (largely by giant tech companies), we wanted to engage with the idea of “big data” by asking our own questions, collecting our own information about ourselves (without relying on technology), and finding out what that means for us. Through this (mostly) analog process, we reflect on ways that our identities (as well as technologies) mediate our interactions with the world, and reflect on data's potential, as well as limitations, to uncover them.</p>
<img src="Images/100days/touch.jpg" class="content-photo-med">
<p id="photo-caption">One of my favorite visualizations - "What did I touch today?"</p>
<br>
<p id="regular-text"> We had the wonderful opportunity to showcase our project at the Berkman Klein Center's mini-gallery exhibit from December 2018 - February 2019. The responses we got from it was amazing!</p>
<br>
<img src="Images/100days/bkcgallery.jpg" class="content-photo-med">
<p id="photo-caption">Photo credit: Levin K</p>
<br>
<p id="regular-text"> Currently, we are thinking about including an audio component to this project. We found that some of the richest insights came from when my friend and I were reflecting on our visualizations together, and wanted a way to capture it. Our project was a semi-finalist on Google's Podcast Creator program, and we are continuing to experiment with including audio to our project.</p>
<br>
<br>
<br>
</div>
<!--Calling the P5.JS script:-->
<script src="javascript/100days.js"></script>
</body>
<style>
@media only screen and (max-width: 780px) {
#regular-text {
font-size: 16px;
}
.section-header {
font-size: 20px;
}
.content-photo-med {
width: 100%;
}
.content-photo-small {
width: 100%;
}
.content-photo-big {
width: 100%;
}
#photo-caption {
font-size: 12px;
margin-left: 10%;
margin-right: 10%;
}
#photo-caption-small {
font-size: 12px;
margin-left: 15%;
margin-right: 15%;
}
h1 {
font-size: 34px;
font-family: 'Montserrat';
font-weight: bolder;
}
.section-header {
font-family: 'Montserrat';
font-weight: bold;
}
#quote-style {
font-family: 'Montserrat';
font-weight: bold;
font-style: italic;
}
}
@media only screen and (max-width: 650px) {
#regular-text {
font-size: 14px;
}
.section-header {
font-size: 18px;
}
h1 {
font-size: 24px;
font-family: 'Montserrat';
font-weight: bold;
}
}
</style>
<!--Different sized windows!-->