-
Notifications
You must be signed in to change notification settings - Fork 0
/
good.html
123 lines (109 loc) · 4.62 KB
/
good.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
<html>
<head>
<title>
What is a good Visualization?
</title>
<link type="text/css" rel="stylesheet" href="cascade.css">
<link href="https://fonts.googleapis.com/css?family=Coiny|Montserrat|Ubuntu" rel="stylesheet">
</head>
<body>
<div class="title1">
<h1 class="title1">
What is a Good
VISUALIZATION ?
</h1>
</div>
<nav>
<ul>
<li><a href="mainpage.html" >home</a></li>
<li><a href="good.html" class="on">good one</a></li>
<li><a href="bad.html" >terrible one</a></li>
<li><a href="notes.html">notes</a></li>
</ul>
</nav>
<div>
<img class="goodfull" alt="a good example of visualization" src="good.png" />
</div>
<div class="feature">
<dl>
<dt class="feature">Summary</dt>
<dd>This is a good example of informed visualization about history of life. This gorgeous infographic by Juan Martinez defines each geological era of the world, the changing shape of the land continents, and includes timelines, life milestones and mass extinction events.</dd>
</dl>
</div>
<div>
<div class="text">
<dl>
<dt class="feature">1. Reliable Information</dt>
<dd>Here is the screenshot of this info graph’s references. As you can see, the information source is published book, therefore what on the graph is accurate.</dd>
</dl>
</div>
<div class="img">
<img class="goodsource" alt="the good example has reliable resources" src="datasource.png">
</div>
</div>
<div>
<div class="text">
<dl>
<dt class="feature">2. Relevant Pattern</dt>
<dd>Since this isn't a data visualization, there is no pattern shown on the graph.
</dd>
</dl>
</div>
</div>
<div>
<div class="text">
<dl>
<dt class="feature">3. Exploration</dt>
<dd>Different parts of the graph give us different information.I will explain in 4 parts.
</dd>
</dl>
</div>
</div>
<div>
<div class="subtext">
<dl>
<dt class="feature">Colorful Circle</dt>
<dd>The main structure of the graph is the big colorful circle. With clear label, users can learn how many millions of years are different ages away from the present day. Additionally, after ecery period, the lend thickness will increase, so user won’t confused which point to start. (the thinner the land is, the early is the period.) For every small period, there is different landscapes and representative animals or plants. You can also learn when are mass extinction events happened and during what ages.
</dd>
</dl>
<img class="circle" alt="screenshot of the circle" src="animals.png">
</div>
</div>
<div>
<div class="subtext">
<dl>
<dt class="feature">Timeline</dt>
<dd>You may have noticed that the background is graph paper which is constructed of many squares. Such background is great to indicate the length of different geographic ages. With different color marked, users can directly feel the length.
</dd>
</dl>
<img class="timeline" alt="screenshot of timeline" src="timeline.png">
</div>
</div>
<div class="subtext">
<dl>
<dt class="feature">Milestone</dt>
<dd>Combined with the colorful circle and timeline, the milestone shows the three that most representative spices appear on the earth in different ages. The list of spices all have small colored circle marks, which make the list pretty and easy to follow.
</dd>
</dl>
</div>
<div>
<div class="subtext">
<dl>
<dt class="feature">Continental Change</dt>
<dd>Around the circle, there are nine continental drift events. They give users direct visualizations of how different continentals change from one plate to 8 plate today.
</dd>
</dl>
<img class="continental" alt="screenshot of two continental drift event" src="continental.png">
</div>
</div>
<div>
<div class="text">
<dl>
<dt class="feature">4. Attractive Manner</dt>
<dd>I really like how the author arrange the page. I mean the big circle in the middle and around with other relevant elements. Although all time and elements related to the circle are linked by many lines, the whole page is simple and easy to follow, lines help users to connect contents to main sequence on the circle, don’t distract me at all.
</dd>
</dl>
</div>
</div>
</body>
</html>