0 投票

1 回答

171 浏览

javascript - 小型多折线图的独立比例

链接到笔记本。

我正在使用 Observable 上的 d3.v5 制作一个小型多折线图，数据集的结构如下：

对于可视化，y 比例num取自域的values数组。有几行具有唯一的键值，我想用它们来产生小的倍数。上图显示了第一个键。

在可视化小倍数后，我注意到所有折线图都使用相同的 y 刻度，这不是我打算做的。这是我目前拥有的：

有没有办法调整域，以便每个图表根据自己的num值有自己的比例？

编辑 1：在顶部添加了笔记本链接

2020-06-19T05:24:15.457

0 投票

1 回答

67 浏览

javascript - 在 Observable 笔记本中，无法使用 npm 库中的函数，可能是因为无法从库的依赖项中导入函数

我想在 Observable 笔记本中重现这个 npm 库中的示例。我在一个单元格和一个块中运行以下命令：

我收到错误消息TypeError: isArray is not a function，我怀疑这个函数无法从库的依赖项中导入。

我正在按照本指南导入库。

javascript requirejs levenberg-marquardt observablehq

2020-06-24T17:44:50.277

0 投票

1 回答

131 浏览

d3.js - 如何根据德语区域设置时间轴标签（刻度）

根据新的（德语）语言环境设置时间轴标签的正确方法是什么？

我想将它与 vega lite API 一起使用。

这是我尝试过的：

我创建了一个 observable：https : //observablehq.com/@ee2dev/coronavirus-in-bayern-teil-2，其中单元格 vl1 显示了我想反映区域设置格式的图表。根据可观察论坛https://talk.observablehq.com/t/chang-the-locale-for-vega-lite/3010的建议，我实现了这个：

这似乎有效 - 有时！？。在过去的两个月里，有几天就像今天一样，格式切换回默认的 US_EN

此处的相关问题如何设置语言环境以使用我的语言显示时间？在这种情况下似乎没有帮助

我真的很想知道，a）什么是正确的方法和b）为什么我的解决方案有时会在其他时候不起作用（没有我更改代码）

d3.js vega-lite vega observablehq

2020-06-29T11:28:59.683

0 投票

0 回答

463 浏览

github - 如何在 GitHub 上为每次提交显示带有 HTML 和 JavaScript (D3.js) 的演示

我正在开发使用 D3.js 来显示一些可视化的应用程序。如何在 GitHub 上显示 HTML 文件（使用 JS）的预览？我需要每个提交（历史）的演示，而不仅仅是最新版本。

^{我使用捆绑的 JSON 数据和来自 CDN 的链接 D3.js 库将我的应用程序的静态版本生成为 HTML+JS，因此我只需要提供 HTML+JS。没有后台。}

GitHub 页面

我的第一个想法是使用 GitHub Pages ^{（这是流行的答案#1，#2）}。这很好，但是这样我可以只为最新版本显示演示（如果我为分支docs上的目录设置 gh-pages，则为最新提交master）或仅针对一个特定版本（如果我为gh-pages分支设置 gh-pages 并将某个版本推送给它）。

我需要为 repo 中的所有提交显示演示（预览 HTML）。我希望能够看到以前版本的应用程序的演示（预览以前的提交）。

生成图像（截图）

我可以做运行 D3.js 应用程序的屏幕截图并将图像附加到 repo 并显示在README.md. 当有人打开以前的提交时，他会看到以前版本的应用程序。这就是我要的。

但是对于静态图像，我失去了 D3.js 的优势。我的应用程序是动态的（您可以缩放、单击图表、选择要显示的数据、显示工具提示等）。

HtmlPreview 或 RawGit

我发现^{（#1、#2）}服务可以直接从 GitHub 提供 HTML 文件：

有了这个，我可以链接到特定文件（甚至是文件的特定版本！就是这样！）并通过 HTMLPreview/RawGit 代理来显示预览。

但是我有两个问题：

1. RawGit 的作者说我不应该使用这个工具来创建公共演示（我只是想做！）：

不要在示例代码或公共演示中使用开发 URL，因为人们经常复制和粘贴该代码并在生产应用程序中使用它，而没有意识到他们需要更改 URL。然后他们向 RawGit 发送过多流量，受到限制，他们的应用程序崩溃。

（我想这同样适用于 HtmlPreview。）

2.如何在本次提交中动态链接到文件？（我想在中写演示链接README.md。）

当我创建这样的链接时：

它将是最新版本的链接（当有人进入旧提交时，他将看到最新版本而不是特定版本的演示）。

所以我必须创建与 SHA 的链接，如下所示：

但是我怎么知道在我创建提交之前会生成什么 SHA？我想README.md在同一个提交中创建提交和写入链接。

（我尝试在本地创建提交，读取生成的 SHA，更改README.md为写入链接和git commit --amend，但修改后更改了 SHA。）

有什么方法可以在 GitHub 上创建动态链接？也许一些 GitHub 变量 ( <sha-of-this-commit>) 会在生成时由 GitHub 动态更改README.md？

我知道我可以链接相对：

GitHub 将其替换为：

但我不知道如何将它与 RawGit 或 HTMLPreview 连接起来。

Jupyter 笔记本

我找到了这个演示：https ://github.com/soxofaan/jupyter-playground/tree/master/jupyter-custom-d3-visualization

我看到我可以在 Jupyter Notebook ( .ipynb) 中嵌入 JS 和 D3.js 脚本。

GitHub默认支持Jupyter Notebooks 的预览。但如您所见，它不支持嵌入 JavaScript 结果：https ://github.com/soxofaan/jupyter-playground/blob/master/jupyter-custom-d3-visualization/jupyter-custom-d3-visualization.ipynb

有解决方法并使用nbviewer预览 JS：https ://nbviewer.jupyter.org/github/soxofaan/jupyter-playground/blob/master/jupyter-custom-d3-visualization/jupyter-custom-d3-visualization.ipynb

它的工作原理与 RawGit 或 HTMLPreview 相同，但适用于 Jupyter Notebook。

有了这个，我遇到了和上面一样的问题。我无法链接到特定的提交（我不知道在创建提交之前会生成什么 SHA）。

这也有一个缺点，您必须仅为嵌入 JS 创建整个 Jupyter Notebook。

ObservableHQ更适合 D3.js。但是 GitHub不支持。如果我可以编写 observablehq-notebook，将代码提交到 GitHub 并呈现预览，那将是完美的。

繁琐的解决方法

放弃历史提交的演示......但这是我的问题，如何处理它。
使用外部服务（例如JSFiddle、Codepen或 ObservableHQ 之前提到的）并在提交之前为每个更改和粘贴链接创建独立的演示。但这有很多缺点：

外部服务中的大量条目。当我犯错或忘记我需要这个并删除旧条目时，我在 repo 中的旧提交中的演示将被破坏（并且无法恢复，因为实体的 id 将被更改 - 唯一的方法是重写 repo 中的所有提交！） .
没有单一的事实来源（我的主要源代码在 GitHub 上，所以我想参考一下）。

使用 GitHub 页面（docs在分支中有文件夹master- 我不能使用gh-pages分支，因为我想在一次提交中更改应用程序并显示演示）并为每次更改手动创建子文件夹并将某个链接粘贴到特定文件夹中的文件（我知道路径目录，因为我是手动制作的）。这也有很多缺点。听起来很复杂（我只用 D3.js 做了简单的页面！），我必须手动创建文件夹，注意路径并且不知道如何处理除 master 之外的其他分支（合并等）。