怎么做网站建设的ppt,wordpress简约主题带用户,南通购物网站建设,wordpress循环该分类子分类当前内容所在位置#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.2.2 使用 Observable 在线绘制 D3 条形图DIY 实战 ✔️ 3.4.3 分段比例尺下篇 3.5 加注图表标签待翻译 ⏳3.6 本章小结 文章目录 3.4.2.2 使用 Observable 在线绘制 D3 条形图DIY实战1 需求描述2 操作步骤2.1 加载数据2.2 数据绑定2.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 单元格内这样写
FileAttachment(data.csv)但这样得到的数据值全是字符串类型的因此还需要调用一个 csv() 方法并传入一个配置项实现简单格式的自动转换
FileAttachment(data.csv).csv({typed: true});然后将结果赋给一个常量 data。注意这里无需添加 const 或 let 关键字声明的变量类似 Excel 里的单元格的值可以全局引用。此外Observable 的单元格严格遵循“单一职责”原则因此最好写成 IIFE 形式
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 提供了更快的方式
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 数据标准工作流的最后一环调整比例大小。先定义好两个比例尺
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 的数据绑定语法完成条形图的渲染
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 functionbyTechName这样写起来更紧凑。最终完整的 createViz 逻辑如下
createViz (data, svg) {// Declare D3s scale functionsconst 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可以像 GitHub、npm 那样在线托管自己的可视化项目并且提供了大量实用的工具比如接入了 AI 的能力专为数据应用量身打造的线上工作流等等。浏览过程中我发现 D3 官网还没有和 Vue.js 做集成的相关内容而且 Notebook 页面好像对 Mocha.js 这类测试框架不是很友好目前只测通了断言库 Chai.js。窃以为这些地方恰恰蕴藏着大量的机遇值得各位 D3 爱好者们前来探索
最后还是梳理成要点谈谈这趟试水 Observable 平台的切身体会吧
大胆尝试 Observable 环境遇到问题再小心求证多使用 Observable 提供的便捷接口、工具函数。D3.js 的官方入门文档https://d3js.org/getting-started是个不错的切入口积极拥抱 D3 生态不要拘泥于一本书、或者某个单一的环境Observable 创建的记事本还能共享给多人访问实现同步编辑、实时预览多从线上的优秀案例学习 D3.js 的不同写法取长补短融会贯通。
完
