数据可视化
myzbx 2025-04-29 02:34 4 浏览
本篇文章,是【数据库、数据业务价值、大数据设计/架构/技术/工程】系列的第八篇。喜欢请关注作者,并点赞收藏。
开篇先分享一句我非常喜欢的话
图片最伟大的价值在于它迫使我们注意到从未预见到的信息。
01 定义
数据:
参考之前【数据业务价值】中的各项定义,我的总结是:数据是信息的载体,是人类对信息的符号化,数据的形式多种多样,包括数字、文字、图像、声音等。数据可以快速复制和传播,并能够还原信息。
可视化:
可视化是一种媒介。马歇尔·麦克卢汉(M. McLuhan)在《理解媒介 论人的延伸》中把媒介分成冷媒介和热媒介。冷媒介是模糊的,热媒介是清晰的。结合这两种说法,可视化可以是冷媒介,也可以是热媒介。我理解一个简单的数据快照,可以看成是冷媒介。一个通过巧妙形式而凸显数据要传达的主题的图片,可以看成是热媒介,比如甘特图、玫瑰图、桑吉图、热力图等。
引申阅读:关于冷媒介和热媒介的适用场景和过热媒介的转换,感兴趣的读者可以阅读马歇尔·麦克卢汉(M. McLuhan)的《理解媒介 论人的延伸》。
数据可视化:
用标尺、颜色、位置、形状等各种视觉暗示的组合来表现数据,最常用的可视化手段是图片,这也是我们今天讨论的主题。
02 可视化原则
对比
颜色、空间、指示信息、背景,是通常使用的对比方式。
多维
维度即数据的分类依据,多维即多分类。
目标
可选项,业务指标如营业额KPI是通常的目标值。
可视化中增加目标的目的是突出当前与目标的偏离程度。
基准
单位是通常的基准,比如是重量还是速度。
03 可视化组件
视觉暗示
包括位置、长度、角度、方向、面积和体积、颜色、位置、形状、大小等视觉敏感的元素。
坐标系
分类坐标系,如条形图、饼图、马赛克图、气泡图、热力图。
时序坐标系,如XY两个变量的马赛克图、时序图、折线图、散点图、点线图、径向分布图、时序星状图、日历。
地理坐标系,基于地图的图表,如航线图、等高线图、失业率图。
极坐标系,以内圆为中心的对比图表,如南丁格尔玫瑰图。
标尺
赋予点、线、面等计算的计量单位。
背景信息
赋予图表发生的大背景信息,可以是图,也可以是文字或者音乐。
04 可视化工具
可视化平台和工具
- Tableau:一个强大的商业智能和数据可视化工具,支持交互式图表、仪表盘和地图。
- Power BI:Microsoft的商业智能工具,支持数据分析和交互式可视化。
- QlikView:一个商业智能平台,支持数据可视化、分析和报告。
- Looker:一个数据分析和可视化平台,适用于商业智能和数据探索。
- Kibana:一个开源的数据可视化工具,主要用于与Elasticsearch结合进行日志和时间序列数据的分析。
- Grafana:一个开源的平台,适用于监控和可视化时间序列数据,支持多种数据源。
- Superset:一个开源的数据可视化平台,由Airbnb开发,支持多种数据源和交互式仪表盘。
开源可视化库
- D3.js:一个强大的JavaScript库,用于创建动态和交互式数据可视化,支持SVG、Canvas和HTML。
- Chart.js:一个简单而灵活的JavaScript图表库,支持多种类型的图表。
- Plotly.js:一个基于D3.js和WebGL的开源库,用于创建交互式图表和仪表盘。
- ECharts:一个由百度开源的强大数据可视化库,支持丰富的图表类型和交互。
- Vega:一个用于创建、共享和探索数据可视化的工具集,支持声明性可视化规范。
- Matplotlib:一个基础的2D绘图库,是许多其他可视化库的基础。
- Seaborn:基于Matplotlib的高级库,提供了更高级的接口用于绘制统计图表。
- Plotly:一个用于交互式图表的开源库,支持在线和离线模式。
- Bokeh:一个用于创建交互式图表和数据应用的库,支持Web端显示。
- Altair:一个基于Vega和Vega-Lite的声明性统计可视化库,提供简洁的API。
- Pandas(用于数据处理和简单可视化):一个强大的数据处理和分析库,提供了基本的绘图功能(通过Matplotlib)。
- TensorBoard:TensorFlow的可视化工具,用于跟踪和可视化机器学习实验。
- Yellowbrick:一个用于机器学习可视化的库,与Scikit-learn无缝集成。
- SHAP(SHapley Additive exPlanations):用于解释机器学习模型输出的库,基于Shapley值。
- LIME(Local Interpretable Model-agnostic Explanations):用于解释机器学习模型的库,通过生成局部可解释模型来解释单个预测。
本篇文章,是【数据库、数据业务价值、大数据设计/架构/技术/工程】系列的第八篇。喜欢关注作者,并点赞收藏。
相关推荐
- 以文本的方式绘制简单的SVG流程图——flowchart.js
-
介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的,因此可以重复使用节点,并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...
- 全国首套构网型SVG在木垒投运
-
中新网新疆新闻1月5日电(翟文辉)12月29日,全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网,本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...
- Popmotion – 小巧,灵活的 JS 运动引擎
-
Popmotion是一个只有12KB的JavaScript运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...
- 零基础教你学前端——43、初识SVG
-
解决网站图标问题的最佳方案——SVG!SVG是一种基于XML语法的图像格式,英文全称是:ScalableVectorGraphics,即可缩放矢量图,是W3C的一项建议。我们用手机拍摄...
- 2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF
-
2.3文件格式全解:PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则,决定了:-信息保留程度(图层/透明度/动画)-压缩方式与画质损失-跨平台兼容性-...
- vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!
-
前言:Vite6.3.2来了!2025年4月18日,Vite团队正式发布了v6.3.2版本!虽然是一个小版本更新,但修复了多个关键问题,并带来了性能优化和稳定性提升,让开发体验更丝滑!如果你还...
- 一篇文章带你了解SVG 蒙版(Mask)
-
SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析:本示例使用ID=mask1定义...
- SVG实现的流程图绘制
-
一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作(选择、自动插入、开始结束、普通活动、子活动、块活动、路...
- 解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享
-
前言当我们访问网站时,如果访问到不存在的路径时,会出现404错误。为了避免给访问者带来不良体验,设计网站时通常会在页面上展示“404页面不存在”的提示,并引导用户进行返回首页等操作。因此在建立网...
- 交互设计师做好动画后,提交给开发的文档有哪些?
-
谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...
- Motion for Vue:为Vue量身定制的强大动画库
-
在前端开发中,动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库,但真正能做到高性能、易用且功能丰富的并不多。今天,我们要介绍的是MotionforVue(motion-v),...
- Web开发人员的福音!8个实用的SVG工具
-
SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...
- 一键画波浪线、一键多图片调色?这3个网站好玩到停不下来
-
作为一个经常收集网站的PPT设计师,无意中发现了一些超级有趣的网站。只要你动手能力足够强,就一定会利用它做出创意作品。不说废话,直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...
- vite 6.2.5 更新速递:告别SVG路径Bug,构建效率再提升!
-
Vite6.2.5更新公告2025年4月3日,Vite团队正式发布了Vite6.2.5版本!此次更新虽然是一个小版本迭代,但修复了一个关键问题,涉及SVG文件路径检查,对前端开发者尤...
- DrawSVG – SVG 路径动画 jQuery 插件
-
jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画,用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 基础教程 (29)
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)