webgl热力图-5个商圈的24小时

zhouningyi  2014.05.28

通常见到的热力图,按红橙黄绿青蓝的颜色,即暖色到冷色,对应区域内数据从多到少。热力图在可视化场景中运用广泛:淘系产品量子恒道中,卖家能通过热力图分析自己店里购物的鼠标点击行为,分析用户一般喜欢点击页面的什么部分。又如2年前的一个demo,我们在地图上用热力图分析杭州的房价,可以从中看出房价大概分布。 可通常我们见到的热力图有2个弊端: 1、定性不定量,你不知道每个颜色上具体对应的数值。 2、计算比较慢,通常,为了保证浏览器的兼容性,我们绘制热力图用的这个库。这个基于canvas的库非常经典,但绘制的速度不够快。如果一份数据一秒钟变几次,热力图的大小又很大,那浏览器就悲剧歇菜了。 还好,如果你用chrome或者firefox等新浏览器,webgl可以助你一臂之力,webgl的图形计算,使用GPU加速,一次性可以平行进行大量图形计算,速度刚刚地快。虽然原生webGL殊为不易,但不要紧,已经有人写好了一个叫做webgl-heatmap的库,而且使用方法很简单。可以看看俺的这个案例: 在这么流弊的计算能力帮助下,我和高德地图做了一个城市人流(数据来源于手机定位)的可视化demo,从中我们可以看到北京五个商圈在不同的时间里人流的分布情况。可以播放、暂停以及在slider上直接选择。

透视美国国会

Theseus  2012.01.20

Clear Congress Project:这个可视化案例是一个从领导能力,政治主张两个主要方面对美国国会议员们进行了可视化分析工具。
构成这个可视化分析工具的可视化方法非常简单,但是这个案例的具体价值体现在这个可视化分析工具设计者是从实际需求出发,并且在开发完这项工具以后,利用该工具进行了大量的分析。在>设计者的博客
more

你的GOOGLE+关系网

Theseus  2012.01.20

随着社交网站越来越成为人们日常生活中不可或缺的部分,人与人直接的关系已经在各大社交网站上以数据的形式沉淀下来了。基于这些数据,我们可以真真切切地看到我们自己独特的关系网。
D3设计团队希望基于GOOGLE+的数据回答两个问题:(1)在GOOLE PLUS中你的互相关注度有多对称;(2)是不是有一种可视化方法能够呈现每个人是怎么构建自己的社交网络的。从这两个问题出发,D3设计团队设计了The Circle of Trust的可视化应用。
在这个可视化应用中,设计者将用户自身设为蓝色圆点放置在显示中心,将圆点外围分为三个层次,分别来放置代表与用户互相关注,用户单向关注人群以及单向关注用户这三类人群的圆点。同时用绿色,黄色,红色三种不同的填充色增加这种区分。

more

一个单词的家境、家史和家谱

Theseus  2012.01.20

GraphWords

一个单词它到底是什么?一个人的成长离不可它的家庭环境,一个单词也是,看看单词它家是什么样的,就知道这个单词是哪路货色了

嗯,网络图什么的最适合表示这种暧昧不清传宗接代的关系了~

这个一看也很容易明白它是干什么的,不同颜色代表不同的词性,中间的小节点就是这个词的一个释义。

你可以搜“love”试试,它的动词解释各种内涵。这个工具玩好了还挺有意思~
more

来一场音乐的旅行吧~

Theseus  2012.01.20

旅行嘛,总去个谁谁他祖坟,谁谁曾吃喝拉撒的地方也没意思,这个西方舞曲音乐发展变迁的可视化为音乐发烧友提供了一个新的出发理由,从十八世纪到二十一世纪,你可以在这张图上看到舞曲音乐在西方各国发展的旅程,出游的时候,可以去探索各个流派起源地方,来一场回归之旅,在最悠远古老的音乐里听听人类文明的声音,各路文艺青年以及预备文艺青年可以试试。
more

看,灰机灰过去了!

Theseus  2012.01.20

这是一个实时的飞机航线可视化,基于地图很直观,就是说如果你有耐心,你可以在屏幕这端看着亲爱的他/她的飞机一点一点地飞到(或者说挪到)地图上的另一点。对了,有兴趣的话可以体验下高峰时期的场景,有密集恐惧症的亲们慎入。
more

语言的平行世界-全球气候大会实时观点可视化

Theseus  2012.01.20

CNN的一个绚丽可视化–ecosphere
很酷有木有!如果语言也是种生物,它或许会长成这个样子。这是COP17(联合国气候变化框架大会第17次全体缔约方大会)关于气候变化的实时观点的可视化
该可视化应用的成功不但在于这种展示方式对于海量数据本身的理解检索上提供了多少便利,更多的还在于树这个形式与应用场景环保这个实际话题良好的契合,加上良好的效果,使之成为一个优秀的可视化案例。

more

移民潮

Theseus  2012.01.20

优点:充分利用色块大小,颜色来直观传达信息,交互体验良好
缺点:信息维度不多,并没有完全利用平行坐标轴的优势
世界上有将近216百万的人移居他国,占到了全球人口的3.15%。通过这个移民潮可视化应用,我们可以清晰的看到各国移民选择迁居的目标国分布。左边的轴为迁出国,右边的轴为迁入国。轴上每个色块代表一个国家,国家按国家名首字母顺序排列,从色块的大小以及颜色都可以看出迁入/迁出人口的多少。例如,我们可以直观的发现,中国、俄国是两大迁出国,而美国是当之无愧的迁入大国。
当选择某个国家时,将有粗细不等的连线连向相关国家,并在一侧通过标签形式显示详细信息,如该国人口,迁入/迁出人口数,占比等等,同时显示与该国对应的迁入/迁出国的人数排名列表,点击该列表中的国家名,则只显示两国间对应关系。
more

淘小微

Theseus  2011.12.16

项目作者:淘宝EDP
项目简介:电子商务数据与社交网络数据的结合。
可视化技术:HTML5JavaScript
可视化展现形式:气泡图; 流程图
数据来源:淘宝网 新浪微博

more

房租热力图(RentHeatMap)

Theseus  2011.12.15

项目作者:淘宝EDP
项目简介:杭州各地区每居室月房租的热力分布图。用户可以直观地观察到杭州各地区房价的高低。
可视化技术:HTML5JavaScriptGoogle Map API
可视化展现形式:热力图;地图
数据来源:淘宝房产2011年五、六月份房东和中介公司发布的房源数据。

数据处理:从房源数据中提取可信度较高的租房成交数据,统计了覆盖杭州的经、纬度间隔为0.005的各网格点处的平均房租,插值绘图。
more