d3.select('.chart')
.datum(data)
.call(customForceDirectedTree);
stylesheet = html`<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" media="all" rel="stylesheet">`
d3 = require("d3@5")
d3tip = require('d3-tip')
function forceDirectedTree(){
let margin = {top: 20, right: 10, bottom: 20, left: 10};
function chart(selection){
let data = selection.datum();
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));
let simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id).distance(0).strength(.5))
.force("charge", d3.forceManyBody().strength(-100))
.force("x", d3.forceX())
.force("y", d3.forceY())
;
let isDragging = false;
const tooltip = d3tip()
.style('border', 'solid 3px black')
.style('background-color', 'white')
.style('border-radius', '10px')
.style('float', 'left')
.style('font-family', 'monospace')
.html(d => `
<div style='float: right'>
name: ${d.id} <br/>
link: ${d.url}
</div>`)
let drag = function (simulation) {
function dragstarted(d) {
isDragging = true;
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
isDragging = false;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
};
// Building svg
let svg = selection
.selectAll('svg')
.data([data])
.enter()
.append('svg')
.attr("viewBox", [0, 0, width, height]);
svg = svg.merge(svg);
svg.call(tooltip)
let g = svg.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const link = g.append('g')
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.join("line")
.attr("stroke-width", d => Math.sqrt(d.value));
const node = g
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", 5)
.attr("fill", color)
.on("click", clicked)
.on('mouseover', tooltip.show)
.on('mouseout', tooltip.hide)
.call(drag(simulation));
simulation.on("tick", () => {
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);
});
//add zoom capabilities
let zoomHandler = d3.zoom()
.on("zoom",zoomAction);
//Zoom functions
function zoomAction(){
g.attr("transform", `translate(${width / 2+ d3.event.transform.x}, ${height / 2+ d3.event.transform.y })`+ "scale(" + d3.event.transform.k + ")");
}
zoomHandler(svg);
}
return chart;
}
color = {
const scale = d3.scaleOrdinal(d3.schemeCategory10);
return d => scale(d.group);
}
function clicked(d) {
window.open(d.url);
}
// types = Array.from(new Set(links.map(d => d.type)))
data =JSON.parse(await FileAttachment("test-data@7.json").text())
data.nodes
height=600
customForceDirectedTree = forceDirectedTree();
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.
