当前位置: 首页 > news >正文

【D3.js in Action 3 精译】1.3 D3 视角下的数据可视化最佳实践(上)

当前内容所在位置

  • 第一部分 D3.js 基础知识
    • 第一章 D3.js 简介
      • 1.1 何为 D3.js?
      • 1.2 D3 生态系统——入门须知
        • 1.2.1 HTML 与 DOM
        • 1.2.2 SVG - 可缩放矢量图形
        • 1.2.3 Canvas 与 WebGL
        • 1.2.4 CSS
        • 1.2.5 JavaScript
        • 1.2.6 Node 与 JavaScript 框架
        • 1.2.7 Observable 记事本
      • 1.3 数据可视化最佳实践

1.3 数据可视化最佳实践

数据可视化从未像今天这样受大众欢迎。内容详实的地图、精心设计的图表、以及系统和数据集的复杂呈现形式不仅仅出现在工作场所,也在我们的娱乐和日常生活中频频露脸。随着数据可视化的日渐普及,各种数据可视化工具库也大量涌现;同时,聚焦提升可读性和理解力的美学规则也在不断丰富和完善。无论是普通大众、专家学者还是决策人员,这些可视化的受众群体已经日渐熟悉了曾一度被认为是极其抽象与复杂的数据趋势呈现。这使得 D3 等工具库不仅广受数据科学家们的青睐,也赢得了记者、艺术家、学者、IT 专业人士甚至数据可视化爱好者们的一致好评。

数据可视化如此丰富的配置选项似乎让人应接不暇,再加上这些流图(streamgraph)、树状图(treemap)或直方图(histogram)的数据集相对容易修改,往往会让人误以为信息可视化更看重设计风格而非数据的实质性内容。幸运的是,业内对于不同的数据类型应该使用哪些图表和方法已经有了十分明确的规定。本书并不打算涵盖数据可视化的所有最佳实践,但会重点介绍其中的部分内容。虽然开发人员使用 D3 是为了给色彩和布局的使用来一次技术革新,但大多数人还是希望这些创建出的数据可视化效果能给实际问题提供实实在在的技术支撑。

在构建您的第一个可视化项目时,如果遇到疑问,记得化繁就简——通常情况下,直方图的展示效果往往比小提琴图更好;直接展示分层网络布局(如树枝图)也比力导向布局的效果更佳。视觉效果越复杂的数据呈现方式往往越能激发观众的兴奋点,但稍有不慎也会导致其过分关注图形的美学特质而非数据本身。打造炫酷而惊艳众人的可视化效果本无可厚非;但也应时刻谨记:任何数据可视化作品的首要目标都是讲好某个故事。询问周围的人们是否理解了你的可视化用意,以及他们是怎样解读的,这是至关重要的一步。需要给他们解释吗?他们能从与产品交互中得出什么结论?故事讲完了吗?

不过,要正确部署信息可视化项目,您应该有所取舍,要对数据和受众有充分的了解。D3 赋予开发者极大的灵活性,但正所谓“能力越大,责任越大”。知道哪些图表更适合表现哪些类型的数据固然是好事,但更重要的是要牢记,如果不从知情的角度精心设计,数据可视化很可能也会带来误导信息。如果要自行设计某款可视化图表,那么充分了解数据可视化的最佳实践则是构建过程中必不可少的一环。最好的学习方法就是查阅知名设计师和信息可视化从业者的优秀作品。虽然所有的相关著作都在探讨这些话题,但其中有几本书我们认为很有参考价值,可以帮助您掌握这些基础知识。以下书目绝不是学习数据可视化的唯一教材,但可以作为很好的切入点:

  • Better Data Visualizations》(Columbia University Press,2021 年),作者:Jonathan Schwabish(中译本《更好的数据可视化指南》,电子工业出版社)
  • The Functional Art》(New Riders,2013 年)《The Truthful Art》(New Riders,2016 年) 以及《How Charts Lie》(W.W. Norton,2020 年),作者:Alberto Cairo(第一本中译本《不只是美:信息图表设计原理与经典案例》,第三本中译本《数据可视化陷阱》,作者:阿尔贝托·开罗)
  • Data Visualisation A Handbook for Data Driven Design》(SAGE,2019 年),作者:Andy Kirk
  • The Visual Display of Quantitative Information Envisioning Information》(Graphics Press,2001 年),作者:Edward Tufte
  • Designing for Information》(Rockport,2013 年),作者:Isabel Meirelles
  • Pattern Recognition》(已发表论文,2008 年,罗德岛设计学院),作者:Christian Swinehart
  • Visualization Analysis and Design》(A K Peters,2014 年),作者:Tamara Munzner

