how to use Mike Bostock d3 tidy tree offline

Community Help
1

I am using Mac book with ampss server: http://www.ampps.com

I followed the instructions here:

and I can run d3.js offline.

No problem except for “Not allowed to load local resource: file:///favicon.ico” which I think can ignore.

For d3-tidy-tree.js, there are required files from the Internet:

Line81: d3.json("https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.8/test/data/flare.json")

<link rel="stylesheet" type="text/css" href="https://unpkg.com/@observablehq/notebook-inspector@1/dist/notebook-inspector-style.css">

import {Inspector, Runtime} from "https://unpkg.com/@observablehq/notebook-runtime@1?module";

For the three web links, I can go to the URL on Safari can copy the text, then save as the same filename.

For the third Internet link, it changes to: https://unpkg.com/@observablehq/notebook-runtime@1.7.0/dist/notebook-runtime.js?module

Does this mean I should copy the text and save as notebook-runtime.js?

Is the above the right way to do?

My index.html is here

<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 Tidy Tree</title>
<link rel="stylesheet" type="text/css" href="notebook-inspector-style.css">
<body>
<script type="text/javascript" src="d3.js"></script>
<script type="module">

import {Inspector, Runtime} from "notebook-runtime.js";
import notebook from "d3-tidy-tree.js";

Runtime.load(notebook, Inspector.into(document.body));

</script>

I just got a blank page only.

2

You probably got some error messages in the console saying that the module could not be found. Try changing these lines:

to this:

import {Inspector, Runtime} from "./notebook-runtime.js";
import notebook from "./d3-tidy-tree.js";

See this article for some more info ECMAScript modules in browsers - JakeArchibald.com

1 Like