高维数据可视化---2007-2014年福布斯富豪榜前100名可视化。
##使用
- 主条形图表示年资产总额变化(颜色较深的为当前选中年份),底部蓝色条形图表示当年的资产排名(凸起的为选中),右边显示的是选中的资产排名信息(默认选中第一名,信息有:姓名#排名、国家、资产、年龄)
- 刚打开程序,第一个界面将逐渐显示出来,默认显示第一个数据项。
- 鼠标指针停留在底部蓝色条形上,可在右边显示选中条形及其相邻4个条形对应的信息。
- 点击年份对应条形可以查看当年的资产排名。
##数据
- Rank
- Name
- Age
- Country
- Net Worth ($bil)
2014年的数据包括Rank, Name, Net Worth, Change, Age, Source, Country, Gender, Industries, Net Worth ($bil)
字段,但是2007到2013的数据只有Rank, Name, Age, Country, Net Worth ($bil)
,所有只采用共有的字段。
##设计
###基础
主条形图显示当年前100名的总资产,并用来选择年份。
由最底部的颜色条中不同颜色占表示选中年份富豪榜中人员的资产占比。(由 左到右 代表资产 多到少 )
鼠标停留底部的颜色条时显示当前颜色条及其前后两颜色条代表的数据。
数据采用的是分块显示,每一分块表示某一年的图表,点击图表中的年份切换到相对应的年份分块。
比如有2007,2008,2009,2010四个分块,2007年的图表在屏幕可见范围内,其它三个年份分块的location已经超出屏幕范围。 当点击柱状图中的2010年时,就把2010年的图表设置在屏幕可见范围内,其它三个年份分块不可见。
###效果
- 鼠标hover柱状图的长方形条时长方形条边框亮度增加(选中的保持高亮)。
- 分块切换效果(淡入淡出效果)
##实现
- 图表长方形条hover效果。
长方形条由ChartRect实现,在绘制过程中监听鼠标指针位置,如果坐标在ChartRect范围内,则改变边框亮度。
- 长方形条click事件。
鼠标点击事件发生时判断图表中是否由长方形条上有鼠标停留,有的话获取长方形条名,否则为无效点击。
- 分块切换。
在绘制中监听分块是否正在切换,如果正在切换则在最后绘制一层半透明层,透明度随动画时间改变。