北京哪家网站开发公司好,html查询网站制作,设计关于北京的网页,网站上的信息可以做证据吗当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介#xff08;已完结#xff09; 1.1 何为 D3.js#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践#xff08;上#xff09;1.3 数据可… 当前内容所在位置可进入专栏查看其他译好的章节内容 第一部分 D3.js 基础知识 第一章 D3.js 简介已完结 1.1 何为 D3.js1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践上1.3 数据可视化最佳实践下1.4 本章小结 第二章 DOM 的操作方法已完结 2.1 第一个 D3 可视化图表2.2 环境准备2.3 用 D3 选中页面元素2.4 向选择集添加元素2.5 用 D3 设置与修改元素属性2.6 用 D3 设置与修改元素样式2.7 本章小结 第三章 数据的处理 ✔️ 3.1 理解数据已完结3.2 准备数据已完结3.3 将数据绑定到 DOM 元素已完结 3.3.1 利用数据给 DOM 属性动态赋值 3.4 让数据适应屏幕已完结 3.4.1 比例尺简介上篇3.4.2 线性比例尺中篇 3.4.2.1 基于 Mocha 测试 D3 线性比例尺DIY 实战 3.4.3 分段比例尺下篇 3.4.3.1 使用 Observable 在线绘制 D3 条形图DIY 实战 3.5 加注图表标签上篇 3.5.1 人物专访Krisztina Szűcs下篇 ✔️ 3.6 本章小结 ✔️ 文章目录 3.5.1 人物专访克里斯蒂娜·苏茨Krisztina Szűcs3.6 本章小结 《D3.js in Action》全新第三版封面 译者按 秉承“他山之石可以攻玉”的创作理念本章同前面两章一样在章节末尾附上了一篇人物专访。本次接受访谈的数据可视化名家是一位来自匈牙利的著名平面设计师 克里斯蒂娜·苏茨她以其在设计和数据可视化方面的独特视角和创新方法闻名于世。接下来就放松放松看看她在学习 D3 的时候都踩过哪些坑又有什么样的经验之谈给到大家—— 3.5.1 人物专访克里斯蒂娜·苏茨Krisztina Szűcs 苏茨Szűcs 是数据可视化领域的知名设计师 1。 【问】能否介绍一下您的背景以及您是如何发现 D3.js 的 【Szűcs】 好的。我并没有编程相关的背景我拿的是平面设计的硕士学位只是在 Flash 盛行的时代接触过一些 ActionScript。起初我用的是 Processing 2 来进行数据可视化的创作但当我在 2012 年上网时发现几乎人人都在尝试这个叫 d3.js 的新鲜事物并且它还非常适合做数据可视化我这才决定试着去学习它的。 【问】那您是怎样学习 D3 的呢其间都遇到过哪些主要困难后来又是怎么克服它们的呢 【Szűcs】 我对学习新的工具库或者语言其实并不很热衷反倒更喜欢只学一门然后一直用下去哈哈。当一个崭新的新事物闪亮登场时我通常会很不高兴因为它貌似成了业内的新标配而我自己也再无法将它拒之门外不得不投入时间和精力去学习了解它了。 因此当 D3.js 出现时每个人都开始谈论起它来。我那会儿也已经知道自己想要创建的是具有交互效果的数据可视化作品所以就做了个决定学习 D3 是我当时必须得拿下的一件事也是唯一的一件。 我记得这比我预想的要困难得多。我按照 Scott Murray 编写的教程《Web 交互式数据可视化》Interactive Data Visualization for the Web 进行学习然后尝试将所学应用到自己的项目中。一开始按照教程的每一步来操作这些知识都很有用可当我最终尝试用自己的数据来应用这些示例时却遭遇了失败——因为大多数情况下我的真实数据集都太复杂了在让这些数据与 D3.js 有机结合的过程中我着实遇到了不小的困难。 此外我从一开始就想制作大型的、与众不同的视觉效果而当时并没有专门的教程所以一时也很难弄明白如何从简单的柱状图过渡到我脑海中那些非常规的复杂设计。我也只能反复练习与尝试直到每个部分都和我想象中的效果一致才肯罢休。 【问】除了 D3 之外您还用过其他可视化工具吗在您当前的数据可视化工作流程中D3 大概处在一个怎样的位置 【Szűcs】 我用过像 Figma 这样的设计工具来设计我的可视化作品外观同时还用过 Excel 和 Python主要是进行一些数据集的处理或者收集方面的工作。 在使用设计工具时我会抱着设计师的心态先不去想那些在实际开发可视化作品时必须要面对的限制条件、或者不得不解决的所有难题。这有助于我避免限制自己的想法从而构建出更好的视觉效果。当视觉效果以静态图片的形式呈现出来后我就会切换到“开发者思维”尝试重新创建我在设计稿中看到的一切。有时我会做一些调整但当我设计的东西在开发时遭遇挑战我会强迫自己先去解决代码方面的难题而不是先给编程一路开绿灯回头再把设计改成简单的东西。我还发现对我来说这是学习 D3.js 的最佳方法。 【佳作赏析动画版体坛赛事详见https://krisztinaszucs.com/】 【图 1 国际泳联 2022 世锦赛男子 200 米仰泳比赛的动画演示截图】 【问】和我们说说您创作的这部作品Animated Sport Results动画版体坛赛事吧。 【Szűcs】 我当时本来一直打算为 2020 年奥运会创作一部可视化作品。国际泳联 2022 年举办的这次世锦赛刚好就是个吸引了很多人关注的一项盛大国际体育赛事并且里面的赛事数据资源也是现成的。我想要是能创建一个与比赛相关的可视化作品那么今后就可以在其他体育赛事比如世锦赛、甚至其他使用类似计分规则的体育项目中多次复用了。 我也希望观众能重温比赛的精彩所以没有一开始就公布最终结果而是慢慢地展示比赛的进程。 我很喜欢 Chartball.com 3 网站和《纽约时报》上类似的可视化设计它们都是我这部作品的灵感来源。 【问】您能再分享分享下面这部作品的创作过程吗 【Szűcs】 刚开始着手这个项目时我就明确了自己要创作的是一部动画版的作品并且主打极简主义风格。作品中要带有一抹红色这让我在脑海中联想到了日本2020 年奥运会就是在东京举办的。 【图 2 Krisztina Szűcs 为其作品《Animated Sport Results》准备的可视化设计草图】 【Szűcs】 然而我并不知道具体要为哪项体育赛事构建可视化项目所以就依次为跳高、跳远、标枪、铁饼、跑步、室内自行车……等不同的体育项目绘制了许多草图最后还为水球项目设计了一版和得分进度相关的可视化效果即上图右下角那幅。不久我就意识到得分进度可视化将会是我复用频率最高的一个设计一旦对外观感到满意我就开始着手写代码了。 当然当时离奥运会还有几个月我还没拿到任何数据所以用了上届奥运会的比赛成绩作为样本数据。此外我还给自己创建了一个以可视化主体效果为中心的用户界面以便在调色板或数据集之间快速切换。 我在奥运会开幕的前几周便做好了准备刚好欧洲足球锦标赛也在那段时间举行。尽管我的可视化作品都是为进球数在十个以上的赛事设计的但还是准备用足球比赛的结果来进行预演。我加载了足球比赛的数据文件即使只有 1 ~ 3 个进球可视化也能正常工作。其间我还做了些改进引入了点球得分相关的可视化效果。 【图 3 根据 2021 年欧洲足球锦标赛的结果而尝试创作的得分情况可视化效果截图】 【Szűcs】 但奥运会开赛后我无法拿到最新的比赛数据因为数据都是以 PDF 格式发布在官方网站上的。这期间由于从 PDF 获取数据是一个相当繁琐的手动过程这是我始料未及的因此只成功制作并发布了两三个动画作品。这次经历也让我明白应该去寻找更好的数据源进行创作。所幸其他赛事比如世锦赛或体育协会的网站可以提供质量更好、也更易获取的数据源。在奥运会结束后我拿到了更好的数据源才创作出了更多这样的动画作品。 【问】您是用 D3 创作的这些动画还是用了其他的什么库或者工具 【Szűcs】 我只用了 D3.js但为了导出图片我还用了录屏软件 ScreenToGif 来录制屏幕。 【问】您的作品风格极具辨识度它们是怎么逐步演变过来的呢在数据可视化领域有没有什么诀窍可以树立像您的作品这样的影响力your voice呢 【Szűcs】 我在大学期间学习的平面设计知识无疑为我打下了坚实的基础但当下的平面设计趋势印刷、品牌设计、包装设计、排版等等也对我的设计风格产生了很大影响。每天我都会浏览平面设计相关的网站来不断捕捉灵感。每当发现非常喜欢的视觉元素或设计图案我就会立即开始思考“这可能是个不错的可视化应用dataviz”。 当然并不是所有的视觉趋势都可以用图表来表示但我在努力弄清怎样借助 D3.js 来重塑某些特定而又不寻常的外观效果的过程中收获了很多东西。 【问】您在学习 D3 和创建个人项目方面有没有什么想与读者朋友们分享的技巧呢 【Szűcs】 要注意将设计和编码阶段分开Separate the design and the coding phase in your process。先设计出最终的外观效果与此同时要主动屏蔽那些让你觉得后续开发阶段实现起来会有多么困难的任何想法。这样才能不断遇到需要解决的新问题从而学到很多新技巧。 如果设计不是你的强项作为日常练习也可以随时去搜寻一些优秀的可视化作品然后试着从头开始重新创作一遍。 3.6 本章小结
在数据可视化中我们主要处理两种数据类型定量型数据和定性型数据。定量型数据是数字信息如体重或温度而定性数据通常是文本信息如国家名称或电影类型。作为 D3 开发人员我们需要处理不同格式的数据集。最常见的是表格格式如 CSV 文件和 JSON 文件中的 JavaScript 对象此外数据也可以按照不同层次、网络结构或者地理信息可视化的特定方式进行组织。D3 提供了将特定格式的数据集加载到项目中的工具函数。例如d3.csv() 和 d3.json() 函数可分别加载 CSV 与 JSON 格式文件。在加载数据时D3 会将其转换为对象数组。加载外部数据集时我们通常需要确保数据尤其是数值型数据格式正确。d3.csv() 和 d3.json() 的回调函数可以逐行访问数据集是执行类型转换和其他数据操作的理想场所。数据加载是一个异步过程这意味着加载时浏览器会继续读取与执行脚本 在操作数据前必须等待数据完成加载。为此可以使用 JavaScript 期约接口中的 then() 方法then() 方法的回调函数可在加载结束后访问整个数据集。然后可以在构建可视化效果前进一步测量和重构数据。 数据绑定模式产生的 SVG 元素数量与数据单个数据点或者表格数据集中的行数量相同 数据绑定模式由三个链式调用的方法组成selectAll()、data()、join()使用数据绑定模式生成 SVG 元素后就能通过内联函数译注inline functions即访问器函数 accessor访问与每个元素绑定的数据项。绑定到元素上的数据也会传递给它的后代元素。 D3 比例尺能将数据集中的值转换为用于指定 SVG 元素样式的各类属性值如尺寸大小、位置及颜色 根据输入输出值是离散型还是连续型可以将 D3 比例尺分为四个系列线性比例尺从连续型定义域获取输入并从连续型值域中返回一个输出值。其输出与输入值成正比。线性比例尺广泛应用于 D3 项目例如计算条形图中矩形元素的长度分段比例尺从离散型定义域中获取输入并从连续型值域中返回一个输出值。这类比例尺对于在条形图的可用空间内排布各矩形元素特别好用。 对 SVG 分组元素进行平移translation将影响其内部所有的后代元素。标签由 SVG 文本元素text构建。每个文本元素必须使用 x 和 y 属性单独定位还可以使用 text-anchor 属性attribute设置文本右对齐。 更多专访人物信息可参阅 Krisztina Szűcs 的个人网站https://krisztinaszucs.com/ ↩︎ Processing 是一个基于 Java 的开源编程语言和环境旨在通过简化代码来帮助艺术家和设计师创造视觉艺术和交互作品。更多详情详见 Processing 官方https://processing.org/ ↩︎ Chartball 是一个专注于体育统计数据可视化的知名网站提供直观的图表和分析工具尤其是篮球和棒球相关的赛事数据。详见网站首页https://www.chartball.com/ ↩︎
