-
Notifications
You must be signed in to change notification settings - Fork 0
/
dear-data.html
182 lines (150 loc) · 8.89 KB
/
dear-data.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TJ8MMXM');</script>
<!-- End Google Tag Manager -->
<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="">
<title>my-DearData</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TJ8MMXM"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<!-- <li>
<a href="post.html">Sample Post</a>
</li> -->
<!-- <li>
<a href="contact.html">Contact</a>
</li> -->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/img-dear-data/cover.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<h1>my-DearData</h1>
<h2 class="subheading">Visualizações analógicas de dados</h2>
<h2 class="subheading">Computação UFCG</h2>
<span class="meta">Posted by <a href="#">Arthur Lustosa</a> on Maio 10, 2017</span>
</div>
</div>
</div>
</div>
</header>
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<p>Dear Data é um projeto de desenho de dados analógicos, durante um ano duas amigas mantiveram contato através de visualizações sobre dados cotidianos, uma residia em Nova Iorque e outra em Londres, nesse período elas se correspondiam por cartões postais, para mais informações acesse o <a href="http://www.dear-data.com/theproject">link</a>.</p>
<p>Baseado nesse projeto, o professor da disciplina de Visualização de Dados, propôs que também fizessemos visualizações analógicas sobre determinados temas, para exercitarmos a habilidade de transformar dados em visualizações que permitissem (ou não) enxergá-los de uma forma diferente. E finalizando a disciplina, reuni meus trabalhos nesse post.</p>
<h4 class="section-heading">As visualizações</h4>
<h2 class="section-heading">meu horário: </h2><blockquote>O objetivo seria montar seu horário de aula de forma que utilizasse canais de cores e formas.</blockquote>
<img class="img-responsive" src="img/img-dear-data/01.jpg" alt="">
<h2 class="section-heading">encontros: </h2><blockquote> Nessa visualização, nós tínhamos que o montar algo utilizando dados que remetessem ao tema encontros. Para resolver essa, utilizei um projeto pessoal meu, em que eu gravo <a href="https://www.youtube.com/watch?v=_RMYpzvMN20&t">um segundo por dia</a>, daí coletei os dados de todos os dias em que eu me encontrei com meu namorado e montei essa escala engraçadinha (ficou fofo).</blockquote>
<img class="img-responsive" src="img/img-dear-data/02.jpg" alt="">
<img class="img-responsive" src="img/img-dear-data/02-1.jpg" alt="">
<h2 class="section-heading">alimentação: </h2><blockquote>O objetivo dessa visualização é mostrar dados referentes a alimentação, fosse sua, da sua família ou do seu cachorro, você que escolhia. Mostrei a diferença da minha alimentação antes e depois da reeducação alimentar que fiz. (muito orgulho dessa)</blockquote>
<img class="img-responsive" src="img/img-dear-data/03.jpg" alt="">
<h2 class="section-heading">casa: </h2><blockquote>Tínhamos que criar algo relacionado a casa/lugares utilizando mapas, resolvi mostrar meu histórico de mudanças e as cidades em que morei/moro os números das populações urbana e rural. Utilizei os dados do IBGE.</blockquote>
<img class="img-responsive" src="img/img-dear-data/04.jpg" alt="">
</div>
</article>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="https://twitter.com/arthurlustosa_">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/arthur.lustosa">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="https://github.com/arthurlustosa/youtube-project">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>