数据可视化
文章平均质量分 85
分享可视化领域的相关文献与技术
编程轨迹_
修罗社区 | 掘金优秀创作者 | 清华大学出版社签约作者 | Web3 开发者 | CSDN 银牌讲师 | 蓝桥云课2021年度人气作者Top2 | 工信部蓝桥认证命题人 | CSDN 博客专家 | 腾讯云2022 年度优秀作者 | 阿里云专家博主 | 华为云享专家 | 著作:《前端面试复习笔记》|《Web3 开发系列教程》|《ThreeJS 在网页中创建动画》|《ElementUI 详解与实战》|《PWA 渐进式Web应用开发》
展开
-
数据可视化大屏设计经验分享
说起数据可视化设计,如今绝对是热门的设计之一,而真正懂数据可视化设计的设计师却不多,随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。很多UI设计师突然会接到公司数据可视化设计的需求,如果不了解数据可视化的设计,那么肯定是一头雾水,不知从何入手。什么是数据可视化?数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。简而言之就是把枯燥无味的数据,通过图形化设计表现,达到一种......原创 2019-05-28 07:50:38 · 1477 阅读 · 0 评论 -
【ThreeJs】(2)照相机 | 正交投影照相机 | 透视投影照相机
1、照相机:使用Three.js创建的场景是三维的,但是通常情况下显示器是二维的,所以,三维场景如何显示在二维屏幕上呢?照相机:定义了三维空间到二维屏幕的投影方式。不同的投影方式,照相机又分为正交投影照相机与透视投影照相机。1.1 正交投影与透视投影透视投影:使用透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果正交投影:使用正交投影照相机获得的结果就像我......原创 2019-11-16 16:58:45 · 1040 阅读 · 0 评论 -
【ThreeJs】(1)四大组件:场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图
在Threejs中场景就只有一种,用THREE.Scene来表示。场景是所有物体的容器,如果要显示一个苹果,就需要将苹果对象加入场景中原创 2019-11-09 11:17:43 · 924 阅读 · 0 评论 -
【阅读】数据之美,一本书学会可视化设计
这里把《数据之美,一本书学会可视化设计》的摘抄分享下吧,图示上有不清晰的地方还请包容。你真的理解数据了吗? 1.对原始数据了解得越多,打造的基础就越坚实,也就越可能制作成令人信服的数据图表。2.好的可视化设计,需要具备统计学和设计方面的知识。3.可视化创作是一个迭代的过程,不同的数据集迭代周期不同。4.由于数据代表了一定的人物、地点和事物,所以除了真实的数字之外,还有重要...原创 2017-09-20 20:54:48 · 2714 阅读 · 0 评论 -
【D3使用教程】(7) 结语 | 附加学习网站
最后和大家分享一些学习网站,平常在使用D3的时候,多逛一些,或者遇到问题的时候去问,都会在这一过程中帮助你成长起来。所以,虽然在这份1-6的D3教程中,我们主要讲解的是D3常用的操作,对于一些具体的方面,没有过多提及,需要大家在后面的学习中自我学习。希望你会有所收获! 同时欢迎留言交流!d3js.orggithub.com/mbostock/d3/wiki/Gallery (...原创 2018-03-08 17:53:53 · 577 阅读 · 0 评论 -
【D3使用教程】(6) 交互操作之事件监听
事件监听在之前的文章中写到,为了让图表具有交互能力,我们必须针对一些事件来编写代码,以便监听某些DOM元素发生的这些事件。D3中,on()方法对于绑定D3元素集非常方便。通常情况下,我们会一次性为多个元素绑定事件监听器,所要改变的只是将select()换成选择多个元素的selectAll(),再把选择的元素集交给on()即可。这里我们以柱状图为例,svg.selectAll...原创 2018-03-08 15:45:55 · 5883 阅读 · 2 评论 -
【D3使用教程】(5) 动态更新与过渡动画
数据总是在变化的,那么我们要如何将变化的数据反映到图表上呢? 在D3中,这些变化通过更新进行处理。而过渡通过使用动画用于处理视觉上的展示。(1)更新首先,我们定义一个序数比例尺: let xScale = d3.scale.ordinal()//定义一个序数比例尺,用于处理序数注:序数是一些有固定顺序的一些类别,如:新生、大二、大三、毕业班B等、A等、AA等非常不喜欢...原创 2018-03-07 14:30:01 · 4994 阅读 · 0 评论 -
【D3使用教程】(4) 添加数轴
(1)设置数轴D3的数轴实际商是由程序员自己来定义参数的函数。调用数轴函数,会生成数轴相关的可见元素,包括轴线、标签和刻度 。使用d3.svg.axis()能创建通用的数轴函数: var xAxis = d3.svg.axis();但是你要注意,在使用之前你要告诉这个函数,是基于什么比例尺工作的。例如序数比例尺。同时,你可以设置标签相对数轴显示的位置,默认出现在轴线的下方。通常而...原创 2018-01-27 20:52:41 · 1558 阅读 · 0 评论 -
【D3使用教程】(3) 添加比例尺
“比例尺是一组把输入或映射为输出范围的函数”。—–Mike Bostock一般而言,任意数据集中的值不可能刚好与图表中的像素尺度一一对应。而D3中,比例尺要做的就是将数据值映射为可视图形中的可替代值得手段。D3中,比例尺是一种函数,带参数。你可以定义任意多个比例尺函数。本节中,我们将讨论线性比例尺。当然,还有序数、对数、平方根比例尺等等,但这里我们不做讨论,大家可以以线性比例尺...原创 2017-12-27 16:31:06 · 1991 阅读 · 0 评论 -
【D3使用教程】(2) 绘制柱状图与散点图
(1)绘制一幅柱状图 严格来说,柱形图是指矩形沿垂直方向度量的图形;条形图,是沿水平方向度量的图形。多数时候我们常常没有区分这两个概念。首先我们来尝试绘制一幅柱状图。注:开始之前,先在页面中引入jquery和d3.js文件。 <style> div.bar { display: inline-block; ...原创 2017-12-23 13:22:21 · 3195 阅读 · 0 评论 -
【D3使用教程】(1) 开始 | 加载数据
一、数据(1)引言在可视化编程的语境下,数据保存在数字化文件中,一般是文本格式或二进制格式。当然,并不是只有文本内容才算数据,那些表示图像、音频、视频、数据库、流、模型、文档等一切比特和字节也是数据。对于D3和浏览器可视化的角度来说,我们只讨论文本数据。即那些可以表现为数值或字符串的东西。如果你可以把数据保存到.txt纯文本文件,或者.csv逗号分隔值文件,或者.json文件,那么...原创 2017-12-21 11:47:43 · 3410 阅读 · 0 评论 -
【数据可视化】数据之美---揭密优雅的数据解决方案背后的故事
有时抛弃一些数据会使可视化效果更美丽。在寻找设备方面,第一,如果要为数据可视化寻找设备,那么要找遍每个地方。有很多令人兴奋的传感技术被开发出来但却从来未被使用过。如果你准备启动一个可视化项目,首先在贸易展览上或你所在地的大学做一些在线调研。确认是否有新的、你未曾考虑过的方式可以捕捉数据。不同的设备可能会给你的工作增加新的主题或显示出你之前没有看到的数据。总之,尽力去寻找可以给人震撼的可视化技术...原创 2017-11-30 16:37:35 · 732 阅读 · 0 评论 -
【数据可视化】数据可视化之美——用专家的眼光洞察数据
概述数据分析中一个渐趋普遍的趋势是将相互关联的数据作为网络进行分析。网络分析不仅仅是查看数据的属性,还会关注数据和最终产出之间的结构关联。我们的重点是理解这些网络。网络总是难以进行可视化和导航,而且最大的问题是很难找到与任务相关的模式。分析师的角度网络分析师注重研究不同因素之间的关系而非具体因素; 这些因素可以解释社会、文化和经济现象,但它们之间如何联系和它们本身一样重要。在出现......原创 2017-10-16 15:28:27 · 3340 阅读 · 0 评论