在bl.ocks.org上显示Github仓库的Gist

Question

我创建了一个数据可视化应用程序，并将其发布到Github页面。 我现在想在bl.ocks.org网站上展示这个应用程序，该网站汇集了D3.js可视化。 我该如何从GitHub库开始创建一个gist，并保持库代码的相对依赖关系？我需要重构所有代码，以创建一个只指向CDN资源的单文件应用程序吗？

- ted.strauss

---

bl.ocks.org并不会聚合可视化，它只是gist的查看器。看看那些已经存在的blocks/gists（有很多！），你就会知道需要什么了。基本上，gist需要是自包含的。 - Lars Kotthoff

Answer 1

通过示例最容易学习。请看 bl.ocks 主页上的示例:

http://bl.ocks.org/mbostock/1353700

现在，想要查看生成它的 gist，请从 url 的末尾取出 id 号并将其添加到 gist url 中，如下所示：

http://gist.github.com/1353700

这个 gist 包含 3 个文件，但其中两个是可选的。显示一个块的唯一要求是具有 index.html。该文件应包含完整的 html 文件及其 js 脚本和任何包含 d3 等 cdn 资源的引用。你也可以将 javascript 代码放置在一个单独的文件中，并将其添加到 gist 中，然后从 index.html 文件中链接到它。

如果你希望提供示例的描述和图像，则还可以添加 README.md 和 thumbnail.png。这也在 bl.ocks 主页上解释了。

希望这有所帮助。

- Jonah

Answer 2

一旦您在GIST上有了示例，您只需要复制扩展名（即“用户名/哈希”），并将其放在bl.ocks.org/之后。因此，如果您有这个gist：

https://gist.github.com/mbostock/4063423

您可以通过以下URL在bl.ocks上查看：

http://bl.ocks.org/mbostock/4063423

创建Gist后，不需要进行任何额外的工作，这是非常好的。

- mike

---

谢谢！这是至关重要的一步。 - Mars