chart = {
const zoom_handler = d3.zoom()
.on("zoom", zoom_actions);
function zoom_actions(){
group.attr("transform", d3.event.transform)
}
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));
const forceCollide = d3.forceCollide(d => d.cooccurrences)
.strength(0.8);
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id).distance(100))
.force("charge", d3.forceManyBody())
.force('collide', forceCollide)
.force("center", d3.forceCenter(width / 2, height / 2));
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style('border', '2px dashed rgba(0,0,0,0.5)')
const group = svg.append('g')
zoom_handler(svg);
zoom_handler.scaleBy(svg, width / 350)
const tooltip = d3.select("body").append("div")
.attr("class", "svg-tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
.text("I'm a circle!");
const link = group
.selectAll("line")
.data(links)
.join("line")
.attr("stroke", normalStroke)
.attr("stroke-opacity", 0.2)
.attr("stroke-width", d => {
return lineScale(d.__proto__.weight)
})
.on("mouseover", function(d) {
const t = d3.select(this)
.attr("stroke-opacity", 0.6)
.attr("stroke", hoverStroke)
.call(l => {
tooltip.text(`${d.weight} POV chapter co-occurrence${d.weight > 1? 's':''} involving
${nodes.find(n => n.id == d.source.index).name} and ${nodes.find(n => n.id == d.target.index).name}`)
})
return tooltip.style("visibility", "visible");
})
.on("mousemove", function(){
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
})
.on("mouseout", function(d) {
d3.select(this)
.attr("stroke-opacity", 0.2)
.attr("stroke", normalStroke)
return tooltip.style("visibility", "hidden").text("");
});
const node = group.selectAll(".node")
.data(nodes)
.enter()
.append('g')
.attr('class', 'node')
.call(drag(simulation));
//Add labels to each node
const label = node.append("text")
.attr("dx", d => radiusScale(d.cooccurrences) + 2 )
.attr("dy", "0.35em")
.attr("font-size", d => sizeScale(d.cooccurrences))
.text(function(d){ return d.name; });
//Add circles to each node
const circle = node.append("circle")
.attr("r", d => radiusScale(d.cooccurrences))
.attr("fill", function(d){ return color(d); })
// .call(c => c.append('title').text(d => `${d.cooccurrences} Chapter co-occurence${d.cooccurrences > 1? 's':''} involving ${d.name}`));
const nodeLinkStatus = {};
links.forEach(d => {
nodeLinkStatus[`${d.source.index},${d.target.index}`] = 1;
});
const isConnected = (a, b) => nodeLinkStatus[`${a.index},${b.index}`] || nodeLinkStatus[`${b.index},${a.index}`] || a.index === b.index
node.on('mouseover', d => {
node
.attr('fill-opacity', o => isConnected(d, o) ? 1 : 0.1);
link
.filter(l => (d === l.source || d === l.target))
.attr('stroke-opacity', 0.6)
.attr("stroke", hoverStroke);
tooltip.text(`${d.cooccurrences} POV chapter co-occurrence${d.cooccurrences > 1? 's':''} involving
${d.name}`)
return tooltip.style("visibility", "visible");
});
node.on("mousemove", function(){
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
})
node.on('mouseout', () => {
node
.attr('fill-opacity', 1);
link
.attr('stroke-opacity', 0.2)
.attr("stroke", normalStroke);
return tooltip.style("visibility", "hidden").text("");
});
simulation.on("tick", () => {
link
.attr("stroke-width", d => lineScale(d.__proto__.weight))
.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('r', d => radiusScale(d.cooccurrences))
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
invalidation.then(() => simulation.stop());
return svg.node();
}
styles = html`
<style>
.svg-tooltip {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: rgba(69,77,93,.9);
border-radius: .1rem;
color: #fff;
display: block;
font-size: 11px;
padding: .2rem .4rem;
position: absolute;
text-overflow: ellipsis;
white-space: pre;
z-index: 300;
visibility: hidden;
}
</style>`
hoverStroke = "#444"
normalStroke = "#999"
data = FileAttachment("pov-cooccurrence.json").json()
height = width
color = {
const scale = d3.scaleOrdinal(d3.schemeCategory10);
return d => scale(d.name);
}
radiusScale = d3.scaleSqrt().domain([d3.min(data.nodes, d => d.cooccurrences), d3.max(data.nodes, d => d.cooccurrences)]).range([5,10])
sizeScale = d3.scaleLinear().domain([d3.min(data.nodes, d => d.cooccurrences), d3.max(data.nodes, d => d.cooccurrences)]).range([9, 12])
lineScale = {
return d3.scaleLinear().domain([d3.min(data.links, d => d.weight), d3.max(data.links, d => d.weight)]).range([2, 5])
}
drag = simulation => {
function dragstarted(d) {
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;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
d3 = require("d3@5")
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.
