可视化篇：R语言REmap+Echart做迁徙，通勤图

工作后经常要做一些比较贴合用户级别的可视化，R的ggplot2在做一些学术或者理论研究上的可视化时，效果是非常好，基本上能想到的图ggplot都能画出（不要纠结双坐标和3D）

    在作静态图时，ggplot2+AI可以展现出印刷级别的效果，具体可以查看：http://theinformationcapital.com/ 这里要感谢数据人网一位朋友，是他介绍的这本书。

    在作动态图或者可交互的图表时，R+js是一个高阶的展示路径，下文展示的图表，都是R调用echart的API，用js画的，当然在使用的过程中我修改了部分源码，因为公司展示效果的需要。。（我觉得一个搞算法的用代码去做前端UI的一些事有时候要奔溃，我只是想跟他们说臣妾做不到啊。。。）

    下面图表我会把制作过程以及图背后的业务背景一一说一下，代码也会附上，数据由于隐私原因无法提供，请多见谅。

    下图都是动态效果，单击图片可以看到动效。

 

    PS:文章发出来后，很多人问我想要拿数据测试一下，表示有些地方涉及隐私，所以有些对不住，但是我模拟了图1和图2的数据，测试后和原图差不多，大家可以下载看看：

    图1数据：http://pan.baidu.com/s/1sjX42Nr

    图2数据：http://pan.baidu.com/s/1i4wNlVf

    图3,4数据：http://pan.baidu.com/s/1eRfYIDs   该部分数据是用R代码模拟，复制可运行。

   

    开始前先安装一下REmap包，由于该包没有挂靠在cran上，所以要从GitHub 上下载：

    library(devtools)

    install_github("Lchiffon/REmap")

    devtools包可按照正常方法下载，如果提示没有安装digest包，则再下载digest包即可。

 

    下图1是用R包REmap中remapC函数作的，其调用的是echart的API接口，图片展示的是2月6日广洲人口迁往省外的人群分布，颜色越深表示迁往该省的人数越多，数据使用的移动数据（这里公司主要做运营商的第三方，所以数据基本上都没啥问题），图中的线表示top10省份，即迁出的目标省份中人数最多的10个，广西湖南前二，还有一些统计数据的展示我没放上来，主要是那个直接在最终展示里画即可，这边负责的是迁徙的效果图。

代码附在图下：

图1

代码：

这部分主要是设置文件可以保存于其他路径，方便之后的传输使用：

##################  
#  migratemap            #
##################

library(REmap)
options(remap.js.web =T)   #该函数在echart3.0更新时有bug，后来联系作者改了，如果是很久前下的REmap包，记得重新卸载该包后重新下载。

 

这部分是读取数据，数据这边暂时不能提供：
###################################
#        readthedata                                          #
###################################

Sys.setenv(JAVA_HOME="d:/java/jre")
library(xlsx)
destin <-read.xlsx(file="C:/Users/Administrator/Desktop/destination.xlsx",1,encoding="UTF-8",header=F)
head(destin)

###################################
#          plotthemap                                         #
###################################

 

这部分是一些数据的处理：
fix: markLine_data有三列，第一列是出发地，第二列是目的地，第三列可有可无，建议设置成颜色。

此外该三列均为字符型，对应下文geoData数据框中的第三列，而geoData前两列分别lon(经度),lat(维度)，第三列为字符型的地点名（可自己命名）。

格式不能乱，不能乱，不能乱。。

##########################################               ##makethe mark line/point data
markLine_data <- data.frame(origin=,

                                                destination=

                                                )
markPoint_data <- markLine_data[markLine_data!=""]
markPoint_data1 <-markPoint_data[which(markPoint_data!="广州")]    #作图时除去广州这个点

