【D3.js in Action 3 精译_028】3.4 小节 DIY 实战:使用 Observable 在线绘制 D3 条形图

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 第一部分 D3.js 基础知识
    • 第一章 D3.js 简介(已完结)
      • 1.1 何为 D3.js?
      • 1.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.2.2 使用 Observable 在线绘制 D3 条形图(DIY 实战) ✔️
        • 3.4.3 分段比例尺(下篇)
      • 3.5 加注图表标签(待翻译 ⏳)
      • 3.6 本章小结

文章目录

  • [3.4.2.2 使用 Observable 在线绘制 D3 条形图(DIY实战)](#3.4.2.2 使用 Observable 在线绘制 D3 条形图(DIY实战))
    • [1 需求描述](#1 需求描述)
    • [2 操作步骤](#2 操作步骤)
      • [2.1 加载数据](#2.1 加载数据)
      • [2.2 数据绑定](#2.2 数据绑定)
      • [2.3 调整比例](#2.3 调整比例)
    • [3 小结 & 复盘](#3 小结 & 复盘)

《D3.js in Action》全新第三版封面

3.4.2.2 使用 Observable 在线绘制 D3 条形图(DIY实战)

写在前面

作为本书第三章的有益补充,一名合格的数据可视化从业者应该时刻关注业界最新前沿趋势、主流观点、最佳实践等等。这当中就必然包括 Observable 网站资源的合理利用。前面第一章介绍 Observable 笔记本功能(Notebooks)时,由于作者感觉偏离了本书重点,于是草草几句就结束了。今天就给大家打个样,去探探这个由 D3.js 创始人打造的 Observable 平台的深浅。

1 需求描述

根据目前的专栏进度,第三章的示例条形图除了数据标签还没实现,其他的部件基本都实现了。这次索性就把 D3 工作流那几个节点(如下图所示)从头到尾在 Observable 上实现一遍。

【图 1 要同步在 Observable 实现一遍的 D3 数据工作流关键节点】

2 操作步骤

首先登录 Observable 平台:https://observablehq.com/。用邮箱注册一个帐户或者直接关联 GitHub 帐号即可。登录成功后,从个人主页右上方新建的一个笔记本,如图 2 所示:

【图 2 新建一个 Observable 笔记】

在弹出窗口中为这个新笔记指定一个工作空间(Workspace ),就相当于一个顶层文件夹。通常默认会选中一个,也可以手动指定。右边的模板就选默认的空白模板(Blank)即可,如图 3 所示:

【图 3 为新笔记文件指定一个工作空间】

点击 Create notebook 按钮,就正式进入 Observable 记事本的编辑页面了。此时会看到一个默认的 Markdown 格式的单元格,如图 4 所示:

【图 4 进入 Observable 记事本编辑页看到的第一个单元格】

那就用 Markdown 来一个华丽的标题吧,输入:# Ch3.4.3.1 DIY: Demo Bar Chart,然后按 Shift + Enter 快速执行,就有了下面的标题:

【图 5 使用 Markdown 语法添加的记事本一级标题】

2.1 加载数据

完成上面的准备工作后,就可以加载数据了。原始的 CSV 数据集需要先上传到 Observable 网页,即右侧那个回形针图标:

【图 6 将 CSV 原始数据集上传到 Observable 页面】

上传完毕后,可以看到这个文件的相关信息,显示还未被使用:

【图 7 文件上传完毕时的页面提示信息】

这个数据集该怎么加载,变成我们需要的对象数组呢?熟悉 Python Jupyter Lab 的朋友肯定很熟悉这样的界面,其实 Observable 就是一个 JavaScript 版的 Jupyter Lab,所有数据操作都在单元格内进行。Observable 提供了 FileAttachment 接口来加载数据,要在 JavaScript 单元格内这样写:

js 复制代码
FileAttachment('data.csv')

但这样得到的数据值全是字符串类型的,因此还需要调用一个 csv() 方法,并传入一个配置项,实现简单格式的自动转换:

js 复制代码
FileAttachment('data.csv').csv({typed: true});

然后将结果赋给一个常量 data。注意,这里无需添加 constlet 关键字,声明的变量类似 Excel 里的单元格的值,可以全局引用。此外,Observable 的单元格严格遵循"单一职责"原则,因此最好写成 IIFE 形式:

js 复制代码
data = (async function(){
  const data = await FileAttachment('data.csv')
      .csv({typed: true});
  return data.sort((a, b) => d3.descending(a.count, b.count));
})();

这样,数据加载 + 转换 + 排序就一气呵成轻松实现了!我这里的排序还用到了一个新的工具函数:d3.descending(a.count, b.count)。仔细看,其实我并没有手动导入 D3 这个库,之所以能直接使用,是因为 Observable 已经内置了最新版的 D3.js(别人好歹是创始人,这点特权还是有的)。最后执行单元格的效果如下:

【图 8 完成数据加载、转换、排序后的 Observable 页面效果截图】

2.2 数据绑定

刚才一个单元格就实现了 D3 工作流的三个节点(即查找(文件上传)、加载、格式化),个人感觉比手动去调 Promise 省事多了。下一步就该定义 SVG 容器并绑定数据了。Observable 单元格支持三大基本类型:JavaScript 型、HTML 型以及 Markdown 型。按照书中的方法创建一个 div 元素倒也不是不行,只要在 HTML 格式的单元格里创建 div,再把样式写到一个 style 标签里就搞定了。但是 Observable 提供了更快的方式:

js 复制代码
chart = {
  const svg = d3.create('svg')
    .attr('viewBox', `0 0 600 700`)
    .style('border', '1px solid black')
    .style('max-width', 800)
    .style('margin-inline', 'auto');

  return svg.node();
}

这段代码的最后一句,相当于导出 DOM 节点并赋值给变量 chart。同样按下 Shift + Enter,页面立刻渲染出了指定的容器:

【图 10 执行 d3.create() 方法可以快速创建 SVG 容器】

因此,数据绑定逻辑只要稍加改动就行了:

【图 11 改造后的 createViz 方法及其调用的写法】

剩下的工作就简单多了(其实整体来讲也没啥难度)。

2.3 调整比例

于是来到 D3 数据标准工作流的最后一环:调整比例大小。先定义好两个比例尺:

js 复制代码
const xScale = d3.scaleLinear()
  .domain([0, data[0].count])
  .range([0, 450]);

const yScale = d3.scaleBand()
  .domain(data.map(d => d.technology))
  .range([0, 700])
  .paddingInner(0.2);

由于 data 已经按 count 票数值降序排列,这里水平方向的定义域上边界就是 data[0].count 。接着再使用 D3 的数据绑定语法完成条形图的渲染:

js 复制代码
const byTechName = ({technology: t}) =>
  (t === 'D3.js') ? 'yellowgreen' : 'skyblue';
svg.selectAll('rect')
  .data(data)
  .join('rect')
    .attr('x', 100)
    .attr('y', d => yScale(d.technology))
    .attr('height', yScale.bandwidth())
    .attr('width', d => xScale(d.count))
    .attr('fill', byTechName);

这里填充色的设置做了点小改动,提出了一个访问器函数(accessor function)byTechName,这样写起来更紧凑。最终完整的 createViz 逻辑如下:

js 复制代码
createViz = (data, svg) => {
  // Declare D3's scale functions
  const xScale = d3.scaleLinear()
    .domain([0, data[0].count])
    .range([0, 450]);
  
  const yScale = d3.scaleBand()
    .domain(data.map(d => d.technology))
    .range([0, 700])
    .paddingInner(0.2);  // the gap size between 2 bars
  
  // data binding logics ...
  const byTechName = ({technology: t}) =>
    (t === 'D3.js') ? 'yellowgreen' : 'skyblue';
  svg.selectAll('rect')
    .data(data)
    .join('rect')
      .attr('x', 100)
      .attr('y', d => yScale(d.technology))
      .attr('height', yScale.bandwidth())  // i.e. bar height
      .attr('width', d => xScale(d.count))
      .attr('fill', byTechName);
  
  return svg.node();
};

运行该单元格,上面定义的 chart 单元格就渲染出了想要的条形图:

【图 12 最终在 Observable 的记事本页面渲染出的条形图效果】

3 小结 & 复盘

以上演示内容还只是 Observable 平台功能的冰山一角,根据最新发布的新闻,Observable 不久前已经上线了自己的云平台 Observable Cloud,可以像 GitHubnpm 那样在线托管自己的可视化项目,并且提供了大量实用的工具,比如接入了 AI 的能力,专为数据应用量身打造的线上工作流等等。浏览过程中,我发现 D3 官网还没有和 Vue.js 做集成的相关内容,而且 Notebook 页面好像对 Mocha.js 这类测试框架不是很友好,目前只测通了断言库 Chai.js。窃以为,这些地方恰恰蕴藏着大量的机遇,值得各位 D3 爱好者们前来探索!

最后还是梳理成要点,谈谈这趟试水 Observable 平台的切身体会吧:

  1. 大胆尝试 Observable 环境,遇到问题再小心求证;
  2. 多使用 Observable 提供的便捷接口、工具函数。D3.js 的官方入门文档(https://d3js.org/getting-started)是个不错的切入口;
  3. 积极拥抱 D3 生态,不要拘泥于一本书、或者某个单一的环境;
  4. Observable 创建的记事本还能共享给多人访问,实现同步编辑、实时预览;
  5. 多从线上的优秀案例学习 D3.js 的不同写法,取长补短,融会贯通。

(完)

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
布说在见7 小时前
层次与网络的视觉对话:树图与力引导布局的双剑合璧
信息可视化·数据挖掘·数据分析
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端