在阅读数据可视化方面的文献资料时,有一点需要牢记:这些文献通常侧重于静态图表。有了 D3,您就可以制作出交互式的动态可视化效果。设计一些交互不仅能使可视化作品可读性更强,还能显著提高其吸引力。即使只有几个鼠标事件,那些感觉自己是在主动探索而非单纯阅读的用户也可能会发现可视化的内容比阅读静态内容更引人注目、也更令人难忘。但增加这样的复杂性需要对用户体验有所了解。本书将在第 7 章中予以详细介绍。

第一章正文内容到这里就全部结束了!虽然还没能用上 D3,但您现在也应该掌握了入门所需的全部基础知识。如果仍不确定该在可视化项目中使用哪种 SVG 元素,或者对于 JavaScript 如何操作数据还不太熟悉,请继续阅读并回顾本章相关内容。从下一章开始,我们将着手创建 D3 可视化项目。

译注
本篇 1.3 小节正文部分虽然到此结束,但随后是一篇作者与可视化设计师及开发者做的人物专访记录,篇幅较长,故此单独整理到下一篇,敬请期待。
另外,本小节作者提到的很多可视化经典著作很遗憾都没有中译本,有需要的读者可以根据出版社信息及发行年份,参阅相应的英文原版。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 数据结构day6链式队列
  • 多位冒充者曝光!全域外卖官方到底是谁?
  • 谷粒商城实战-25-分布式组件-SpringCloud Alibaba-Nacos配置中心-加载多配置集
  • 华盈生物-PhenoCycler-超多靶标揭示组织空间位置和互作关系
  • centos磁盘空间满了-问题解决
  • 流程管理与商务智能解决方案(62页PPT)
  • 编程社团研究内容怎么写
  • 原生android的内存性能提升方面的测试和优化方案大致设计
  • main.cpp程序执行流程图
  • STM32空闲中断处理串口接受数据
  • springboot企业人力资源管理系统-计算机毕业设计源码29005
  • 【C++课程学习】:new和delete为什么要配套使用,new,delete和malloc,free的比较
  • Django之登录权限系统
  • 【计算机毕业设计】基于Springboot的B2B平台医疗病历交互系统【源码+lw+部署文档】
  • NetCore Grpc拦截
  • Angular2开发踩坑系列-生产环境编译
  • CNN 在图像分割中的简史:从 R-CNN 到 Mask R-CNN
  • Java方法详解
  • Java-详解HashMap
  • nodejs:开发并发布一个nodejs包
  • python docx文档转html页面
  • TiDB 源码阅读系列文章(十)Chunk 和执行框架简介
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • V4L2视频输入框架概述
  • 翻译:Hystrix - How To Use
  • 警报:线上事故之CountDownLatch的威力
  • 如何合理的规划jvm性能调优
  • 深度学习在携程攻略社区的应用
  • 数据仓库的几种建模方法
  • 推荐一款sublime text 3 支持JSX和es201x 代码格式化的插件
  • 译自由幺半群
  • ​十个常见的 Python 脚本 (详细介绍 + 代码举例)
  • ​学习笔记——动态路由——IS-IS中间系统到中间系统(报文/TLV)​
  • # wps必须要登录激活才能使用吗?
  • # 睡眠3秒_床上这样睡觉的人,睡眠质量多半不好
  • #if和#ifdef区别
  • #设计模式#4.6 Flyweight(享元) 对象结构型模式
  • (01)ORB-SLAM2源码无死角解析-(66) BA优化(g2o)→闭环线程:Optimizer::GlobalBundleAdjustemnt→全局优化
  • (20)目标检测算法之YOLOv5计算预选框、详解anchor计算
  • (35)远程识别(又称无人机识别)(二)
  • (Note)C++中的继承方式
  • (附源码)ssm考生评分系统 毕业设计 071114
  • (十一)手动添加用户和文件的特殊权限
  • (一)SpringBoot3---尚硅谷总结
  • (已解决)什么是vue导航守卫
  • (转)创业家杂志:UCWEB天使第一步
  • .bat批处理(一):@echo off
  • .NET BackgroundWorker
  • .NET Core使用NPOI导出复杂,美观的Excel详解
  • .NET中的Exception处理(C#)
  • @private @protected @public
  • [000-01-011].第2节:持久层方案的对比
  • [acwing周赛复盘] 第 94 场周赛20230311
  • [Android Pro] Notification的使用
  • [BZOJ4010]菜肴制作