remapC(gz_to_other3,
       title="2016年2月6日广州人口迁出图",
       subtitle="前10目标省份",
       theme=get_theme(                                  #get_theme是调整背景颜色

           theme="Dark",lineColor= "#FFFFFF",
           backgroundColor= "#FFFFFF", titleColor = "#fff",
           borderColor= "#FFFFFF", regionColor = "#000000",
           labelShow= F, pointShow = F, pointColor = "gold"
           ),
       color=c("#CD0000","#FFEC8B"),   #这里是颜色渐变方案

#这里的linedata,和下文的pointdata都是图中点线数据，线的主要是origin和destination两列，第三列可以设置颜色，个人建议在数据里设好好颜色，不要到参数里面设置，否则容易报错。
       markLineData=markLine_data,    #两列，第一origin，第二destination，第三可设置颜色

#这里的linetheme,和下文的pointtheme都是图中点线样式调整，参数不多，查看帮助文档可以明白            
       markLineTheme=markLineControl(
           color="white",  #调整颜色
           lineWidth=2,    #调整线条宽度
           lineType="dashed"  #调整线条形状，dashed为虚线

           ),
       markPointData=markPoint_data1,   #三列，第一列经度，第二维度，第三点名，第四可设置颜色

       markPointTheme=markPointControl(
           symbolSize=13,   #调整点大小
           effect=T,              #调整点是否显示动态效果
           effectType="scale",    #调整点的形状
           color="white"
           )
       )

 

    下图2是广州天河城周边的交通导图，该图用的是REmap包里面的remapB函数，该函数的背景参数画不出下图效果，画出的是图5背景，由于展示需要，只能手动修改该包源码，下面会贴出详细过程， 该图主要是为了展示上班时期天河城周边交通效果，进一步的做一些人群标签画像等以及展示公司位置系统的交通监控能力。

图2

代码：
##中心点，天河城
thc_center <- c(113.328755,23.137588)

 

##read the data
lonlat_thc <-read.csv(file="C:/Users/Administrator/Desktop/lonlat_thc.csv",header=T) 

                                                               #已模拟数据，可下载，下面为对模拟数据做一些合并处理

                                                              #前三列为源点及经纬度，后三列为目标点及经纬度
head(lonlat_thc)

gdata1 <- lonlat_thc[,1:3]
names(gdata1) <- c("lon","lat","city")
gdata2 <- lonlat_thc[,5:7]
names(gdata2) <- c("lon","lat","city")
gdata <- rbind(gdata1,gdata2)
head(gdata)

 

markLine_data <- data.frame(origin=gdata1[,3],
                             destination=gdata2[,3],
                             color=rep("gold",length(gdata1[,3]))
                             )

markLine_Control <-markLineControl(symbolSize=c(0,0.1),
                                    smoothness=0,
                                    effect=T,
                                    lineWidth=3,
                                    lineType="dashed"
                                    )

