字节青训前端笔记 | 数据可视化基础

news2024/10/3 0:34:18

本课程主要内容可以分为三个章节:

  • 数据可视化的基本概念
  • 可视化设计的基本原则
  • 面向前端的可视化工具

本手册可以作为学生学习数据可视化的“学习指南”,按照手册所列内容,结合扩展资料进行系统的学习和实践。本课程没有讨论更为前沿的可视化课题,比如智能可视化。

什么是可视化

如何一种将数据转换成可视化形式的方式(比如 图标,地图,图标,表格等等)。

它可以分为:科学可视化(将实验数据更加直观的展示)、信息可视化(对抽象数据直观展示)、可视乎分析(对分析结构的直观展示、以及交互式反馈)。

可视化的目的是:记录信息,分析推理,证实假设,交流思想

可视化设计的原则和方法

  1. 能够正确的表达数据中的信息二不产生偏差和歧义

    • 透视失真

      如果数字是由视觉元素来表达的,那么它应该与视觉元素的感知程度成反比。我们应该使用清晰、详细和彻底的标签,以避免图形失真和含糊不清。如下的例子:因为可视化的图是 3D 的,因为透视的问题,绿色的图看上去比紫色的大,

      请添加图片描述

    • 图形设计 & 数据尺寸

      图形的每一个部分都会产生对其的视觉预期,这些预期往往决定了眼睛看到的东西;错误的数据洞察,产生于在图形的某一个地方发生的不正确的视觉预期推断。例如下面的例子:刻度不均匀,之前一格是20,之后是40,导致会产生误判。

      请添加图片描述

    • 数据上下文

      如下:取出一部分和查看整个图表会得出完全不一样的结论

      请添加图片描述

  2. 准确的展示数据

    • 节省笔墨

    • 节省空间

    • 消除不必要的“无价值”图形

    • 在最短时间内传达最多的信息

    • 最大化数据墨水占比 ——可视化核心的不可去除的部分被称为数据墨水

      请添加图片描述

  3. 视觉感知

    • 视觉感知是客观事物通过人的视觉在人脑中形成的直接反映

    • 人类视觉系统观察的是变化,而不是绝对值,并且容易被边界吸引

    • 在可视化设计中,设计者需要充分考虑到人类感知系统的这些现象,以使得设计的可视化结果不会存在阻碍或误导用户的可视化元素。

    • 这里我们使用格式塔理论进行设计

      • 就近原则

      在视觉元素在空间距离上相距较近的时候,我们通常将他们归为一组,将数据放在靠近的位置,可以突出他们之间的关联性

      请添加图片描述

      • 相似原则

      形状大小颜色强度等属性比较相似的时候,这些问题比较容易被看成一个整体:

      请添加图片描述

      • 连续性原则

      人在观察事物的时候会很自然的沿着物体的边界,将不连续的物体视为连续的整体

      请添加图片描述

      • 闭合原则

      有些图案可能本身是不完整的或者不闭合的,但是主体有一种使其闭合的倾向,人们就会很容易的感知整个物体而忽略未闭合的特征

      请添加图片描述

      • 共势原则

      如果一个对象中的一部分都向着共同的方向去运动,那么这些共同移动的部分就容易被感知为一个整体。

      请添加图片描述

      • 对称原则

      对称的元素通常会被视为同一组

      请添加图片描述

      • 图形与背景关系

      通常认为构图中最小的物体,更大的是背景

      请添加图片描述

  4. 视觉编码

    • 这是一种将数据信息映射成可视化元素的技术

      请添加图片描述

    • 可视化符号包括:表示元素的括点、线、面等。表示关系的闭包、连线等

    • 视觉通道包括:数量通道:用于显示数据的数值属性(长度高度大小);标识通道:用于显示数据的分类属性(空间区域,色相,动向)。

可视化工具

D3.JS : https://observablehq.com/@d3/bar-chart-remix

Vega : https://vega.github.io/vega/

G2 : https://d3js.org/

Echarts : https://echarts.apache.org/zh/index.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/337708.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

推荐5款干净又实用的软件

我们在使用电脑的时候,总是会用到一些好用的软件,今天分享这5款干净又实用的软件,实在是太好用了,我不允许你不知道。 1.桌面工具——火柴 火柴是一款集快速搜索,程序启动、本地文件查找、网站直达、网络搜索等多种功…

OSACN-Net:使用深度学习和Gabor心电图信号谱图进行睡眠呼吸暂停分类

这篇文章在之前读过一次,其主要的思路就是利用Gabor变换,将心电信号转变为光谱图进行识别研究,总体来讲,不同于其他的利用心电信号分类的算法,该论文将心电信号转换为光谱图,在此基础上,分类问题…

java面试题(二十)中间件redis

1.1 Redis可以用来做什么? 参考答案 Redis最常用来做缓存,是实现分布式缓存的首先中间件;Redis可以作为数据库,实现诸如点赞、关注、排行等对性能要求极高的互联网需求;Redis可以作为计算工具,能用很小的…

基于微信小程序 java高校后勤报修系统 Springboot校园报修管理系统

1绪论 5 1.1项目研究的背景 5 1.2开发意义 5 1.3项目研究内容 5 2开发技术介绍 6 2.1 B/S架构 6 2.2Java技术 6 2.3MySQL 介绍 7 2.4MySQL环境配置 7 2.5SpringBoot技术 8 3系统分析 9 3.1可行性分析 9 3.1.1技术可行性 9 3.1.2经济可行性 9 3.1.3操作可行性 9 3.2网站性能需求…

