Published
Edited
Jun 15, 2021
chart = {
//const links = data.links.map(d => Object.create(d));
//const nodes = data.nodes.map(d => Object.create(d));
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(flinks).id(d => d.id)
.distance(230))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const g = svg.append("g")
const link = g.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(flinks)
.join("line")
.attr("stroke-width", d => Math.sqrt(40/d.MR))
.style("stroke", color_link);
const globalNode = g.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5);
const tooltip = d3tip()
.style('color', 'white')
//.style('border', 'solid 2px black')
.style('background-color', 'rgba(0,0,0,0.5)')
.style('border-radius', '4px')
.style("padding", "6px")
.style('float', 'left')
.style('font-family', 'Nunito')
.style("font-size", "5px")
.offset([-10,50])
.html(d => `
<div style='float: right'>
Gene Name: ${d.alias} <br/>
AGI Locus: ${d.id} <br/>
</div>`)
svg.call(tooltip)
const node = globalNode
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", 8)
.attr("fill", color)
.call(drag(simulation))
.on('mouseover.fade', fade(0.1))
.on('mouseover', tooltip.show)
.on('mouseout.fade', fade(1))
.on('mouseout', tooltip.hide);
function fade(opacity) {
return d => {
node.style('opacity', function (o) { return isConnected(d, o) ? 1 : opacity });
link.style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : opacity));
if(opacity === 1){
node.style('opacity', 1)
link.style('stroke-opacity', 1)
}
};
}
const linkedByIndex = {};
links.forEach(d => {
linkedByIndex[`${d.source.index},${d.target.index}`] = 1;
});
function isConnected(a, b) {
return linkedByIndex[`${a.index},${b.index}`] || linkedByIndex[`${b.index},${a.index}`] || a.index === b.index;
}
const textElements = g.append('g')
.selectAll('text')
.data(nodes)
.enter().append('text')
.text(node => node.alias)
.attr('font-size', 10)
.attr("font-family", "Nunito")
.attr("fill", "#555")
.attr('dx', 10)
.attr('dy', 4)
let zoomLvl = 1;
let lastK = 0;
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);
textElements
.attr("x", d => d.x)
.attr("y", d => d.y);
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
invalidation.then(() => simulation.stop());
svg.call(d3.zoom()
.extent([[0, 0], [width, height]])
.scaleExtent([1, 80])
.on("zoom", zoomed));
function zoomed() {
let e = d3.event
if(e.transform.k > 2 && lastK != e.transform.k){
lastK = e.transform.k;
console.log("zoomed");
zoomLvl =Math.log2(e.transform.k);
globalNode.attr("stroke-width", 1.5/zoomLvl );
link.attr("stroke-width", d => Math.sqrt(d.value)/(zoomLvl));
}
g.attr("transform", e.transform);
}
return svg.node();
}
legend_nodes = swatches({
colour: d3.scaleOrdinal(["Query gene", "Co-expressed gene"], ["#5f36c7", "#de214a", "#2ca02c"]),
labelFont: "bold 15px Nunito",
swatchRadius: 10,
})
legend_links = legend({
color: d3.scaleSequential([0,100], d3.interpolateInferno).nice(),
title: "Mutual Rank",
})
viewof range = slider({
min: 1,
max: 100,
step: 0.1,
value: 100,
format: ",",
title:
"MR threshold"
})
DOM.download(serialize(chart), data.nodes[0].id , "Download as SVG")
download = DOM.download(() => rasterize(chart), undefined, "Save as PNG")
flinks = {
let links = data.links.map(createO);
function createO(d){
let o = Object.create(d);
//debugger;
return o;
}
// createO = (d) => Object.create(d); // refactoring the above
links = (range)? links.filter(d=> d.MR <= range ) : links
return links;
}
height = 1000
width = 1200
color = {
const scale = d3.scaleOrdinal()
.domain(['Query', 'Coex'])
.range(["#5f36c7", "#de214a"]);
return d => scale(d.group);
}
color_link = {
var scale = d3.scaleSequential(d3.interpolateInferno)
.domain([1, 100]);
// .range(["orange", "green"]);
return d => scale(d.MR);
}
function rasterize(svg) {
let resolve, reject;
const promise = new Promise((y, n) => (resolve = y, reject = n));
const image = new Image;
image.onerror = reject;
image.onload = () => {
const rect = svg.getBoundingClientRect();
const context = DOM.context2d(rect.width, rect.height);
context.drawImage(image, 0, 0, rect.width, rect.height);
context.canvas.toBlob(resolve);
};
image.src = URL.createObjectURL(serialize(svg));
return promise;
}
serialize = {
console.log('toto');
const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";
return function serialize(svg) {
svg = svg.cloneNode(true);
const fragment = window.location.href + "#";
const walker = document.createTreeWalker(
svg,
NodeFilter.SHOW_ELEMENT,
null,
false
);
while (walker.nextNode()) {
for (const attr of walker.currentNode.attributes) {
if (attr.value.includes(fragment)) {
attr.value = attr.value.replace(fragment, "#");
}
}
}
svg.setAttributeNS(xmlns, "xmlns", svgns);
svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
const serializer = new window.XMLSerializer();
const string = serializer.serializeToString(svg);
return new Blob([string], { type: "image/svg+xml" });
};
}
d3 = require("d3@5")
d3tip = require('d3-tip')
import {legend} from "@d3/color-legend"
import {swatches} from "@bayre/svg-swatches"
import {slider} from '@jashkenas/inputs'
import {rangeSlider} from '@mootari/range-slider'
import {ramp} from "@d3/color-schemes"
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.
