Code Monkey home page Code Monkey logo

map-viz's Introduction

wuhan2020 社区官网 wuhan2020 官方公告

志愿者入口(Slack交流群组) >>> 点击加入 Slack 交流群组

目录

新型冠状病毒肺炎防疫信息收集平台

针对 2020 年初在武汉爆发的新型冠状病毒疫情,本项目旨在收集各医院、酒店、工厂、物流、捐赠、捐款、预防、治疗、动态等信息,统一收集,统一发布,以便各方之间进行信息互通,有效调配社会资源。

该仓库为数据主仓,所有数据由脚本自动提交导入,请不要在该仓库中直接提交数据信息,具体数据提交渠道,请参考该文档。

协作流程

本平台为方便大家协作,构建如下协作流程

img

除信息人工审核外,其他部分均为自动化完成,不应需要人工介入。

该平台主要开源项目

数据同步

渐进式 Web 应用

API 服务

地图可视化组件

石墨表格同步组件

合作的公益项目

阿里云疫情分析平台(完全免费)

我是志愿者,希望一起维护项目

我是数据提交志愿者,使用石墨文档

本平台收集信息包含如下几类数据提交的信息,请分别申报填写。

本平台使用石墨文档收集数据信息,并由脚本定时同步数据到该仓库,请不要在该仓库中直接修改数据文件。

由于参与人员较多,不开放所有人员的编辑权限,请在这里填写申请,会定向邀请到特定表单中进行信息录入。

石墨文档地址:

具体细节可以参见这里

我是开发相关志愿者,使用GitHub

本平台现阶段主要流程是使用GitHub flow以及GitHub project,通过issue和PR来进行处理。参与者需要有GitHub账号。

提交issue

issue可以是需求,也可以是建议或者bug等。在提交 issue 时,请确定 issue 的类型,并在标题中注明,项目的机器人将会自动打上对应的标签。具体类型现在定义如下:

  • hospital: 医院相关信息
  • factory: 生产相关信息
  • logistical: 物流相关信息
  • hotel: 酒店相关信息
  • donation:捐款相关信息
  • clinic:义诊相关信息
  • news:疫情新闻动态相关信息
  • doc: 文档相关
  • bug: 缺陷反馈
  • feature: 新的特性

认领任务

Issue 列表 中挑选任务。然后在该 issue 中使用 /self-assign命令领取任务。项目的机器人将会自动将该issueAssignees指定为自己。

具体如何提issue和PR,请参考这里

Slack交流群组

点击加入Slack 交流群组

Slack频道导航

(需要先加入群组)

频道名 链接
默认频道 Github
通用信息发布 Github
设计技能组 Github
产品需求管理技能组 Github
前端技能组 Github
后端技能组 Github
子项目: 数据同步 Github
子项目: Web前端展示 Github
子项目: 数据地图可视化 Github
子项目: API服务器 Github
采集给官方的建议 Github
海外相关 Github
Slack频道运营团队 Github

邮件列表

wuhan2020 邮件列表:[email protected] (订阅, 退订, 存档)

欢迎大家加入共同探讨各类技术或非技术类问题,让我们大家一起齐心协力,众志成城,共克时艰!

FAQ常见问题

已经整理整个项目的FAQ,请查看

信息组FAQ,请查看

请点击石墨文档

map-viz's People

Contributors

13ob0 avatar birdsofsummer avatar chenrui333 avatar dependabot[bot] avatar frank-zsy avatar hedgeh09 avatar lovepoem avatar oh-bala avatar pengzh0928 avatar ritaotao avatar shadowings-zy avatar shihao-wen avatar tongshuangwu avatar yagigo avatar yarray avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

map-viz's Issues

改善现有的VirusMap基础时间轴

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

TODO(cr: @yarray

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

收集已有的武汉疫情可视化/数据来源

复查疫情地图市级时间序列数据

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

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

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

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

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

自动计算color scale

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

通过 Github Actions 实现 CI

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

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:[经度,维度]
  ....
}

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

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

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

基础线图implementation + 改善

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

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

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

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

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

我在运行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' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒е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

改回地图的配色

现在的配色太红了,换回原来的:

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

更新疫情地图的交互

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

VirusMap的input数据格式?

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.