2c:null 2d:["$","title",null,{"children":"Vis toolbox (@tiga1231/lib) | tiga1231 | Observable"}] 32: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) 33:T486,{ // restartScenesCube; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(65, 1, 0.6, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(300, 300); // create a simple square shape. We duplicate the top left and bottom right // let vertices because each vertex needs to appear once per triangle. let vertices = new Float32Array( [ [-1.0, -1.0, 1.0], // v0 [1.0, -1.0, 1.0], // v1 [1.0, 1.0, 1.0], // v2 [-1.0, 1.0, 1.0], // v3 [1.0, 1.0, -1.0], // v4 [-1.0, 1.0, -1.0], // v5 [-1.0, -1.0, -1.0], //v6 [(1.0, -1.0, -1.0)] // v7 ].flat() ); let geometry = new THREE.BufferGeometry(); const material = new THREE.PointsMaterial({ color: 0x888888 }); geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3)); let points = new THREE.Points(geometry, material); scene.add(points); camera.position.z = 10; var animate = function () { requestAnimationFrame(animate); points.rotation.x += 0.01; points.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); yield renderer.domElement; }34:T53c,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 + font_size / 3) .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; }35:T594,function get_visible_levels( points_data, zoom_extent, semantic_zoom_overlap = 2.0, priority = (a, b) => d3.descending(a.r, b.r) ) { points_data.sort(priority); let levels = linspace(Math.log(zoom_extent[0]), Math.log(zoom_extent[1]), 100) .map((d) => Math.exp(d)) .concat([1]) .sort((a, b) => d3.ascending(a, b)); let { Box, QuadTree, Point, Circle } = quadtree; let current_data = new Set(); let remaining_data = new Set(points_data.map((d) => d.index)); for (let l of levels) { //build a quad tree for current zoom level, using current visible data let [x, y, w, h] = [-5000, -5000, 5000 * 2, 5000 * 2]; let qt = new QuadTree( new Box(x, y, w, h), {}, Array.from(current_data).map((i) => { let d = points_data[i]; return new Circle(d.x * l, d.y * l, d.r, {}); }) ); //for remainging data, greedily add points as long as they do not overlap at current zoom level remaining_data.forEach((i) => { let d = points_data[i]; let q = qt.query( new Circle(d.x * l, d.y * l, d.r * semantic_zoom_overlap) ); let can_insert = q.length == 0; if (can_insert) { qt.insert(new Circle(d.x * l, d.y * l, d.r)); d.zoom_level = l; current_data.add(i); remaining_data.delete(i); } }); } points_data.sort((a, b) => d3.ascending(a.id, b.id)); return points_data; }36:T26b6,function scatter( sel = undefined, data = undefined, { is_framed = true, xticks = 5, yticks = 5, background = "#eee", x_tickvalues = undefined, y_tickvalues = undefined, x = (d) => d.x, y = (d) => d.y, text = undefined, // text to be show along side markers (d)=>d.text 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, i) => 10, //marker size return_obj = "g", // brush = false, title = undefined, font_size = 12, is_square_scale = true, is_log_scale = false, xlabel = undefined, ylabel = undefined, x_label_offset = 12, y_label_offset = -10, label_fontsize = 12, stroke = "#fff", stroke_width = 0.5, zoom = false, zoom_extent = [0.3, 20], zoom_callback = null, semantic_zoom = false, semantic_zoom_callback = undefined, semantic_zoom_overlap = 2.0, brush = false, brush_highlight = true, brush_listeners = { start: () => {}, brush: (brushed_data) => { console.log("brushed_data", brushed_data); }, end: () => {} }, pointer = true, pointer_listener = undefined, hover = false, hover_listener = (hovered_data) => { console.log("hovered_data", hovered_data); } } = {} ) { 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, i) => C[0]); let main = sel.append("g").attr("class", "scatter"); let bg = main.append("g").attr("class", "bg").style("pointer-events", "none"); // g that draws frame (axes and ticks) let random_id = performance.now(); let clip_id = `bg-clip-${random_id}`; let fg = main .append("g") .attr("class", "fg") .attr("clip-path", `url(#${clip_id})`); // 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, font_size, is_square_scale, is_log_scale, xlabel, ylabel, x_label_offset, y_label_offset, label_fontsize }); let clip_path = sel.append("defs").append("clipPath").attr("id", clip_id); let bg_rect = bg.select(".bg-rect"); clip_path .append("rect") .attr("x", bg_rect.attr("x")) .attr("y", bg_rect.attr("y")) .attr("width", bg_rect.attr("width")) .attr("height", bg_rect.attr("height")); let { sx, sy } = bg.scales; if (!is_framed) { bg.attr("display", "none"); } //marks let r = (d, i) => Math.sqrt(s(d, i)); 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, i) => sc(d, i)) .attr("stroke-width", stroke_width) .attr("stroke", stroke) .attr("r", (d, i) => r(d, i)); if (hover) { points.on("mouseover", (event, d) => { hover_listener(event, d); }); } else { points.style("pointer-events", "none"); } main.raise(); // if (text) { // fg.append("g") // .selectAll(".labels") // .data(data) // .join("text") // .style("font-weight", "1000") // .style("stroke", "white") // .style("stroke-width", 3) // .style("paint-order", "stroke") // .style("filter", "drop-shadow(0 0 2px #333)") // .attr("x", (d) => sx(x(d))) // .attr("y", (d) => sy(y(d))) // .text((d, i) => text(d)); // } // Zoom let { ax, ay, gx, gy } = bg; if (zoom) { if (semantic_zoom) { let points_data = data.map((d, i) => ({ x: sx(x(d)), y: sy(y(d)), r: r(d, i), index: i })); points_data = get_visible_levels( points_data, zoom_extent, semantic_zoom_overlap ); data.forEach((d, i) => { d.zoom_level = points_data[i].zoom_level; }); } zoom = d3 .zoom() .scaleExtent(zoom_extent) .on("zoom", function zoomed({ transform }) { if (zoom_callback) { zoom_callback({ transform }); } fg.attr("transform", transform); if (semantic_zoom) { //r holds as constant after the transform points .attr("r", (d, i) => r(d, i) / transform.k) .attr("stroke-width", stroke_width / transform.k) // .attr("fill", (d, i) => // d.zoom_level <= transform.k ? sc(d, i) : "#aaa" // ) .attr("display", (d) => d.zoom_level <= transform.k ? "" : "none" ); // points.filter((d, i) => d.zoom_level <= transform.k).raise(); if (semantic_zoom_callback) { semantic_zoom_callback(transform); } } else { points .attr("r", (d, i) => r(d, i) / 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; if (semantic_zoom) { sel.call(zoom.transform, d3.zoomIdentity); //init semantic zooming } 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; }); if (brush_highlight) { res.update_style1("fill", (d, i) => d.brushed ? scales.sc(d, i) : "#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", (e) => { if (e.selection === null) { //brush cleared res.update_style1("fill", (d, i) => scales.sc(d, i)); if (brush_listeners["end"]) { brush_listeners["end"]([]); } } else { if (brush_listeners["end"]) { brush_listeners["end"](res.brushed_data); } } }); main.append("g").attr("class", "brush").call(brush); } if (pointer) { sel.on("mousemove", (e) => { let bbox = e.target.getBoundingClientRect(); let [x, y] = [e.clientX - bbox.left, e.clientY - bbox.top]; x = sx.invert(x); y = sy.invert(y); if (pointer_listener) { pointer_listener(x, y); } }); } 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.r = r; res.ax = bg.ax; res.ay = bg.ay; res.gx = bg.gx; res.gy = bg.gy; if (zoom) { res.zoom = zoom; } res.fg = fg; res.bg = bg; res.points = points; res.styles = { stroke_width, background, plot_width: width, plot_width: height, padding_left: padding_left, padding_right: padding_right, padding_top: padding_top, padding_bottom: padding_bottom }; return res; }37:T7a4,gl_canvas = { let width = 600; let height = width * 0.618; let canvas = create_canvas(width, height, window.devicePixelRatio); let regl = regl2({ canvas: canvas }); //data let n = 50; let positions = d3 .range(n) .map((_) => [Math.random() - 0.5, Math.random() - 0.5]); let colors = d3 .range(n) .map((_) => [ 0.5 + 0.5 * Math.random(), 0.5 + 0.5 * Math.random(), 0.5 + 0.2 * Math.random(), 1 ]); let sizes = d3 .range(n) .map((_) => window.devicePixelRatio * (10 * Math.random() + 4)); //define render function canvas.clear = () => regl.clear({ color: [0.15, 0.15, 0.15, 1] }); let render_func = regl({ vert: ` precision mediump float; attribute vec2 a_position; attribute vec4 a_color; attribute float a_size; varying vec4 v_color; void main() { gl_Position = vec4(a_position, 0, 1); gl_PointSize = a_size; v_color = a_color; }`, frag: ` precision mediump float; varying vec4 v_color; void main() { float r = length(gl_PointCoord.xy - vec2(0.5, 0.5)); if(r>0.5) discard; gl_FragColor = vec4(v_color.rgb, 1.0); }`, attributes: { a_position: regl.prop("positions"), a_color: regl.prop("colors"), a_size: regl.prop("sizes") }, uniforms: { // This defines the color of the triangle to be a dynamic variable }, count: regl.prop("count"), primitive: "points" // blend: { // enable: true, // func: { // srcRGB: "src alpha", // srcAlpha: 1, // dstRGB: "one minus src alpha", // dstAlpha: 1 // }, // equation: { // rgb: "add", // alpha: "add" // }, // color: [0, 0, 0, 0] // } }); canvas.render = render_func; //draw canvas.clear(); canvas.render({ positions, colors, count: n, sizes }); return canvas; }38:T1bf4,function scatter_gl( container = undefined, data = undefined, { is_framed = true, background = "#eee", xticks = 5, yticks = 5, x_tickvalues = undefined, y_tickvalues = undefined, x = (d, i) => d.x, y = (d, i) => d.y, s = (d, i) => 10, //marker size depth = undefined, //(d, i) => i / 100, scales = {}, width = 500, height = 500, padding_bottom = 18, padding_left = 40, padding_right = 0, padding_top = 0, pad = 0.04, title = undefined, is_square_scale = false, is_log_scale = false, xlabel = undefined, ylabel = undefined, label_fontsize = 12, stroke = "white", stroke_width = 1.0, dpi_scale = window.devicePixelRatio, brush = true, brush_highlight = true, brush_listeners = { start: () => {}, brush: (brushed_data) => { console.log("brushed_data", brushed_data); }, end: () => {} } } = {} ) { if (depth === undefined) { //by default, last point gets drawn on the top depth = (d, i) => -i / data.length; } if (container === undefined) { container = d3.create("div"); } // underlay; // canvas; // overlay; let underlay = create_svg(width, height); let overlay1 = create_svg(width, height); underlay.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) { underlay.selectAll(".scatter").remove(); } // Scales // From data to pixel coords on svg; let { sx, sy } = underlay.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, i) => { let c = sc(d, i); return [...color2gl(c), 1.0]; }; let canvas = create_canvas(width, height, dpi_scale); let regl = regl2({ canvas: canvas }); // 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; }); if (brush_highlight) { res.recolor((d, i) => (d.brushed ? scales.sc(d, i) : "#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", (e) => { if (e.selection === null) { //brush cleared res.recolor((d, i) => scales.sc(d, i)); if (brush_listeners["end"]) { brush_listeners["end"]([]); } } else { if (brush_listeners["end"]) { brush_listeners["end"](res.brushed_data); } } }); overlay1.append("g").attr("class", "brush").call(brush); } // let res = d3.select(canvas); let res = overlay(container, [underlay.node(), canvas, overlay1.node()]); //method defs res.underlay = underlay; res.overlay = overlay1; res.scales = { ...underlay.scales, sx_gl, sy_gl, sc_gl }; res.clear = () => { // regl._gl.clearColor(0, 0, 0, 1); regl.clear({ color: [0, 0, 0, 0], depth: 1, stencil: 0 }); }; res._render = create_scatter_gl_program(regl); //rendering APIs res.render = ({ positions, colors, size, stroke, stroke_width, depth } = {}) => { res._render({ positions: positions.map((d) => [sx_gl(d[0]), sy_gl(d[1])]), colors, count: positions.length, size: size.map((s) => s * window.devicePixelRatio * dpi_scale), stroke, stroke_width: stroke_width * window.devicePixelRatio * dpi_scale, depth }); }; res.update_position = (positions) => { res.render({ // attributes positions: positions.map((d) => [sx_gl(d[0]), sy_gl(d[1])]), colors: data.map((d, i) => sc_gl(d, i)), // array of RGBA tuples size: data.map((d, i) => s(d, i)), // array of numbers depth: data.map((d, i) => depth(d, i)), stroke: color2gl(stroke), stroke_width }); }; res.redraw = (data) => { res.render({ // attributes positions: data.map((d, i) => [x(d, i), y(d, i)]), //array of two numbers colors: data.map((d, i) => sc_gl(d, i)), // array of RGBA tuples size: data.map((d, i) => s(d, i)), // array of numbers depth: data.map((d, i) => depth(d, i)), stroke: color2gl(stroke), stroke_width }); }; res.recolor = (new_sc, { depth = () => 0.5 } = {}) => { // update color scale sc = new_sc; sc_gl = (d, i) => { let c = new_sc(d, i); return [...color2gl(c), 1.0]; }; // re-render res.render({ // attributes positions: data.map((d, i) => [x(d, i), y(d, i)]), //array of two numbers colors: data.map((d, i) => sc_gl(d, i)), // array of RGBA tuples size: data.map((d, i) => s(d, i)), // array of numbers depth: data.map((d, i) => depth(d, i)), stroke: color2gl(stroke), stroke_width }); }; //draw res.clear(); res.redraw(data); return res; }39:T7a0,function create_scatter_gl_program(regl) { let vert = ` precision mediump float; attribute vec2 position; attribute vec4 color; attribute float size; attribute float depth; varying float v_size; varying vec4 v_color; void main() { gl_Position = vec4(position, depth, 1.0); gl_PointSize = size; v_color = color; v_size = size; }`; let frag = ` precision mediump float; varying vec4 v_color; varying float v_size; uniform vec3 u_stroke; uniform float u_stroke_width; void main() { float eps = 0.01; //round marks vec2 pointCoord = (gl_PointCoord.xy-0.5)*2.0; float dist = length(pointCoord); // distance to point center, normalized to [0,1] if (dist>1.0) discard; gl_FragColor = v_color; // if (v_size > 6.0){ //border color if marker size > 2.0 float stroke = u_stroke_width / v_size; //normalized stroke width float mix_factor = smoothstep(1.0-stroke-eps, 1.0-stroke+eps, dist); gl_FragColor = mix( v_color, vec4(u_stroke, 1.0), mix_factor ); float alpha = 1.0 - smoothstep(1.0-stroke+stroke*0.8, 1.0, dist); gl_FragColor.a = alpha; //} }`; let render_func = regl({ attributes: { position: regl.prop("positions"), color: regl.prop("colors"), size: regl.prop("size"), depth: regl.prop("depth") }, uniforms: { u_stroke: regl.prop("stroke"), u_stroke_width: regl.prop("stroke_width") }, count: regl.prop("count"), primitive: "points", vert, frag, //alpha blend blend: { enable: true, func: { srcRGB: "src alpha", srcAlpha: 1, dstRGB: "one minus src alpha", dstAlpha: 1 }, equation: { rgb: "add", alpha: "add" }, color: [0, 0, 0, 0] } }); return render_func; }3a:T5ed,function bin_points_to_pixels( points, canvasW = 100, canvasH = 100, binSize = 2 ) { // binSize: integer pixel size (1 = pixel grid, >1 = coarser bins) const binsX = Math.ceil(canvasW / binSize); const binsY = Math.ceil(canvasH / binSize); const counts = new Uint32Array(binsX * binsY); // accumulate counts for (let i = 0; i < points.length / 2; i++) { const xnorm = points[i][0]; const ynorm = points[i][1]; // skip NaN or out-of-range quickly if (!(xnorm >= 0 && xnorm <= 1 && ynorm >= 0 && ynorm <= 1)) continue; //pixel space coordinate const px = Math.floor(xnorm * canvasW); const py = Math.floor(ynorm * canvasH); //bin space coordinate const bx = Math.floor(px / binSize); const by = Math.floor(py / binSize); if (bx < 0 || bx >= binsX || by < 0 || by >= binsY) continue; counts[by * binsX + bx] += 1; } // build aggregated arrays (one entry per non-empty bin) const positions = []; const agCounts = []; let max_count = 0; for (let by = 0; by < binsY; by++) { for (let bx = 0; bx < binsX; bx++) { const c = counts[by * binsX + bx]; if (c === 0) continue; // use bin center in pixel coordinates const centerX = bx * binSize + binSize * 0.5; const centerY = by * binSize + binSize * 0.5; positions.push([centerX, centerY]); agCounts.push(c); if (c > max_count) max_count = c; } } return { positions: positions, counts: agCounts, max_count: max_count }; }3b:Td0a,{ let [w, h] = [width * 0.3, width * 0.3]; // let bin_size = 4; let dpi_scale = 2; // compute binning data for display let bins = bin_points_to_pixels(psb_test_data, w, h, bin_size); // return bins;//{positions: Array(274), counts: Array(274), max_count: 87} //point colors let sc = d3.scaleLinear().domain([0, bins.max_count]).range([0, 1]); let sc_gl = (v) => { return color2gl(d3.interpolateViridis(sc(v))); // return color2gl(C[0]); }; let colors = bins.counts.map((c) => sc_gl(c)); //create canvas and regl instance let canvas = create_canvas(w, h, dpi_scale); let regl = regl2({ canvas: canvas }); //create drawing function through regl canvas.clear = () => regl.clear({ color: [0.15, 0.15, 0.15, 1] }); canvas.render = regl({ vert: `#version 100 attribute vec2 a_pos; // position in pixel coordinates attribute float a_count; // count of points in this bin attribute vec3 a_color; // count of points in this bin uniform vec2 u_canvasSize; // canvas size in pixels uniform float u_maxCount; // max count for normalization varying float v_norm; // normalized count. That is, count divide by max count varying vec3 v_color; void main() { // convert pixel coords -> clip space (-1..1) vec2 clip = (a_pos / u_canvasSize) * 2.0 - 1.0; // flip Y because canvas pixel origin is top-left clip.y = -clip.y; gl_Position = vec4(clip, 0.0, 1.0); // point size: scale with log(count+1) for perceptual sizing float size = 1.0 + 6.0 * log(1.0 + a_count) / log(1.0 + u_maxCount); gl_PointSize = size; gl_PointSize = ${(dpi_scale * bin_size).toFixed(1)}; v_norm = clamp(a_count / max(1.0, u_maxCount), 0.0, 1.0); v_color = a_color; }`, frag: `#version 100 precision mediump float; varying float v_norm; varying vec3 v_color; void main() { // simple radial alpha for nicer points vec2 coord = gl_PointCoord - vec2(0.5); float r = length(coord); // float alpha = smoothstep(0.5, 0.45, r); float alpha = 1.0; // color map: from blue -> cyan -> yellow -> red // vec3 col = mix(vec3(0.0,0.2,0.8), vec3(1.0,0.0,0.0), v_norm); // For perceptual better, mix with yellow/cyan mid-range // col = mix(col, vec3(1.0,0.9,0.2), v_norm*0.6); // gl_FragColor = vec4(col, alpha); gl_FragColor = vec4(v_color, alpha); }`, attributes: { a_pos: regl.prop("positions"), a_count: regl.prop("counts"), a_color: regl.prop("colors") }, uniforms: { u_canvasSize: regl.prop("canvas_size"), u_maxCount: regl.prop("max_count") }, count: regl.prop("count"), primitive: "points", blend: { enable: true, func: { srcRGB: "src alpha", dstRGB: "one minus src alpha", srcAlpha: "src alpha", dstAlpha: "one minus src alpha" } } }); //draw canvas.clear(); canvas.render({ // attributes positions: new Float32Array(bins.positions.flat()), counts: new Float32Array(bins.counts), canvas_size: new Float32Array([w, h]), max_count: 3, count: bins.counts.length, colors: new Float32Array(colors.flat()) }); return canvas; }3c:Taa0,function splom_gl( container_div = undefined, data = undefined, { width = 400, height = 400, attrs = [], depth = (d) => 0.0, //Show histogram on the diagonal or not. //Currently, this only affects the layout and plotting histogram is not supported yet histogram = false, //TODO layout = "both", //'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, xticks = 3, yticks = 3, //color styles, s = () => 5, //mark size, stroke = "#555", stroke_width = 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); // } if (container_div === undefined) { container_div = d3.create("div").style("height", `${height}px`); } let plots = []; //subplots for (let i = 0; i < n_attrs; i++) { plots[i] = []; for (let j = 0; j < n_attrs; j++) { if (layout === "lower" && i > j) { continue; } else if (layout === "upper" && i < j) { continue; } let ai = attrs[i]; let aj = attrs[j]; let sca = scatter_gl(undefined, data, { width: plot_width, height: plot_height, s: s, scales: scales, xlabel: aj, ylabel: ai, is_square_scale: false, x: (d) => d[aj], y: (d) => d[ai], depth: depth, xticks: xticks, yticks: yticks, padding_top, padding_bottom, padding_left, padding_right, title: "", stroke_width, stroke }); d3.select(sca) .style("position", "absolute") .style("left", `${padding_left + j * plot_width}px`) // .style("top", `${padding_top + i * plot_height}px`); .style("top", `${padding_top + (n_attrs - 1 - i) * plot_height}px`); let { sx, sy } = sca.scales; plots[i][j] = sca; container_div.node().appendChild(sca); } } container_div.plots = plots; return container_div; }3d:T5b08,function splom_gl2( container_div = undefined, data = undefined, { width = 1000, height = 800, attrs = ["column_a", "column_b", "column_c"], //list of keys in data, row_attrs = undefined, col_attrs = undefined, depth = undefined, //(d) => 0.0, //Show histogram on the diagonal or not. //Currently, this only affects the layout and plotting histogram is not supported yet // histogram = false, //TODO layout = "upper", //'lower', 'upper' or 'both' // margin_left = 600, //global padding padding_left = 16, padding_right = 0, padding_top = 0, padding_bottom = 20, //subplot padding subplot_padding_left = 16, subplot_padding_right = 0, subplot_padding_top = 0, subplot_padding_bottom = 20, // wspace = 1, //The amount of width reserved for space between subplots. Similar to pyplot // hspace = 0.1, //x and y axes scales = { sc: (d) => C[0] }, // todo: flexible for individual subplots is_square_scale = false, is_log_scale = false, xticks = 5, yticks = 5, //color styles, s = () => 5, //mark size, stroke = "#eee", stroke_width = 1, //todo: //fill //cmap //c dpi_scale = window.devicePixelRatio, kde_filters = [(d) => true], //texts label_fontsize = 10, brush = true, brush_highlight = true, brush_listeners = { start: () => {}, brush: (brushed_data) => { console.log("brushed_data", brushed_data); }, end: () => {} } } = {} ) { row_attrs = row_attrs || attrs; col_attrs = col_attrs || attrs; // let n_attrs = attrs.length; let n_row_attrs = row_attrs.length; let n_col_attrs = col_attrs.length; let plot_width, plot_height; // if (histogram || layout === "both") { plot_width = (width - padding_left - padding_right) / n_col_attrs; plot_height = (height - padding_top - padding_bottom) / n_row_attrs; // } else { // plot_width = (width - padding_left - padding_right) / (n_attrs - 1); // plot_height = (height - padding_top - padding_bottom) / (n_attrs - 1); // } if (depth === undefined) { //by default, last point gets drawn on the top depth = (d, i) => -i / data.length; } //DOM layout: //

container_div // -

frame_container // -

overlay_container // -

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":5365,"value":"flex_box = flexbox //alias for backwards compatibility","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6359,"value":"function make_flexbox(div, width) {\n div\n .style(\"width\", `${width}px`)\n .style(\"display\", \"inline-flex\")\n .style(\"flex-direction\", \"row\")\n .style(\"flex-wrap\", \"wrap\");\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"function flexbox(items, width) {\n let res = d3\n .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\n let return_node = res.node();\n return_node.nodes = items;\n\n return_node.push = function (item) {\n return_node.nodes.push(item);\n return_node.appendChild(item);\n return_node.nodes.forEach((d, i) => {\n return_node[i] = d;\n });\n };\n\n items.forEach((d, i) => {\n return_node[i] = d;\n });\n return return_node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8423,"value":"test_img_src","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2062,"value":"{\n let images = d3.range(26).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, 200);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7320,"value":"hide_overflow_scroll_bar = html` \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2059,"value":"// function overflow_box(node, height, width = undefined) {\n// let wrapping_div = d3\n// .create(\"div\")\n// .classed(\"overflow\", true)\n// .style(\"height\", `${height}px`)\n// .style(\"overflow\", \"auto\")\n// .style(\"scrollbar-width\", \"none\"); ///* Firefox, hide scroll bar */\n\n// if (width !== undefined) {\n// wrapping_div.style(\"width\", `${width}px`);\n// }\n// wrapping_div.node().appendChild(node);\n// return wrapping_div.node();\n// }\n\nfunction overflow_box(nodes, height, width = undefined) {\n let wrapping_div = d3\n .create(\"div\")\n .classed(\"overflow\", true)\n .style(\"height\", `${height}px`)\n .style(\"overflow\", \"auto\")\n .style(\"scrollbar-width\", \"none\"); ///* Firefox, hide scroll bar */\n\n if (width !== undefined) {\n wrapping_div.style(\"width\", `${width}px`);\n }\n\n for (let node of nodes) {\n wrapping_div.node().appendChild(node);\n }\n return wrapping_div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"---\n## Data utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10197,"value":"function cumulative_sum(arr) {\n const cumulativeArr = [];\n let currentSum = 0;\n for (let i = 0; i < arr.length; i++) {\n currentSum += arr[i];\n cumulativeArr.push(currentSum);\n }\n return cumulativeArr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7273,"value":"function zip(a, b) {\n return a.map((ai, i) => [\n ai,\n ...d3.range(1, arguments.length).map((j) => arguments[j][i])\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5552,"value":"---\n### Client-side Numpy parser","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6111,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6440,"value":"numpy.get(\"http://127.0.0.1:5000/static/xy.npy\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5525,"value":"$52","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8600,"value":"// b = new Float32Array(\n// base64_to_bytes(\n// await (\n// await post(`http://localhost:5000/get_embed`, {\n// indices: [0]\n// })\n// ).text()\n// ).buffer\n// )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6437,"value":"---\n### Other data utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8827,"value":"// Standard Normal variate using Box-Muller transform.\nfunction gaussian(mean = 0, stdev = 1) {\n const u = 1 - Math.random(); // Converting [0,1) to (0,1]\n const v = Math.random();\n const z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);\n // Transform to the desired mean and standard deviation:\n return z * stdev + mean;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":8272,"value":"function base64_to_bytes(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;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":6017,"value":"---\n### Algebra","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":9657,"value":"math.sum(\n [\n [1, 2],\n [3, 4]\n ],\n 1\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":6169,"value":"function argmax(array, key = (d) => d) {\n return array\n .map((x, i) => [x, i])\n .reduce((r, a) => (key(a[0]) > key(r[0]) ? a : r))[1];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6184,"value":"function argmin(array, key = (d) => d) {\n return array\n .map((x, i) => [x, i])\n .reduce((r, a) => (key(a[0]) < key(r[0]) ? a : r))[1];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"function argsort(values, descending = true) {\n return values\n .map((d, i) => ({ value: d, index: i }))\n .sort((a, b) =>\n descending\n ? d3.descending(a.value, b.value)\n : d3.ascending(a.value, b.value)\n )\n .map((d) => d.index);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6023,"value":"---\n### data types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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; i{\n return y.map(yj=>[xi, yj]);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 if (size.length == 2) {\n return reshape2d(arr, size[0], size[1]);\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","output":"$undefined","database":"$undefined"},{"id":6447,"value":"function reshape2d(arr, r, c) {\n let res = [];\n let k = 0;\n for (let i = 0; i < r; i++) {\n let row = [];\n for (let j = 0; j < c; j++) {\n row.push(arr[k]);\n k++;\n }\n res.push(row);\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","output":"$undefined","database":"$undefined"},{"id":1036,"value":"### Data utils - Networking","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"function get_url_parameters() {\n let query = window.location.search;\n return parse_query(query);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":4935,"value":"get = fetch //alias","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4958,"value":"**Deprecate in the future**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"//future: see post()\nfunction upload(data, url, callback = (response) => response) {\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","output":"$undefined","database":"$undefined"},{"id":107,"value":"//future: use post() and some appropriate then(...)\nfunction fetch_json(url, { body = null, callback = (json) => json } = {}) {\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","output":"$undefined","database":"$undefined"},{"id":681,"value":"---\n## Import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":9569,"value":"d3.version","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":2048,"value":"crossfilter = crossfilter2 // alias","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"crossfilter2 = require('crossfilter2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"import {p5} from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":4914,"value":"import {interval} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":8378,"value":"quadtree = require(\"js-quadtree\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"---\n## Styles & Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1742,"value":"legend(default_categorical_scheme)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"default_categorical_scheme = pyplot_cycles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":1745,"value":"schemeCategory10 = d3.schemeCategory10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":383,"value":"// scatter_style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"svg_text_style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"heatmap_style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5545,"value":"md_code_style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1","titling":"auto"}} 31:"$30:body"