-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
345 lines (345 loc) · 27 KB
/
index.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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="pandoc" />
<title></title>
<style type="text/css">code{white-space: pre;}</style>
<link rel="stylesheet" href="styles.css" />
<style>#forkongithub a{background:#aaa;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#DC143C;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:50px){#forkongithub{position:absolute;display:block;top:0;right:0;width:300px;overflow:hidden;height:300px;z-index:9999;}#forkongithub a{width:300px;position:absolute;top:80px;right:-80px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);box-shadow: 0 0 8px #777;}}</style><span id="forkongithub"><a href="https://github.com/zenozeng/Data-Visualization-Examples">Fork me on GitHub</a></span>
</head>
<body>
<div id="TOC">
<ul>
<li><a href="#data-visualization-examples">Data Visualization Examples</a><ul>
<li><a href="#双曲线树-hyperbolic-tree-often-shortened-as-hypertree">双曲线树 (Hyperbolic tree, often shortened as hypertree)</a></li>
<li><a href="#flow-visualization">Flow Visualization</a><ul>
<li><a href="#energy-technologies-visualisation-for-the-iea">Energy technologies visualisation for the IEA</a></li>
<li><a href="#google-analytics">Google Analytics</a></li>
<li><a href="#charles-joseph-minard">Charles Joseph Minard</a></li>
<li><a href="#mixpanel">Mixpanel</a></li>
<li><a href="#webtrends">webtrends</a></li>
<li><a href="#yy">YY</a></li>
</ul></li>
<li><a href="#treemap">TreeMap</a><ul>
<li><a href="#the-billion-pound-o-gram-io">The Billion Pound-O-Gram (IO)</a></li>
<li><a href="#foamtree">FoamTree</a></li>
</ul></li>
<li><a href="#气泡图">气泡图</a><ul>
<li><a href="#the-antibiotic-abacus">The Antibiotic Abacus</a></li>
<li><a href="#th-century-death-io">20th Century Death (IO)</a></li>
<li><a href="#snake-oil-supplements">Snake Oil Supplements?</a></li>
<li><a href="#better-force-layout-node-selection">Better force layout node selection</a></li>
</ul></li>
<li><a href="#平行坐标轴">平行坐标轴</a><ul>
<li><a href="#peoplemov.in-io">peoplemov.in (IO)</a></li>
<li><a href="#worldshapin-io">worldshapin (IO)</a></li>
<li><a href="#iris-parallel">iris-parallel</a></li>
</ul></li>
<li><a href="#可拖动轴">可拖动轴</a><ul>
<li><a href="#visualizing-mbta-data-io">Visualizing MBTA Data (IO)</a></li>
<li><a href="#jobs-charted-by-state-and-salary">Jobs Charted by State and Salary</a></li>
</ul></li>
<li><a href="#网络图">网络图</a><ul>
<li><a href="#bible-cross-references">Bible Cross-References</a></li>
<li><a href="#dependencywheel">DependencyWheel</a></li>
</ul></li>
<li><a href="#地图">地图</a><ul>
<li><a href="#dencity">Dencity</a></li>
<li><a href="#world-bank-global-development-sprint">World Bank Global Development Sprint</a></li>
</ul></li>
<li><a href="#热力图">热力图</a><ul>
<li><a href="#webgl热力图-5个商圈的24小时">webgl热力图-5个商圈的24小时</a></li>
</ul></li>
<li><a href="#matrix">Matrix</a><ul>
<li><a href="#les-misérables-co-occurrence-io">Les Misérables Co-occurrence (IO)</a></li>
<li><a href="#iris-splom-io">iris-splom (IO)</a></li>
</ul></li>
<li><a href="#etc">Etc</a><ul>
<li><a href="#analyzing-presidential-candidates-body-language">Analyzing Presidential Candidate’s Body Language</a></li>
<li><a href="#calendar-view">Calendar View</a></li>
<li><a href="#stacked-to-grouped-bars">Stacked-to-Grouped Bars</a></li>
<li><a href="#streamgraph">Streamgraph</a></li>
</ul></li>
</ul></li>
</ul>
</div>
<h1 id="data-visualization-examples">Data Visualization Examples</h1>
<h2 id="双曲线树-hyperbolic-tree-often-shortened-as-hypertree">双曲线树 (Hyperbolic tree, often shortened as hypertree)</h2>
<p>这是一个基本的双曲线图,聚焦的节点被放在中心,有更多的空间。失焦的节点被压缩显示,然后放在边缘一些的位置。 图二显示了焦点变化的情况:聚焦节点及其子孙节点移至中心。其他节点被压缩。 这是一种 Focus + Context 的技术。</p>
<figure>
<img src="BasicTree.png" alt="Basic hyperbolic tree" /><figcaption>Basic hyperbolic tree</figcaption>
</figure>
<figure>
<img src="BasicTreeFocused.png" alt="Basic Tree Focused" /><figcaption>Basic Tree Focused</figcaption>
</figure>
<p>一个可交互的例子(点那些小点):<a href="https://philogb.github.io/jit/static/v20/Jit/Examples/Hypertree/example1.html">https://philogb.github.io/jit/static/v20/Jit/Examples/Hypertree/example1.html</a></p>
<p>Links:</p>
<p><a href="http://en.wikipedia.org/wiki/Hyperbolic_tree">http://en.wikipedia.org/wiki/Hyperbolic_tree</a></p>
<p><a href="http://www.slideshare.net/wuyanna/ss-15229880">Visualization Of Large Hierarchical Data and Implementation Of XBRL Browser</a></p>
<p>比如对于文件系统的展现,可以引入更多的 metadata,用小的 icon 表现文件类型,比如颜色深度表现文件大小之类(同时线的总深度应该由它的子孙节点决定)。</p>
<h2 id="flow-visualization">Flow Visualization</h2>
<h3 id="energy-technologies-visualisation-for-the-iea">Energy technologies visualisation for the IEA</h3>
<p>Link: <a href="http://visualisingdata.com/index.php/2012/06/energy-technologies-visualisation-for-the-iea/">http://visualisingdata.com/index.php/2012/06/energy-technologies-visualisation-for-the-iea/</a></p>
<figure>
<img src="energy1.png" alt="General View" /><figcaption>General View</figcaption>
</figure>
<figure>
<img src="energy2.png" alt="Highlight" /><figcaption>Highlight</figcaption>
</figure>
<h3 id="google-analytics">Google Analytics</h3>
<p>Link: <a href="https://support.google.com/analytics/topic/2472754?hl=en&ref_topic=1727148">https://support.google.com/analytics/topic/2472754?hl=en&ref_topic=1727148</a></p>
<p>Link: <a href="http://analytics.blogspot.jp/2011/10/introducing-flow-visualization.html">http://analytics.blogspot.jp/2011/10/introducing-flow-visualization.html</a></p>
<p>The images below are from http://analytics.blogspot.jp/2011/10/introducing-flow-visualization.html.</p>
<h4 id="the-anatomy-of-a-flow-report">The anatomy of a Flow Report</h4>
<p>A flow visualization is a graphic that a traces a route or a path, like a trail through a forest. Unlike a map, which displays possible and known routes, a flow visualization reveals the actual path as it was traveled step by step, including any detours or backtracking that happened along the way.<a href="#fn1" class="footnoteRef" id="fnref1"><sup>1</sup></a></p>
<figure>
<img src="FlowVizAnatomy.png" alt="FlowVizAnatomy" /><figcaption>FlowVizAnatomy</figcaption>
</figure>
<h4 id="visitor-flow">Visitor Flow</h4>
<p>Visitors Flow is a graphical representation of the paths users took through your site, from the source, through the various pages, and where along their paths they exited your site.<a href="#fn2" class="footnoteRef" id="fnref2"><sup>2</sup></a></p>
<figure>
<img src="VisitFlowpart1.png" alt="VisitFlowpart1" /><figcaption>VisitFlowpart1</figcaption>
</figure>
<figure>
<img src="VisitFlow3.png" alt="VisitFlow3" /><figcaption>VisitFlow3</figcaption>
</figure>
<h4 id="goal-flow">Goal Flow</h4>
<p>The Goal Flow Report visualizes the path your traffic traveled through a funnel towards a Goal. This report can help you see if users are navigating your content and completing a targeted objective as you expect them to.<a href="#fn3" class="footnoteRef" id="fnref3"><sup>3</sup></a></p>
<figure>
<img src="goalflow1.png" alt="goalflow1" /><figcaption>goalflow1</figcaption>
</figure>
<figure>
<img src="FlowVizImage3.png" alt="Example of Goal Flow Date Comparison" /><figcaption>Example of Goal Flow Date Comparison</figcaption>
</figure>
<h4 id="event-flow">Event Flow</h4>
<p>If you’re tracking special content like videos, downloadable items, and embedded gadgets as Events, use the Events Flow report to visualize the order in which users trigger these Events on your site. The Events Flow report can help you discover what content keeps users engaged with your site, and see the paths users take from one popular Event to the next.<a href="#fn4" class="footnoteRef" id="fnref4"><sup>4</sup></a></p>
<h3 id="charles-joseph-minard">Charles Joseph Minard</h3>
<p>Link: <a href="http://en.wikipedia.org/wiki/Charles_Joseph_Minard">http://en.wikipedia.org/wiki/Charles_Joseph_Minard</a></p>
<figure>
<img src="Minard.png" alt="Minard.png" /><figcaption>Minard.png</figcaption>
</figure>
<p>The graph displays several variables in a single two-dimensional image:</p>
<ul>
<li><p>the size of the army - providing a strong visual representation of human suffering, e.g. the sudden decrease of the army's size at the battle crossing the Berezina river on the retreat;</p></li>
<li><p>the geographical co-ordinates, latitude and longitude, of the army as it moved;</p></li>
<li><p>the direction that the army was traveling, both in advance and in retreat, showing where units split off and rejoined;</p></li>
<li><p>the location of the army with respect to certain dates;</p></li>
<li><p>the weather temperature along the path of the retreat, in another strong visualisation of events (during the retreat "one of the worst winters in recent memory set in"[1]).</p></li>
</ul>
<h3 id="mixpanel">Mixpanel</h3>
<p>Link: <a href="http://techcrunch.com/2012/03/22/mixpanel-flow/">Mixpanel Flow Helps Companies Visualize User Activity</a></p>
<p>The Campaign Flow shows visitor traffic sources and destinations for a user-specified URL.</p>
<figure>
<img src="mixpanel.png" alt="Mixpanel" /><figcaption>Mixpanel</figcaption>
</figure>
<h3 id="webtrends">webtrends</h3>
<p>Link: <a href="http://help.webtrends.com/en/streams/streams_campaign_flow.html">http://help.webtrends.com/en/streams/streams_campaign_flow.html</a></p>
<figure>
<img src="campaignflow.png" alt="campaignflow" /><figcaption>campaignflow</figcaption>
</figure>
<h3 id="yy">YY</h3>
<p>结合我们的需求,可以考虑按照 Google / Charles Joseph Minard 这个框架来做。</p>
<ul>
<li><p>径流代表流量的大小</p></li>
<li><p>块面积代表流量大小等。</p></li>
<li><p>蓝色代表流入下一级</p></li>
<li><p>红色代表跳出</p></li>
<li><p>当 hover 某个支路时,淡化显示其余线路</p></li>
<li><p>各个指标与上期的相对比较</p></li>
</ul>
<p>但是一要尽可能减少界面的复杂度,二是要尽可能多呈现信息而非数据。 似乎我们的目标用户需要更多的是这个数据代表什么而非数据本身。</p>
<p>就此,有些想法:</p>
<ul>
<li><p>mouseover 时显示简单的帮助信息、解释。</p></li>
<li><p>放大缩小采用简单的放大镜标志以及 drag 来做</p></li>
<li><p>不同来源使用不同颜色以增加区分度</p>
<p>左侧为多彩,出口为纯色,采用一个渐变表示是一条连续的线可参考 #peoplemov.in-io</p></li>
<li><p>图片导出功能(通过data-uri)</p></li>
<li><p>时间轴</p>
<p>有start和end两个节点,拖动之可以查看数据随着时间的变化</p>
<p>右侧含一个周期选择表单,其内置阿里内部常用报表周期</p></li>
<li><p>尽量减少 URL 的出现,而已首页、购物车、搜索引擎等概念代替</p></li>
<li><p>可以画个简单的动画,使得小球们从左向右沿着流量支流流动</p>
<p>其密度、速度与流量相关</p></li>
</ul>
<h2 id="treemap">TreeMap</h2>
<h3 id="the-billion-pound-o-gram-io">The Billion Pound-O-Gram (IO)</h3>
<p>Link: <a href="http://www.informationisbeautiful.net/visualizations/the-billion-pound-o-gram/">http://www.informationisbeautiful.net/visualizations/the-billion-pound-o-gram/</a></p>
<figure>
<img src="./1276_billion_pound_o_gram.png" alt="The Billion Pound-O-Gram" /><figcaption>The Billion Pound-O-Gram</figcaption>
</figure>
<p>Treemap是一类可以同时显示宏观信息与细节信息以及层级的关系的数据呈现形式。 类似于 SmartMoney<a href="#fn5" class="footnoteRef" id="fnref5"><sup>5</sup></a> 的例子,我们可以将流量信息类比于股票。 先按照类别分组,然后用矩形的大小表示流量的大小,用颜色绿和红来表示流量的增幅(降幅)速度。 同时定期刷新该treemap。这样就能总体感知各个站点的整体流量情况了。</p>
<h3 id="foamtree">FoamTree</h3>
<p>Link: <a href="http://get.carrotsearch.com/foamtree/demo/demos/large.html">http://get.carrotsearch.com/foamtree/demo/demos/large.html</a></p>
<figure>
<img src="./foam.png" alt="Foam" /><figcaption>Foam</figcaption>
</figure>
<p>与前面的例子不同的是,这个适合于超大层级关系的树状关系。 可以很清晰地表达层间关系,位于父节点时,只会粗略显示子节点。 而使用双击缩放进入的方式来使得遍历节点, 而不让子孙节点干扰父节点的视觉展示。</p>
<h2 id="气泡图">气泡图</h2>
<p>气泡图的一大特色是在二维图中反映出超过二维的信息。 通过气泡的大小、颜色等因素来展现额外的信息。</p>
<h3 id="the-antibiotic-abacus">The Antibiotic Abacus</h3>
<p>Link: <a href="http://www.informationisbeautiful.net/visualizations/antibiotic-resistance/">http://www.informationisbeautiful.net/visualizations/antibiotic-resistance/</a></p>
<figure>
<img src="./1276_Antibiotic_Abacus_july14.png" alt="The Antibiotic Abacus.png" /><figcaption>The Antibiotic Abacus.png</figcaption>
</figure>
<p>适用范围:多坐标维度交叉相关信息呈现。</p>
<h3 id="th-century-death-io">20th Century Death (IO)</h3>
<p>Link: <a href="http://www.informationisbeautiful.net/visualizations/20th-century-death/">http://www.informationisbeautiful.net/visualizations/20th-century-death/</a></p>
<figure>
<img src="./1276_20th_Century_Death.png" alt="20th Century Death.png" /><figcaption>20th Century Death.png</figcaption>
</figure>
<p>这个图其实非常适合关键词之类的分析。大小代表成交数据,颜色(色温)代表流量大小, 子层级是各个具体的关键词,而聚类后形成一个较大的分类。</p>
<h3 id="snake-oil-supplements">Snake Oil Supplements?</h3>
<figure>
<img src="./oil.png" alt="Snake Oil Supplements" /><figcaption>Snake Oil Supplements</figcaption>
</figure>
<p>Link: <a href="http://www.informationisbeautiful.net/play/snake-oil-supplements/">http://www.informationisbeautiful.net/play/snake-oil-supplements/</a></p>
<h3 id="better-force-layout-node-selection">Better force layout node selection</h3>
<p>Link: <a href="http://bl.ocks.org/couchand/6420534">http://bl.ocks.org/couchand/6420534</a></p>
<figure>
<img src="./force.png" alt="force layout node" /><figcaption>force layout node</figcaption>
</figure>
<p>交互非常有趣,而且拉动对整个团的拖动效果可以直观地让人感受到数据的相关关系。 适合展现关联关系,比如多个关键词之间的相关关系。 但是有一点就是这个很难展示一个维度指标大小对其他维度的指标大小的影响。 嘛,还是适合简单的 text 类型的东西。 但是这种拖动拉力的感觉真的是很不错的。</p>
<h2 id="平行坐标轴">平行坐标轴</h2>
<h3 id="peoplemov.in-io">peoplemov.in (IO)</h3>
<p>Link: <a href="http://peoplemov.in/">http://peoplemov.in/</a></p>
<figure>
<img src="./movin.png" alt="People Movin" /><figcaption>People Movin</figcaption>
</figure>
<p>以线直接相连,用渐变表示这是一根相连的线。 线的粗细表示流量的大小。 此展现方式亦非常适用于网站流量出入的展示。 一侧表现数据流量的流入方,另一侧则表示数据流量的流出方。</p>
<h3 id="worldshapin-io">worldshapin (IO)</h3>
<p>Link: <a href="http://www.worldshap.in/#/03/US/">http://www.worldshap.in/#/03/US/</a></p>
<figure>
<img src="./worldshapin.png" alt="worldshapin" /><figcaption>worldshapin</figcaption>
</figure>
<p>使用范围:多维度的数据对比</p>
<p>对于一个网站流量系统,可以将多个 site 的众多维度 访客量、驻留时间、跳出率 等因素叠在一起做一个类似的东西</p>
<h3 id="iris-parallel">iris-parallel</h3>
<p>Link: <a href="http://mbostock.github.io/d3/talk/20111116/iris-parallel.html">http://mbostock.github.io/d3/talk/20111116/iris-parallel.html</a></p>
<figure>
<img src="parallel.png" alt="parallel" /><figcaption>parallel</figcaption>
</figure>
<p>能够相对清晰地表明各个坐标的多个参数高低。 与上一个案例不同的是,此处展现的数据更多一些,以颜色来编组。 可以看出数据集中的总体趋势来。</p>
<h2 id="可拖动轴">可拖动轴</h2>
<h3 id="visualizing-mbta-data-io">Visualizing MBTA Data (IO)</h3>
<p>An interactive exploration of Boston's subway system.</p>
<p>Link: <a href="http://mbtaviz.github.io/">http://mbtaviz.github.io/</a></p>
<p>这是一个交通流量的例子,但是鉴于交通流量与网络流量的相似性,这个例子还是非常有参考价值的。</p>
<figure>
<img src="./subway.png" alt="Subway Trips on Monday February 3, 2014" /><figcaption>Subway Trips on Monday February 3, 2014</figcaption>
</figure>
<p>这个图让人印象深刻,有非常强的数据交互联动,可以很直观的感受到数据随着时间的流动。 点是车所在的位置。各个端口是站点。</p>
<p>相应的,可以各个网站作为站点的替代,如果数据是跳出的则从相应站点出口离开, 否则则聚集到中心再到下一个节点。 每一个小点可以代表一个小波的流量。移动速度则按照用户的滞留时间进行计算。 右边时间轴的细线可用用户的seesion周期表示。 hover时间轴的时候就可以动态展现流量在各个节点之间的流动。 如果没有hover时间轴则可以自动滚动时间轴。</p>
<figure>
<img src="./station.png" alt="Entrances and Exits per Station during February 2014" /><figcaption>Entrances and Exits per Station during February 2014</figcaption>
</figure>
<p>这张图则是代表每个站点的IO情况。 右边那个Avg情况分成两排上为 input,下为 output 。 然后以小的方格展示各个时段的情况,可以非常直观地展示一些细节情况。</p>
<h3 id="jobs-charted-by-state-and-salary">Jobs Charted by State and Salary</h3>
<p>Link: <a href="http://flowingdata.com/2014/07/02/jobs-charted-by-state-and-salary/">http://flowingdata.com/2014/07/02/jobs-charted-by-state-and-salary/</a></p>
<figure>
<img src="./jobs.png" alt="Jobs" /><figcaption>Jobs</figcaption>
</figure>
<p>一个数据与筛选条件轴联动的例子。</p>
<h2 id="网络图">网络图</h2>
<h3 id="bible-cross-references">Bible Cross-References</h3>
<p>Link: <a href="http://www.chrisharrison.net/index.php/Visualizations/BibleViz">http://www.chrisharrison.net/index.php/Visualizations/BibleViz</a></p>
<figure>
<img src="./BibleVizArc7small.jpg" alt="BibleViz" /><figcaption>BibleViz</figcaption>
</figure>
<p>注意颜色是与章节的远近相关的。底下的灰白分隔表示章节。每一个柱对应一句话。 但有一点就是,这个图中对原始信息的呈现觉得颇有些不够。</p>
<p>非常适合对大量有序列表进行相关性分析。</p>
<h3 id="dependencywheel">DependencyWheel</h3>
<p>Link: <a href="http://redotheweb.com/DependencyWheel/">http://redotheweb.com/DependencyWheel/</a></p>
<p>注意悬停一会可以显示其依赖关系。</p>
<figure>
<img src="./wheel1.png" alt="wheel1" /><figcaption>wheel1</figcaption>
</figure>
<figure>
<img src="./wheel2.png" alt="wheel2" /><figcaption>wheel2</figcaption>
</figure>
<p>这个适合多对多的联系的显示。 适用于关键词、产品的关联显示。</p>
<h2 id="地图">地图</h2>
<h3 id="dencity">Dencity</h3>
<p>Link: <a href="http://fathom.info/dencity/">http://fathom.info/dencity/</a></p>
<figure>
<img src="./dencity-for-web.jpg" alt="dencity" /><figcaption>dencity</figcaption>
</figure>
<p>注意图中点的大小代表着个人的生存空间大小。 点越密,则个人的生存空间越小。</p>
<p>地图可表示目标指标与地域的联系。 比如流量与地域、成交额与地域、转化率与地域之类。 还有就是地域与某些特定商品的购物情况。 可以做定向的投放。</p>
<h3 id="world-bank-global-development-sprint">World Bank Global Development Sprint</h3>
<p>Link: <a href="http://d3.artzub.com/wbca/">http://d3.artzub.com/wbca/</a></p>
<figure>
<img src="wbca.png" alt="wbca" /><figcaption>wbca</figcaption>
</figure>
<p>另一个地图的例子。 但是增加了交互特性,动态显示各种流量的情况。 可以相对定性地去感知到各种流量的比例、在全球的流动情况。</p>
<h2 id="热力图">热力图</h2>
<p><del>关于热力图,有个想法。就是不仅仅只是跟踪鼠标的点击。而是同时监听hover事件。这样可以获得鼠标的轨迹。</del> 似乎这个想法不大靠谱,劫持hover对性能的开销似乎不小而且意义并非那么大。</p>
<h3 id="webgl热力图-5个商圈的24小时">webgl热力图-5个商圈的24小时</h3>
<p>Link: <a href="http://datavlab.org/cat/%E5%8F%AF%E8%A7%86%E5%8C%96%E6%A1%88%E4%BE%8B/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B1%95%E7%8E%B0%E7%B1%BB%E5%9E%8B/%E7%83%AD%E5%8A%9B%E5%9B%BE">webgl热力图-5个商圈的24小时</a></p>
<figure>
<img src="./hot.png" alt="hotmap" /><figcaption>hotmap</figcaption>
</figure>
<p>一个实时活动的例子。</p>
<h2 id="matrix">Matrix</h2>
<h3 id="les-misérables-co-occurrence-io">Les Misérables Co-occurrence (IO)</h3>
<p>Link: <a href="http://bost.ocks.org/mike/miserables/">http://bost.ocks.org/mike/miserables/</a></p>
<figure>
<img src="matrix.png" alt="matrix.png" /><figcaption>matrix.png</figcaption>
</figure>
<p>一个有趣的矩阵。 嘛,切换右上角的 order 会有 transition 动画可以看。 觉得对流量分析也是挺有价值的。 有两个维度,一个可为 input,二另一个可为 output, 则相交的高亮色块可表示该条流量路径的相对流量大小。 以其流量与热力学温度正相关,然后转化为色温, 就能非常直观地感受整个的流量情况。</p>
<p>如果要是和时间轴(或其他某个参数轴)相结合的话,就能感受到, 各个路径流量色块随着该参数而变化的样子。 嘛,应该还是挺有趣的。</p>
<p>相比典型的气泡图,小方块的呈现虽然丢失大小这个维度, 但是感觉整齐的方块也使得整个数据呈现非常紧凑, 数据的呈现密度较大,能呈现更大的数据集。</p>
<h3 id="iris-splom-io">iris-splom (IO)</h3>
<p>Link: <a href="http://mbostock.github.io/d3/talk/20111116/iris-splom.html">http://mbostock.github.io/d3/talk/20111116/iris-splom.html</a></p>
<figure>
<img src="iris-splom0.png" alt="iris-splom0.png" /><figcaption>iris-splom0.png</figcaption>
</figure>
<figure>
<img src="iris-splom.png" alt="iris-splom.png" /><figcaption>iris-splom.png</figcaption>
</figure>
<p>四个参数,每张图(除开对角线)表示其中两个参数的相关关系。 非常值得注意的是,每个图是可以用矩形选择(见下图)区域的, 选择发生后,在矩形区域的点集会在16图上被高亮, 而其他的点则是被灰化显示。 可以非常直观地感受一部分点的各个参数相关情况。</p>
<p>则对于流量分析,可以得知一部分目标用户集(比如A参数和B参数都位于右上角的用户) 各个参数相关情况的情况。对于快速分析目标用户的情况还是非常有帮助的。</p>
<h2 id="etc">Etc</h2>
<h3 id="analyzing-presidential-candidates-body-language">Analyzing Presidential Candidate’s Body Language</h3>
<p>Link: <a href="http://www.nytimes.com/interactive/2012/10/02/us/politics/what-romney-and-obamas-body-language-says-to-voters.html?hp&_r=0">http://www.nytimes.com/interactive/2012/10/02/us/politics/what-romney-and-obamas-body-language-says-to-voters.html?hp&_r=0</a></p>
<figure>
<img src="./obama.png" alt="Obama’s Body Language" /><figcaption>Obama’s Body Language</figcaption>
</figure>
<p>手势的一个分析。</p>
<h3 id="calendar-view">Calendar View</h3>
<p>Link: <a href="http://bl.ocks.org/mbostock/4063318">http://bl.ocks.org/mbostock/4063318</a></p>
<figure>
<img src="./calendar.png" alt="Calendar View" /><figcaption>Calendar View</figcaption>
</figure>
<p>类似于 Github 的 Commit 那个记录。 可以相对直观地反应较长期中各天的情况。</p>
<h3 id="stacked-to-grouped-bars">Stacked-to-Grouped Bars</h3>
<p>Link: <a href="http://bl.ocks.org/mbostock/3943967">http://bl.ocks.org/mbostock/3943967</a></p>
<figure>
<img src="./stacked.png" alt="Stacked Bars" /><figcaption>Stacked Bars</figcaption>
</figure>
<figure>
<img src="./grouped.png" alt="Grouped Bars" /><figcaption>Grouped Bars</figcaption>
</figure>
<p>这个例子有上有 Stacked 和 Grouped 的一键切换,非常直观的。</p>
<p>关于两种图的选择: If there is no part to whole relationship (maybe there is overlap in the categories), then grouped is definitely the option you want to use. If there is a part to whole relationship, then the next question to ask is what relationship is the most important to show. If the goal is to show sizes between individual categories, use a grouped column or bar chart. If the goal is to show the total sizes of groups, use a regular stacked bar chart. If the goal is to show relative differences within each group, use a stacked percentage column chart. <a href="#fn6" class="footnoteRef" id="fnref6"><sup>6</sup></a></p>
<h3 id="streamgraph">Streamgraph</h3>
<p>Link: <a href="http://bl.ocks.org/mbostock/4060954">http://bl.ocks.org/mbostock/4060954</a></p>
<figure>
<img src="./streamgraph.png" alt="Streamgraph" /><figcaption>Streamgraph</figcaption>
</figure>
<p>For continuous data such as time series, a streamgraph can be used in place of stacked bars.</p>
<section class="footnotes">
<hr />
<ol>
<li id="fn1"><p>https://support.google.com/analytics/answer/2519986?hl=en&ref_topic=2472754<a href="#fnref1">↩</a></p></li>
<li id="fn2"><p>https://support.google.com/analytics/answer/1709395?hl=en#&utm_source=analytics&utm_campaign=eventsflow&utm_medium=blog<a href="#fnref2">↩</a></p></li>
<li id="fn3"><p>https://support.google.com/analytics/answer/2520139?hl=en#&utm_source=analytics&utm_campaign=eventsflow&utm_medium=blog<a href="#fnref3">↩</a></p></li>
<li id="fn4"><p>https://support.google.com/analytics/answer/2521316?hl=en#&utm_source=analytics&utm_campaign=eventsflow&utm_medium=blog<a href="#fnref4">↩</a></p></li>
<li id="fn5"><p>http://www.vizinsight.com/2010/12/%E6%B5%85%E8%B0%88%E5%B1%82%E6%AC%A1%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8F%AF%E8%A7%86%E5%8C%96%E6%8A%80%E6%9C%AF%E4%B8%AD/<a href="#fnref5">↩</a></p></li>
<li id="fn6"><p>http://blog.visual.ly/how-groups-stack-up-when-to-use-grouped-vs-stacked-column-charts/<a href="#fnref6">↩</a></p></li>
</ol>
</section>
</body>
</html>