UPDATED: Hi All, I’ve tried the embedding tutorials, which have gotten me 95% of the way there.
(I’m not linking them here b/c I cant include too many links in this)
But I just can’t get mine to work. I’m trying to embed just the chart only. I feel like it’s properly in a cell named “chart.” That’s the name on the left side of the cell. But yes, somehow it’s apparently not finding any child named “chart.”
Here’s my notebook:
Here’s my working webpage:
The console is giving me an error "Cannot read property ‘appendChild’ of null:
http://greencracker.pythonanywhere.com/budget-2020/chart-only.html
Hi Maggie.
Try removing the following line:
Runtime.load(notebook, Inspector.into(document.body));
Looks like it works:
https://aaronkyle.github.io/concept/data-visualization/sandbox/greencracker.html
Thanks! But how can I get just the chart, not the code?
I just amended my question a good bit. There is an error in the console when I add this:
Runtime.load(notebook, (cell) => {
if (cell.name === "chart") {
return {
fulfilled: (value) => {
document.getElementById("chart").appendChild(value);
}
};
}
});
Try this version:
<html>
<body>
<div class="wrapper">
<div class="title">TEST</div>
<div id="output"></div>
</div>
</body>
<script type="module">
// Load the Observable runtime and inspector
import {Inspector, Runtime} from "https://unpkg.com/@observablehq/notebook-runtime@2?module";
// Load your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/@greencracker/treemap.js";
const renders = {
"chart": "#output",
};
for (let i in renders)
renders[i] = document.querySelector(renders[i]);
Runtime.load(notebook, (variable) => {
if (renders[variable.name])
return new Inspector(renders[variable.name]);
});
</script>
</html>
https://aaronkyle.github.io/concept/data-visualization/sandbox/greencracker-cell
Where the code says
const renders = {
"chart": "#output",
};
You can add in more cells to call in explicitly.
For example
const renders = {
"chart": "#output",
"viewof tile": "#input",
};
Just make sure there’s a corresponding <div>
element in your HTML document.
2 Likes
Perfect, thank you!!
I managed to stumble upon doing this too, in case anyone else is reading this, I think it makes a little more sense to beginners – it’s the same principle but less modular – adding a div by hand at the top
<html>
<body></body>
<div id="chart"></div>
<script type="module">
// Load the Observable runtime and inspector.
import {Runtime, Inspector} from "https://unpkg.com/@observablehq/notebook-runtime?module";
// Your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/@greencracker/treemap.js";
Runtime.load(notebook, (cell) => {
return {
pending: () => console.log(`${cell.name} is running...`),
fulfilled: (value) => console.log(cell.name, value),
rejected: (error) => console.error(error)
};
});
Runtime.load(notebook, (cell) => {
if (cell.name === "chart") {
return {fulfilled: (value) => $("chart").append(value)};
} else {
// Force evaluation of all the other cells in the notebook.
return true;
}
});
Runtime.load(notebook, (cell) => {
if (cell.name === "chart") {
return {
fulfilled: (value) => {
document.getElementById("chart").appendChild(value);
}
};
}
});
</script>
</html>
1 Like