跟开发打了半个月后,我终于get报bug的正确姿势了

在测试人员提需求的时候,大家经常会看到,测试员和开发一言不合就上BUG。然后开发一下就炸了,屡试不爽,招招致命。 曾经看到有个段子这么写道: 不要对程序员说,你的代码有BUG。他的第一反应是:…

C语言学习笔记-强制类型转换

强制类型转换是通过类型转换运算来实现的。其一般形式为:(类型说明符)(表达式)其功能是把表达式的运算结果强制转换成类型说明符所表示的类型。自动转换是在源类型和目标类型兼容以及目标类型广于源类型时发生一个类型…

《Redis实战篇》六、秒杀优化

6、秒杀优化 6.0 压力测试 目的:测试1000个用户抢购优惠券时秒杀功能的并发性能~ ①数据库中创建1000用户 这里推荐使用开源工具:https://www.sqlfather.com/ ,导入以下配置即可一键生成模拟数据 {"dbName":"hmdp",…

Java中的Set集合

Set不能存储重复元素,元素无序(指的是不按照添加的顺序,List集合是按照添加顺序存储的)hashSet注:源码底层是hashMap实现的,因为hashMap是双列的,其中键是不能重复的,而hashSet是单列…

使用f-string格式化构建字符串

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 字符串的格式化输出(f-string) print(f字符串{变量}字符串) [太阳]选择题 对于以下python代码最后输出的结果是? name "小明" print("【显示】f输出…

全新视角!带你一文读懂ChatGPT!

最了解你的人不是你的朋友,而是你的敌人。 ——《东邪西毒》 目录 什么是ChatGPT? ChatGPT为什么会突然爆红网络? ChatGPT能帮助我们做什么? 获取源码?私信?关注?点赞?收藏&…

记录--千万别让 console.log 上生产!用 Performance 和 Memory 告诉你为什么

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 很多前端都喜欢用 console.log 调试,先不谈调试效率怎么样,首先 console.log 有个致命的问题:会导致内存泄漏。 为什么这么说呢? 用 Performance 和 Mem…

【信管11.4】合同及合同管理过程(二)

合同及合同管理过程(二)合同管理过程不属于项目管理过程中的知识域,所以它也不是 PMP 中的内容。其实截止到这里,整个 PMP 中的相关知识你已经学完了。如果抛开我们第一大章信息化和信息管理相关的内容,你就可以直接去…

Spring Boot(五十九):Sa-Token-Quick-Login插件快速登录认证

1 Sa-Token-Quick-Login解决的问题 Sa-Token-Quick-Login 可以为一个系统快速的、零代码 注入一个登录页面 试想一下,假如我们开发了一个非常简单的小系统,比如说:服务器性能监控页面, 我们将它部署在服务器上,通过访…

Docker不做虚拟化内核,对.NET有什么影响?

引子前两天刷抖音,看见了这样一个问题。问题:容器化不做虚拟内核,会有什么弊端?Java很多方法会跟CPU的核数有关,这个时候调用系统函数,读到的是宿主机信息,而不是我们限制资源的大小。思考&…

FoveaBox原理与代码解析

paper:FoveaBox: Beyond Anchor-based Object Detectorcode:https://github.com/taokong/FoveaBox背景基于anchor的检测模型需要仔细设计anchor,常用方法之一是根据特定数据集的统计结果确定anchor的number、scale、ratio等,但这种…

elasticsearch8.3.2搭建部署

Elasticsearch8.3.2搭建部署详细步骤 0.过往文章 ES-6文章: Elasticsearch6.6.0部署、原理和使用介绍: https://blog.csdn.net/wt334502157/article/details/119515730 ES-7文章: Elasticsearch7.6.1部署、原理和使用介绍: https://blog.csdn.net/wt…

堆排序

章节目录:一、相关概述1.1 基本介绍1.2 排序思想二、基本应用2.1 步骤说明2.2 代码示例三、结束语一、相关概述 1.1 基本介绍 堆排序是利用堆这种数据结构而设计的一种排序算法,堆排序是一种选择排序。它的最坏最好平均时间复杂度均为 O(nlogn)&#x…

(深度学习快速入门)第五章第二节:GAN变体

文章目录一:CycleGAN(1)概述(2)双判别器(3)损失函数二:StyleGAN(1)解耦表征学习(2)概述三:DCGAN一:CycleGAN …

4.5.8 Set接口与HashSet

文章目录1.概述2.Set集合的特点3.常用方法4.HashSet4.1 概述4.2 练习: Set相关测试一4.3 练习: Set相关测试二1.概述 Set是一个不包含重复数据的CollectionSet集合中的数据是无序的(因为Set集合没有下标)Set集合中的元素不可以重复 – 常用来给数据去重 2.Set集合的特点 数据…

排序算法学习

文章目录前言一、直接插入排序算法二、折半插入排序算法三、2路插入排序算法四、快速排序算法学习前言 算法是道路生涯的一个巨大阻碍。今日前来解决这其中之一:有关的排序算法,进行实现以及性能分析。 一、直接插入排序算法 插入排序算法实现主要思想…