深圳做网站龙华新科,温州市网络科技有限公司,如何打破违法网站,外贸建站seo优化当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介 ✔️ 1.1 何为 D3.js#xff1f;1.2 D3 生态系统——入门须知 1.2.1 HTML 与 DOM1.2.2 SVG - 可缩放矢量图形1.2.3 Canvas 与 WebGL1.2.4 CSS1.2.5 JavaScript1.2.6 Node 与 JavaScript 框架1.2.7 Observable 记事… 当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介 ✔️ 1.1 何为 D3.js1.2 D3 生态系统——入门须知 1.2.1 HTML 与 DOM1.2.2 SVG - 可缩放矢量图形1.2.3 Canvas 与 WebGL1.2.4 CSS1.2.5 JavaScript1.2.6 Node 与 JavaScript 框架1.2.7 Observable 记事本 1.3 数据可视化最佳实践上1.3 数据可视化最佳实践下 ✔️1.4 本章小结 ✔️ 第二章 DOM 的操作方法精译中 ⏳ 上接第 1.3 小节正文部分……从下一章开始我们将着手创建 D3 可视化项目。 与 Hesham Eissa、Lindsey Poulter 的访谈记录 Eissa 和 Poulter 都是数据可视化领域的设计师兼开发者。 【主持人】你们在一篇博文中写道在开展 Ben Jerry’s 项目之前你们都有在 Tableau 中设计数据可视化的经验。是什么让你们想学习 D3 而不是其他数据可视化工具详见 https://heshameissa.com/blog/learn-d3/ 【嘉宾】 我们都很喜欢从很多优秀的可视化作品中汲取灵感像 The Pudding 官网、Nadieh Bremer荷兰著名数据可视化设计师、Information is Beautiful Awards权威数据可视化设计奖项2012 年由英国设计师 David McCandless 创立每年评选和表彰在数据可视化领域取得杰出成就的作品和设计师以及各种新闻媒体制作的数据新闻作品。我们也注意到在所有这些备受瞩目的作品背后D3 是它们共有的技术基础。 【嘉宾】 此外我们俩都热衷于寻找创造性的方式来展示数据不想被特定软件所提供的可视化功能束缚住手脚。利用 D3 和基于 Web 的可视化设计方案我们觉得可以创作出任何我们想要的作品来唯一能限制自己的恐怕就是自己的能力水平了。 【主持人】还是这篇博文我很喜欢你们安排整个学习过程的这部分内容因为你们之前没有前端开发的经验并且能够静下心来一步一步地去做。在这个学习过程中你们觉得最难的是什么最享受的又是什么呢 【嘉宾】 学习的过程中最困难的地方是有太多不同的知识点需要学习和理解不仅如此前端开发领域一直在飞速发展我们还必须紧跟步伐不断适应不同版本的示例有时甚至会猛地跳到下一个主题——这也是一种困难因为当时缺乏充分消化吸收每个知识点的耐心。 【嘉宾】 最令人愉快的当属我们终于可以学以致用、将所学知识直接应用于数据可视化的那一刻。看到页面最终渲染出了第一个 SVG 图形那一刻我们欣喜异常。在深入研究不同 D3 模块的过程中我们乐此不疲地探索着每个模块提供的强大功能以期在未来大放异彩。像 d3-force 这样极具灵活性和适用性的 D3 模块真正拓展了我们对数据可视化的思考方式。 【主持人】遇到问题你们都会去哪儿寻求帮助呢 【嘉宾】 与他人并肩学习的最大好处就在于有一个可以提问的固定搭档。如果我们不理解某个概念就会互相询问。这样做要么再次印证我们都有困惑需要花更多时间去研究要么让一个人有机会以完全不同的方式进行阐释。 【嘉宾】 除了相互交流之外我们还花了不少精力去了解该领域其他人的代码看看他们是如何落地某个特定概念的。数据可视化社区最棒的一点就是乐于分享。迈克·博斯托克Mike Bostock在 Observable 以及更大的 Observable 社区上提供的 D3 示例往往是我们的救命稻草。通常我们在创建一个新图表时首先要看的就是他的示例——99% 的情况下他都能提供我们需要的内容。The Pudding 网站和 Nadieh Bremer 在各自的 GitHub 账号上都有大量的源码可供参考所以我们经常会问“他们是如何实现这样的过渡效果的”然后找到真正能用的示例。有趣的是有个周末我们甚至还买了这本《D3.js 实战》的第一版仅仅是因为当时对某个概念感到困惑而网上又找不到任何答案。 【嘉宾】 不过也必须承认有几次我们真的陷入了困境。一方面是我们的词汇量还不够丰富无法清楚准确地描述需求进而上网搜到相关内容另一方面则是因为我们总想找到一个很具体的解决方案。我们并不害怕连续花上几天甚至几周的时间去尝试各种方法、做各种实验。但由于没能找到全面了解 Web 数据可视化知识体系的捷径我们最终不得不潜心积累、认真领悟而不是简单地复制粘贴。 【主持人】相比与其他数据可视化工具你们对于 D3.js 有什么特别喜欢、或特别不喜欢的地方吗 【嘉宾】 D3 需要更多时间来学习如何使用。其他工具可能仅需单击几次鼠标就能创建一个柱状图而 D3 可能需要 50 多行代码才能实现。不过这也正是我们最喜欢 D3 的地方——你可以 掌控一切 项目精选《本杰瑞冰淇淋的内幕》详见 https://benjerry.heshlindsdataviz.com/ 可视化作品《本杰瑞冰淇淋的 98 种口味》 【主持人】你们共同参与了《Ben Jerry’s》系列作品的创作具体分工是怎样的是一个人专注于设计、另一个人专注于开发还是两个人共同从事这两方面的工作 【嘉宾】 我们采取的估计是一种非传统的合作模式。鉴于当时正处于全球大流行病的封锁期高峰我们反倒有很多时间可供消磨。我们的做法不是分工合作而是从头到尾学习和关注整个过程。我们会一起制作故事情节图storyboard、一起探索数据然后设定一个目标。我们会说让我们构建一个和弦图来展示冰淇淋的新品组合。一旦我们都完成了各自的工作就会比较各自的代码看看谁的方法更好然后合并到一起再开始下一个任务。一旦我们开始对自己的能力有信心大概完成一半的时候就会开始分工合作。我们并没有将工作严格地划分为某人固定负责某项任务只是根据需要互相配合共同完成所有必要的工作。 【主持人】这个项目同时用到了 SVG 元素和 Canvas 画布。一些作品是基于 SVG 的比如《本杰瑞冰淇淋完整口味指南》而另一些主要基于 Canvas比如像《本杰瑞冰淇淋的 98 种口味》。甚至在和弦图作品《本杰瑞 79 种加料》中结合了二者来进行创作。你们在 SVG 和 Canvas 的取舍上是如何考量的呢是从一开始就考虑到这样的结构还是说在实施的过程中出于性能考虑选择了 Canvas 画布呢 【嘉宾】 我们从一开始就没有考虑过这样的结构。老实讲起初我们可能连 Canvas 是什么都不清楚。在确定了要创作的可视化内容后我们才开始着手添加过渡效果但很快就发现效果非常糟糕。这促使我们开始研究不同的性能参数并最终选定了 Canvas。 和弦图可视化作品《本杰瑞冰淇淋的 79 种加料》 【主持人】二位已经成功地让整个项目在移动端运行良好包括丰富的径向可视化效果。这期间是否不得不做出必要的妥协比如调整原始想法以适应较小的触摸屏之类在基于 Web 的可视化方面你们更倾向于移动端优先还是桌面端优先呢 【嘉宾】 到了后期分而治之阶段我们最后要考虑的问题之一就是移动端。根据以往的经验把它留到最后并不是最佳方案因为有时候不得不做一些让步。我们不仅要搞清楚需要改变什么还要弄清楚怎样去改变。借助滚动场景叙事即 scrollytelling详见 http://mng.bz/g7MV我们成功解决了移动端的问题一方面可以让文字在可视化效果上方滚动另一方面也可以通过突出重要数据的方式来取代之前的交互逻辑。 【嘉宾】 桌面优先的策略固然为可视化提供了更多的施展空间可以进行更复杂的交互和设计但移动端会驱使你提炼出每个可视化效果的核心目的这种做法在试图让整体表达更清楚明了时可能会有帮助。 【主持人】创作这个作品大概花了多长时间当中有没有哪个环节是相对于其他步骤而言耗费的时间更久、或者难度更大的 【嘉宾】 由于这是我们第一个真正意义上的 D3 可视化项目需要不断学习来确保一切尽善尽美每个部分都要重做很多次因此在每天投入工作的基础上我们大概花了四个月的时间来完成整个创作过程。最终不得不给我们自己设定一个最后期限因为我们知道如果不这样做我们会继续重做、完善并发现问题。 【嘉宾】 至于项目中难度更大、耗时更久的部分那一定是与前端开发关联更多的内容涉及可视化方面的反而不多。我们已经完全按照自己的想法设计了所有的可视化内容和叙事场景但后来才发现想让这些内容在所有设备和浏览器上都能正常运行并且表现良好还需要花费更多的时间和精力才能办到。 可视化作品《本杰瑞冰淇淋口味大全》 【主持人】有没有规划过在不久的将来对 D3 的某个具体功能或模块进行探索或者再深挖一下 【嘉宾】 当然有一些知识我们还处于“复制粘贴”的初期阶段没能完全理解其工作原理这其中就包括和弦图、桑基图和地理模块等等。此外掌握更多的数学函数往往可以进一步帮助我们充分利用 D3 提供的强大功能。 1.4 本章小结 当您想在数据可视化方面拥有完全的创意自由与技术自由时D3 就是您的首选工具。 D3 应用程序的样式和服务类似于传统网络内容。 我们从不单独使用 D3而是将其作为技术和工具生态系统的一部分并将其结合起来创建丰富的 Web 界面包括HTML、CSS、JavaScript、SVG、Canvas 以及 React 或 Svelte 等框架。 在构建数据可视化时最常使用的 SVG 图形有直线lines、矩形rectangles、圆circles、椭圆ellipses、路径paths及文本text。 使用 D3 需要对这些几何基元及其主要属性有基本的了解。 在使用 D3 之前应该熟悉 JavaScript 的两个核心知识——方法的链式调用和对象的操作 方法的链式调用是在同一对象上相继调用多个方法的一种编程模式pattern。在 D3 中数据集通常是以对象数组的形式出现的。JavaScript 提供了多种方法来访问和操作其中的数据。 作为 D3 开发人员扎实了解数据可视化的最佳实践至关重要。本章提到的多种资源都可以助您开启学习之旅。
第一章完
