d3可视化展示-brush可拖拽时间轴+map-中国交通事故伤亡人数️统计(模拟的数据)

1、先看效果。如下图所示,

在线演示:

视频链接:

截图:

d3可视化展示-brush可拖拽时间轴+map-中国交通事故伤亡人数️统计(模拟的数据)

2、数据及可视化含义。

这是一个可视化demo,使用d3.js+mapbox开发,可视化了2013年1月 - 2015年12月的中国交通事故伤亡人数,数据为模拟的非真实数据;
      可视化含义:
      2.1、map部分,地图上的红色及橙色圆形marker表示发生事故的地点,红色表示死亡人数大于等于1,橙色代表只有受伤人员,marker的半径代表此次事故的伤亡人数总和,半径越大则伤亡人数越多;点击marker可以弹出信息窗infobox;

d3可视化展示-brush可拖拽时间轴+map-中国交通事故伤亡人数️统计(模拟的数据)


      2.2、左下底部为brush可拖拽时间轴,可以动画播放,播放支持暂停、开始、加速、减速、重置的功能;

d3可视化展示-brush可拖拽时间轴+map-中国交通事故伤亡人数️统计(模拟的数据)

2.3、左下有个统计信息窗,是对被brush可拖拽时间轴选中并且在地图上显示的数据的统计;

d3可视化展示-brush可拖拽时间轴+map-中国交通事故伤亡人数️统计(模拟的数据)

3、代码分析及讲解。