Giter Club home page Giter Club logo

d3.js-linkingdemo's Introduction

D3.js-LinkingDemo

一个关于D3.js的Demo
bilibili-【伪教程向】如何修改一个D3.js案例 数据可视化自学 视频中的例子
关于疫情数据统计的两个散点图与一个柱状图的多图联动网页

  • html & css & js: 项目文件、源代码
  • data: 所用数据
  • cover: 效果图
  • readme: 说明文档 此文档

基本介绍:

  • test1.html **疫情——现有确诊/治愈人数 趋势图 由一个散点图和两个柱状图组成,
    散点图的横坐标为现有确诊人数,纵坐标为累计治愈人数。 标记为点,视觉通道为颜色。
    通过绿、橙、蓝、紫四种鲜艳的颜色区别了每个记录的月份。柱状图横坐标为人数,纵坐标为天数。
    标记为面,视觉通道为颜色和大小。
    可以通过框选散点图中的点,实现多视图链接交互,查看框选点中的现有确诊人数及累计治愈人数情况。
  • test2.html 由一个多线折线图和两个环形图组成,多线折线图的横坐标为日期,纵坐标为人数。
    标记为线,视觉通道为颜色和大小。
    环形图通过填充的方式使浏览者更清晰直观的看到了治愈率与死亡率的对比。鼠标悬停在多折线图,相应线条放大。

交互设计:

使用.on("mouseover", function(d)).on("mouseout", function(d))令activeName = d.name使折线图与横向条形图关联交互,
折线图颜色默认steelblue,鼠标选择相应折线或条形图区域,颜色为red,突出显示,
在图一标题位置显示类型名称 “总新增确诊病例/新增境外输入”,
图二在相应区域鼠标悬停显示文本“4月全国新冠肺炎平均每日(类型)为(数量)人“,图三鼠标悬停颜色加深,突出显示。

潜在用户:

该可视化的潜在用户为想要了解疫情发展情况的大众,以及医护人员,制定相关复工政策的人员。
从折线图可以看出四月份全国总新增确诊/新增境外输入确诊趋势,预测接下来的发展趋势,
而从饼图可以看到疫情最新的新增情况,以推测治疗有效的比例以及现在复工复产是否安全。

本案例提交于2020/06/01,仅学习,无后续更新

d3.js-linkingdemo's People

Contributors

hkca09 avatar deepsource-io[bot] avatar

Watchers

 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.