果果博客

D3js新闻数据可视化——Year Data View

近两周投入学习 d3.js 并有幸参与了新闻数据可视化的项目,就对当前所做的年视图新闻数据可视化页面的前端制作做一个简单总结。

1、项目介绍

该可视化内容分三个视图,Year  Data View、Month Data View 和 Week Data View ,用 brush 控制在不同的时间周期显示该期间内的不同类别新闻数据:

(1)Year  Data View 在context 区域提取并展示一年的数据,由brush控制focus区域展示一个月为周期的数据 ,focus 用堆积条形图实现;

(2)Month Data View 在context 区域提取并展示一个月左右的数据,由brush控制focus区域展示7天为周期的数据 ,focus 采用类似方法,添加显示更具体的新闻标题在该所属类别的条形图中;

(3)Week Data View 在context 区域提取并展示7天的数据,由brush控制focus区域展示每天的数据 ,focus 利用栅格系统做横向瀑布流布局,类似百度图片。

2、Year Data View

直接上图:

year

项目架构采用迪总的  Decision-Tree 及其模版,数据可视化主要实现 focus + context 类型视图,context 区域是连续区间折线图,focus 区域是离散区间的 stacked  bar , brush控制由时间轴x 比例尺实现。

(1)        离散区间与连续区间定义域统一问题

由于context为连续区间时间比例尺,x2 = d3.time.scale().range([height2, 0]),而

focus区域为离散区间序数比例尺 x = d3.scale.ordinal().rangeRoundBands([height, 0]),导致brush在选取范围时取到的只有两个点,就不能直接为focus的x 轴所用,所以可在此添加d3的时间分割处理monthDate = d3.time.days(extent1[0],extent1[1]); 以天为单位分割extent1之内的日期。

(2)        初始页面显示截止到今天的一个月数据

为了赶上数据的及时更新和良好的用户体验效果,设定初始化页面显示最新的一个月周

期的数据,对日期的处理如下:

 

在此可以看出来一些很有用的日期处理函数及其隐藏的功能,比如

new Date(2014,2,0);  即 2014.3.0 ,返回值为2014年2月28号,日期为0时代表上个月份的最后一天
new Date(2014,4,-2);  即 2014.5.-2 ,返回值为2014年4月28号,日期为负数时代表上个月份的天数减掉几天
new Date(2014,-1,1);  即 2014.-1.1 ,返回值为2013年12月1号,月份为负数时代表前一年的倒数第几个月 -1=12,-2=11,···
new Date(2014,-1,0);  即 2014.-1.0 ,返回值为2013年11月30号,而非12月31号
new Date(2014,0,32);  即 2014.1.32 ,返回值为2014年2月1号,日期溢出月份会自动加1
new Date(2014,12,2);  即 2014.13.2 ,返回值为2015年1月2号,月份溢出年份会自动加1

(3)        数据过滤及处理

  •   当数据被读进来就要选取该周期内的数据,先获取开始日期在所有数据中的索引:

 

  •  过滤选取日期的数据:

 

  •  数据处理

 

(4) 刷子定制

既然是以月为周期显示数据,而每个月份的天数各有不同,刷子大小的设定就会牵连到

数据的append、update、exit操作,为了不影响美观及用户体验,在此就严格定制brush区间为初始页面显示的数据量,刷子区间extent1 初始设定为:

 

刷子此处行为分为平移和自由点击两个动作,move时区间端点以天为单位设定,自由点到某个月份就直接选取该月份的起始日期到下个月的起始日期。

下面对日期选取不符合初始化数据量长度及选取日期溢出当前时间进行处理:

 

(5) 数据更新

过程类似初始数据的读取,在此不赘述。

(6) 鼠标跟踪显示每天各分类新闻的数据量

此处用了最简单的 “title” 属性,也不赘述了

 

3、下步计划

继续制作Month  Data View 和 Week Data View,最终添加分类处理,点击分类按钮去掉该分类的新闻数据。

 

 


上一篇:

下一篇:

1 条评论

2014年11月2日

才1个评论

  1. D3js新闻数据可视化——总结 说:

    […] 前面 Year Data View 已经介绍了  News Data 包括三个视图:Year  Data View、Month Data View 和 Week Data View,每个视图的实现流程大同小异,可以看这张思维导图 http://mind42.com/mindmap/a09a9b6f-3c59-46c7-a776-953c97eadffb: […]

发表评论

*

* 绝不会泄露


返回顶部