arc_plot = {
const radius =8
const svg = d3.select(DOM.svg(width+margin.left+margin.right,
height+margin.top+margin.bottom))
.attr("viewBox", [0, 0, width, 400])
// .attr("viewBox", [0, 0, width+margin.left+margin.right, height+margin.top+margin.bottom])
// .style("width", "100%")
// .style("height", "680")
.attr("font-family", "sans-serif")
.attr("align", "center")
.attr("justify-content", "center")
.attr("text-anchor", "middle")
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)
}))
function zoomed({transform}) {
svg.svg("transform", transform);
}
const arcGroup = svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// create the node labels
const nodeLabels = arcGroup.selectAll("nodeLabels")
.data(graphData.nodes.sort(function(x, y){
return d3.descending(x.group, y.group);
}))
.enter().append("text")
.attr("x", margin.left+280)
.attr("y", d => yScale(d.label)+5)
.attr("fill", "black")
.style("text-anchor", "end")
.text(d => d.label)
// create the nodes
const nodes = arcGroup.selectAll("nodes")
.data(graphData.nodes.sort(function(x, y){
return d3.descending(x.group, y.group);
}))
.enter().append("circle")
.attr("cx", margin.left+300)
.attr("cy", d => yScale(d.label))
.attr("r", radius)
.attr("fill", d=> group_color(d.group))
.attr("id", d => d.id)
// This code builds up the SVG path element; see nodesAndArcs for details
function buildArc(d) {
let start = yScale(idToNode[d.source].label);
let end = yScale(idToNode[d.target].label);
const arcPath = ['M', margin.left+300, start, 'A', Math.abs(start - end)/2, ',', Math.abs(start-end)/2, 0,0,",",
start < end ? 1: 0, margin.left+300, end].join(' ');
return arcPath;
}
// create the arcs
const arcs = arcGroup.selectAll("arcs")
.data(graphData.links)
.enter().append("path")
.attr("d", d => buildArc(d))
.style("fill", "none")
.attr("stroke", d => color(d.predicate));
// mouseover animations
nodes.on('mouseover', function(d) {
// Highlight selected node
d3.select(this).style("fill", d=>group_color2(d.group));
// Highlight arcs
arcs
.style('stroke', function (arcd) {
return arcd.source === d.id || arcd.target === d.id ? d=> color(d.predicate): d=> color(d.predicate);})
.style('stroke-width', function (arcd) {
return arcd.source === d.id || arcd.target === d.id ? 4 : 1;})
// Show actor names
// actor
// .style('fill', function (actord) {
// return actord.label === d.label ? 'steelblue' : 'white' ;});
// Highlight node labels
nodeLabels
.style("fill", function (nodeLabeld){
return nodeLabeld.id == d.id ? 'black' : 'black';})
.style('font-weight', function (nodeLabeld) {
return nodeLabeld.id == d.id ? 'bold' : 'normal';})
});
// remove highlighting when user mouse moves out of node by restoring default colors and thickness
nodes.on('mouseout', function (d) {
nodes.style("fill", d=> group_color(d.group));
arcs.style('stroke', d=>color(d.predicate));
arcs.style('stroke-width', 1);
// actor.style('fill','white');
});
return svg.node();
}
d3 = require("d3@^5.8")
graphData = FileAttachment("test.json").json()
//use map() function to extract the names in the json file.
allNodesNames = graphData.nodes.sort(function(x, y){
return d3.ascending(x.group, y.group);
}).map(function(d){return d.label});
graphData["nodes"].sort(function(x, y){
return d3.ascending(x.group, y.group);
})
graphData["links"]
allNodesText = graphData.nodes.sort(function(x, y){
return d3.ascending(x.group, y.group);
}).map(function(d){return d.label});
// use the idToNode function to map node ID with a pointer
idToNode =
{
let dict = {};
graphData.nodes.sort(function(x, y){
return d3.ascending(x.group, y.group);
}).forEach(function(n) {
dict[n.id] = n;
});
return dict;
}
// cuse the idToTargetNodes to create a dictionary with node ID and link data
idToTargetNodes =
{
let dict = {};
graphData.nodes.sort(function(x, y){
return d3.ascending(x.group, y.group);
}).forEach(function (n) {
dict[n.id] = [];
graphData.links.forEach(function (l) {
if (l.source === n.id) {
dict[n.id].push(l.target);
}
});
});
return dict;
}
margin = ({top: 20, bottom: 20, left: 30, right: 60});
step =12
height = 500 - margin.top - margin.bottom -10;
// height = (graphData.nodes.length - 1) * step + margin.top + margin.bottom
//width = 700
// define yScale
yScale = d3.scalePoint()
.domain(allNodesNames)
.range([0,height])
predicate = d3.set(graphData["links"], d => d.predicate);
// use the d3 color scheme "dark2" to color code different types of relationships
// color = {return d3.scaleOrdinal(d3.schemeDark2).domain(predicate.values());
// }
color = d3.scaleOrdinal()
.domain(["Activation", "Inhibition", "IncreaseAmount", "DecreaseAmount", "Associated", "HAS_A_TRIAL"])
.range(["#d5f2bd", "#edc2bb", "#d5f2bd","#edc2bb","#f5d0b0", "#c3c3e3"]);
group = d3.set(graphData["nodes"].sort(function(x, y){
return d3.ascending(x.group, y.group);
}), d=> d.group);
// I also wanted to show the gender of the character, so I'm setting two color scheme to show the difference.
group_color = {return d3.scaleOrdinal( d3.schemeCategory10).domain(group.values());
}
group_color2 = {return d3.scaleOrdinal( d3.schemeCategory10).domain(group.values());
}
import {swatches} from "@d3/color-legend"
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.
