Public
Edited
Oct 25, 2023
1 star
Insert cell
Insert cell
Insert cell
Insert cell
{
return {
"name" : "parent",
"children": [
{
"name": "A",
"children": [
{"name": "a"},
{"name": "b"},
]
},
{
"name": "B",
},
]
}

}


Insert cell
Insert cell
{
return {
"nodes": [
{ "id": 1, "name": "A" },
{ "id": 2, "name": "B" },
{ "id": 3, "name": "C" },
],
"links": [
{ "source": 1, "target": 2 },
{ "source": 1, "target": 3 }
]
}

}
Insert cell
Insert cell
d3 = require("d3")
Insert cell
Insert cell
Insert cell
Insert cell
cars = {

return {
"name": "cars",
"children": [
{
"name": "owned",
"children": [{"name": "pilot", "size": 40}, {"name": "325ci", "size": 20}, {"name": "accord", "size": 2}]
},
{
"name": "traded",
"children": [{"name": "chevette", "size": 1}]
},
{
"name": "learned",
"children": [{"name": "odyssey", "size": 20}, {"name": "maxima", "size": 5}]
}
]
}
}
Insert cell
Insert cell
viewof query = Inputs.text({label: "query"})
Insert cell
api = fetch("https://api.artic.edu/api/v1/artworks/search?q="+query+"&fields=id,title,artist_display,thumbnail, is_public_domain").then((response) => response.json())
Insert cell
artworks = {
let objs = []
api.data.forEach(o=>{
let splitStr = o.artist_display.split("\n")
o.artist = splitStr[0]

objs.push(o)
})

return d3.group(objs, d=>d.is_public_domain, d=>d.artist)
}
Insert cell
Insert cell
dataset = artworks
Insert cell
root = d3.hierarchy(dataset);
Insert cell
Insert cell
nodes = root.descendants();
Insert cell
Insert cell
Insert cell
forcedirectedtree = {

//dimensions
const height = 500

//node size
const radius = 15

//how far apart are the nodes
const distance = radius * 2

const color = d3.scaleOrdinal(d3.schemeCategory10);


// Define the div for the tooltip
const tooltip = d3.select("body").append("div")
.style("position", "absolute")
.style("background-color", "lightgray")
.style("color", "black")
.style("border-radius", "5px")
.style("padding", "10px")
.style("opacity", 0)

//event to make tooltip follow mouse - comment out if using fixed tooltip
window.onmousemove = function (e) {
const x = (e.clientX + 10) + 'px', y = (e.clientY-10) + 'px';
tooltip.style("left", x).style("top", y);
};

// Create a simulation with several forces.
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.index).distance(distance).strength(1))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
.force("x", d3.forceX())
.force("y", d3.forceY())
.on("tick", ticked);

// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");

// Add a line for each link, and a circle for each node.
const link = svg.append("g")
.attr("stroke", "#000")
.attr("stroke-opacity", .7)
.selectAll("line")
.data(links)
.join("line")

const node = svg.append("g")
.attr("stroke", "#000")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("stroke", d => d.data.children ? "#000" : "red")
.attr("r", d=> radius - (d.depth * 3))
.attr("fill", d => color(d.depth));

//show tooltip over node
node
.on("mouseover", function(event,d){
tooltip.style("opacity", 1)
console.log("data:", d)
//cars
//tooltip.html(d.data.name)

//artworks
//use depth to determine labels
if (d.depth == 0){
tooltip.html("searched for "+query)
} else if (d.depth == 1){
tooltip.html("public domain? "+d.data[0])
} else if (d.depth == 2){//artist
tooltip.html(d.data[0])
} else {
tooltip.html( d.data.title )
}
})
.on("mouseleave", function(event,d){
tooltip
.style("opacity", 0)
})
// Add a drag behavior.
node.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));


// Set the position attributes of links and nodes each time the simulation ticks.
function ticked() {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);

node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
}

// Reheat the simulation when drag starts, and fix the subject position.
function dragstarted(event,d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}

// Update the subject (dragged node) position during drag.
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}

// Restore the target alpha so the simulation cools after dragging ends.
// Unfix the subject position now that it’s no longer being dragged.
function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}

// When this cell is re-run, stop the previous simulation. (This doesn’t
// really matter since the target alpha is zero and the simulation will
// stop naturally, but it’s a good practice.)
invalidation.then(() => simulation.stop());

return svg.node();
}
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