chart = {
const svg = d3.create("svg")
.style("width", width+margin.left+margin.right)
.style("height", "780")
.attr("font-size", 10)
.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)
// }))
let allNodesNames = graph.nodes.sort(function(x, y){
return nodes_order.indexOf(x.group) - nodes_order.indexOf(y.group) || d3.descending(x.weight,y.weight); }).map(function(d){return d.label});
var zoomer = d3.zoom().scaleExtent([0.5 , 10]).on("zoom", zoom)
svg.call(zoomer)
.on("zoom", null)
.on("zoom", pan);
const arcGroup = svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
const nodeLabels = arcGroup.selectAll("nodeLabels")
.data(graph.nodes.sort(function(x, y){
return nodes_order.indexOf(x.group) - nodes_order.indexOf(y.group) || d3.descending(x.weight,y.weight); }))
.enter().append("text")
// .attr("x", margin.left+280)
.attr("x", d => xScale(d.group)-20)
// .attr("y", d => yScale(d.group)+ test_Scale(d.label)**12)
.attr("y", function(d) {
return node_orders_num[allNodesNames.indexOf(d.label)]
})
.attr("fill", d=> color(d.group))
.style("text-anchor", "end")
.text(d => d.label)
// create the nodes
const nodes = arcGroup.selectAll("nodes")
.data(graph.nodes.sort(function(x, y){
return nodes_order.indexOf(x.group) - nodes_order.indexOf(y.group)|| d3.descending(x.weight,y.weight); }))
.enter().append("circle")
.attr("r", function(d) {
d.weight =
graph.links.filter(function(l) { return l.source == d.id || l.target == d.id}).length;
var minRadius = 2;
return d3.scaleSqrt()
.domain( [minDegree, maxDegree] )
.range( [4, 12] )((d.weight ))
})
.attr("cx", d => xScale(d.group))
.attr("cy", function(d) {
return node_orders_num[allNodesNames.indexOf(d.label)]
})
.attr("fill", d=> color(d.group))
.attr("id", d => d.id)
function buildArc(d) {
// let start = yScale(idToNode[d.source].label);
let start = node_orders_num[allNodesNames.indexOf(idToNode[d.source].label)]
let start2 = xScale(idToNode[d.source].group);
// let end = yScale(idToNode[d.target].label);
let end = node_orders_num[allNodesNames.indexOf(idToNode[d.target].label)]
let end2 = xScale(idToNode[d.target].group)
const arcPath = ['M', start2, start, 'A', Math.abs(start - end)/9+5, ',', Math.abs(start-end)/10.5+5, 0,0,",",
start < end ? 1: 0, end2, end].join('
return arcPath;
}
svg.append("svg:defs").selectAll("marker")
.data(types)
.join("marker")
.attr("id", d => `arrow-${d}`)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 14)
.attr("refY", 0)
.attr("markerWidth", 4)
.attr("markerHeight", 3)
.attr("orient", "auto")
.append("svg:path")
.attr("fill", color_predicate)
.attr("d", 'M0,-5L10,0L0,5');
// arcs
const arcs = arcGroup.selectAll("path")
.data(graph.links)
.enter()
.append("path")
.style("fill", "none")
.attr("stroke", d => color_predicate(d.predicate))
.style("stroke-linecap", "round")
// .attr("marker-end", d => `url(${new URL(`#arrow-${d.predicate}`, location)})`)
.style("stroke-opacity", 0.8);
arcs.text(d => d.sentence)
arcs.attr("d", d => buildArc(d))
nodes.raise()
nodeLabels.raise()
nodes.on('mouseover', function(d,i) {
// d3.select(this).style("fill", d=>color(d.group));
arcs
.style('stroke', function (arcd) {
return arcd.source === d.id || arcd.target === d.id ? d=> color_predicate(d.predicate): d=> color_predicate(d.predicate);})
.style('stroke-width', function (arcd) {
return arcd.source === d.id || arcd.target === d.id ? 3 : 0.8;})
.style('stroke-opacity', function (arcd) {
return arcd.source === d.id || arcd.target === d.id ? 1 : 0.4;})
let nodes_selected = linkedNodes(d.id)
nodeLabels.transition().duration(200)
// .style("fill", d=> color(d.group))
.style("fill", function (nodeLabeld) {
return nodeLabeld.id == d.id || nodes_selected.includes(nodeLabeld.id) ? color(nodeLabeld.group) : "#ccc";})
.style("font-size", function (nodeLabeld) {
return nodeLabeld.id == d.id ? '11.5' : '9';})
.style('font-weight', function (nodeLabeld) {
return nodeLabeld.id == d.id || nodes_selected.includes(nodeLabeld.id) ? 'bold' : 'normal';})
// nodes.style('fill', nodes_selected.includes(d.id)? color(d.group) : "#ccc")
nodes.transition().duration(300)
.style('fill', function (nodeLaFill) {
return nodeLaFill.id == d.id || nodes_selected.includes(nodeLaFill.id) ? color(nodeLaFill.group) : "#ccc";})
d.try = 100
});
nodes.on('mouseout', function (d) {
nodes.style("fill", d=> color(d.group))
nodeLabels.style("fill", d=> color(d.group))
nodeLabels.style( "font-size", "9")
nodeLabels.style('font-weight', "normal")
nodes.transition().duration(300).style("fill", d=> color(d.group));
arcs.style('stroke', d=>color_predicate(d.predicate));
arcs.style('stroke-width', 1);
arcs.style("stroke-opacity", 0.8);
});
function zoom() {
arcGroup.attr("transform", d3.event.transform);
}
function pan() {
zoomer.translateBy(svg.transition().duration(100), d3.event.wheelDeltaX, d3.event.wheelDeltaY);
}
return svg.node();
}
// allNodesNames2 = graph.nodes.sort(function(x, y){
// return nodes_order.indexOf(x.group) - nodes_order.indexOf(y.group) || d3.descending(x.weight,y.weight); }).map(function(d){return d.label});
types = Array.from(new Set(links.map(d => d.predicate)))
linkedNodes = n => {
return Array.from(new Set(
links
.flatMap(d => d.source === n || d.target === n ? [d.source, d.target] : null)
.filter(d => d !== null)
));
}
nodes_order = ["chemical", "gene","process" ,"disease" ]
minDegree = d3.min(
d3.values(nodes), function(d) {
d.weight =
graph.links.filter(function(l) { return l.source == d.id || l.target == d.id}).length;
return d.weight; })
maxDegree = d3.max(
d3.values(nodes), function(d) {
d.weight =
graph.links.filter(function(l) { return l.source == d.id || l.target == d.id}).length;
return d.weight; })
test_Scale = d3.scalePoint()
.domain(allNodesNames)
.range(node_orders_num)
node_orders_num = {
let sum = [];
let previous_group = graph_nodes_sorted[0].group
let cnt = -1
let element = 0
for (var i = 0; i < graph_nodes_sorted.length; i++) {
let current_group = graph_nodes_sorted[i].group;
if (current_group == previous_group) {
cnt +=1
} else {
cnt =0
}
element = cnt*30
sum.push(element);
previous_group = current_group;
}
return sum;
}
graph_nodes_sorted2 = graph.nodes.sort(function(d) {
d.try =
graph.links.filter(function(l) { return l.source == d.id || l.target == d.id}).length
|| d3.descending(d.try,d.try)
})
node_orders = {
for (var i in graph.nodes) {
if (i.label == "IL6") {i.try3 = 1}
else { i.try3 == 100}
}}
graph_nodes_sorted = graph.nodes.sort(function(d) {
d.weight =
graph.links.filter(function(l) { return l.source == d.id || l.target == d.id}).length
|| d3.descending(d.weight,d.weight)
})
// graph.links.filter(function(l) { return l.source == d.id || l.target == d.id}).length
links = graph["links"]
xScale = d3.scalePoint()
.domain(nodes_order)
.range([margin.left+14, margin.left+690])
yScale = d3.scalePoint()
.domain(nodes_order)
.range([0,height])
// allNodesGroups = graph.nodes.sort(function(x, y){
// return nodes_order.indexOf(x.group) - nodes_order.indexOf(y.group) || d3.descending(x.weight,y.weight); }).map(function(d){return d.group});
allNodesNames = graph.nodes.sort(function(x, y){
return nodes_order.indexOf(x.group) - nodes_order.indexOf(y.group) || d3.descending(x.weight,y.weight); }).map(function(d){return d.label});
idToNode=
{
let dict = {};
graph.nodes.sort(function(x, y){
return nodes_order.indexOf(x.group) - nodes_order.indexOf(y.group) || d3.descending(x.weight,y.weight);
}).forEach(function(n) {
dict[n.id] = n;
});
return dict;
}
// idToTargetNodes =
// {
// let dict = {};
// graph.nodes.sort(function(x, y){
// return nodes_order.indexOf(x.group) - nodes_order.indexOf(y.group) || d3.descending(x.weight,y.weight);
// }).forEach(function (n) {
// dict[n.id] = [];
// graph.links.forEach(function (l) {
// if (l.source === n.id) {
// dict[n.id].push(l.target);
// }
// });
// });
// return dict;
// }
nodes = graph["nodes"]
y = d3.scalePoint(graph.nodes.map(d => d.label).sort(d3.descending), [margin.top, height - margin.bottom])
margin = ({top: 305, right: 5, bottom: 5, left: 30})
height = 500 - margin.top - margin.bottom -10;
step = 14
color_predicate = d3.scaleOrdinal()
.domain(["Activation", "Inhibition", "IncreaseAmount", "DecreaseAmount", "Associated", "HAS_A_TRIAL"])
.range(["#d5f2bd", "#edc2bb", "#d5f2bd","#edc2bb","#f5d0b0", "#c3c3e3"]);
color = d3.scaleOrdinal()
.domain(nodes_order)
.range(["#ff7f0e","#1f77b4", "#d62728","#2ca02c"]);
import {swatches} from "@d3/color-legend"
graph = FileAttachment("test_group_fixed.json").json()
graph3 = FileAttachment("test_group_fixed.json").json()
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.
