// https://observablehq.com/@sorig/console-log-without-leaving-your-notebook
consoleHook = {
// replay
if (!console.stdlog) {
console.stdlog = console.log.bind(console);
console.logs = [];
}
console.log = function(){
console.logs.push(Array.from(arguments));
console.stdlog.apply(console, arguments)
mutable logHistoryUpdated = true;
}
}
button3 = {
const button = html`<button>Clear selection<i></i></button>`;
// button.onclick = () => a.push(mutable x++);
button.onclick = () => mutable switcher = -1*switcher;
return button;
}
mutable logHistoryUpdated = false;
mutable switcher = 1
log2 = {
consoleHook
// var logHistoryUpdated = false
logHistoryUpdated
// return console.logs
return console.logs.slice();
}
// log2 = {
// consoleHook
// logHistoryUpdated
// if (console.logs.slice()[0] != undefined){
// var selected_data_nodes = output_links(console.logs.slice())[1]
// var selected_data_links = output_links(console.logs.slice())[0]
// return [selected_data_links,selected_data_nodes ]
// }
// else {
// return console.logs.slice()
// }
// }
log = {
if (switcher<0) {
console.clear()
console.logs = []
mutable logHistoryUpdated = true
mutable switcher = 1
return []
} else {
// consoleHook
// logHistoryUpdated
// return console.logs
return console.logs.slice();
}
}
// selected_data_nodes = output_links(log2)[1]
// selected_data_links= output_links (log2)[0]
// function output_links (log2) {
// let links_selected = []
// let nodes_selected = []
// for (var i = 0; i < log2.length; i++) {
// if (log2[i][0] == "link") {
// // links_selected.push(log2[i]);
// links_selected.push(log2[i][0])
// } else {
// nodes_selected.push(log2[i]);
// }
// return [links_selected, nodes_selected]
// }
// }
clicked = log2
// Object.getOwnPropertyDescriptor(graph_all_links, 'y_indent').value
// margin = ({top: 305, right: 5, bottom: 5, left: 460})
margin = ({top: 0, right: 0, bottom: 0, left: 0})
height = 680
//data = FileAttachment("json_G.json").json()
data = FileAttachment("test.json").json()
types = Array.from(new Set(links.map(d => d.predicate)))
links = data.links
measureWidth = {
const context = document.createElement("canvas").getContext("2d");
return text => context.measureText(text).width;
}
stroke_width_key = d3.scaleOrdinal()
.domain(["1", undefined])
.range(["4", "0"]);
color3 = d3.scaleOrdinal()
.domain(["Activation", "Inhibition", "IncreaseAmount", "DecreaseAmount", "Associated", "HAS_A_TRIAL"])
.range(["#d5f2bd", "#edc2bb", "#d5f2bd","#edc2bb","#f5d0b0", "#c3c3e3"]);
color2 = d3.scaleOrdinal(types, d3.schemeCategory10)
color = {
const scale = d3.scaleOrdinal(d3.schemeCategory10);
//const scale = d3.scaleOrdinal([`#383867`, `#584c77`, `#33431e`, `#a36629`, `#92462f`, `#b63e36`, `#b74a70`, `#946943`]); // [`#383867`, `#584c77`, `#33431e`, `#a36629`, `#92462f`, `#b63e36`, `#b74a70`, `#946943`]
return d => scale(d.group);
}
shema = d3.schemeCategory10
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
d3 = require("d3@6")
function clamp(x, lo, hi) {
return x < lo ? lo : x > hi ? hi : x;
}
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.
