wuhan2020 / map-viz Goto Github PK

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

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

有些callback现在会被fire两次，最好能优化代码。

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

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

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

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

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

不是应该换成市级线图？

比如去掉年份

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

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

要改为react了。

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

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

根据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 一位朋友自己做的广东县区级可视化

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

提供一个新闻接口（数据来源官方微博）
http://ncov.news.dragon-yuan.me/api/news?search=&page=

讨论是否增加联动

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

高亮即类似hover的效果

现在是默认完全无label的状态，感觉有点太难找了XD

大家可以继续提供，这些是已知的

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

省级可视化，基于腾讯数据：
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

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

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

            { 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' }

时间轴的时间，在移动设备上会重叠

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

搬运slack讨论
#48 @YagiGo 提到用省级时间加载在市级时间上，因为市级不是单独公布的，api里没有时间戳。
另外还需要做：

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

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

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

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

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

对于这个可视化项目，我们可以直接将网页host在 Github Pages 上。
再加上 Actions 来实现自动CI，自动部署，这样也方便其他人直接查看这个可视化项目～

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

如题，更精确追踪//

另外 #39

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

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

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

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' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒
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

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

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

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

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

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

我们现在的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:[经度,维度]
  ....
}

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

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

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

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

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

interface InformationMapProps {
  options: Object
}

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

之前的相关issue是 #29

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

TODO（cr: @yarray ）

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

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

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

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

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

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

根据带时间轴的option格式调整function，不要写死。

基于ECharts

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

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

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

需要介绍调用map的方法；有可能的话封装上传npm？

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