微博签到可视化系统

该系统以express为架构，mongodb为数据库。将已收集到的微博数据包含（微博昵称，位置，内容等信息）分类，类别大致有位置分类，内容分类。我负责的任务便是将分类筛选好的数据利用D3绘制成饼状图，流状图，柱状图。具体分类内容如下。

 

该系统的主页面

 

按下方的select按钮便会出现上面的选择框。在此，我选择的是At Work,At School,Home,At FriendHome,Launch选项。按完后，符合要求的数据将会在地图上以圆圈形式显示其地理位置。在此基础上，按下下方的ThemRiver按钮，他将对符合条件的数据整合显示。

 

按Piechart按钮，会有饼状图。

同理，按下Barchart按钮，显示柱状图。

而Heatmap显示的是热力图。

 

数据可视化主要内容不外乎数据的处理与数据的展示。在该项目中，虽然主要是利用D3绘制几类图形（饼图，流图，柱状图，热力图），但在该项目中，我学习的更多的却是对前端显示的理解。

该系统用到的是semantic-ui这个前端模板，而初期的理解并不能使我更好的布局前端，所以如何更好的利用已有资源定制css成为主要任务。Semantic-ui的定制主要遇到的问题，总体来讲，还是整体与局部css样式的冲突，所以理解该系统的DOM树成为核心。理解了DOM树，之后再在上面附加css样式则css出错的概率大大降低。

这个系统仍有一些问题，比如流状图变成柱状图时行时不行，热力图也有时不能显示。固然是由于后台nodejs代码可能有所偏差，但也是该系统代码的管理缺乏，才致明知问题存在，却不知如何下手的尴尬境界。