-
Notifications
You must be signed in to change notification settings - Fork 0
/
copilot.html
109 lines (94 loc) · 4.12 KB
/
copilot.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
---
title: Du Hoang
---
{% include header.html %}
{% include user.html %}
</div>
</div>
</div>
<div class="content">
<div class="section">
<div class="tile">
<img src="img/copilot-1.png" />
</div>
<div class="horizontal-section">
<div class="section-heading">Copilot AI</div>
<div class="section-info">
<p>Copilot is the AI/Machine Learning group within Xaxis. As the Lead Data Visualization Designer, I work to translate AI algorithms into visual forms, building bespoke visualizations that help machine communicates with people.
</p>
</div>
</div>
</div>
<div class="section">
<div class="tile-grid">
<div class="t">
<img src="img/copilot-grid-4.png" />
</div>
<div class="t">
<img src="img/copilot-grid-2.png" />
</div>
<div class="t">
<img src="img/copilot-grid-3.png" />
</div>
<div class="t">
<img src="img/copilot-grid-1.png" />
</div>
<div class="t">
<img src="img/copilot-grid-6.png" />
</div>
<div class="t">
<img src="img/copilot-grid-5.png" />
</div>
</div>
<div class="horizontal-section">
<div class="section-heading">Data Visual-ization As Art</div>
<div class="section-info">
<p>Data visualization is an art form as much as it is a visual tool. Despite protest from some within the data visualization community, data visualization's aesthetic qualities is undeniable.</p>
<p>Since the begining, beautiful visualizations have been coveted as objects of art. It is in many ways the precursor to computer generated art, where data, numbers, and formulas inform shapes and colors.</p>
<p>Practitioners of data visualization should consider artfulness in their work. Being artful doesn't diminish the value of a visualization, but instead allow it to transcend the data and captivate the spirit.</p>
</p>
</div>
</div>
</div>
<div class="section">
<div class="horizontal-section">
<div>
<div class="section-heading">Storytelling with Data</div>
<div class="section-info">
<p>At the heart of a visualization is the data. The source of truth and knowledge.</p>
<p>A good visualization communicates this knowledge without distortion or prejudice, and guide the viewers toward the truth within. Data visualizations that are devoid of meanings, then, are just pretty pictures.
</p>
<p>One of the most effective way to communicate knowledge is through storytelling. Narratives are how people make sense of the world, and there is an opportunity for data visualizations to visually tell the stories of the data.
</p>
<p>
Using shapes, colors, spatial relationships, motion and sound, data visualizations can be as effective and engaging as any visual medium in storytelling.
</p>
</div>
</div>
<div class="vertical-imgs">
<div class="t">
<img src="img/copilot-device-viz.png" />
</div>
<div class="t" style="margin: 32px 0;">
<img src="img/copilot-bubble-viz.png" />
</div>
<div class="t">
<img src="img/copilot-map.png" />
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-view video">
<div class="view-transform">
<div class="tile" style="border: 1px solid #d4d4d4;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/NIYYWNVBocc?controls=1&playlist=NIYYWNVBocc&loop=1&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
</div>
</div>
</div>
<div class="next-link" >
<a href="imeve.html">Imeve<span class="icon" ><svg viewBox="0 0 24 24"><use xlink:href="#icon-arrow2"></use></svg></span></a>
</div>
</div>
</body>
</html>