一个可视化的工作案例
效果图
代码的边捆绑算法借鉴了D3.JS官方案例的js库。 链接如下:点击打开链接
案例分析
本案例展示的上海市某一天12点出租车数据流量图,先将上海市进行区域划分,之后将出租车数据映射到相应的区域,并映射到osm地图上。最后用当D3标注出区域以及流量图。
一. 准备数据
对上海市出租车数据进行处理,处理后部分文件显示如下。data.json文件
{"node":[
{
"id":0,
"x":1211.85,
"y":311.25
},
{
"id":1,
"x":1212.0499,
"y":311.25
},
{
"id":2,
"x":1212.2499,
"y":311.25
},.....],
"edge":[
{
"id":0,
"source":1,
"target":138,
"num":1
},
{
"id":1,
"source":1,
"target":141,
"num":1
},.....],
"num":[
0,2,4,6,9,2,5,4,13,91,33,24,19,11,0,5,0,3,16,18,
2,2,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,3,5,....]}
二.可视化展示
首先加载osm地图,之后访问json文件,最后显示效果。(注意,d3访问文件是要开本地服务器的,建议使用node.js开启本地服务器,安装node.js后,在相应文件夹中打开命令行,输入http-server,在浏览器打开即可)。
本处使用了一种边捆绑算法,减弱了边捆绑之间的相互遮挡的问题。