log = {
if (switcher<0) {
console.clear()
console.logs = []
mutable logHistoryUpdated = true
return []
} else {
// consoleHook
// logHistoryUpdated
// return console.logs
return console.logs.slice();
}
}
console
mutable logHistoryUpdated = false;
import {button} from "@jashkenas/inputs"
val
val = {
b
return !this;
}
viewof b = button2()
function button2(config = {}) {
const {
value = "Reset", title, description, disabled
} = typeof config === "string" ? {value: config} : config;
const form = input({
type: "button", title, description,
attributes: {disabled, value}
});
form.output.remove();
return form;
}
d3format = require("d3-format@1")
// 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;
}
}
replay, renderSomething('Button Click Random Number:')
renderSomething = function(cnt){
return cnt +2
}
viewof replay = html`<button>click me</button>`;
// viewof replay = Inputs.button("Replay")
console
button3 = {
const button = html`<button>Switch modes <i>x</i></button>`;
// button.onclick = () => a.push(mutable x++);
button.onclick = () => mutable switcher = -1*switcher;
return button;
}
switcher
// 1- on, -1 - off
mutable switcher = 1
log_print = log
// Object.getOwnPropertyDescriptor(graph_all_links2, 'current_link').value
// graph_all_links2.update(data);
ready = true
// 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);
}
// d3.selectAll("#link_all")
// .style("marker-end", d => `url(${new URL(`#arrow-${d.predicate}`, location)})`)
// //.style("stroke", l => color3(l.predicate))
// .style("stroke", function (l) {
// if (l=== current_link) {
// return color3(l.predicate)
// }else {
// return "lightgrey"
// }})
d3.schemeCategory10
// drag = simulation => {
// function click(event, d) {
// delete d.fx;
// delete d.fy;
// d3.select(this).classed("fixed", false);
// simulation.alpha(1).restart();
// }
// function dragstart() {
// d3.select(this).classed("fixed", true);
// }
// function dragged(event, d) {
// d.fx = clamp(event.x, 0, width);
// d.fy = clamp(event.y, 0, height);
// simulation.alpha(1).restart();
// }
// }
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.
