Code Monkey home page Code Monkey logo

map-viz's Introduction

WE PROVIDE ENGLISH VERSION, PLEASE CLICK HERE

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

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

任务

基于 ECharts 可视化库及其他技术栈:

创建一个完整独立的疫情地图

  • 目的&设计:创建一个独立的疫情地图可视化,有两个主要目标
    1. 地理精度:有市级地理粒度,最开始是一个全国地图的 heatmap,点击一个省重绘成省 map。(重绘参考
    • optional: 可能会做成县级精度,具体见讨论
    1. 时间信息:有时间轴,点击一个地区可以画出stacked area chart之类的疫情发展图 (确诊/疑似/死亡为不同层),也可以根据选择的时间点重绘地图。(时间轴参考案例)
  • 使用:取决于数据
    • 如果自动抓取省市级数据:疫情地图与前端其他组件交互较少,且数据可以通过 API 直接获取,可以作为单独 webpage,最终作为 iframe 整合进前端页面。
    • 如果使用手动抓取的县级数据,则作为组件融入前端,接受传入数据。讨论

创建一个通用地图组件

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

任务拆分&参与指南

合作指南参考主 repo(viz 没有项目机器人+注意将 demo script 改成我们的 repo) TL;DR:

  1. 请在project 面板自行认领&self-assign issues(如果不能更改 assignee,请回复 issue 表示认领,我们会后面添加 assign)
  2. 对数据和设计如果有讨论请参见如下 issue:
  1. 如有其它建议请开 issue
  2. 参与更多讨论请加入slack 讨论组,我们在 channel #proj-map-visualization

进度一览

!!具体进行中及待领任务请看project 面板

疫情地图

已经有基础疫情地图,界面排布根据界面大小的缩放而改动,能显示省市两个层级的疫情信息。已经接好了数据接口,可以从官方 API 拿到每日信息 (但是为了避免对 API 造成巨大负担现在是每日手动拉下来的。)

  • 基础疫情地图,并用统计图(线图+ stacked area chart)显示疫情发展数据

img0

  • 省市层级交互
  • 时间轴交互:

img2

TODO

  • 接入手动收集的省级数据
  • 疫情地图时间轴与统计图联动

通用组件

已经有可视化其他地理信息 (e.g. 求援医院地理位置,酒店位置) 的通用地图控件,用百度地图 API,可以精确在地图上标出。 现在用 mock 数据做,之后应该会按照指示接入前端用来可视化他们的数据。

img3

技术栈

本地开发

配置

  1. 安装 Node.js
# clone the repo
git clone [email protected]:wuhan2020/map-viz.git
# setup the npm env
cd map-viz
npm install
# start the project
npm start

教程及有用链接

5 分钟上手 ECharts

echarts example

百度地图

坐标拾取

例子

百度迁徙

百度实时疫情数据

丁香园实时疫情数据

qq 实时疫情数据

临时接口

省市每日历史数据

百度实时疫情

百度迁徙

丁香园实时疫情

丁香园每分钟历史数据

丁香园其他

qq 实时+历史疫情

百度地图地址转经纬度

新闻收集接口

map-viz's People

Contributors

13ob0 avatar birdsofsummer avatar frank-zsy avatar oh-bala avatar ritaotao avatar shadowings-zy avatar shihao-wen avatar tongshuangwu avatar yagigo avatar yarray avatar

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.