Visual Analytics Researcher
Public
Edited
Dec 13, 2023
1 fork
phenotype_info_file = FileAttachment("phenotype_table.json").json()
phenotype_lookup_map = new Map(Object.entries(phenotype_info_file.pheno_ids).map(d => [+d[0], d[1]]))
// force_chart = ForceGraph(ph_graph, {
// nodeId: d => d.id,
// nodeGroup: d => d.group,
// nodeTitle: d => `${phenotype_lookup_map.get(d.id)} (${d.group})`,
// nodeRadius: 3,
// width: 1200,
// height: 1200,
// invalidation // a promise to stop the simulation when the cell is re-run
// })
function makeGraph(data) {
const graph = getGraph(data);
console.log(graph);
return ForceGraph(graph, {
nodeId: d => d.id,
nodeGroup: d => d.group,
nodeTitle: d => `${phenotype_lookup_map.get(d.id)} (${d.id})`,
// linkStrokeWidth: l => Math.sqrt(l.value),
linkStrokeWidth: l => Math.max(l.value * 2.5, 0.2),
nodeRadius: nodeSize,
width,
height: 1000,
invalidation // a promise to stop the simulation when the cell is re-run
});
}
getTreeGraphData(ph_data, highlightedPhenotype[0]);
function getTreeGraphData(phenotypes, highlighted_phenotype_id) {
const pheno = phenotypes.find(d => d.id === highlighted_phenotype_id);
const tree = {
name: pheno.name,
id: pheno.id,
children: Object.entries(pheno.jaccards).map(d => ({name: `${phenotype_lookup_map.get(+d[0])} (${d[1]})`, id: +d[0], value: d[1]}))
};
return tree;
}
function getTreeGraph(treedata) {
// Specify the chart’s dimensions.
let width = 928;
const height = 400;
const color = d3.scaleSequentialSqrt([0, 1], d3.interpolatePuRd);
// Compute the graph and start the force simulation.
const root = d3.hierarchy(treedata);
const links = root.links();
const nodes = root.descendants();
console.log(nodes);
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id).distance(0).strength(.3))
.force("charge", d3.forceManyBody().strength(-150))
.force("x", d3.forceX())
.force("y", d3.forceY());
// Create the container SVG.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("style", "max-width: 100%; height: auto;");
// Append links.
const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.join("line");
const drag = simulation => {
function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
};
// Append nodes.
const node = svg.append("g")
.attr("fill", "#fff")
.attr("stroke", "#000")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("fill", d => d.children ? null : color(d.data.value))
.attr("stroke", d => d.children ? null : "#000")
.attr("r", d => d.children ? 6 : 4)
// .attr("r", 4.5)
.call(drag(simulation));
node.append("title")
.text(d => d.data.name);
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);
});
invalidation.then(() => simulation.stop());
return svg.node();
}
function getGraph(phenotypes) {
const ids = [];
const all_links = phenotypes.map(d => {
const jaccard_entries = Object.entries(d.jaccards);
let links = [];
if (jaccard_entries.length > 0) {
ids.push(d.id);
jaccard_entries.forEach(e => {
links.push({
source: d.id,
target: +e[0],
value: e[1]
});
ids.push(+e[0]);
});
}
return links;
});
return {
// ids,
nodes: [...new Set(ids)].map(d => ({id: d, group: "phenotype"})),
links: d3.merge(all_links)
}
}
// Copyright 2021 Observable, Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/disjoint-force-directed-graph
function ForceGraph({
nodes, // an iterable of node objects (typically [{id}, …])
links // an iterable of link objects (typically [{source, target}, …])
}, {
nodeId = d => d.id, // given d in nodes, returns a unique identifier (string)
nodeGroup, // given d in nodes, returns an (ordinal) value for color
nodeGroups, // an array of ordinal values representing the node groups
nodeTitle, // given d in nodes, a title string
nodeFill = "currentColor", // node stroke fill (if not using a group color encoding)
nodeStroke = "#fff", // node stroke color
nodeStrokeWidth = 1.5, // node stroke width, in pixels
nodeStrokeOpacity = 1, // node stroke opacity
nodeRadius = 5, // node radius, in pixels
nodeStrength,
linkSource = ({source}) => source, // given d in links, returns a node identifier string
linkTarget = ({target}) => target, // given d in links, returns a node identifier string
linkStroke = "#999", // link stroke color
linkStrokeOpacity = 0.7, // link stroke opacity
linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels
linkStrokeLinecap = "round", // link stroke linecap
linkStrength,
colors = d3.schemeTableau10, // an array of color strings, for the node groups
width = 640, // outer width, in pixels
height = 400, // outer height, in pixels
invalidation // when this promise resolves, stop the simulation
} = {}) {
let transform = d3.zoomIdentity;
// Compute values.
const N = d3.map(nodes, nodeId).map(intern);
const LS = d3.map(links, linkSource).map(intern);
const LT = d3.map(links, linkTarget).map(intern);
if (nodeTitle === undefined) nodeTitle = (_, i) => N[i];
const T = nodeTitle == null ? null : d3.map(nodes, nodeTitle);
const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern);
const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth);
// Replace the input nodes and links with mutable objects for the simulation.
nodes = d3.map(nodes, (_, i) => ({id: N[i]}));
links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]}));
// Compute default domains.
if (G && nodeGroups === undefined) nodeGroups = d3.sort(G);
// Construct the scales.
const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors);
// Construct the forces.
const forceNode = d3.forceManyBody().strength(forceStrength);
const forceLink = d3.forceLink(links).id(({index: i}) => N[i]);
if (nodeStrength !== undefined) forceNode.strength(nodeStrength);
if (linkStrength !== undefined) forceLink.strength(linkStrength);
const simulation = d3.forceSimulation(nodes)
.force("link", forceLink)
.force("charge", forceNode)
.force("x", d3.forceX())
.force("y", d3.forceY())
.on("tick", ticked);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
const link = svg.append("g")
.attr("stroke", linkStroke)
// .attr("stroke-opacity", linkStrokeOpacity)
.attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null)
.attr("stroke-linecap", linkStrokeLinecap)
.selectAll("line")
.data(links)
.join("line")
.attr("stroke-opacity", 0.5);
if (W) link.attr("stroke-width", ({index: i}) => W[i]);
const node = svg.append("g")
.attr("fill", nodeFill)
.attr("stroke", nodeStroke)
.attr("stroke-opacity", nodeStrokeOpacity)
.attr("stroke-width", nodeStrokeWidth)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", nodeRadius)
.call(drag(simulation));
if (G) node.attr("fill", ({index: i}) => color(G[i]));
if (T) node.append("title").text(({index: i}) => T[i]);
// Handle invalidation.
if (invalidation != null) invalidation.then(() => simulation.stop());
function intern(value) {
return value !== null && typeof value === "object" ? value.valueOf() : value;
}
// svg.call(d3.zoom()
// // .extent([[0,0], [width, height]])
// .scaleExtent([-0.5,8])
// .on("zoom", zoomed));
// function zoomed({transform}) {
// svg.attr("transform", transform);
// }
function ticked() {
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);
}
function drag(simulation) {
function dragstarted(event) {
if (!event.active) simulation.alphaTarget(0.3).restart();
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
}
function dragged(event) {
event.subject.fx = event.x;
event.subject.fy = event.y;
}
function dragended(event) {
if (!event.active) simulation.alphaTarget(0);
event.subject.fx = null;
event.subject.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
return Object.assign(svg.node(), {scales: {color}});
}
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.
