一个关于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月全国新冠肺炎平均每日(类型)为(数量)人“,图三鼠标悬停颜色加深,突出显示。
该可视化的潜在用户为想要了解疫情发展情况的大众,以及医护人员,制定相关复工政策的人员。
从折线图可以看出四月份全国总新增确诊/新增境外输入确诊趋势,预测接下来的发展趋势,
而从饼图可以看到疫情最新的新增情况,以推测治疗有效的比例以及现在复工复产是否安全。