Notebooks 2.0 is here.

Published
Edited
Jun 16, 2020
30 forks
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`<figure>
<img src="${await FileAttachment("place_holder.png").url()}">
</figure>`
Insert cell
Insert cell
category_array=["Sex", "Survived", "Age", "Class", "value"]
Insert cell
//Draw the tree here using the graphTree function. It could look simlar to that.
//graphTree(hierarchyData, {label: d => d.data.name})
Insert cell
//Add the depth and height information to the nested data
Insert cell
md` The tree graph needs nested data with specific information of the nodes, this includes height and depth. Have a look at the nest and hierarchy functionalities in D3. Remember to include the functionality to alter the order of the level in the tree according to the order in category_array.`
Insert cell
Insert cell
Insert cell
parallelSet={
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// your code
//
return svg.node();
}
Insert cell
md`## Apendix`
Insert cell
data = d3.csvParse(await FileAttachment("titanic.csv").text(), d3.autoType)
Insert cell
import { table } from "@tmcw/tables/2"
Insert cell
dx = 12
Insert cell
dy = 90
Insert cell
Insert cell
tree = d3.tree().nodeSize([dx, dy])
Insert cell
shape2path = require("shape2path@3")
Insert cell
d3 = require("d3@5", "d3-sankey@0.12")
Insert cell
height=400
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more