remapB(center=thc_center,
       zoom=17,
       color="Blue",   #调整背景，此部分修改了源码，详见下文
       markLineData=markLine_data,
       markLineTheme=markLine_Control,
       geoData=gdata    #三列，第一列为经纬，第二维度，第三对应的点名
       )

 

    对于remapB中的color参数，源码是在map.setMapStyle({styleJson:[...]})函数中调用的，该段源码是一段CSS样式，调用的是百度地图的API，由于公司展示需要，我重新调整了整体配色方案，隐藏了各交通干道的标志和一些街道小建筑标志，留下一些标志性的建筑，使得可以比较清晰看清楚用户来源去向。调整的代码如下：

 styleJson: [
          {
                    'featureType':'land',     #调整土地颜色
                    'elementType':'geometry',
                    'stylers':{
                              'color':'#081734'
                    }
          },
          {
                    'featureType':'building',   #调整建筑物颜色
                    'elementType':'geometry',
                    'stylers':{
                              'color':'#04406F'
                    }
          },
         {
                    'featureType':'building',   #调整建筑物标签是否可视
                    'elementType':'labels',
                    'stylers':{
                    'visibility':'off'
                    }
          },
          {
                    'featureType':'highway',     #调整高速道路颜色
                    'elementType':'geometry',
                    'stylers':{
                    'color':'#015B99'
                    }
          },
          {
                    'featureType':'highway',    #调整高速名字是否可视
                    'elementType':'labels',
                    'stylers':{
                    'visibility':'off'
                    }
          },
          {
                    'featureType':'arterial',   #调整一些干道颜色
                    'elementType':'geometry',
                    'stylers':{
                    'color':'#003051'
                    }
          },
          {
                    'featureType':'arterial',
                    'elementType':'labels',
                    'stylers':{
                    'visibility':'off'
                    }
          },

          {
                    'featureType':'green',
                    'elementType':'geometry',
                    'stylers':{
                    'visibility':'off'
                    }
          },
          {
                    'featureType':'water',
                    'elementType':'geometry',
                    'stylers':{
                              'color':'#044161'
                    }
          },
          {
                    'featureType':'subway',    #调整地铁颜色
                    'elementType':'geometry.stroke',
                    'stylers':{
                    'color':'#003051'
                    }
          },
          {
                    'featureType':'subway',
                    'elementType':'labels',
                    'stylers':{
                    'visibility':'off'
                    }
          },
          {
                    'featureType':'railway',
                    'elementType':'geometry',
                    'stylers':{
                    'visibility':'off'
                    }
          },
          {
                    'featureType':'railway',
                    'elementType':'labels',
                    'stylers':{
                    'visibility':'off'
                    }
          },

          {
                    'featureType':'all',     #调整所有的标签的边缘颜色
                    'elementType':'labels.text.stroke',
                    'stylers':{
                              'color':'#313131'
                    }
          },
          {
                    'featureType':'all',     #调整所有标签的填充颜色
                    'elementType':'labels.text.fill',
                    'stylers':{
                              'color':'#FFFFFF'
                    }
          },
          {
                    'featureType':'manmade',   
                    'elementType':'geometry',
                    'stylers':{
                    'visibility':'off'
                    }
          },
          {
                    'featureType':'manmade',
                    'elementType':'labels',
                    'stylers':{
                    'visibility':'off'
                    }
          },
          {
                    'featureType':'local',
                    'elementType':'geometry',
                    'stylers':{
                    'visibility':'off'
                    }
          },
          {
                    'featureType':'local',
                    'elementType':'labels',
                    'stylers':{
                    'visibility':'off'
                    }
          },
          {
                    'featureType':'subway',
                    'elementType':'geometry',
                    'stylers':{
                              'lightness':-65
                    }
          },
          {
                    'featureType':'railway',
                    'elementType':'all',
                    'stylers':{
                              'lightness':-40
                    }
          },
          {
                    'featureType':'boundary',
                    'elementType':'geometry',
                    'stylers':{
                              'color':'#8b8787',
                              'weight':'1',
                              'lightness':-29
                    }
          }

    ]

    上面那段百度地图背景调整函数都比较浅显易懂，修改后记得运行markPointStr和markLineStr两个函数，remap函数也要手动运行一次。

 

    下图3是天河城附近的购物场景图（多点），和图4（单点）实现方法差不多，主要是中心点的选择问题，同时改图主要展示的是一个购物通勤效果，人流来源与聚焦点的情况，展示几大人流密集点，同时配合公司标签库在系统上展示人群特征情况，这可以为商铺做销售选择提供不小的帮助。

图3 多点

 

图4 单点

实现代码：

line_origin <-rbind(thc_df,zj_df,tgh_df,tyzx_df,wdl_df)    #同样我没有展示数据部分，但是实现效果如下码
line_dest <-rbind(thc_ct,zj_ct,tgh_ct,tyzx_ct,wdl_ct)

markLine_data <-data.frame(origin=line_origin[,3],
                            destination=line_dest[,3],
                            color=rep("grey",length(line_origin[,3]))
                            )

gdata <- rbind(line_origin,line_dest)

markLine_Control <-markLineControl(symbolSize=c(0,0.1),
                                    smoothness=10,
                                    effect=T,
                                    lineWidth=1.5,
                                    lineType="dashed"
                                    )

remapB(center=thc_center,
       zoom=17,
       color="Blue",
       #markPointData=markPoint_data,
       markLineData=markLine_data,
       #markPointTheme=markPoint_Control,
       markLineTheme=markLine_Control,
       geoData=gdata
       )

    下图5是一开始没有修改remapB的源码时的背景，展示效果有点不清晰，业务逻辑同上，主要是查看人群密度分布特征，原来特征等。

图5

 

    今天先写到这里，之后有关算法和可视化的一些想法或成果，再分享出来。