25:["$","title",null,{"children":"Vis toolbox (@tiga1231/lib) | jrogerthat | Observable"}] 49:T6a0,## Usage Principles 1. Focus on _static_ visualization with a good default style 1. Static plots by default, interactions are optional. 1. Two backends: - SVG (default) for small-scale, fast-dev with interactions. - [WIP] WebGL canvas for large-scale Vis. Using ReGL. 1. Functions can be called three ways, in a unified API 1. ```scatter(null, data, {keyword:style})```
// creates and returns an ```
// passes on D3 selection for chaining 1. ```some_selection.call(scatter, data, {keyword:style})```
// compatible with D3 "call" ## Other API Design Principles 1. Styles mostly follow ```plt.style.use('ggplot')```, but use better and re-configurable colorscheme 1. Good naming: 1. Mimics ```matplotlib```, aka Pyplot [[pyplot doc]](https://matplotlib.org/stable/tutorials/introductory/pyplot.html) 1. Provide extensibility for animation and interaction through good naming convention: - Sensible `````` grouping - Sensible ```class``` names - Attach objects to the container. e.g., scatter plot function may (TBD) attach .points to its first argument as a side effect. 1. Prefer standalone, 'shallow' components that can be composed later, rather than deeply inter-connected components in the API. 1. Components handle "padding"s and "spacings", but do not handle "margin". [[Difference]](https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/Update%20css%20margin%20vs%20padding-3.png?width=1300&name=Update%20css%20margin%20vs%20padding-3.png)[[Explanation]](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) 4a:T529,function progress_bar({ prefix = "Trial", max = 10, start = 0, width = 400, font_size = 16 } = {}) { let height = 26; let pbar_height = 5; let sx = d3 .scaleLinear() .range([(font_size / 1.7) * (2 + prefix.length + "88/88".length), width]); let svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("margin-bottom", "px"); let text = svg .append("text") .attr("x", 0) .attr("y", height / 2) .attr("font-family", "monospace") .attr("font-size", ` ${font_size}px`) .attr("alignment-baseline", "middle") .text(`${prefix} 88/88`); let pbar_bg = svg .append("rect") .attr("x", sx(0)) .attr("y", height / 2 - pbar_height / 2) .attr("height", pbar_height) .attr("width", sx(1) - sx(0)) .attr("fill", "#eee"); let pbar = svg .append("rect") .attr("x", sx(0)) .attr("y", height / 2 - pbar_height / 2) .attr("height", pbar_height) .attr("fill", "#1f78b4"); let svg_node = svg.node(); svg_node.update = (i) => { if (i >= max) { i = max - 1; } pbar.attr("width", sx((i + 1) / max) - sx(0)); text.text(`${prefix} ${i + 1}/${max}`); svg_node.value = i; svg_node.dispatchEvent(new Event("input", {})); }; svg_node.update(start); return svg_node; }4b:T1859,function scatter( sel = undefined, data = undefined, { xticks = 5, yticks = 5, background = "#eee", x_tickvalues = undefined, y_tickvalues = undefined, x = (d) => d.x, y = (d) => d.y, scales = {}, width = undefined, height = undefined, padding_bottom = 18, padding_left = 40, padding_right = 0, padding_top = 0, pad = 0.1, // crossfilter = undefined, // plots = [], s = (d) => 10, //marker size return_obj = "g", // brush = false, title = undefined, is_square_scale = true, is_log_scale = false, xlabel = undefined, ylabel = undefined, label_fontsize = 12, stroke = "#fff", stroke_width = 0.5, zoom = false, brush = false, brush_listeners = { start: () => {}, brush: (brushed_data) => { console.log("brushed_data", brushed_data); }, end: () => {} } } = {} ) { if (sel === undefined) { width = width || 500; height = height || 500; sel = d3.create("svg").attr("width", width).attr("height", height); } else { width = width || sel.attr("width") || 500; height = height || sel.attr("height") || 500; } let res = sel; let sc = scales.sc || ((d) => C[0]); let main = sel.append("g").attr("class", "scatter"); let bg = main.append("g").attr("class", "bg"); // g that draws frame (axes and ticks) let fg = main.append("g").attr("class", "fg"); // g that draws marks // let inter = main.append("g").attr("class", "interaction"); //draw a frame bg.call(frame, data, { background, xticks, yticks, x_tickvalues, y_tickvalues, x, y, scales, width, height, padding_bottom, padding_left, padding_right, padding_top, pad, title, is_square_scale, is_log_scale, xlabel, ylabel, label_fontsize }); let { sx, sy } = bg.scales; //marks let r = (d) => Math.sqrt(s(d)); let points = fg .selectAll(".point") .data(data, (d, i) => (d.id !== undefined ? d.id : i)) .join("circle") .attr("class", "point") .attr("cx", (d) => sx(x(d))) .attr("cy", (d) => sy(y(d))) .attr("fill", (d) => sc(d)) .attr("stroke-width", stroke_width) .attr("stroke", stroke) .attr("r", (d) => r(d)); // Zoom let { ax, ay, gx, gy } = bg; if (zoom) { zoom = d3 .zoom() .scaleExtent([0.3, 20]) .on("zoom", function zoomed({ transform }) { fg.attr("transform", transform); points .attr("r", (d) => r(d) / Math.sqrt(transform.k)) .attr("stroke-width", stroke_width / Math.sqrt(transform.k)); gx.call(ax.scale(transform.rescaleX(sx))); gy.call(ay.scale(transform.rescaleY(sy))); sel .selectAll(".tick > line") .style("stroke", d3.color(background).brighter()); sel.selectAll("path.domain").style("display", "none"); }); sel.call(zoom); //assuming sel is the svg; res.reset = function reset() { sel.transition().duration(750).call(zoom.transform, d3.zoomIdentity); }; } // Brush if (brush) { // let ex = sx.range(); // let ey = sy.range(); // ey = [Math.min(...ey), Math.max(...ey)]; // let extent = [ // [ex[0], ey[0]], // [ex[1], ey[1]] // ]; let extent = [ [padding_left, padding_top], [width - padding_right, height - padding_bottom] ]; // .attr("x", padding_left) // .attr("y", padding_top) // .attr("width", width - padding_left - padding_right) // .attr("height", height - padding_top - padding_bottom) let cross = crossfilter(data); let dim_x = cross.dimension((d) => x(d)); let dim_y = cross.dimension((d) => y(d)); brush = d3 .brush() .extent(extent) .on("start", () => { if (brush_listeners["start"]) { brush_listeners["start"](res.brushed_data); } }) .on("brush", ({ selection }) => { //get brushed region let [bx0, bx1] = [selection[0][0], selection[1][0]]; let [by0, by1] = [selection[0][1], selection[1][1]]; //invert brush to data domain let [x0, x1] = [sx.invert(bx0), sx.invert(bx1)]; let [y0, y1] = [sy.invert(by0), sy.invert(by1)]; [y0, y1] = [Math.min(y0, y1), Math.max(y0, y1)]; //filter dim_x.filter([x0, x1]); dim_y.filter([y0, y1]); //update selection let brushed_data = dim_x.bottom(Infinity); data.forEach((d) => { d.brushed = false; }); brushed_data.forEach((d) => { d.brushed = true; }); res.update_style1("fill", (d) => (d.brushed ? scales.sc(d) : "#aaa")); //save brushed_data to returned object (res) res.brushed_data = brushed_data; //call listener, if any if (brush_listeners["brush"]) { brush_listeners["brush"](res.brushed_data); } // set_value(res, { brush: { selected: selected_data } }); }) .on("end", () => { if (brush_listeners["end"]) { brush_listeners["end"](res.brushed_data); } }); main.append("g").attr("class", "brush").call(brush); } function update_style1(attr_name, attr_func) { points.attr(attr_name, attr_func); } function update_style(style) { points .attr("fill", (d, i) => style(d)["fill"]) .attr("stroke", (d, i) => style(d)["stroke"] || stroke); } function update_position(data, { duration = 600 } = {}) { points .data(data) .transition() .duration(duration) .attr("cx", (d) => sx(x(d))) .attr("cy", (d) => sy(y(d))); } //expose functions and attribute res.update_position = update_position; res.update_style = update_style; res.update_style1 = update_style1; res.scales = { sx, sy, sc }; res.x = x; res.y = y; res.ax = bg.ax; res.ay = bg.ay; res.gx = bg.gx; res.gy = bg.gy; res.points = points; res.styles = { plot_width: width, plot_width: height, padding_left: padding_left, padding_right: padding_right, padding_top: padding_top, padding_bottom: padding_bottom, marker_radius: r }; return res; }4c:T63c,gl_canvas = { let width = 400; let height = width * 0.618; let canvas = create_canvas(width, height); let regl = create_regl(canvas); //data let n = 100; let positions = d3.range(n).map((_) => [Math.random(), Math.random()]); let colors = d3.range(n).map((_) => [0.3, 0.3, 0.9 * Math.random(), 1]); let sizes = d3.range(n).map((_) => 10 * Math.random() + 25); //define render function canvas.clear = ()=>regl.clear({ color: [0.15, 0.15, 0.15, 1] }); canvas.render = create_regl_program(regl, { vert: ` precision mediump float; attribute vec2 position; attribute vec4 color; attribute float size; varying vec4 v_color; void main() { gl_Position = vec4(position, 0, 1); gl_PointSize = size; v_color = color; }`, frag: ` precision mediump float; varying vec4 v_color; void main() { //round marks vec2 pointCoord = (gl_PointCoord.xy-0.5)*2.0; float dist = length(pointCoord); if (dist>1.0) discard; vec4 border_color = vec4(1, 1, 1, 1); float mixing_factor = smoothstep(0.1, 0.05, abs(dist-0.95)); gl_FragColor = mix(v_color, border_color, mixing_factor); }`, kwargs: { attributes: { position: regl.prop("positions"), color: regl.prop("colors"), size: regl.prop("sizes") }, uniforms: { }, count: regl.prop("count"), primitive: "points" } }); //draw canvas.clear(); canvas.render({ positions, colors, count: n, sizes }); return canvas; }4d:T478,function create_scatter_gl_program(regl) { let vert = ` precision mediump float; attribute vec2 position; attribute vec4 color; attribute float size; varying float v_size; varying vec4 v_color; void main() { gl_Position = vec4(position, 0, 1); gl_PointSize = size; v_color = color; v_size = size; }`; let frag = ` precision mediump float; varying vec4 v_color; varying float v_size; void main() { //round marks vec2 pointCoord = (gl_PointCoord.xy-0.5)*2.0; float dist = length(pointCoord); if (dist>1.0) discard; gl_FragColor = v_color; if (v_size > 6.0){ //border color if marker size > 2.0 vec4 border_color = vec4(1, 1, 1, 1); float eps = 1.0 / v_size; gl_FragColor = mix(v_color, border_color, smoothstep(2.0*eps, eps, abs(dist-(1.0-eps)))); } }`; let render_func = regl({ attributes: { position: regl.prop("positions"), color: regl.prop("colors"), size: regl.prop('size'), }, count: regl.prop('count'), primitive: "points", vert, frag }); return render_func; }4e:T848,function lines_gl( container = undefined, data = undefined, { is_framed = false, background = "#eee", xticks = 5, yticks = 5, x_tickvalues = undefined, y_tickvalues = undefined, x = (d) => d.x, y = (d) => d.y, scales = {}, width = 500, height = 500, padding_bottom = 18, padding_left = 40, padding_right = 0, padding_top = 0, pad = 0.1, title = undefined, is_square_scale = true, is_log_scale = false, xlabel = undefined, ylabel = undefined, label_fontsize = 12, stroke = "#fff", stroke_width = 0.2 } = {} ) { if (container === undefined) { container = create_svg(width, height); } container.call(frame, data, { background, xticks, yticks, x_tickvalues, y_tickvalues, x, y, scales, width, height, padding_bottom, padding_left, padding_right, padding_top, pad, title, is_square_scale, is_log_scale, xlabel, ylabel, label_fontsize }); let { sx, sy } = container.scales; if (!is_framed) { container.selectAll(".scatter").remove(); } let sx_gl = d3 .scaleLinear() .domain(sx.domain()) .range([-1 + (padding_left / width) * 2, 1 - (padding_right / width) * 2]); let sy_gl = d3 .scaleLinear() .domain(sy.domain()) .range([ -1 + (padding_bottom / height) * 2, 1 - (padding_top / height) * 2 ]); let sc = scales.sc || ((d) => C[0]); let sc_gl = (d) => { let c = d3.rgb(d3.color(sc(d))); return [c.r / 255, c.g / 255, c.b / 255, c.opacity]; }; let canvas = DOM.canvas( width * window.devicePixelRatio, height * window.devicePixelRatio ); canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; let regl = regl2({ canvas: canvas }); regl.clear({ color: [0, 0, 0, 0] }); let res = overlay([container, d3.select(canvas)]); res.render = get_lines_func(regl); res.render({ positions: data.map((d) => [sx_gl(x(d)), sy_gl(y(d))]), colors: data.map((d) => sc_gl(d)), count: data.length, }); return res; }4f:Td92,function splom( sel = undefined, data = undefined, { width = 400, height = 400, attrs = [], //Show histogram on the diagonal or not. //Currently, this only affects the layout and plotting histogram is not supported yet histogram = false, //TODO layout = "lower", //'lower', 'upper' or 'both' // margin_left = 600, padding_left = 0, padding_right = 0, padding_bottom = 0, padding_top = 0, wspace = 0.01, //The amount of width reserved for space between subplots. Similar to pyplot hspace = 0.01, //x and y axes scales = { sc: undefined }, // todo: flexible for individual subplots is_square_scale = false, is_log_scale = false, ticks = 0, //color styles, s = () => 5, //mark size, stroke = "#555", stroke_width = 0.1, //todo: //fill //cmap //c //texts label_fontsize = 10 } = {} ) { let n_attrs = attrs.length; let plot_width, plot_height; if (histogram || layout === "both") { plot_width = (width - padding_left - padding_right) / n_attrs; plot_height = (height - padding_top - padding_bottom) / n_attrs; } else { plot_width = (width - padding_left - padding_right) / (n_attrs - 1); plot_height = (height - padding_top - padding_bottom) / (n_attrs - 1); } sel.selectAll("g.plot").remove(); let plots = []; // scales = { // sc: (d) => d3.hcl(0,0,70), // } for (let i = 0; i < n_attrs; i++) { plots[i] = []; for (let j = 0; j < n_attrs; j++) { let ai = attrs[i]; let aj = attrs[j]; let should_plot = layout == "lower" ? i > j : layout == "upper" ? i < j : i != j; if (should_plot) { let sca = sel .append("g") .attr("class", "plot") .attr("transform", () => { if (histogram) { //not implemented return `translate(${padding_left + j * plot_width},${ padding_top + i * plot_height })`; } else { if (layout == "lower") { return `translate(${padding_left + j * plot_width},${ padding_top + (i - 1) * plot_height })`; } else if (layout == "upper") { return `translate(${padding_left + (j - 1) * plot_width},${ padding_top + i * plot_height })`; } else if (layout == "both") { return `translate(${padding_left + j * plot_width},${ padding_top + i * plot_height })`; } } }) .call(scatter, data, { xlabel: aj, ylabel: ai, label_fontsize: label_fontsize, ticks: ticks, x: (d) => d[aj], y: (d) => d[ai], scales: scales, width: plot_width, height: plot_height, padding_top: 0, //hspace*plot_height, padding_bottom: hspace * plot_height, padding_left: 0, //wspace*plot_width, padding_right: wspace * plot_width, s: s, is_square_scale: is_square_scale, is_log_scale: is_log_scale, stroke: stroke, stroke_width: stroke_width }); let { sx, sy } = sca.scales; plots[i][j] = sca; } else { plots[i][j] = undefined; } } } sel.plots = plots; return sel; }50:T467,function node_link_diagram( container, data, { //node position x = (d) => d.x, y = (d) => d.y, //node style r = (d) => 5, fill = (d) => C[0], stroke = (d) => "#eee", stroke_width = (d) => 1.5, //link style link_stroke = (d) => "#aaa", link_stroke_width = (d) => 2, width=300, height=300, } = {} ) { if(!container){ container = create_svg(width, height); } let { nodes, links } = data; container .selectAll(".link") .data(links) .join("line") .attr("class", "link") .attr("x1", (d) => x(d.source)) .attr("x2", (d) => x(d.target)) .attr("y1", (d) => y(d.source)) .attr("y2", (d) => y(d.target)) .attr("stroke", (d) => link_stroke(d)) .attr("stroke-width", (d) => link_stroke_width(d)); container .selectAll(".node") .data(nodes) .join("circle") .attr("class", "node") .attr("cx", (d) => x(d)) .attr("cy", (d) => y(d)) .attr("r", (d) => r(d)) .attr("fill", (d) => fill(d)) .attr("stroke", (d) => stroke(d)) .attr("stroke-width", d=>stroke_width(d)); return container; }51:T9f0,function scatter_gl( container = undefined, data = undefined, { is_framed = true, background = "#eee", xticks = 5, yticks = 5, x_tickvalues = undefined, y_tickvalues = undefined, x = (d) => d.x, y = (d) => d.y, scales = {}, width = 500, height = 500, padding_bottom = 18, padding_left = 40, padding_right = 0, padding_top = 0, pad = 0.1, s = (d) => 10, //marker size title = undefined, is_square_scale = false, is_log_scale = false, xlabel = undefined, ylabel = undefined, label_fontsize = 12, stroke = "#fff", stroke_width = 0.2 } = {} ) { if (container === undefined) { container = create_svg(width, height); } container.call(frame, data, { background, xticks, yticks, x_tickvalues, y_tickvalues, x, y, scales, width, height, padding_bottom, padding_left, padding_right, padding_top, pad, title, is_square_scale, is_log_scale, xlabel, ylabel, label_fontsize }); if (!is_framed) { container.selectAll(".scatter").remove(); } // Scales // From data to pixel coords on svg; let { sx, sy } = container.scales; //From pixels to GL's clip space let sx_svg2gl = d3.scaleLinear().domain([0, width]).range([-1, 1]); let sy_svg2gl = d3.scaleLinear().domain([0, height]).range([1, -1]); // From data to clip space let sx_gl = d3 .scaleLinear() .domain(sx.domain()) .range([sx_svg2gl(sx.range()[0]), sx_svg2gl(sx.range()[1])]); let sy_gl = d3 .scaleLinear() .domain(sy.domain()) .range([sy_svg2gl(sy.range()[0]), sy_svg2gl(sy.range()[1])]); let sc = scales.sc || ((d) => C[0]); let sc_gl = (d) => { let c = d3.rgb(d3.color(sc(d))); return [c.r / 255, c.g / 255, c.b / 255, c.opacity]; }; let canvas = DOM.canvas( width * window.devicePixelRatio, height * window.devicePixelRatio ); canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; let regl = regl2({ canvas: canvas }); let res = overlay([container, d3.select(canvas)]); res.overlay = container; //the svg/g overlay res.scales = container.scales; res.clear = () => regl.clear({ color: [0, 0, 0, 0] }); res.render = create_scatter_gl_program(regl); res.clear(); res.render({ positions: data.map((d) => [sx_gl(x(d)), sy_gl(y(d))]), colors: data.map((d) => sc_gl(d)), count: data.length, size: data.map((d) => s(d) * window.devicePixelRatio) }); return res; }52:T68c,annotated_gt_view = { gt.time = gt_time; let xy = gt.project(gt_data, 2); let sca = scatter_gl(undefined, xy, { // let sca = scatter(undefined, xy.slice(0, 1000), { width: 600, height: 300, is_square_scale: true, zoom: true, x: (d) => d[0], y: (d) => d[1], s: (d) => 2 }); // // // draw annotations let n_dim = gt_data[0].length; let eye = math.identity(n_dim)._data; let labels_data = [ { coord: [1, 1, 1, 1] }, { coord: [1, 1, 1, -1] }, { coord: [1, 1, -1, 1] }, { coord: [1, 1, -1, -1] }, { coord: [1, -1, 1, 1] }, { coord: [1, -1, 1, -1] }, { coord: [1, -1, -1, 1] }, { coord: [1, -1, -1, -1] }, { coord: [-1, 1, 1, 1] }, { coord: [-1, 1, 1, -1] }, { coord: [-1, 1, -1, 1] }, { coord: [-1, 1, -1, -1] }, { coord: [-1, -1, 1, 1] }, { coord: [-1, -1, 1, -1] }, { coord: [-1, -1, -1, 1] }, { coord: [-1, -1, -1, -1] } ]; let labels_xy = gt.project( labels_data.map((d) => d.coord), 3 ); labels_data.forEach((d, i) => { d.xy = labels_xy[i]; d.label = d.coord.toString().replaceAll("-1", "0"); }); sca.overlay .append("g") .attr("class", "label_overlay") .call(text, labels_data, { scales: sca.scales, x: (d) => d.xy[0], y: (d) => d.xy[1], t: (d) => d.label }); // sca.overlay // .append("g") // .attr("class", "lines_overlay") // .call( // line_segments, // labels_data.map((d) => ({ // x1: 0, // y1: 0, // x2: d.xy[0], // y2: d.xy[1] // })), // { // scales: sca.scales // } // ); return sca.node(); }53:T48d,class GrandTourCore { constructor(dim = 4, stepsize = 0.001) { this.stepsize = stepsize; this.dim = dim; // this.proj = orthogonalize( // d3.range(dim).map((i) => d3.range(dim).map((j) => Math.random())) // ); this.thetas = d3.range(dim * dim).map((i) => 0.5+Math.random()*(i+2)); this.t = 0; } project(x, dim = 2) { return numeric.dot( x, this.proj.map((d) => d.slice(0, dim)) ); } torus(dt, thetas) { thetas = thetas.map((theta) => theta * dt * this.stepsize); let rot = math.identity(this.dim)._data; for (let i = 0; i < this.dim; i++) { for (let j = i+1; j < this.dim; j++) { if(i==j) continue; let a = thetas[i * this.dim + j]; let m4 = [ [rot[i][i], rot[i][j]], [rot[j][i], rot[j][j]] ]; m4 = numeric.dot(m4, [ [Math.cos(a), Math.sin(a)], [-Math.sin(a), Math.cos(a)] ]); rot[i][i] = m4[0][0]; rot[i][j] = m4[0][1]; rot[j][i] = m4[1][0]; rot[j][j] = m4[1][1]; } } return rot; } set time(t) { this.proj = this.torus(t, this.thetas); } }54:T6a7,// Draw multiple polylines function lines( container = undefined, data = [ // array of polylines, where each polyline containes array of nodes. e.g., d3.range(10).map((i) => ({ x: i, y: Math.random() * 2 - 0.5 })), [ { x: 3, y: 0.5 }, { x: 4, y: -0.5 }, { x: 5, y: 0 }, { x: 6, y: 0 } ] ], //kwargs { // plotting styles is_framed = true, width = 400, height = 200, stroke = (line_data, i) => C[i], stroke_width = 2, // data accessors: x = (d) => d.x, y = (d) => d.y, //scales scales = { sx: undefined, sy: undefined } } = {} ) { if (container === undefined) { container = create_svg(width, height); } if (is_framed) { let frame1 = container.call(frame, data.flat(), { is_square_scale: false, scales, width, height, x, y, scales }); scales.sx = frame1.scales.sx; scales.sy = frame1.scales.sy; } else { if (scales.sx === undefined) { scales.sx = create_scale(data.flat(), { value_accessor: (d) => x(d), range: [0, width] }); } if (scales.sy === undefined) { scales.sy = create_scale(data.flat(), { value_accessor: (d) => y(d), range: [height, 0] }); } } container .selectAll(".line") .data(data) .join("path") .attr("class", "line") .attr("fill", "none") .attr("stroke", stroke) .attr("stroke-width", stroke_width) .attr( "d", d3 .line() .x(function (d) { return scales.sx(x(d)); }) .y(function (d) { return scales.sy(y(d)); }) ); return container; }55:T59e,//TO BE REFINED function hist( sel, data, { x = (d) => d, //x value accessor n_bins = 30, width = 300, height = 300, padding_left = 36, padding_right = 10, padding_top = 10, padding_bottom = 22, fill = "#1f77b4", mode = "density" //'count' or 'density' } = {} ) { //https://observablehq.com/@d3/kernel-density-estimation let values = data.map((d) => x(d)); let sx = d3 .scaleLinear() .nice() .domain(d3.extent(values, x)) .range([padding_left, width - padding_right]); let thresholds = sx.ticks(n_bins); let bins = d3.bin().domain(sx.domain()).thresholds(thresholds)(values); let sy = d3 .scaleLinear() .domain([0, d3.max(bins, (d) => d.length)]) .range([height - padding_bottom, padding_top]); if (mode === 'density'){ sy.domain([0, d3.max(bins, (d) => d.length/values.length)]) } sel .append("g") .attr("class", "hist-rect") .attr("fill", fill) .selectAll("rect") .data(bins) .join("rect") .attr("x", (d) => sx(d.x0) + 1) .attr("y", (d) => sy(mode === 'count' ? d.length : d.length/values.length)) .attr("width", (d) => sx(d.x1) - sx(d.x0) - 1) .attr("height", (d) => sy(0) - sy(mode === 'count' ? d.length : d.length/values.length)); sel.append("g").call(xaxis, sx, { shift_y: d3.max(sy.range()) }); sel.append("g").call(yaxis, sy, { shift_x: d3.min(sx.range()), ticks:2}); return bins; }56:T453,function bar( sel, data, { x = (d) => d.x, //x value accessor y = (d) => d.y, //x value accessor ymin = undefined, ymax = undefined, width = 300, height = 300, padding_left = 36, padding_right = 10, padding_top = 10, padding_bottom = 22, fill = C[0], padding_inner = 0.1 } = {} ) { let sx = d3 .scaleBand() .paddingInner(padding_inner) .domain(data.map((d) => x(d))) .range([padding_left, width - padding_right]); let sy = d3 .scaleLinear() .domain([ymin || 0, ymax || d3.max(data, y)]) .range([height - padding_bottom, padding_top]); sel .append("g") .attr("class", "bar-rect") .attr("fill", fill) .selectAll("rect") .data(data) .join("rect") .attr("x", (d) => sx(x(d))) .attr("y", (d) => sy(y(d))) .attr("width", (d) => sx.bandwidth()) .attr("height", (d) => { return Math.abs(sy(0) - sy(y(d))); }); sel.append("g").call(xaxis, sx, { shift_y: d3.max(sy.range()) }); sel.append("g").call(yaxis, sy, { shift_x: d3.min(sx.range()), ticks: 5 }); return sel; }57:T52e,function imshow( arr, { width = 100, height = 100, colormap = d3.interpolateViridis, // a colormap with domain([0,1]) // normalize = true, vmin = undefined, vmax = undefined } = {} ) { vmin = vmin !== undefined ? vmin : d3.min(arr.flat()); vmax = vmax !== undefined ? vmax : d3.max(arr.flat()); let sc = d3.scaleLinear().domain([vmin, vmax]).range([0, 1]); let [h, w] = [arr.length, arr[0].length]; let canvas = DOM.canvas(w, h); let context = canvas.getContext("2d"); context.canvas.style.width = `${width}px`; context.canvas.style.height = `${height}px`; /* no interpolation by default on canvas*/ context.canvas.className = "heatmap"; d3.select(context.canvas).style("image-rendering", "pixelated"); let res = canvas; const imageData = context.getImageData(0, 0, w, h); const data = imageData.data; res.update_data = (new_arr) => { for (let i = 0; i < h; i += 1) { for (let j = 0; j < w; j += 1) { let k = w * i + j; let c = d3.rgb(colormap(sc(new_arr[i][j]))); data[k * 4] = c.r; // red data[k * 4 + 1] = c.g; // green data[k * 4 + 2] = c.b; // blue data[k * 4 + 3] = 255; // alpha } } context.putImageData(imageData, 0, 0); return res; }; res.update_data(arr); return res; }58:T76f,/// https://observablehq.com/@d3/contours function contour( container, value_grid, { width = 100, height = 100, levels = 7, colormap = d3.interpolateViridis, fill_opacity = 0, stroke_opacity = 1, stroke_width = 1 // background = d3.hcl(300, 30, 2), } = {} ) { let arr = value_grid; if(container === undefined){ container = create_svg(width, height, '#fff'); } if (typeof levels === "number") { let extent = d3.extent(value_grid.flat()); levels = linspace(extent[0], extent[1], levels+1); } let sc = d3.scaleLinear().domain(levels).range(linspace(0, 1, levels.length)); let curve = d3.line().curve(d3.curveLinear); let sx = d3 .scaleLinear() .domain([0, value_grid[0].length]) .range([0, width]); let sy = d3 .scaleLinear() .domain([0, value_grid.length]) .range([0, height]); let ct = d3 .contours() .size([value_grid[0].length, value_grid.length]) .thresholds(levels); let polygons_by_level = ct(value_grid.flat()); polygons_by_level.forEach((contours_data, levelIndex) => { let fill_color = colormap(sc(levels[levelIndex])); let stroke_color = colormap(sc(levels[levelIndex])); let polygons = contours_data.coordinates; let g = container .append("g") .attr("stroke-width", stroke_width) .attr("stroke", stroke_color) .attr("stroke-opacity", stroke_opacity) .style("fill-opacity", fill_opacity) .attr("fill", fill_color); let level_set_polys = g .selectAll("path") .data(polygons) .join("path") .attr("fill-rule", "evenodd") .attr("d", (d) => { let curve_data = d; let curves = curve_data.map((c) => curve(c.map((p) => [sx(p[0]), sy(p[1])])) ); return curves.join(); }); }); container.scales = {sx, sy, sc, colormap}; return container; }59:T46c,function square_scale(x_extent, y_extent, width_extent, height_extent) { //centers let cx = (x_extent[0] + x_extent[1]) / 2; let cy = (y_extent[0] + y_extent[1]) / 2; let cw = (width_extent[0] + width_extent[1]) / 2; let ch = (height_extent[0] + height_extent[1]) / 2; //radii/range let rx = (x_extent[1] - x_extent[0]) / 2; let ry = (y_extent[1] - y_extent[0]) / 2; let rw = (width_extent[1] - width_extent[0]) / 2; let rh = (height_extent[1] - height_extent[0]) / 2; let sx, sy; if (Math.abs(rw / rh) > rx / ry) { sy = d3 .scaleLinear() .domain([cy - ry, cy + ry]) .range([ch - rh, ch + rh]); sx = d3 .scaleLinear() .domain([cx - ry, cx + ry]) .range([ cw - Math.abs(rh) * Math.sign(rw), cw + Math.abs(rh) * Math.sign(rw) ]); } else { sx = d3 .scaleLinear() .domain([cx - rx, cx + rx]) .range([cw - rw, cw + rw]); sy = d3 .scaleLinear() .domain([cy - rx, cy + rx]) .range([ ch - Math.abs(rw) * Math.sign(rh), ch + Math.abs(rw) * Math.sign(rh) ]); } return [sx, sy]; }5a:T13f7,function frame( sel = undefined, data = undefined, { background = "#eee", xticks = 5, yticks = 5, x_tickvalues = undefined, y_tickvalues = undefined, x = (d) => d.x, y = (d) => d.y, scales = {}, width = 200, height = 200, padding_bottom = 18, padding_left = 40, padding_right = 0, padding_top = 0, pad = 0.1, // crossfilter = undefined, // plots = [], s = (d) => 10, //marker size return_obj = "g", // brush = false, title = undefined, is_square_scale = true, is_log_scale = false, xlabel = undefined, ylabel = undefined, label_fontsize = 12, stroke = "#fff", stroke_width = 0.2 } = {} ) { if (sel === undefined) { sel = create_svg(width, height); } //domain / extent let ex = data !== undefined ? d3.extent(data, (d) => x(d)) : [0, 1]; let ey = data !== undefined ? d3.extent(data, (d) => y(d)) : [0, 1]; if (x_tickvalues !== undefined) { ex[0] = Math.min(ex[0], d3.min(x_tickvalues)); ex[1] = Math.max(ex[1], d3.max(x_tickvalues)); } if (y_tickvalues !== undefined) { ey[0] = Math.min(ey[0], d3.min(y_tickvalues)); ey[1] = Math.max(ey[1], d3.max(y_tickvalues)); } ex = [ex[0] - (ex[1] - ex[0]) * pad, ex[1] + (ex[1] - ex[0]) * pad]; ey = [ey[0] - (ey[1] - ey[0]) * pad, ey[1] + (ey[1] - ey[0]) * pad]; //range let rx = [padding_left, width - padding_right]; let ry = [height - padding_bottom, padding_top]; let sx, sy; if (is_square_scale) { let [sx0, sy0] = square_scale(ex, ey, rx, ry); sx = scales.sx || sx0; sy = scales.sy || sy0; } else { sx = is_log_scale ? d3.scaleLog() : d3.scaleLinear(); sy = is_log_scale ? d3.scaleLog() : d3.scaleLinear(); sx = scales.sx || sx.domain(ex).range(rx); sy = scales.sy || sy.domain(ey).range(ry); } let main = sel.append("g").attr("class", "frame"); //bg main .selectAll(".bg-rect") .data([0]) .join("rect") .attr("class", "bg-rect") .attr("x", padding_left) .attr("y", padding_top) .attr("width", width - padding_left - padding_right) .attr("height", height - padding_top - padding_bottom) .attr("fill", background); let g_axes = main.append("g").attr("class", "axes"); let g_labels = main.append("g").attr("class", "labels"); // Axes let ax = d3 .axisBottom(sx) .ticks(xticks) .tickSizeInner(-(height - padding_bottom - padding_top)); if (x_tickvalues !== undefined) { ax.tickValues(x_tickvalues); } let gx = g_axes .append("g") .attr("transform", `translate(0,${height - padding_bottom})`) .call(ax); let ay = d3 .axisLeft(sy) .ticks(yticks) .tickSizeInner(-(width - padding_left - padding_right)); if (y_tickvalues !== undefined) { ay.tickValues(y_tickvalues); } let gy = g_axes .append("g") .attr("transform", `translate(${padding_left},0)`) .call(ay); //TODO not good practice, polluted other views // sel.append("style").node().innerHTML = ` // .tick > line{ // stroke: ${d3.color(background).brighter()}; // } // path.domain{ // display: none; // } // `; sel .selectAll(".tick > line") .style("stroke", d3.color(background).brighter()); sel.selectAll("path.domain").style("display", "none"); // g_axes.selectAll(".tick > line").attr("stroke", d3.color(background).brighter()); // g_axes.selectAll("path.domain").attr("display", "none"); if (title) { g_labels .selectAll(".title") .data([title]) .join("text") .attr("class", "title") .attr( "transform", `translate(${ padding_left + (width - padding_right - padding_left) / 2 },${padding_top})` ) .attr("alignment-baseline", "top") .attr("text-anchor", "middle") .text((d) => d); } if (xlabel !== undefined) { g_labels .selectAll(".xlabel") .data([xlabel]) .join("text") .attr("class", "xlabel") .attr( "transform", `translate(${d3.mean(sx.range())},${height - padding_bottom - 2})` ) // .attr("alignment-baseline", "top") .attr("text-anchor", "middle") .attr("fill", "#666") .style("font-size", `${label_fontsize}px`) .text((d) => d); } if (ylabel !== undefined) { g_labels .selectAll(".ylabel") .data([ylabel]) .join("text") .attr("class", "ylabel") .attr( "transform", `translate(${padding_left + 2},${d3.mean(sy.range())}) rotate(90)` ) .attr("alignment-baseline", "bottom") .attr("text-anchor", "middle") .attr("fill", "#666") .style("font-size", `${label_fontsize}px`) .text((d) => d); } let res = sel; res.scales = { sx, sy }; res.x = x; res.y = y; res.ax = ax; res.ay = ay; res.gx = gx; res.gy = gy; res.styles = { plot_width: width, plot_width: height, padding_left: padding_left, padding_right: padding_right, padding_top: padding_top, padding_bottom: padding_bottom }; return res; }5b:T598,function legend(colors, { labels=undefined, n_cols = 10, rect_size = 20, font_size = 12, padding = 8, text_pad = 120, margin = 0}={} ) { let n_colors = colors.length; let n_rows = Math.ceil(n_colors / n_cols); let svg_width = labels === undefined ? margin * 2 + (rect_size + padding) * n_cols : margin * 2 + (rect_size + text_pad + padding) * n_cols; let svg_height = margin * 2 + (rect_size + padding) * n_rows; let svg = d3 .create("svg") .attr("width", svg_width) .attr("height", svg_height); let sx = d3 .scaleLinear() .domain([0, n_cols]) .range([margin, svg_width - margin]); let sy = d3 .scaleLinear() .domain([0, n_rows]) .range([margin, svg_height - margin]); let color_rects = svg .selectAll("rect") .data(colors) .join("rect") .attr("x", (d, i) => sx(i%n_cols)) .attr("y", (d, i) => sy(Math.floor(i/n_cols))) .attr("width", rect_size) .attr("height", rect_size) .attr("fill", (c) => c); if(labels !== undefined){ let legend_texts = svg .selectAll("text") .data(labels) .join("text") .attr("x", (d, i) => sx(i%n_cols)+ rect_size + 5) .attr("y", (d, i) => sy(Math.floor(i/n_cols)) + rect_size/2) .attr("fill", '#333') .attr("alignment-baseline", 'central') .style('font-size', `${font_size}px`) .text(d=>d); } return svg.node(); }5c:T9fc,function colorbar_vertical( g, color_scale, { width = 20, height = 220, margin_bottom = 0, margin_top = 0, n_intervals = 50, n_ticks = 5, tick_labels = undefined, ticks = undefined, title = "" } = {} ) { // let g = svg.append("g").attr("class", "colorbar"); let domain = color_scale.domain(); let sy = d3 .scaleLinear() .domain([domain[0], domain[domain.length - 1]]) .range([height - margin_bottom, margin_top]); if (ticks === undefined) { ticks = linspace(domain[0], domain[domain.length - 1], n_ticks); } let ay = d3.axisRight(sy).tickValues(ticks); if (tick_labels === undefined) { tick_labels = ticks; } ay.tickFormat(function (d, i) { return tick_labels[i]; }); let rect_width = width; let rect_height = Math.abs(sy(domain[domain.length - 1]) - sy(domain[0])) / n_intervals + 0.5; let rect_data = linspace( domain[0], domain[domain.length - 1], n_intervals + 1 ); g.selectAll("rect") .data(rect_data) .join("rect") .attr("x", "0") .attr("y", (d, i) => (i == n_intervals ? sy(d) : sy(d) - rect_height / 2)) .attr("width", rect_width) .attr("height", (_, i) => i == 0 || i == n_intervals ? rect_height / 2 : rect_height ) .attr("fill", (d) => color_scale(d)); let gy = g.append("g").attr("transform", `translate(${width}, 0)`).call(ay); gy.selectAll("path").remove(); //rotate middle tick labels if too long (>4 chars) // if (tick_labels !== undefined) { // gy.selectAll(".tick text") // .data( // gy // .selectAll(".tick text") // .data() // .map((d, i) => { // d = { value: +d }; // d.i = i; // d.label = tick_labels[i]; // return d; // }) // ) // .filter((d, i) => { // return ( // tick_labels !== undefined && // d.i != 0 && // d.i != tick_labels.length - 1 && // d.label.length > 4 // ); // }) // .attr("x", (d) => { // return `-${d.label.length / 2}ch`; // }) // .attr("dy", "1.8em") // .attr("transform", "rotate(-90)"); // } //colorbar title on the right g.append("text") .attr("class", "title") .attr("text-anchor", "middle") .attr("alignment-baseline", "hanging") .attr( "transform", `translate(${ rect_width + d3.max(tick_labels, (d) => d.length) * 12 },${d3.mean(sy.range())}) rotate(-90)` ) .text(title); }5d:Tcb1,// Client-side parser for .npy files // See the specification: http://docs.scipy.org/doc/numpy-dev/neps/npy-format.html // Credit: nvictus, Nezar Abdennur, // https://gist.github.com/nvictus/88b3b5bfe587d32ac1ab519fd0009607 numpy = (function () { function asciiDecode(buf) { return String.fromCharCode.apply(null, new Uint8Array(buf)); } function readUint16LE(buffer) { let view = new DataView(buffer); let val = view.getUint8(0); val |= view.getUint8(1) << 8; return val; } function fromArrayBuffer(buf) { // Check the magic number let magic = asciiDecode(buf.slice(0, 6)); if (magic.slice(1, 6) != "NUMPY") { throw new Error("unknown file type"); } let version = new Uint8Array(buf.slice(6, 8)), headerLength = readUint16LE(buf.slice(8, 10)), headerStr = asciiDecode(buf.slice(10, 10 + headerLength)); let offsetBytes = 10 + headerLength; //rest = buf.slice(10+headerLength); XXX -- This makes a copy!!! https://www.khronos.org/registry/typedarray/specs/latest/#5 // Hacky conversion of dict literal string to JS Object let info = {}; eval( "info = " + headerStr.toLowerCase().replace("(", "[").replace("),", "]") ); // Intepret the bytes according to the specified dtype let data; if (info.descr === "|u1") { data = new Uint8Array(buf, offsetBytes); } else if (info.descr === "|i1") { data = new Int8Array(buf, offsetBytes); } else if (info.descr === " { let buf = await res.arrayBuffer(); let ndarray = fromArrayBuffer(buf); return ndarray; }); } function get_array(url) { let data = get(url).then((d) => { return reshape(Array.from(d.data), d.shape); }); return data; } return { open: open, ajax: ajax, get: get, get_array: get_array, fromArrayBuffer: fromArrayBuffer }; })()5e:[] 29:{"id":"c5127674602cc41a","slug":null,"title":"Vis toolbox (@tiga1231/lib)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-10-28T13:18:16.387Z","update_time":"$D2023-10-28T13:18:16.387Z","view_time":null,"first_public_time":"$D2023-10-28T13:18:16.387Z","has_unpublished_edits":null,"fork":{"id":"0e9cb8152cd2ab5e","slug":"lib","title":"Vis toolbox (@tiga1231/lib)","owner":{"id":"7775d06948a95c4e","login":"tiga1231","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"d18f470d87fc3b35","login":"jrogerthat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e31fcb022bd2fb8a4a44fc82b8717ace8f9030de6701bb45df13512df77d3261","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":5890,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"71d74430949eb42d","login":"jrogerthat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e31fcb022bd2fb8a4a44fc82b8717ace8f9030de6701bb45df13512df77d3261","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"71d74430949eb42d","login":"jrogerthat","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e31fcb022bd2fb8a4a44fc82b8717ace8f9030de6701bb45df13512df77d3261","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vis toolbox (@tiga1231/lib)","cells":[{"id":0,"value":"# Vis toolbox (@tiga1231/lib)\n\nExtensible tools for building highly customizable UI.\nBased on d3 and ReGL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":971,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1235,"value":"---\n## API Template\nAll drawing APIs should follow this structure:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1587,"value":"template_demo = {\n let data = [];\n let svg = create_svg(500, 150, \"#eee\");\n svg\n .append(\"g\")\n .attr(\"class\", \"template\")\n .call(template_draw_something, data, {});\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1225,"value":"function template_draw_something(\n sel,\n data,\n { width = 300, height = 100 } = {}\n) {\n \n //draw a rect\n sel\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"#eaa\");\n \n //draw a text\n sel.append('text')\n .attr('x', 100)\n .attr('y', 50)\n .text('Test text')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5509,"value":"---\n## Progress bar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5512,"value":"pbar = progress_bar({\n prefix: \"Task\",\n max: 10,\n start: 0,\n width: 400,\n font_size: 16\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5514,"value":"pbar.update(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5507,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"---\n## Scatterplot, with zoom","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4412,"value":"viewof button = {\n let button = Inputs.button(\"Reset zoom\");\n button.onclick = scatter_with_zoom.reset;\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4400,"value":"scatter_with_zoom.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"scatter_with_zoom = {\n let data = d3.range(400).map((d) => [Math.random(), Math.random()]);\n let svg = d3.create(\"svg\").attr(\"height\", 300).attr(\"width\", 300);\n let sca = scatter(svg, data, {\n x: (d) => d[0],\n y: (d) => d[1],\n label_fontsize: 12,\n padding_top: 10,\n title: \"Scatter with Zoom\",\n xlabel: \"xlabel\",\n ylabel: \"ylabel\",\n width: 300,\n height: 300,\n x_tickvalues: linspace(0, 1, 4),\n yticks: 15,\n scales: { sc: (d) => C[0] },\n zoom: true\n });\n\n // // data point to color scale\n // let style = (d, i) => ({ fill: \"#fff\", stroke: \"blue\" });\n // sca.update_style(style);\n\n return sca;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5575,"value":"## Linked brush Scatter plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5726,"value":"mutable brushed_data = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5614,"value":"scatter_with_brush = {\n let data = d3.range(400).map((d) => [Math.random(), Math.random()]);\n let [w, h] = [300, 200];\n let svg = create_svg(w, h);\n let sca = scatter(svg, data, {\n x: (d) => d[0],\n y: (d) => d[1],\n label_fontsize: 12,\n padding_top: 10,\n title: \"Scatter with Brush\",\n xlabel: \"xlabel\",\n ylabel: \"ylabel\",\n width: w,\n height: h,\n x_tickvalues: linspace(0, 1, 4),\n yticks: 15,\n scales: { sc: (d) => C[0] },\n brush: true,\n brush_listeners: {\n end: (brushed_data1) => {\n console.log(\"brush end\", brushed_data1);\n },\n brush: (brushed_data1) => {\n console.log(\"brushing\", brushed_data1);\n mutable brushed_data = brushed_data1;\n }\n }\n // zoom: true\n });\n\n //data point to color scale\n // let style = (d,i) => ({fill:'#fff', stroke:'blue'});\n // sca.update_style(style);\n\n return sca.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4000,"value":"---\n## Simple ReGL Program","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4025,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4047,"value":"function create_canvas(width, height){\n let canvas = DOM.canvas(\n width * window.devicePixelRatio,\n height * window.devicePixelRatio\n );\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4050,"value":"function create_regl(canvas){\n let regl = regl2({ canvas: canvas });\n regl.canvas = canvas;\n return regl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4006,"value":"function create_regl_program(\n regl,\n {\n vert = `\n precision mediump float;\n attribute vec2 position;\n attribute vec4 color;\n attribute float size;\n varying vec4 v_color;\n \n void main() {\n gl_Position = vec4(position, 0, 1);\n gl_PointSize = size;\n v_color = color;\n }`,\n frag = `\n precision mediump float;\n varying vec4 v_color;\n void main() {\n gl_FragColor = v_color;\n }`,\n kwargs = {\n attributes: {\n position: regl.prop(\"positions\"),\n color: regl.prop(\"colors\"),\n size: regl.prop(\"sizes\")\n },\n uniforms: {\n // This defines the color of the triangle to be a dynamic variable\n },\n count: regl.prop(\"count\"),\n primitive: \"points\"\n }\n } = {}\n) {\n kwargs.vert = vert;\n kwargs.frag = frag;\n //construction of regl() relatively expensive\n let render_func = regl(kwargs);\n return render_func;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4267,"value":"---\n## ReGL 3D, with camera\nTODO","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4524,"value":"---\n## Image scatter plot\nTODO","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2617,"value":"---\n## Scatter ReGL (Experimental)\nand WIP","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2851,"value":"viewof n_points = Inputs.range([100, 1e5], {label: \"n_points\", step: 100, value: 20000})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3374,"value":"{\n //data\n let n = n_points;\n let positions = d3.range(n).map((i) => {\n let d = [Math.random() * Math.random(), Math.random()];\n if (d[1] > 0.5) {\n d[0] = 1 - d[0];\n }\n return d;\n });\n let data = positions.map((d, i) => {\n let e = {};\n e.x = d[0];\n e.y = d[1];\n return e;\n });\n let sc = (d) => (d.y > 0.5 ? C[0] : C[1]);\n\n let sca = scatter_gl(undefined, data, {\n height: 140,\n s: (d) => 1,\n scales: { sc },\n is_square_scale: false,\n xticks: 10,\n yticks: 2,\n padding_top: 10,\n title: \"ReGL scatter plot test\"\n });\n return sca.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2623,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3936,"value":"---\n## Lines ReGL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5565,"value":"viewof n_lines = Inputs.range([100, 2000], { label: \"n_lines\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3857,"value":"{\n //data\n let positions = d3.range(n_lines).map((i) => {\n let d = [Math.random() * Math.random(), Math.random()];\n if (d[1] > 0.5) {\n d[0] = 1 - d[0];\n }\n return d;\n });\n let data = positions.map((d, i) => {\n let e = {};\n e.x = d[0];\n e.y = d[1];\n return e;\n });\n\n let sc = (d) => (d.y > 0.5 ? C[0] : C[1]);\n let lines = lines_gl(undefined, data, {\n width: 400,\n height: 240,\n scales: { sc },\n // is_square_scale: false,\n xticks: 10,\n yticks: 2,\n padding_top: 10,\n title: \"ReGL lines plot test\"\n });\n\n return lines.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5122,"value":"function create_scale(\n data,\n { value_accessor = (d) => d, domain = undefined, range = [0, 100] } = {}\n) {\n if (domain === undefined) {\n domain = d3.extent(data, value_accessor);\n }\n return d3.scaleLinear().domain(domain).range(range);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3854,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2737,"value":"function get_lines_func(regl) {\n \n let vert = `\n precision mediump float;\n attribute vec2 position;\n attribute vec4 color;\n varying vec4 v_color;\n void main() {\n gl_Position = vec4(position, 0, 1);\n v_color = color;\n }`;\n\n let frag = `\n precision mediump float;\n varying vec4 v_color;\n void main() {\n gl_FragColor = v_color;\n }`;\n\n let render_func = regl({\n attributes: {\n position: regl.prop(\"positions\"),\n color: regl.prop(\"colors\"),\n },\n count: regl.prop('count'),\n primitive: \"lines\",\n vert,\n frag\n });\n\n return render_func;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"---\n## SPLOM\nTODO, with linked brush","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":937,"value":"test_splom = {\n let data = cars;\n\n let width = 600;\n let height = width;\n let svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n let sca = splom(svg, data, {\n label_fontsize: 10,\n layout: \"lower\", //'upper', 'lower', or 'both',\n width: width,\n height: height,\n s: (_) => 2,\n attrs: [\n \"economy (mpg)\",\n // \"displacement (cc)\",\n \"power (hp)\",\n \"weight (lb)\",\n \"0-60 mph (s)\"\n ],\n // x_tickvalues: linspace(0,1,4),\n ticks: 3,\n wspace: 0.15,\n hspace: 0.15,\n scales: { sc: (d) => C[0] },\n label_fontsize: 15\n });\n\n //data point to color scale\n // let style = (d,i) => ({fill:'#fff', stroke:'blue'});\n // sca.update_style(style);\n return sca.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2174,"value":"---\n## Graph layout [TODO] and node-link diagram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2346,"value":"graph_data = {\n let nodes = [\n { x: 100, y: 50 },\n { x: 200, y: 100 },\n { x: 20, y: 130 },\n { x: 100, y: 100 },\n { x: Math.random() * 200, y: Math.random() * 100 }\n ];\n let links = [\n { source: 0, target: 1 },\n { source: 0, target: 2 },\n { source: 1, target: 2 },\n { source: 2, target: 4 }\n ];\n links.forEach((l) => {\n l.source = nodes[l.source];\n l.target = nodes[l.target];\n });\n\n let data = { nodes, links };\n return data;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2177,"value":"graph_demo = {\n\n // simple call\n return node_link_diagram(null, graph_data, {height:150}).node();\n \n // alternatively,\n // let svg = create_svg(500, 150);\n // svg\n // .append(\"g\")\n // .attr(\"class\", \"graph-layout\")\n // .call(node_link_diagram, graph_data, {});\n // return svg.node();\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2562,"value":"graph_demo_2 = {\n let fr = frame(undefined, graph_data.nodes, {\n x: (d) => d.x,\n y: (d) => d.y,\n width: 300,\n height: 200,\n s: d=>1,\n });\n let { sx, sy } = fr.scales;\n // return fr.node();\n return node_link_diagram(fr, graph_data, {\n x: (d) => sx(d.x),\n y: (d) => sy(d.y),\n }).node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2181,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2171,"value":"---\n## Grand Tour","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2881,"value":"viewof gt_time = Scrubber(d3.range(15000), {\n autoplay: false,\n loop: true,\n alternate: false,\n initial: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2977,"value":"gt_data = {\n let data = d3\n .range(2000)\n .map((_) => [Math.random(), Math.random(), Math.random(), Math.random()]);\n data.forEach((d) => {\n let s = _.shuffle(d3.range(4));\n d[s[0]] = Math.round(d[s[0]]);\n d[s[1]] = Math.round(d[s[1]]);\n if (Math.random() < 0.3) {\n d[s[2]] = Math.round(d[s[2]]);\n }\n });\n return numeric.mul(numeric.sub(data, 0.5), 2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2982,"value":"gt = new GrandTourCore(gt_data[0].length, 0.005)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2620,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2904,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4981,"value":"function text(\n container,\n text_data,\n {\n width = 100,\n height = 100,\n font_size = 12,\n font_family = \"monospace\",\n // data accessors:\n x = (d) => d.x,\n y = (d) => d.y,\n t = (d) => d.text,\n scales = { sx: undefined, sy: undefined }\n } = {}\n) {\n container\n .selectAll(\"text\")\n .data(text_data)\n .join(\"text\")\n .attr(\"x\", (d, i) => scales.sx(x(d, i)))\n .attr(\"y\", (d, i) => scales.sy(y(d, i)))\n .text((d, i) => t(d, i));\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2886,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2878,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5183,"value":"---\n## Lines / Line plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5114,"value":"line_plot_test = {\n let data = [\n d3.range(40).map((i) => ({ x: i, y: Math.random() })),\n d3.range(7, 30).map((i) => ({ x: i, y: -Math.random() }))\n ];\n return lines(undefined, data).node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5095,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5080,"value":"function line_segments(\n container,\n data,\n {\n width = 100,\n height = 100,\n // data accessors:\n x1 = (d) => d.x1,\n x2 = (d) => d.x2,\n y1 = (d) => d.y1,\n y2 = (d) => d.y2,\n stroke = \"#333\",\n stroke_width = 1,\n scales = { sx: undefined, sy: undefined }\n } = {}\n) {\n container\n .selectAll(\"line\")\n .data(data)\n .join(\"line\")\n .attr(\"x1\", (d, i) => scales.sx(x1(d, i)))\n .attr(\"x2\", (d, i) => scales.sx(x2(d, i)))\n .attr(\"y1\", (d, i) => scales.sy(y1(d, i)))\n .attr(\"y2\", (d, i) => scales.sy(y2(d, i)))\n .attr(\"stroke\", stroke)\n .attr(\"stroke-width\", stroke_width);\n\n return container;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"---\n## Histogram & KDE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1574,"value":"{\n let data = d3.range(1000).map(_=>Math.pow(Math.random(),2.0));\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", 500)\n .attr(\"height\", 200)\n // .style(\"background\", \"#eee\");\n\n // return hist(svg, data);\n \n svg.call(hist, data, {height:200, width:500});\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5805,"value":"## Bar plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5808,"value":"{\n let data = d3.range(10).map((i) => ({\n label: \"L\" + i,\n count: i\n }));\n let svg = d3.create(\"svg\").attr(\"width\", 500).attr(\"height\", 200);\n\n svg.call(bar, data, {\n height: 200,\n width: 500,\n x: (d) => d.label,\n y: (d) => d.count\n });\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5803,"value":"$56","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4922,"value":"## TODO","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1797,"value":"function hist_2d(sel, data, {}={}){\n //TODO\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"function kde(sel, data, {}={}){\n //TODO\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1569,"value":"function kde_2d(sel, data, {}={}){\n //TODO\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"---\n## Imshow","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2491,"value":"test_heatmap_data = bicubic(\n d3.range(5).map(_=>d3.range(8).map(_=>Math.random())),\n 8*3, 5*3,\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"imshow(\n test_heatmap_data,\n { width: 8*50, height: 5*50 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4502,"value":"---\n## Contour, Contourf","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4812,"value":"ct = {\n let grid = d3.range(5).map((_) => d3.range(7).map((_) => Math.random()));\n grid = bicubic(grid, 100, 100);// upsample\n let svg = create_svg(200, 200);\n svg.append(\"g\").call(contour, grid, {\n width: 200,\n height: 200,\n levels: 5,\n colormap: d3.interpolateViridis,\n fill_opacity: 0,\n });\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4604,"value":"ctf = {\n let grid = d3.range(5).map((_) => d3.range(7).map((_) => Math.random()));\n grid = bicubic(grid, 100, 100);// upsample\n let svg = create_svg(200, 200);\n svg.append(\"g\").call(contourf, grid, {\n width: 200,\n height: 200,\n levels: 5,\n colormap: d3.interpolateViridis,\n stroke_opacity: 1,\n stroke_width: 1\n });\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4593,"value":"$58","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4903,"value":"// contourf is just an alias of contour with a different fill_opacity default\n \nfunction contourf(\n container,\n value_grid,\n {\n width = 100,\n height = 100,\n levels = 7,\n colormap = d3.interpolateViridis,\n fill_opacity = 1,\n stroke_opacity = 1,\n stroke_width = 1\n\n // background = d3.hcl(300, 30, 2),\n } = {}\n) {\n return contour(container, value_grid, {\n width,\n height,\n levels,\n colormap,\n fill_opacity,\n stroke_opacity,\n stroke_width\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5051,"value":"## Polygon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5055,"value":"polygon(create_svg(210, 200, \"#eee\")).node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5053,"value":"function polygon_vertices(n_vertices, close_loop = false) {\n let thetas = linspace(0, Math.PI * 2, n_vertices + 1);\n if (!close_loop) {\n thetas = thetas.slice(0, n_vertices);\n }\n let vertices = thetas.map((t) => [Math.cos(t), Math.sin(t)]);\n return vertices;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5049,"value":"function polygon(\n container,\n {\n n_vertices = 5,\n r = 100,\n stroke = \"#334\",\n fill = \"#666\",\n stroke_width = 5\n } = {}\n) {\n let vertices = polygon_vertices(n_vertices);\n console.log(vertices);\n vertices.push(vertices[0]); //close the loop\n let sx = d3\n .scaleLinear()\n .domain([-1, 1])\n .range([0, 2 * r]);\n let sy = d3\n .scaleLinear()\n .domain([-1, 1])\n .range([2 * r, 0]);\n\n let line_generator = d3\n .line()\n .x((d) => sx(d[0]))\n .y((d) => sy(d[1]));\n\n container\n .selectAll(\"path.polygon\")\n .data([vertices])\n .join(\"path\")\n .attr(\"d\", line_generator)\n .attr(\"fill\", fill)\n .attr(\"stroke\", stroke)\n .attr(\"stroke-width\", stroke_width)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\");\n\n container.scales = { sx, sy };\n container.vertices = vertices.slice(0, n_vertices);\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5070,"value":"function distance(a, b) {\n return math.norm(numeric.sub(a, b));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5066,"value":"//[ ...1/dist_to_vertices...]\nfunction to_barycentric(x, y, n_vertices = 5, eps = 1e-6) {\n let vertices = polygon_vertices(n_vertices);\n let distances = vertices.map((v) => distance(v, [x, y]));\n let bary = distances.map((d) => 1 / (Math.pow(d, 2) + eps));\n let bary_sum = d3.sum(bary);\n bary = bary.map((b) => b / bary_sum);\n return bary;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5064,"value":"// [ ...1/dist_to_two_closest_vertices for each sector...]\nfunction to_barycentric_triangle_subdivisions(\n x,\n y,\n n_vertices = 5,\n eps = 1e-6\n) {\n let vertices = polygon_vertices(n_vertices);\n let distances = vertices.map((v) => distance(v, [x, y]));\n\n let dist_to_center = Math.sqrt(x * x + y * y);\n let closest_two_vertices = argsort(distances, false).slice(0, 2);\n let bary = d3.range(n_vertices).map((i) => {\n console.log(i, closest_two_vertices, i in closest_two_vertices);\n return closest_two_vertices.indexOf(i) >= 0 ? 1 / (distances[i] + eps) : 0;\n });\n console.log(bary);\n let bary_sum = d3.sum(bary);\n bary = bary.map((b) => b / bary_sum);\n return bary;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5062,"value":"//[ ...1/dist_to_vertices * scale(dist_to_center)...]\nfunction to_barycentric_no_edit_at_center(x, y, n_vertices = 5, eps = 1e-6) {\n let vertices = polygon_vertices(n_vertices);\n let distances = vertices.map((v) => distance(v, [x, y]));\n let dist_to_center = Math.sqrt(x * x + y * y);\n let bary = distances.map((d) => 1 / (Math.pow(d, 2) + eps));\n let bary_sum = d3.sum(bary);\n let scale = Math.pow(dist_to_center, 1 / 2);\n bary = bary.map((b) => (scale * b) / bary_sum);\n return bary;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"---\n## Vis utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2277,"value":"function create_svg(width = 400, height = 300, bg = undefined) {\n let svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n if (bg) {\n svg.style(\"background\", bg);\n }\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2188,"value":"function get_dimension(container){\n return [container.attr('width'), container.attr('height')];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$59","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1780,"value":"function yaxis(sel, sy, { shift_x = 10, ay = undefined, ticks=10} = {}) {\n if (ay === undefined) {\n ay = d3.axisLeft(sy).ticks(ticks);\n }\n if (sel.attr(\"class\") === null) {\n sel.attr(\"class\", \"y-axis\");\n }\n sel.attr(\"transform\", `translate(${shift_x}, ${0})`).call(ay);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1784,"value":"function xaxis(sel, sx, { shift_y = 10, ax=undefined, ticks=10} = {}) {\n if(ax === undefined){\n ax = d3.axisBottom(sx).ticks(ticks);\n }\n if (sel.attr(\"class\") === null) {\n sel.attr(\"class\", \"x-axis\");\n }\n sel.attr(\"transform\", `translate(${0}, ${shift_y})`).call(ax);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4567,"value":"function set_value(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true })); // Native events bubble, so we should too\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4894,"value":"#### Upsampling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4888,"value":"function upsample(arr, {width=200, height=200, mode='bilinear'}){\n if(mode === 'bilinear'){\n return bilinear(arr, width, height);\n }else if(mode === 'bicubic'){\n return bicubic(arr, width, height);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2505,"value":"function bilinear(arr, width=224, height=224){\n arr = pad(arr);\n let [nrow, ncol] = [arr.length, arr[0].length];\n\n let step_x = (ncol-2)/(width-1);\n let step_y = (nrow-2)/(height-1);\n \n let res = d3.range(0.5, ncol-1.5+1e-04, step_x).map(x=>\n d3.range(0.5, nrow-1.5+1e-04, step_y).map(y=>{\n let interpolate = bilinear_interpolator((i, j) => arr[i][j]);\n return interpolate(x,y);\n })\n );\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2503,"value":"function bicubic(arr, width=224, height=224){\n let [nrow, ncol] = [arr.length, arr[0].length];\n let interpolate = bicubic_interpolate.createGridInterpolator(JSON.parse(JSON.stringify(arr)), {extrapolate: true});\n // let res = d3.range(1, nrow-2, (nrow-2)/height).map(i=>d3.range(1, ncol-2, (ncol-2)/width).map(j=>{\n let res = d3.range(0, nrow-1, (nrow-1)/height).map(i=>d3.range(0, ncol-1, (ncol-1)/width).map(j=>{\n return interpolate(i,j);\n }));\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2509,"value":"function pad(arr, margin_size=1, mode='equal'){\n let first_row = arr[0];\n let last_row = arr[arr.length-1];\n first_row = [first_row[0], ...first_row, first_row[first_row.length-1]];\n last_row = [last_row[0], ...last_row, last_row[last_row.length-1]];\n let res = [first_row];\n for(let i=0; i (x, y) => {\n // \"func\" is a function that takes 2 integer arguments and returns some value\n const x1 = Math.floor(x);\n const x2 = Math.ceil(x);\n const y1 = Math.floor(y);\n const y2 = Math.ceil(y);\n\n if ((x1 === x2) && (y1 === y2)) return func(x1, y1);\n if (x1 === x2) {\n return (func(x1, y1) * (y2 - y) + func(x1, y2) * (y - y1)) / (y2 - y1);\n }\n if (y1 === y2) {\n return (func(x1, y1) * (x2 - x) + func(x2, y1) * (x - x1)) / (x2 - x1);\n }\n\n // else: x1 != x2 and y1 != y2\n return (\n func(x1, y1) * (x2 - x) * (y2 - y) +\n func(x2, y1) * (x - x1) * (y2 - y) +\n func(x1, y2) * (x2 - x) * (y - y1) +\n func(x2, y2) * (x - x1) * (y - y1)\n )\n / ((x2 - x1) * (y2 - y1));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1985,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3522,"value":"frame_test = frame(undefined, undefined, {\n width: 300,\n height: 200,\n is_square_scale: false,\n yticks: 4,\n xlabel: \"x-label\",\n ylabel: \"y-label\",\n padding_top: 10,\n title: \"TITLE\"\n}).node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5890,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2649,"value":"$5a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3618,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2461,"value":"legend(d3.schemeCategory10, {\n padding: 0,\n rect_size: 16,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"legend(d3.schemeCategory10, {\n rect_size: 14,\n n_cols: 5,\n labels: d3.range(10).map(i=>`class ${i}`),\n padding: 4,\n text_pad: 70,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"$5b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1980,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"colorbar_test = {\n let svg = d3.create(\"svg\").attr(\"width\", 200).attr(\"height\", 220);\n\n let white = d3.hcl(20, 0, 90);\n let red = d3.hcl(20, 100, 0);\n let color_scale = d3.scaleLinear().domain([0, 0.5, 1]).range([white, red]);\n\n svg.append(\"g\").call(colorbar, color_scale, {\n title: \"Test title\",\n ticks: linspace(0, 1, 5),\n tick_labels: linspace(0, 1, 5).map((v) => `v=${v}`),\n n_ticks: 3\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"colorbar = colorbar_vertical","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"$5c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1976,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1278,"value":"{\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", 120)\n .attr(\"height\", 100)\n .style(\"background\", d3.rgb(200,200,200,0.8));\n //draw something on svg\n svg.append('text').attr('x', 10).attr('y', 20).text('this is svg')\n\n //canvas in HD\n let dpi = window.devicePixelRatio;\n let canvas = d3\n .create(\"canvas\")\n .attr(\"width\", 100*dpi)\n .attr(\"height\", 120*dpi)\n .style(\"width\", \"100px\")\n .style(\"height\", \"120px\")\n .style(\"background\", d3.rgb(255,0,0,0.8));\n //draw something on canvas\n let context = canvas.node().getContext('2d');\n context.fillStyle = \"#eee\";\n context.font = `${12*dpi}px Arial`;\n context.fillText(\"This is canvas\", 10*dpi, 40*dpi);\n\n // let container = overlay([svg, canvas]); //svg under canvas\n let container = overlay([canvas, svg]); //canvas under svg\n\n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"function overlay(selections) {\n /*\n Take a list of d3 selections.\n return a div, with children following the order.\n Following the HTML convention, later children are overlaid on top of early children.\n */\n let container = d3.create(\"div\").style(\"position\", \"relative\");\n\n let container_height = 0;\n selections.forEach(sel=>{\n sel.style(\"position\", \"absolute\").style(\"top\", \"0\").style(\"left\", \"0\");\n let h;\n if(sel.style('height') !== ''){\n h = parseFloat(sel.style('height'));\n }else{\n h = parseFloat(sel.attr('height'));\n }\n container_height = Math.max(h, container_height);\n container.node().appendChild(sel.node());\n \n })\n container.style(\"height\", `${container_height}px`);\n return container;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2476,"value":"test_img_src = `data:image/png;base64,\n R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAA\n AAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lx\n KBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1513,"value":"{\n let images = d3.range(12).map((i) => {\n return d3\n .create(\"img\")\n .attr(\"width\", 80)\n .attr(\"height\", 60)\n .attr(\"src\", test_img_src)\n .style('image-rendering', 'pixelated')\n .node();\n });\n return flexbox(images, 320);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5365,"value":"flex_box = flexbox //alias for backwards compatibility","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"function flexbox(items, width){\n let res = d3.create('div')\n .style(\"width\", `${width}px`)\n .style(\"display\", \"inline-flex\")\n .style(\"flex-direction\", \"row\")\n .style(\"flex-wrap\", \"wrap\");\n items.forEach(i=>{\n res.node().appendChild(i);\n });\n return res.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2062,"value":"{\n let images = d3.range(12).map((i) => {\n return d3\n .create(\"img\")\n .attr(\"width\", 80)\n .attr(\"height\", 60)\n .attr(\"src\", test_img_src)\n .style('image-rendering', 'pixelated')\n .node();\n });\n return overflow_box(flexbox(images, 320+20), 100);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2059,"value":"function overflow_box(div, height, width = undefined) {\n d3.select(div).style(\"height\", `${height}px`).style(\"overflow\", \"auto\");\n if (width !== undefined) {\n d3.select(div).style(\"width\", `${width}px`);\n }\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"---\n## Data utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5552,"value":"### Client-side Numpy parser","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5525,"value":"$5d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5504,"value":"function download(exportObj, exportName) {\n // download any js object as json\n\n let dataStr =\n \"data:text/json;charset=utf-8,\" +\n encodeURIComponent(JSON.stringify(exportObj, null, 2));\n\n let downloadAnchorNode = document.createElement(\"a\");\n downloadAnchorNode.setAttribute(\"href\", dataStr);\n downloadAnchorNode.setAttribute(\"download\", exportName + \".json\");\n document.body.appendChild(downloadAnchorNode); // required for firefox\n downloadAnchorNode.click();\n downloadAnchorNode.remove();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5469,"value":"function buffer_to_base64(buffer) {\n let binary = \"\";\n let bytes = new Uint8Array(buffer);\n let len = bytes.byteLength;\n for (let i = 0; i < len; i++) {\n binary += String.fromCharCode(bytes[i]);\n }\n return btoa(binary);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5466,"value":"function base64_to_buffer(base64_encoded) {\n const binary = atob(base64_encoded);\n const bytes = new Uint8Array(binary.length);\n for (let i = 0; i < bytes.length; i++) {\n bytes[i] = binary.charCodeAt(i);\n }\n return bytes.buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5486,"value":"buffer_to_base64(base64_to_buffer(\"asdf\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5462,"value":"function copy(object) {\n let clone = JSON.parse(JSON.stringify(object));\n return clone;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5373,"value":"function shape(arr) {\n let res = [];\n while (arr.length !== undefined) {\n res.push(arr.length);\n arr = arr[0];\n }\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4569,"value":"function euclidean_distance(a, b){\n return math.norm(numeric.sub(a, b));\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3183,"value":"function antisymmetric(x){\n return numeric.mul(0.5, numeric.sub(x, numeric.transpose(x)))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2966,"value":"function orthogonalize(x){\n return math.qr(x).Q;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"function shuffle(array, seed = 17, inplace=false) {\n function random(seed) {\n let x = Math.sin(seed++) * 10000;\n return x - Math.floor(x);\n }\n \n if(!inplace){\n array = array.slice();\n }\n if (typeof seed == \"string\") {\n seed = d3.sum(Array.from(seed).map((d) => d.charCodeAt(0)));\n }\n\n let m = array.length;\n // While there remain elements to shuffle…\n while (m) {\n // Pick a remaining element…\n let i = Math.floor(random(seed) * m--);\n // And swap it with the current element.\n let t = array[m];\n array[m] = array[i];\n array[i] = t;\n ++seed;\n }\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"function intersection(a,b){\n return new Set([...a].filter((x) => b.has(x)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5358,"value":"function parse_query(url_query) {\n return Object.fromEntries(\n new URLSearchParams(url_query).entries()\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"function get_url_parameters() {\n let query = window.location.search;\n return parse_query(query);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"function capitalize(string){\n let words = string.split(' ');\n return words.map(word=>word.charAt(0).toUpperCase() + word.slice(1)).join(' ');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4571,"value":"function meshgrid(x, y){\n return x.map(xi=>{\n return y.map(yj=>[xi, yj]);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"argsort = (values, descending=true) => {\n return values\n .map((d,i)=>({value: d, index: i}))\n .sort((a,b)=>descending ? d3.descending(a.value, b.value) : d3.ascending(a.value, b.value))\n .map(d=>d.index);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function reshape(arr, size) {\n size = size.slice();\n if (size.length <= 1) {\n return arr;\n } else {\n let res = [];\n let m = size.pop();\n for (let i = 0; i < arr.length; i = i + m) {\n res.push(arr.slice(i, i + m));\n }\n return reshape(res, size);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"function linspace(a, b, n){\n return d3.range(n).map(i=>i/(n-1)*(b-a)+a);\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"function subsample(array, limit=10){\n let n = array.length;\n if(n <= limit){\n return array;\n }\n if(limit == 1){\n return [array[n-1],];\n }else if(limit == 2){\n return [array[0], array[n-1]];\n }else{\n let indices = linspace(0,n-1,limit).map(x=>Math.round(x));\n return indices.map(i=>array[i]);\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"### Data utils - Networking","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4935,"value":"get = fetch //just an alias","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"function post(\n url,\n body = null,\n {\n // body = null,\n content_type = \"application/json\"\n } = {}\n) {\n let args = {\n method: \"POST\",\n headers: {\n \"Content-Type\": content_type\n },\n body: JSON.stringify(body)\n };\n return fetch(`${url}`, args);\n}\n\n// old API, deprecated\n// function post(url, args, callback){\n// return fetch(url, args)\n// .then((response) => {\n// return callback(response);\n// })\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"function base64_to_array(str, dtype=Float32Array) {\n str = atob(str);\n let len = str.length;\n let buf = new ArrayBuffer(str.length);\n let view = new Uint8Array(buf);\n for (let i=0; iresponse){\n //similar to post() but logically simpler for uploading data to url\n return fetch(url, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(data),\n }).then(callback);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"function fetch_json(\n url, {\n body=null, \n callback=(json)=>json,\n }={}\n) {\n let args = {\n method: body===null ? \"GET\":\"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n };\n if(body !== null){\n args.body = JSON.stringify(body);\n }\n return fetch(`${url}`, args)\n .then((response) => response.json())\n .then((arr) => {\n return callback(arr);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"## Import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"_ = require('underscore@1.13.6/underscore-umd.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"numeric = require('https://bundle.run/numeric@1.2.6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"math = require('mathjs@11.5.1/lib/browser/math.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2048,"value":"crossfilter = crossfilter2 // alias","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"crossfilter2 = require('crossfilter2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"import {p5} from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4918,"value":"interval([-10, 10], {\n step: .25,\n value: [0, 8],\n label: 'My slider',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4914,"value":"import {interval} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2604,"value":"regl2 = require('regl@2.1.0/dist/regl.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"## Styles & Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1742,"value":"legend(default_categorical_scheme)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"default_categorical_scheme = pyplot_cycles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1751,"value":"C = default_categorical_scheme //Convenient access to default palette, inspired by pyplot \"C0\", \"C1\", etc.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"schemeCategory10 = d3.schemeCategory10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"pyplot_cycles = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"// scatter_style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"svg_text_style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"heatmap_style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5545,"value":"md_code_style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W5e","stdlib":"1"}} 24:null