wuhan2020 / map-viz Goto Github PK

View Code? Open in Web Editor NEW

276.0 27.0 89.0 15.93 MB

通用的地图可视化组件

HTML 2.65% TypeScript 85.58% JavaScript 9.18% Shell 0.39% CSS 2.19%

map-viz's Introduction

武汉新型冠状病毒防疫信息收集平台-地图可视化项目

本项目负责平台的信息展示，可视化地理信息。

项目介绍

提供基于 ECharts 可视化库的前端组件。

1、提供一个完整独立的疫情地图组件

目的&设计：创建一个独立的疫情地图可视化，有两个主要目标
1. 地理精度：有市级地理粒度，最开始是一个全国地图的 heatmap，点击一个省重绘成省 map。（重绘参考）
- optional: 可能会做成县级精度，具体见讨论
1. 时间信息：有时间轴，点击一个地区可以画出stacked area chart之类的疫情发展图 (确诊/疑似/死亡为不同层)，也可以根据选择的时间点重绘地图。(时间轴参考案例)
进度
基础疫情地图，并用统计图（线图+ stacked area chart）显示疫情发展数据
省市层级交互
时间轴交互
接入手动收集的省级数据
疫情地图时间轴与统计图联动

2、提供一个通用地图组件

目的：用于可视化各种不同地理信息（例如医院位置，酒店位置，etc.）
使用：作为组件被前端调用，数据来自前端。

使用

npm install wuhan2020-mapviz

本地开发

配置

安装 Node.js

# clone the repo
git clone [email protected]:wuhan2020/map-viz.git

cd map-viz
# checkout react branch
git checkout react
# setup the npm env
npm install
# start the project
npm start

任务拆分&参与指南

合作指南参考（注意将 demo script 改成我们的 repo）

请在project 面板自行认领&self-assign issues（如果不能更改 assignee，请回复 issue 表示认领，我们会后面添加 assign）
对数据和设计如果有讨论请参见如下 issue:

如有其它建议请开 issue
参与更多讨论请加入slack 讨论组，我们在 channel #proj-map-visualization

技术栈

可视化库: ECharts v4
逻辑语言: TypeScript v3
开发框架: React.js
组件库: Ant Design

教程及有用链接

例子

临时接口

map-viz's People

Contributors

Stargazers

Watchers

Forkers

chenxingxing6 oh-bala yarray tongshuangwu magic-coder xiaolingis laohupdk zyy0831 wuhongqiang 13ob0 ximisama lemonsong ritaotao macxk xbad wuditken v587001 wh-forker cnyoki 0jinxing f14r3 yagigo zxpeter shihao-wen linpxing wepoiuopijsdfnxcvl shizi7677 liguiye jundong-chan tangyiyong blueflychief jackiezheng asdlei99 libin1991 hedgeh09 dreamkongfu geyujia zhhongsh shadowings-zy haowanhuang shimamura33 tencats wuhan2020-shanghai niuyishuai peij-94 zz2013 allenfantasy janelovelzy joyce-k zhangzihaodt anlaim vellengs tengj viridianfairy christie888 ericwww gazcn007 cocofish pengzh0928 jizh6311 wangyu3c jackjet anndawn xrkffgg zhangmanman2018 codehgq wclcck jeffcao leonbupt gisxy 6xiaoxin lost-gain yuhonghong7035 ws1993 iqus2015 yuyiie reference-project guangrunshe codeyu001 aizanagi wanxiaohun kisslittlecat shangshanruoshui77 oakhope lg405060 myfanily123456 dockercore dut3062796s

map-viz's Issues

疫情地图接入时间信息+交互

目的&设计：
创建一个独立的疫情地图可视化，有两个主要目标

地理精度：有市级地理粒度，最开始是一个全国地图的heatmap，点击一个省重绘成省map。（重绘参考）
时间信息：有时间轴，点击一个地区可以画出stacked area chart之类的疫情发展图 (确诊/疑似/死亡为不同层)，也可以根据选择的时间点重绘地图。(时间轴参考案例)

