wuhan2020 / map-viz Goto Github PK
View Code? Open in Web Editor NEW通用的地图可视化组件
通用的地图可视化组件
根据国家卫健委关于疫情信息报告新要求,按病例确诊时医院所在县区统计。
本人基于地图慧工具创建并维护山东省区县级疫情地图,数据来源:山东省卫健委。
查看链接:https://g.dituhui.com/apps/range/viewMap/2c9085306fbb67f1016ff4a80b347e78
有些callback现在会被fire两次,最好能优化代码。
我忘了之前是哪位同学跟我说觉得这个会很有用,但是数据在这里……希望你能看到……
数据带有起始终止位置及时间,车序列号(不限高铁,也有公交车)
http://2019ncov.nosugartech.com/data.json
首选:
直接接入API拿到真实数据并接入VirusMap组件(因为这个数据是我们自己扒不是从数据组获取)
如果代码不熟也可以在上面的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
要改为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上我初步能想到需要做的扩展:
VirusMap
/VriusChart
API: 由于数据来源变成数据组,还是要从上层接受输入,但只输入县级,省市级需要继续抓取。(其他的例如和时间轴及stats chart的交互应该可以自动支持新数据。欢迎大家补充)
https://github.com/yarray/map-viz/tree/openlayers
目前还是 demo 状态,可以实现疫情地图的显示,接口与代码待整理。
当前 echarts 版控件能满足需求,暂时不发送 pull request 了,有需求时可以 merge 并重启开发。
提供一个新闻接口(数据来源官方微博)
http://ncov.news.dragon-yuan.me/api/news?search=&page=
现在是默认完全无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
#50 已经添加了一个基础折线图。下面要做:
原issue: #23 因为已经做了大部分,把线图单独拆成一个issue。
对于这个可视化项目,我们可以直接将网页host在 Github Pages 上。
再加上 Actions 来实现自动CI,自动部署,这样也方便其他人直接查看这个可视化项目~
点一个省就进到市级?类似:https://gallery.echartsjs.com/editor.html?c=xm3iS_cb0g
这个我知道设计的时候应该是做成了让上层传入callbackFunc来直接改input数据?到时候可以给他们一个使用的例子?~
如题,更精确追踪//
另外 #39
帮助其他组及刚加入的同学更好地了解我们的项目进展,提交现有的截图。
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
目的&设计:
创建一个独立的疫情地图可视化,有两个主要目标
现状:
疫情地图基础代码已经实现,请见VirusMap
还需要:
相关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调用之类接口也许可以参考。
现在InformationMap.tsx收input的格式描述是:
interface InformationMapProps {
options: Object
}
作为被人调用的通件我们需要更确切。根据现在调用的数据把Object
扩写成实际接受的格式。
之前的相关issue是 #29
我们可以搞一个默认的option,然后再使用Object.assign合并地图组件传进来的所有参数,这样就能优先使用传进来的参数,缺省就使用默认的参数了。
生成一些带地理数据的mockup数据,支持地图通用组件的创建
例如医院需求数据:
{
name: "武汉协和医院",
coord: [1, 1],
requests: [
[口罩,10000]
....
]
}
mockup数据存在:https://github.com/wuhan2020/map-viz/tree/master/mock
现包括疫情数据(不带时间信息),可供参考。
根据带时间轴的option格式调整function,不要写死。
基于ECharts
现在如果在电脑上打开(i.e.长宽比比较大),那个color legend太靠左了,离地图有点儿远?
需要介绍调用map的方法;有可能的话封装上传npm?
加一个toggle按钮,可以在“迄今为止总量”和“今日增量”之间转换。
讨论:需不需要再加一个疑似和确诊的toggle?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.