现状：
疫情地图基础代码已经实现，请见VirusMap
还需要：

添加时间信息
- 做时间轴 (见 #55 ，后续改善需求见 #57 )
- 数据统计stacked area chart/line chart
实现交互
- 点击省重绘省内地图/双击或提供按钮退出省内地图 (#47 #32 #27 )，
- 点击地图省市县同时重绘stacked area chart
- 点时间轴改变地图颜色

相关issue：
#22 现在的mockup数据不带时间信息，需要把API接入我们的代码，或者至少创建一个mock数据支持这部分的implementation

志愿提供山东省137个县级区划的疫情追踪地图

根据国家卫健委关于疫情信息报告新要求，按病例确诊时医院所在县区统计。
本人基于地图慧工具创建并维护山东省区县级疫情地图，数据来源：山东省卫健委。
查看链接：https://g.dituhui.com/apps/range/viewMap/2c9085306fbb67f1016ff4a80b347e78

明确化InformationMap的input interface

现在InformationMap.tsx收input的格式描述是:

interface InformationMapProps {
  options: Object
}

作为被人调用的通件我们需要更确切。根据现在调用的数据把Object扩写成实际接受的格式。

之前的相关issue是 #29

基础线图implementation + 改善

#50 已经添加了一个基础折线图。下面要做：

纵轴加标签
做成可以区分确诊-疑似-死亡-治愈：确认+疑似做stacked bar chart方便辨认总数和趋势，死亡+治愈做折线图方便辨认分别的趋势。
两个图上下对准统一放在地图左侧/右侧
交互：点击时间轴的时候在线图上highlight出时间点

原issue: #23 因为已经做了大部分，把线图单独拆成一个issue。

接入带有时间信息的疫情数据

首选：
直接接入API拿到真实数据并接入VirusMap组件（因为这个数据是我们自己扒不是从数据组获取）

相关：
可选API：1 或者 2
疫情地图相关代码

如果代码不熟也可以在上面的API里拿几天历史数据放到mock数据文件夹里，方便后期做test
https://github.com/wuhan2020/map-viz/tree/master/mock

可视化（有些可以扒到数据）

省级可视化，基于腾讯数据：
https://github.com/lzxue/yiqingditu
腾讯提供的市级地图，无时间讯息：
https://lispczz.github.io/pneumonia/
省级信息的点图展示：
https://gisanddata.maps.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6
财新，省级可视化，点击省可以看到市的列表：
http://datanews.caixin.com/2020-01-20/101506236.html
省级数据时间发展gif:
https://github.com/globalcitizen/2019-wuhan-coronavirus-data/blob/master/data-sources/dxy/data/latest-animation.gif

数据

仅做参考，我们不负责数据收集和处理。

市级历史数据接口：
http://ncov.nosensor.com:8080/api/
财新数据接口：
https://service-qjf6zmby-1252957949.gz.apigw.tencentcs.com/release/caixin
qq数据：
https://service-n9zsbooc-1252957949.gz.apigw.tencentcs.com/release/qq
百度迁移数据：
https://huiyan.baidu.com/migration/historycurve.jsonp?dt=city&id=420100&type=move_out&startDate=20200101&endDate=20200125&callback=jsonp_1580099121138_7984618
https://huiyan.baidu.com/migration/cityrank.jsonp?dt=city&id=420100&type=move_out&date=20200125&callback=jsonp_1580099121132_861162

市级地图点legend会回到上层

因为市级数据不能点了，把hover上去的cursor改成普通？
点legend会回上层，见图。现在我觉得现在市级地图好像点哪都是回上层……？能不能做个按键让只能点这里回上层？像这个里：https://gallery.echartsjs.com/editor.html?c=xm3iS_cb0g

疫情地图返回上级的按钮太不起眼了lol

左下那个返回上一级的小按钮有点不起眼，挪到别的地方（并且label一下现在在那个省里？）

自动计算color scale

现有的疫情地图是固定的color scale，因为有的省市人比较多有的比较少，写死color scale应该很快就会导致同色，自动算一下range然后做quartile binning应该会好一点？
code位置：VirusMap

改善现有的VirusMap基础时间轴

参见 #55 为地图增加时间轴

TODO（cr: @yarray ）

当某一天数据缺失时，检查为何缺失，如果确实缺失，显式标注或者用前一天的数据
手动切换时间（现在好像可以拖动不能点？）

创建点图+map展示其他地理信息

目的：用于可视化各种不同地理信息（例如医院位置，酒店位置，etc.）
使用：作为组件被前端调用，数据来自前端。
基础设计：点图+地图-使用echarts+bmap，支持滚动缩放到具体坐标（参考例子）
交互：
- 不自带过滤等交互组件，上层应该自己创建checkbox, slider, etc. 过滤后数据传入地图组件可以重绘地图
- 接受传入的mouseEvent，可以帮助做信息过滤及定位（e.g., 点击一个省选中它的信息）
- (相关讨论)

相关：
#3 input API
#5 创建医院/酒店等带地理位置的mockup数据
#2 点图实例

疫情地图的color encoding离得太远了，挪近点？

现在如果在电脑上打开（i.e.长宽比比较大），那个color legend太靠左了，离地图有点儿远？

改回地图的配色

现在的配色太红了，换回原来的：

            { min: 0, max: 0, color: '#EEFFEE' },
            { min: 1, lte: 10, color: '#FFFADD' },
            { gt: 10, lte: 50, color: '#FFDC90' },
            { gt: 50, lte: 100, color: '#FF9040' },
            { gt: 100, lte: 500, color: '#DD5C5C' },
            { gt: 500, lte: 1000, color: '#901010' },
            { gt: 1000, color: '#600000' }

通用组件需要接受外界发来的数据

@shadowings-zy 朋友现在的组件是直接拿到mockup数据的，作为通用组件我们得给外面留个接口？
参照之前的数据设计讨论 #3 以及 @Ritaotao 创建的带地理数据的mockup #5

疫情地图增加"当日增加"

加一个toggle按钮，可以在“迄今为止总量”和“今日增量”之间转换。
讨论：需不需要再加一个疑似和确诊的toggle？

贡献下自己的项目

https://github.com/lispczz/pneumonia/

这是市级的可视化。里面的洗数据，AMap调用之类接口也许可以参考。

更新疫情地图的交互

hover对手机交互不友好，考虑换成单击/双击/长按
市级返回上级感觉不是很intuitive，考虑增加一个按钮？

地图可视化技术方案可以采用L7

疫情地图
https://github.com/lzxue/yiqingditu

可视化库
https://github.com/antvis/L7

Map的信息应该由我们这边提供？

我们现在的mock数据是：

{
  "name": "**",
  "mapUrl": "https://map-1252957949.cos.ap-guangzhou.myqcloud.com/china.json",
  "data": [{...}]
}

因为map信息是static的（而且我们map_data里已经有了）而且不是信息组存入的，我们code里应该自己带 地名->mapurl 的信息，不应该要求调用组件的人提供。

之前slack有小伙伴提过：

我之前做的地图是这样的
市级查询经纬度
全国300多个城市
可以做一个表city.json {"武汉":[经度,维度],....}
县级查询经纬度
因为有很多重名的县
需要用身份证前6位做key
{430200:"长沙县",...}
{
  430200:[经度,维度]
  ....
}

如果我们已经有了确认的数据格式（现在调用里有用到confirmed之类的），那VirusMapProps里data的类型就不能是any[]了。要把这个类型固定下来吗？
还是我们还是像之前说的，让调用的人来输入哪些key要作为encoding（比如现在图上的颜色 colorKey="confirmed"，还有hover tooltipKey={"cured": 治愈，"death"：死亡}）?
见数据格式设计的issue #3

把寻人/同行信息画到地图上（用百度地图插件）

我忘了之前是哪位同学跟我说觉得这个会很有用，但是数据在这里……希望你能看到……
数据带有起始终止位置及时间，车序列号（不限高铁，也有公交车）
http://2019ncov.nosugartech.com/data.json

【地图组件参数相关】个人建议搞一个默认的echarts的option

我们可以搞一个默认的option，然后再使用Object.assign合并地图组件传进来的所有参数，这样就能优先使用传进来的参数，缺省就使用默认的参数了。

疫情地图时间轴我这儿只能看到label是2020了？

线图+stacked bar chart+疫情地图的联动

讨论是否增加联动

地图点timeline，高亮stats图相应时间点
hover一张stats图，也同时高亮另一张图的相应时间点

高亮即类似hover的效果

疫情地图加深精度到县区级的数据

根据slack上与 @yarray @frank-zsy 讨论，现在尝试将疫情地图进一步细化到县级，数据会来自志愿者采集。

县级数据来源：https://shimo.im/sheets/88ddRDQRtjGp68XD/nkXxR

code上我初步能想到需要做的扩展：

添加mockup数据，可以使用来自 #35 山东省数据
决定县级 data interface，与省市级interface一起实现在patientStatInterface.ts，并在VirusMap.tsx中使用
VirusMap/VriusChart API: 由于数据来源变成数据组，还是要从上层接受输入，但只输入县级，省市级需要继续抓取。
交互实现逻辑: 有地图+下级数据时支持下钻，没有时无法下钻 (点击下钻反应，可以有stats info update)

(其他的例如和时间轴及stats chart的交互应该可以自动支持新数据。欢迎大家补充)

相关：
#38 之前加到县级的提议
#35 一位朋友自己做的广东县区级可视化

之前没看到这个项目，我自己用高德地图做了一个简单的热力图

之前没看到这个项目，我自己用高德地图做了一个简单的热力图，可以下钻到市级，数据写了个脚本可以实时更新，但考虑到服务器压力问题现在每天手动更新。地址http://wuhan.musiiot.top

与时间轴及其他信息的结合

暂时仅限疫情地图：
画一个line chart/stacked area chart，横轴是时间纵轴高度是确诊/疑似/死亡 https://www.echartsjs.com/examples/zh/editor.html?c=area-stack，来看病毒进展（起始是全国，根据点的省市重绘这个图）

然后有个可以拖动的时间轴来explore地图上的时序信息？

更新github readme，提交一些现有效果的截图

帮助其他组及刚加入的同学更好地了解我们的项目进展，提交现有的截图。

Openlayers 版地图控件

https://github.com/yarray/map-viz/tree/openlayers
目前还是 demo 状态，可以实现疫情地图的显示，接口与代码待整理。
当前 echarts 版控件能满足需求，暂时不发送 pull request 了，有需求时可以 merge 并重启开发。

我在运行npm start时遇到了问题

mi@DESKTOP-3GJBFFU MINGW64 ~/Desktop/map-viz (master)
$ npm start

[email protected] start C:\Users\mi\Desktop\map-viz
rm -rf dist/ && parcel source/index.html --open

'parcel' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еĳ▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: rm -rf dist/ && parcel source/index.html --open
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\mi\AppData\Roaming\npm-cache_logs\2020-01-31T15_27_22_513Z-debug.log

还要根据需要在国家级或者省级整理成 array，现在是嵌套的 (cr: @yarray )

之前的相关issue: #22
如果做县级数据的相关issue: #52

创建带有地理信息的mockup数据

生成一些带地理数据的mockup数据，支持地图通用组件的创建
例如医院需求数据：

{
   name: "武汉协和医院",
   coord: [1, 1],
   requests: [
         [口罩，10000]
         ....
    ]
}

mockup数据存在：https://github.com/wuhan2020/map-viz/tree/master/mock
现包括疫情数据（不带时间信息），可供参考。

相关描述：
#15 通用地图组件
#3 数据接口设计

designer给我的design。可以考虑加在地图或者线图上面？

Map的interaction-提供一个点击重绘的例子

点一个省就进到市级？类似：https://gallery.echartsjs.com/editor.html?c=xm3iS_cb0g
这个我知道设计的时候应该是做成了让上层传入callbackFunc来直接改input数据？到时候可以给他们一个使用的例子？~