25:["$","title",null,{"children":"Dimbridge scRNA application | jrogerthat | Observable"}] 49:T1af9,viewof projection_view = { /* - Takes projection coordinates and reorder it - Knows hwo to color points within it - Returns brushed data points - For now (maybe move to somewhere else in the future), its brush also ask backend for predicates and retain that knowledge of predicates */ //configs // width measures include margins assigned to frame let plot_width = width * scatter_width; //width of main scatter plot and SPLOM let plot_height = width * scatter_height + 2.6 * config.font_size; // "+ 2.6 * fs" makes sure the scatter plot is squared //paddings controls how much space we give the scatter plot within the frame. let padding_left = 1 + config.scatter_padding; let padding_right = 1 + config.scatter_padding; let padding_bottom = config.scatter_padding; let padding_top = config.font_size * 1.6 + config.scatter_padding; let svg = d3 .create("svg") .attr("width", plot_width) //give enough margin for frame shadow .attr("height", plot_height) .style("overflow", "visible"); define_arrowhead(svg); let return_node = svg.node(); set_value(return_node, {}); //initial empty value let projection_g = svg.append("g"); make_frame( projection_g, 0, 0, plot_width, plot_height, "Projection View", config.font_size, true ); //scatter plot let x = (d) => +d[scatter_attr_x]; let y = (d) => +d[scatter_attr_y]; let sca = scatter(projection_g, projection_data, { x: x, y: y, s: (d) => 5, width: plot_width, height: plot_height, padding_left, padding_right, padding_bottom, padding_top, scales: { sc }, is_square_scale: false // xlabel: scatter_attr_x, // ylabel: scatter_attr_y }); sca.selectAll(".tick text").remove(); let { sx, sy } = sca.scales; //BRUSH let full_brush_history = []; let sample_brush_history = []; let g_brush = svg.append("g").attr("class", "brush"); //bounding box of the plot rectangle in the svg, in pixels let plot_extent_x = [padding_left, plot_width - padding_right]; let plot_extent_y = [padding_top, plot_height - padding_bottom]; let n_boxes = 1; let g_brush_path = svg.append("g"); let brush = d3 .brush() .extent([ [plot_extent_x[0], plot_extent_y[0]], [plot_extent_x[1], plot_extent_y[1]] ]) .on("start", (event) => { full_brush_history = []; clear_selected(projection_data); brushed_data.set_brushed([]); g_brush.selectAll(".selection").attr("display", null); if (event.mode === "handle") { //brush resize, single predicate mode n_boxes = 1; brushed_data.set_brushed([]); g_brush_path.call(clear_path); } else if (event.mode === "drag") { //brush drag=>contrastive/multiple predicates mode if (mode == "contrastive") { n_boxes = 2; } else { n_boxes = 12; } } }) .on("brush", async (event) => { if (n_boxes > 1 && event.mode !== "drag") { return; } //grab selection let brushed_region = get_brushed_region(event.selection, sx, sy); sample_brush_history = update_brush_history( full_brush_history, brushed_region, n_boxes ); //update the .selected attribute in data base on brush selection // set_selected( // projection_data, // brushed_region, // sca.x, // sca.y, // sample_brush_history.length // ); //draw fancy brush stroke if (n_boxes > 1) { g_brush_path.call(draw_path, sample_brush_history, { //hide the broad brush stroke if n_boxes = 2 i.e. contrastive mode size: n_boxes == 2 ? 0 : full_brush_history[0].brush_size, "stroke-width": 3 }); } //draw boxes in the main scatter plot draw_boxes( sca, sample_brush_history.map((b) => ({ x0: b.x_extent[0], x1: b.x_extent[1], y0: b.y_extent[0], y1: b.y_extent[1] })) ); //raise the d3.brush rectangle on top g_brush.raise(); }) .on("end", async (event) => { //do nothing in contrastive or curve mode (n_boxes > 1) if the brush is resized rather than "drag"ed if (n_boxes > 1 && event.mode !== "drag") { return; } // optionally, remove bboxes sca.selectAll(".bbox").remove(); if (n_boxes > 1 && event.mode === "drag") { //hide brush g_brush.selectAll(".selection").attr("display", "none"); if (n_boxes == 2) { //annotate brush-selected data by .first_brush and .second_brush and .selected // We set_selected_2(projection_data, sample_brush_history, x, y); let brushed = sample_brush_history.map((brush, i) => { return brushed_data.filter_brushed_data( projection_data, brush, x, y ); }); brushed_data.set_brushed(brushed); } } else { let selected_data = [ brushed_data.filter_brushed_data( projection_data, sample_brush_history[sample_brush_history.length - 1], x, y ) ]; //SELECTED BY BRUSH TESTING THIS OUT brushed_data.set_brushed(selected_data); } //compute predicates based on selected data let { predicates, attributes, qualities, selected_ids } = await compute_predicates(full_brush_history, n_boxes, { x, y }); attribute_data.set_manual_attributes(attributes); attribute_data.set_selected_attributes( attributes.slice(0, attribute_number) ); change_selected_attr(Object.keys(predicates[0]).slice(0, 5)); pred_selected_data.set_pred_ids(selected_ids); //Color scatter plot points by false positives, false negatives, etc. let last_predicate = predicates[predicates.length - 1]; // set_pred(projection_data, last_predicate); if (n_boxes == 1) { //color points by false netagivity, false postivity, etc. update_point_style(sca, "confusion"); } else if (n_boxes == 2) { //color two sets of points by 2 brush boxes update_point_style(sca, "contrastive"); } else { //highligh all selected points by brush curve update_point_style(sca, "selection"); } //update cell value for other cells and debugging purposes set_value(return_node, { n_boxes, predicates, attributes, qualities, full_brush_history, sample_brush_history, x, y }); }); g_brush.call(brush); g_brush //remove brush UI stroke .select("rect.selection") .attr("stroke", "none"); return return_node; }4a:Td84,predicate_view = { /* Takes predicates data (see first line of code) from projection_view. Renders predicate view depending on brush mode/state indicated by n_boxes For every predicate attribute, when n_boxes=1, predicate view displays a range bar horizontally when n_boxes=2, it displays a _pair_ of categorically colored range bars horizontally when n_boxes>2, it displays a sequence of range bars _vertivally_ like a time steries */ let { predicates, attributes, sample_brush_history, x, y, n_boxes } = projection_view; let max_n_predicates = Infinity; // limit the number of attributes plot in both predicate view and splom if (attributes !== undefined) { attributes = attributes.slice(0, 100); } // if (attributes !== undefined) { // attributes = attributes.slice(0, attribute_number); // } let plot_width = width * (1 - scatter_width * 2) - config.gap; //width of predicate view let plot_height = width * scatter_height + 2.6 * config.font_size; // "+ 2.6 * fs" makes sure the scatter plot is squared let padding_left = 1 + config.scatter_padding; let padding_right = 1 + config.scatter_padding; let padding_bottom = config.scatter_padding; let padding_top = config.font_size * 1.6 + config.scatter_padding; let return_node = d3 .create("div") .style("width", `${plot_width}px`) .style("height", `${plot_height}px`) .style("position", "relative") .node(); let frame = create_svg(plot_width, plot_height).style("overflow", "visible"); frame .append("g") .call( make_bridge_frame, 0, 0, plot_width, plot_height, "Predicate View", config.font_size, true ); let svg = create_svg( plot_width, predicate_view_subplot_height * // (manual_splom_attributes ? manual_splom_attributes.length + 2 : 1000) (attributes ? attributes.length + 2 : 1000) ); // .style("overflow", "visible"); //predicate view let predicate_view = svg.append("g"); let ob = overflow_box(svg.node(), width * scatter_height); d3.select(ob) .style("position", "absolute") .style("top", `${padding_top}px`) .style("left", "0") .style("overflow", "scroll"); // or "scroll" return_node.appendChild(frame.node()); return_node.appendChild(ob); function draw() { let predicate_view_style = { // padding_top, padding_bottom, width: plot_width, height: plot_height, font_size: predicate_view_fontsize, subplot_height: predicate_view_subplot_height, x_shift: plot_width }; if (n_boxes == 1) { predicate_view.call(predicate_single, predicate_view_style); } else if (n_boxes == 2) { predicate_view.call(predicate_contrastive, predicate_view_style); } else { predicate_view.call(predicate_multiple, predicate_view_style); } if (n_boxes == 1) { let selected_data = get_selected( // data.get_data_subset(), projection_data, sample_brush_history[sample_brush_history.length - 1], { x, y } ); predicate_view.draw(predicates, attributes, selected_data); } else if (n_boxes == 2) { let selected_TODO = undefined; predicate_view.draw(predicates, attributes, n_boxes, selected_TODO); } else { predicate_view.draw(predicates, attributes, n_boxes); } } if (predicates !== undefined) { draw(); } return return_node; }4b:Tc18,splom_view = { /* - Take data points and a list of attributes (e.g., predicates, or manual selection of attributes) - Renders data points in SPLOM - Knows how to color its points */ let { attributes, n_boxes, predicates } = projection_view; //limit the number of attributes plot in both predicate view and splom let subplot_limit = 5; if (attributes !== undefined) { attributes = attributes.slice(0, attribute_number); } //gap between subplots in splot, measured in proportion (0 to 1) to the size of a subplot let splom_spacing = 0.03; let plot_width = width * scatter_width - config.gap; //width of main scatter plot and SPLOM let plot_height = width * scatter_height + 2.6 * config.font_size; // controls padding in svg for the frames let margin_outer = config.margin_outer; let margin_inner = config.margin_inner; //contrpls how frames are spaced let margin_left = margin_inner; let margin_top = margin_inner; let margin_bottom = margin_inner; let margin_right = margin_inner; //paddings controls how much space we give the scatter plot within the frame. let padding_left = config.scatter_padding; let padding_right = 10 + config.scatter_padding; let padding_bottom = config.scatter_padding - 1; let padding_top = config.font_size * 1.6 + config.scatter_padding; let svg = d3 .create("svg") .attr("width", plot_width) .attr("height", plot_height) .style("overflow", "visible"); let splo = svg.append("g"); let splo_frame = make_frame( splo, 0, 0, plot_width, plot_height, "SPLOM View", config.font_size, true ); let brushed_ids = brushed_data .get_brushed() .flatMap((m) => m) .map((m) => +m); let data_used = data.get_data_subset(); let brushed_d = data_used.filter((f) => brushed_ids.includes(+f.id)); let not_brushed = data_used .filter((f) => !brushed_ids.includes(+f.id)) .filter((f, i) => i % 6 === 0); //draw SPLOM if (attributes !== undefined) { splo.call(splom, [...not_brushed, ...brushed_d], { attrs: attributes, width: plot_width, height: plot_height, padding_left: padding_left, padding_right: padding_right, padding_bottom: padding_bottom, padding_top: padding_top, scales: { sc: (d) => d3.hcl(0, 0, 30) }, is_square_scale: false, is_log_scale: false, s: (d) => Math.max(2, 10 / attributes.length), layout: "lower", wspace: splom_spacing, hspace: splom_spacing }); //color points in SPLOM if (n_boxes == 1) { //color points by false netagivity, false postivity, etc. update_splom_point_style(splo, "confusion"); } else if (n_boxes == 2) { //color two sets of points by 2 brush boxes update_splom_point_style(splo, "contrastive"); } else { //highligh all selected points by brush curve update_splom_point_style(splo, "selection"); } //draw predicate paths in each subplot of SPLOM // draw_predicates(splo, predicates, attributes, n_boxes); } return svg.node(); }4c:T655,function get_point_style(mode = "confusion") { let brushed_ids = brushed_data.get_brushed().map((m) => m.map((b) => +b)); let pred_ids = pred_selected_data.get_pred_ids().map((m) => m.map((b) => +b)); return (d, i) => { const isPredSelected = pred_ids[0].includes(+d.id); const isBrushed = brushed_ids[0].includes(+d.id); if (mode === "confusion") { // Set style - color by confusion (tp, tn, fp, fn) return isPredSelected && isBrushed ? { fill: d3.rgb(116, 43, 122), stroke: "#333" } // True Positive : !isPredSelected && !isBrushed ? { fill: d3.rgb(204, 204, 204), stroke: "#333" } // True Negative : !isPredSelected && isBrushed ? { fill: d3.rgb(49, 111, 200), stroke: "#eee" } // False Negative : { fill: d3.rgb(167, 61, 47), stroke: "#333" }; // False Positive } else if (mode === "selection") { // Color by selected vs. unselected return d.brushed ? { fill: "#43a2ca", stroke: "#eee" } // Selected : { fill: "#eee", stroke: "#333" }; // Unselected } else if (mode === "contrastive") { // Color based on different criteria const isFirstBrushed = brushed_ids[0].map((m) => +m).includes(+d.id); const isSecondBrushed = brushed_ids[1].map((m) => +m).includes(+d.id); return isFirstBrushed ? { fill: d3.schemeCategory10[0], stroke: "#eee" } // First Brushed : isSecondBrushed ? { fill: d3.schemeCategory10[1], stroke: "#333" } // Second Brushed : { fill: "#eee", stroke: "#333" }; // Not Brushed } return {}; // Default empty style }; }4d:T84e,// function update_splom_point_style(splo, mode = "confusion") { // let n_attrs = splo.plots.length; // let brushed_ids = brushed_data.get_brushed(); // let pred_ids = pred_selected_data.get_pred_ids(); // let style = get_point_style(mode); // //raise the brushed points in SPLON // for (let i = 0; i < n_attrs; i++) { // for (let j = 0; j < n_attrs; j++) { // if (splo.plots[i][j] !== undefined) { // splo.plots[i][j].update_style(style); // splo.plots[i][j] // .selectAll(".point") // .filter((d) => { // return mode === "contrastive" // ? brushed_ids[0].map((m) => +m).includes(+d.id) || // brushed_ids[1].map((m) => +m).includes(+d.id) // : brushed_ids[0].map((m) => +m).includes(+d.id); // }) // .raise(); // splo.plots[i][j] // .selectAll(".point") // .filter( // (d) => // pred_ids.flat().includes(+d.id) && // brushed_ids.flat().includes(d.id) // ) // true positives // .raise(); // } // } // } // ///END FilTER // } function update_splom_point_style(splo, mode = "confusion") { let brushed_ids = brushed_data.get_brushed(); let pred_ids = pred_selected_data.get_pred_ids(); let style = get_point_style(mode); // Update style for all points in the SPLON splo.plots.forEach((row) => { row.forEach((plot) => { if (plot !== undefined) { plot.update_style(style); // plot // .selectAll(".point") // .filter((d) => // mode === "contrastive" // ? brushed_ids[0].flat().includes(+d.id) || // brushed_ids[1].flat().includes(+d.id) // : brushed_ids[0].flat().includes(+d.id) // ) // .raise(); // plot // .selectAll(".point") // .filter( // (d) => // pred_ids.flat().includes(+d.id) && // brushed_ids.flat().includes(d.id) // ) // .raise(); } }); }); }4e:T426,// The mapping from attribute name to label text attr2label = { if (dataset_name.includes("animals4")) { return { "mouth open": "Mouth Open", "eyes squinting": "Eyes Squinting", "big eyes": "Eye Size", furry: "Furry", menacing: "Menacing", excited: "Excited", whiskers: "Whiskers", "pointy ears": "Pointy Ears", "big ears": "Ear Size", "big nose": "Nose Size", "old age": "Age", "big animal": "Body Size", "suspicious face": "Suspicious Face", spotted: "Spotted" }; } else if (dataset_name.includes("gait")) { return { "leg1.joint1.angle": "Left Ankle", "leg1.joint2.angle": "Left Knee", "leg1.joint3.angle": "Left Hip", "leg2.joint1.angle": "Right Ankle", "leg2.joint2.angle": "Right Knee", "leg2.joint3.angle": "Right Hip", subject: "Subject", condition: "Condition", replication: "Replication", time: "Time" }; } else { return Object.fromEntries(splom_attributes.map((d) => [d, d])); } }4f:T111e,function predicate_single( g_container, { width = 100, height = 100, padding_top = 2, font_size = 10, subplot_height = 20 } = {} ) { g_container.selectAll("g.predicate-view").remove(); //clear itself, keep the fancy frame let g = g_container .selectAll("g.predicate-view") .data([0]) .join("g") .attr("class", "predicate-view"); g_container.draw = function (predicates, splom_attributes, selected) { let n_attributes = splom_attributes.length; // predicates: one-element-array that contains an attr:interval pairs in an Object // splom_attributes: union of attributes in a sequence of brushes let predicate = predicates[0]; let attributes = splom_attributes; //origin at interval min let interval_start_x = font_size * 10; //width/2.5; let sx = d3 .scaleLinear() .domain([0, 1]) .range([interval_start_x, width - 19]); let sy = d3 .scaleLinear() .domain([0, n_attributes]) .range([ padding_top + 12, padding_top + 12 + n_attributes * subplot_height ]); if (attributes[0]) { let interval_data = attributes.map((a) => ({ attr: a, vmin: extent[a][0], vmax: extent[a][1], interval_min: predicate[a] ? predicate[a][0] : 0, interval_max: predicate[a] ? predicate[a][1] : 0 })); g.call(draw_background_rect, { top: sy(0) - 16, left: 6, height: n_attributes * subplot_height + 10, width: width - 6 * 2 }); let intervals_bg = g .selectAll(".interval-bg") .data(interval_data) .join("line") .attr("class", "interval-bg") .attr("x1", (d) => sx.domain([d.vmin, d.vmax])(d.vmin)) .attr("x2", (d) => sx.domain([d.vmin, d.vmax])(d.vmax)) .attr("y1", (d, i) => sy(i)) .attr("y2", (d, i) => sy(i)) .attr("stroke-linecap", "round") .attr("stroke", "#fff") .attr("stroke-width", 10); let intervals_fg = g .selectAll(".interval-fg") .data(interval_data) .join("line") .attr("class", "interval-fg") .attr("x1", (d) => sx.domain([d.vmin, d.vmax])(d.interval_min)) .attr("x2", (d) => sx.domain([d.vmin, d.vmax])(d.interval_max)) .attr("y1", (d, i) => sy(i)) .attr("y2", (d, i) => sy(i)) .attr("stroke-linecap", "round") .attr("stroke", (d) => attribute_data.get_selected_attributes().includes(d.attr) ? "#1f78b4" : "#63666A" ) .attr("stroke-width", 10); let labels = g .selectAll(".label") .data(attributes) .join("text") .attr("class", "label") .attr("x", interval_start_x - 28) .attr("y", (d, i) => sy(i)) .attr("text-anchor", "end") .attr("alignment-baseline", "central") .style("font-size", `${font_size}px`) .text((d) => attr2label[d]); let end = g .selectAll(".number") .data(interval_data.map((m) => [m.vmin, m.vmax])) .join("text") .attr("class", "label") .attr("x", width - 14) .attr("y", (d, i) => sy(i)) .attr("text-anchor", "end") .attr("alignment-baseline", "central") .style("font-size", `8px`) .text((d) => `${d3.format(".1f")(+d[1])}`); let start = g .selectAll(".number") .data(interval_data.map((m) => [m.vmin, m.vmax])) .join("text") .attr("class", "label") .attr("x", interval_start_x - 9) .attr("y", (d, i) => sy(i)) .attr("text-anchor", "end") .attr("alignment-baseline", "central") .style("font-size", `8px`) .text((d) => `${d3.format(".1f")(+d[0])}`); } function draw_background_rect( container, { height, width, top = 0, left = 0 } = {} ) { height = height || container.height; width = width || container.width; container .selectAll(".bg-rect") .data([0]) .join("rect") .attr("class", "bg-rect") .attr("x", left) .attr("y", top) .attr("width", width) .attr("height", height) .attr("rx", 4) .attr("fill", "#eee"); // .attr("stroke", "#777") // .attr("stroke-width", 1); } }; return g_container; }50:T1b6a,function predicate_contrastive( g_container, { width = 100, height = 100, padding_top = 2, font_size = 12, subplot_height = 20 } = {} ) { g_container.selectAll("g.predicate-view").remove(); //clear itself, keep the fancy frame let g = g_container .selectAll("g.predicate-view") .data([0]) .join("g") .attr("class", "predicate-view"); g_container.draw = function (predicates, splom_attributes, selected) { let n_attributes = splom_attributes.length; let y_shift = 14; // predicates: two-element-array that contains an attr:interval pairs in an Object // splom_attributes: union of attributes in a sequence of brushes //for each of the two predicates, draw intervals in a given color let sy = d3 .scaleLinear() .domain([0, n_attributes]) .range([ padding_top + 12, padding_top + 12 + n_attributes * subplot_height * 1.8 //give more space compare to single predicate ]); //background-rect g.selectAll("g.bg-rect") .data(splom_attributes) .join("g") .attr("class", "bg-rect") ._groups[0].forEach((g, i) => { g = d3.select(g); g.call(draw_background_rect, { top: sy(i) - 10, left: 6, height: y_shift + 20, width: width - 6 * 2 }); }); let interval_start_x = font_size * 10; //width/2.5; //draw label let labels = g .selectAll(".label") .data(splom_attributes) .join("text") .attr("class", "label") .attr("x", interval_start_x - 28) .attr("y", (d, i) => sy(i)) .attr("text-anchor", "end") .attr("alignment-baseline", "central") .style("font-size", `${font_size}px`) .text((d) => attr2label[d]); g.selectAll("g.predicate-view-single") .data([0, 1]) .join("g") .attr("class", "predicate-view-single") ._groups[0].forEach((g, i) => { g = d3.select(g); g.call(draw_intervals, { attributes: splom_attributes, predicate: predicates[i], stroke: d3.schemeCategory10[i], y_shift: i * y_shift, i: i, sy, interval_start_x, subplot_height: subplot_height * 1.5 }); }); if (dataset_name.includes("animals")) { g.call(draw_images, { sy, width, height }); } }; function draw_images(container, { width, height, sy } = {}) { let first_brush_data = data.get_data_subset().filter((d) => d.first_brush); let second_brush_data = data .get_data_subset() .filter((d) => d.second_brush); let image_filenames_by_group = [first_brush_data, second_brush_data].map( (brushed_data) => { return brushed_data.map((d) => d.image_filename); } ); let remaining_height = height - sy.range()[1]; let remaining_height_per_group = remaining_height / 2; let n_cols = 2; let pad = 5; let actual_width = width - 2 * pad; let actual_height = remaining_height_per_group - pad; let img_size = Math.min(actual_height, actual_width) / n_cols; let n_rows = Math.floor(remaining_height_per_group / img_size); let x_shift = width / 2 - (img_size * n_cols) / 2; //middle let frame_stroke_width = 8; g.selectAll(".imggrid").remove(); image_filenames_by_group.forEach((filenames, group_index) => { filenames = _.shuffle(filenames).slice(0, n_rows * n_cols); let g = container .append("g") .classed("imggrid", true) .attr( "transform", `translate(${x_shift},${ sy.range()[1] + group_index * img_size * n_rows + (group_index - 1) * Math.max(pad, frame_stroke_width) })` ); //draw image frame g.selectAll("rect") .data([0]) .join("rect") .attr("x", 0) .attr("y", 0) .attr("width", img_size * n_cols) .attr("height", img_size * n_rows) .attr("fill", "none") .attr("stroke-width", frame_stroke_width) .attr("stroke", d3.schemeCategory10[group_index]); }); } function draw_intervals( g, { predicate, //attr:interval pairs in an Object attributes, //union of attributes in a sequence of brushes i = 0, y_shift = 0, stroke = "#1f78b4", sy, interval_start_x } = {} ) { let n_attributes = attributes.length; //origin at interval min let sx = d3 .scaleLinear() .domain([0, 1]) .range([interval_start_x, width - 19]); let interval_data = attributes.map((a) => ({ attr: a, vmin: extent[a][0], vmax: extent[a][1], interval_min: predicate[a][0], interval_max: predicate[a][1] })); let intervals_bg = g .selectAll(".interval-bg") .data(interval_data) .join("line") .attr("class", "interval-bg") .attr("x1", (d) => sx.domain([d.vmin, d.vmax])(d.vmin)) .attr("x2", (d) => sx.domain([d.vmin, d.vmax])(d.vmax)) .attr("y1", (d, i) => sy(i) + y_shift) .attr("y2", (d, i) => sy(i) + y_shift) .attr("stroke-linecap", "round") .attr("stroke", "#fff") .attr("stroke-width", 10); let intervals_fg = g .selectAll(".interval-fg") .data(interval_data) .join("line") .attr("class", "interval-fg") .attr("x1", (d) => sx.domain([d.vmin, d.vmax])(d.interval_min)) .attr("x2", (d) => sx.domain([d.vmin, d.vmax])(d.interval_max)) .attr("y1", (d, i) => sy(i) + y_shift) .attr("y2", (d, i) => sy(i) + y_shift) .attr("stroke-linecap", "round") .attr("stroke", stroke) .attr("stroke-width", 10); let end = g .selectAll(".number") .data(interval_data.map((m) => [m.vmin, m.vmax])) .join("text") .attr("class", "label") .attr("x", width - 14) .attr("y", (d, i) => sy(i)) .attr("text-anchor", "end") .attr("alignment-baseline", "central") .style("font-size", `8px`) .text((d) => `${d3.format(".1f")(+d[1])}`); let start = g .selectAll(".number") .data(interval_data.map((m) => [m.vmin, m.vmax])) .join("text") .attr("class", "label") .attr("x", interval_start_x - 9) .attr("y", (d, i) => sy(i)) .attr("text-anchor", "end") .attr("alignment-baseline", "central") .style("font-size", `8px`) .text((d) => `${d3.format(".1f")(+d[0])}`); } function draw_background_rect( container, { height, width, top = 0, left = 0 } = {} ) { height = height || container.height; width = width || container.width; container .selectAll(".bg-rect") .data([0]) .join("rect") .attr("class", "bg-rect") .attr("x", left) .attr("y", top) .attr("width", width) .attr("height", height) .attr("rx", 4) .attr("fill", "#eee"); // .attr("stroke", "#777") // .attr("stroke-width", 1); } return g_container; }51:T228f,function predicate_multiple( g_container, { width = 100, height = 100, padding_top = 2, padding_bottom = 2, x_shift = 10 } = {} ) { // let height = attributes.length * 50; // let width = Math.max(200, (predicates.length + 2) * 40); //draw histogram and interval view; g_container.selectAll("g.predicate-view").remove(); //clear itself, keep the fancy frame let g = g_container .selectAll("g.predicate-view") .data([0]) .join("g") .attr("class", "predicate-view"); g_container.node().value = {}; g_container.draw = function (predicates, attributes, n_boxes, selected) { // predicates: array that contains objects of attr:interval pairs // attributes: union of attributes in a sequence of brushes let spacing = 32; let padding_left = 8; let padding_right = 8; let subplot_height; if (n_boxes == 2) { //take up some space at leave room for images subplot_height = 50; } else { //take up the full space // subplot_height = (height - padding_top - padding_bottom + spacing) / attributes.length; subplot_height = (height - padding_top - padding_bottom + 10) / attributes.length; } let subplot_width = width - padding_left - padding_right; let subplots = []; //horizontal shift from the (0,0) in svg coordinate; // let x_shift = padding_left + parseFloat(g.attr('transform').split(',')[0].split('(')[1]); let g_interval_views = g .selectAll("g.interval_view") .data(attributes) .join("g") .attr("class", "interval_view"); g_interval_views._groups[0].forEach((g, i) => { g = d3.select(g); let attr_name = g.datum(); //just two convient variables for internal use // no effect on the actual d3 selection g.width = subplot_width; g.height = subplot_height - spacing; g.attr( "transform", `translate(${padding_left}, ${padding_top + i * (g.height + spacing)})` ) .call(draw_background_rect, { top: -2, height: subplot_height - 8 }) .call(draw_intervals, { x_tick_labels: i == attributes.length - 1, extent: extent[attr_name], intervals: predicates.map((pt) => attr_name in pt ? pt[attr_name] : [undefined, undefined] ), n_boxes: n_boxes }) .call(draw_attribute_label); subplots.push(g); // g.call(draw_time_cursor, {other_containers:subplots, vmax:predicates.length-1, x_shift}); }); // if (n_boxes==2 && selected) { // g_container.call(draw_images, selected); // } }; function draw_images(selected, sy) { let n_cols = 2, remaining_height = height - sy.range()[1], pad = 5, actual_width = width - 2 * pad, img_size = actual_width / 2; let n_rows = Math.floor(remaining_height / img_size); let selected_images = data .filter((d, i) => selected[i]) .sort((a, b) => d3.ascending(a.x, b.x)) .map((d) => d.image_filename); selected_images = _.shuffle(selected_images).slice( 0, Math.min(n_rows * n_cols, selected_images.length) ); } function draw_time_cursor( container, { height, width, other_containers = [], vmax = 4, x_shift = 0 } = {} ) { let { sx, sy } = container.scales; //this was given by draw_intervals() as a side effect let cursor = container .selectAll(".time-cursor") .data([0]) .join("line") .attr("class", "time-cursor") .attr("x1", 0) .attr("x2", 0) .attr("y1", d3.min(sy.range()) - 10) .attr("y2", d3.max(sy.range()) + 10) .attr("stroke", "#555") .attr("stroke-width", 1); container.time_cursor = cursor; container.update_time_cursor = function (position) { cursor.attr("x1", sx(position)).attr("x2", sx(position)); }; let t_prev = -1; container.on("mousemove", (event) => { let x = sx.invert(event.clientX - x_shift); let t = Math.round(x); //snap to closes (integer) time stamp t = Math.max(Math.min(vmax, t), 0); container.update_time_cursor(t); other_containers.forEach((other) => { if (other !== container && other.update_time_cursor) { other.update_time_cursor(t); } }); if (t != t_prev) { //only dispatch event then the cursor actually changed g.node().value.time = t; g.node().dispatchEvent(new Event("input"), {}); t_prev = t; } }); return container; } function draw_attribute_label(container, { height, width } = {}) { height = height || container.height; width = width || container.width; container .selectAll(".attr-label") .data([container.datum()]) .join("text") .attr("class", "attr-label") .text((d) => attr2label[d]) //bottom .attr("x", width / 2) .attr("y", height + 8) .attr("fill", "#888") .attr("text-anchor", "middle") .attr("alignment-baseline", "hanging") .style("text-transform", "uppercase") .style("font-family", "sans-serif") .style("font-weight", 600) .style("font-size", 18) .style("font-style", "italic") .style("opacity", 0.7); //middle // .attr("x", 6) // .attr("y", height / 2) // .attr("fill", "#888") // .attr("alignment-baseline", "central") // .style("text-transform", "uppercase") // .style("font-family", "sans-serif") // .style("font-weight", 600) // .style("font-size", 22) // .style("font-style", "italic") // .style("opacity", 0.7) } function draw_background_rect(container, { top = 0, height, width } = {}) { height = height || container.height; width = width || container.width; container .selectAll(".bg-rect") .data([0]) .join("rect") .attr("class", "bg-rect") .attr("x", 0) .attr("y", top) .attr("width", width) .attr("height", height) .attr("rx", 4) .attr("fill", "#eee"); // .attr("fill", "none") // .attr("stroke", "#777"); } function draw_intervals( container, { height, width, x_ticks = 3, x_tick_labels = true, extent = [0, 1], intervals, n_boxes } = {} ) { height = height || container.height; width = width || container.width; let margin_left = 0; let margin_right = 2; let margin_top = 2; let margin_bottom = 2; let interval_data = intervals; let interval_stroke_width = 8; let sx = d3 .scaleLinear() .domain([-0.4, interval_data.length - 1 + 0.4]) .range([margin_left, width]); let sy = d3 .scaleLinear() .domain(d3.extent(extent)) .range([height - margin_bottom, margin_top + interval_stroke_width / 2]); container.scales = { sx, sy }; // y axis let ay = d3.axisRight(sy).ticks(0).tickSizeInner(-width); let gy = container .selectAll(".y-axis") .data([0]) .join("g") .attr("class", "y-axis") .attr("transform", `translate(${width - 2},${0})`) .call(ay); // gy.selectAll("text").style("font-size", 8); gy.selectAll(".tick text").remove(); gy.selectAll(".domain").remove(); gy.selectAll(".tick line") .attr("stroke", "#cdcdcd") .attr("stroke-dasharray", "5 4") .attr("stroke-width", 0.5); // x axis // let ax = d3.axisBottom(sx).ticks(1); // let gx = container // .append("g") // .attr("transform", `translate(${0},${height - margin_bottom})`) // .call(ax); // if (!x_tick_labels) { // gx.selectAll("text").remove(); // } let intervals_bgs = container .selectAll("line.interval-bg") .data(interval_data) .join("line") .attr("class", "interval-bg") .attr("x1", (d, i) => sx(i)) .attr("x2", (d, i) => sx(i)) .attr("y1", (d) => d3.min(sy.range())) .attr("y2", (d) => d3.max(sy.range())) .attr("display", (d) => (d[0] === undefined ? "none" : "")) .attr("stroke-width", interval_stroke_width) .attr("stroke", "#fff") .attr("stroke-linecap", "round"); // .attr("opacity", 0.7); let sc = d3.interpolateViridis; let intervals_fg = container .selectAll("line.interval") .data(interval_data) .join("line") .attr("class", "interval") .attr("x1", (d, i) => sx(i)) .attr("x2", (d, i) => sx(i)) .attr("y1", (d) => sy(d[0])) .attr("y2", (d) => sy(d[1])) .attr("display", (d) => (d[0] === undefined ? "none" : "")) .attr("stroke-width", interval_stroke_width) .attr("stroke", (d, i) => n_boxes == 2 ? d3.schemeCategory10[i] : "#1f78b4" ) .attr("stroke-linecap", "round"); // .attr("opacity", 0.7); } return g_container; }52:Taed,async function compute_predicates(full_brush_history, n_boxes, { x, y } = {}) { //filter and consider non-empty brushes only full_brush_history = full_brush_history.filter((brush_data) => { let selected = get_selected(data.get_data_subset(), brush_data, { x, y }); return d3.sum(selected.map((m) => m.bool)) > 0; }); // let predicates, qualities, attributes; let predicates, qualities, attributes, selected_ids; let sample_brush_history = subsample(full_brush_history, n_boxes); if (predicate_algorithm == "data extent") { // let selected_data = data.filter((d, i) => selected[i]); let sel_ids = []; predicates = sample_brush_history.map((brush_data) => { let selected = get_selected(data.get_data_subset(), brush_data, { x, y }); sel_ids = [ ...sel_ids, ...selected.filter((f) => f.bool).map((m) => +m.id) ]; return data_extent_predicate(selected.map((m) => m.bool)); }); selected_ids = [sel_ids]; let pred_data = predicates.map((p) => { return Object.entries(p).map((m) => { let newOb = {}; newOb.attribute = m[0]; newOb.interval_min = m[1][0]; newOb.interval_max = m[1][1]; return newOb; }); }); attributes = get_att_intersection(pred_data); // commented out attributes because that is what th og one has and the new has splom_att // attributes = manual_splom_attributes; } else if (predicate_algorithm == "logistic regression") { let response = await fetch_json(`${predicate_host}/get_predicates`, { //query server body: { subsets: brushed_data .get_brushed() .map((bd) => projection_data.map((pd) => bd.includes(pd.id))), dataset: dataset_name }, headers: new Headers({ "ngrok-skip-browser-warning": true, "Access-Control-Allow-Origin": "*" }) }); qualities = response.qualities; attributes = get_att_intersection(response.predicates); //find union of predicate attributes in response.predicates // commented this out from the re one // attributes = d3 // splom_attributes = d3 // .groups(response.predicates.flat(), (d) => d.attribute) // .map((d) => d[0]); //set predicates to be an array of {attr_name:interval} dictionaries indexed by brush time predicates = response.predicates.map((predicate_t) => { let key_value_pairs = predicate_t.map((p) => [p.attribute, p.interval]); return Object.fromEntries(key_value_pairs); }); selected_ids = response.selected_ids; let data_subset_resp = JSON.parse(response.subset); data.set_data_subset(Object.entries(data_subset_resp).map((m) => m[1])); } return { predicates, qualities, attributes, selected_ids }; }53:T403,function get_att_intersection(pred) { let pred_array = pred; if (pred.length === 2) { let combined = pred_array[0].length > pred_array[1].length ? [pred_array[1], pred_array[0]] : [pred_array[0], pred_array[1]]; let intersection = combined[0] .filter( (f) => combined[1].map((m) => m.attribute).includes(f.attribute) && f.attribute !== "id" ) .sort((a, b) => b.interval_max - a.interval_max) .map((m) => m.attribute); return intersection; } else { // return Array.from( // new Set( // pred // .flatMap((f) => Object.entries(f)) // .filter() // .sort((a, b) => b[1][1] - a[1][1]) // .map((m) => m[1].attribute) // ) // ); return Array.from( new Set( pred .flatMap((f) => f) .filter((f) => f.attribute !== "id") .sort((a, b) => b.interval_max - a.interval_max) .map((m) => m.attribute) ) ); } }54:Tce4,function splom( sel = undefined, data = undefined, { //Show histogram on the diagonal or not. //Currently, this only affects the layout and plotting histogram is not supported yet histogram = false, layout = "lower", //'lower', 'upper' or 'both' ticks = 0, width = 400, height = 400, attrs = [], // margin_left = 600, padding_left, padding_right, padding_bottom, padding_top, wspace = 0.01, //The amount of width reserved for space between subplots. Similar to pyplot hspace = 0.01, scales = { sc: undefined }, is_square_scale = false, is_log_scale = false, s = () => 5, //mark size, stroke = "#555", stroke_width = 0.1 } = {} ) { 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: attr2label[aj], ylabel: attr2label[ai], label_fontsize: 8, 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; }55:Ta21,function draw_predicates( splo, predicates, splom_attributes, n_boxes = 1 // sample_brush_history ) { //for each plot: for (let i = 0; i < splo.plots.length; i++) { for (let j = 0; j < splo.plots[0].length; j++) { if (splo.plots[i][j] === undefined) continue; let aj = splom_attributes[j]; let ai = splom_attributes[i]; let intervals = predicates.map((d) => { let predicate_exist_for_plot = ai in d && aj in d; if (!predicate_exist_for_plot || Object.keys(d).length == 0) { return { x0: 0, x1: 0, y0: 0, y1: 0 }; } else { return { // x0: d[splom_attributes[j]][0], x0: d[aj][0], x1: d[aj][1], y0: d[ai][0], y1: d[ai][1] }; } }); if (n_boxes > 1) { // draw_boxes(splo.plots[i][j], intervals); let { sx, sy } = splo.plots[i][j].scales; let path_data; if (n_boxes == 2) { //show data mean, instead of predicate let first_cx = sx( d3.mean( data.get_data_subset().filter((d) => d.first_brush), (d) => d[aj] ) ); let first_cy = sy( d3.mean( data.get_data_subset().filter((d) => d.first_brush), (d) => d[ai] ) ); let second_cx = sx( d3.mean( data.get_data_subset().filter((d) => d.second_brush), (d) => d[aj] ) ); let second_cy = sy( d3.mean( data.get_data_subset().filter((d) => d.second_brush), (d) => d[ai] ) ); path_data = [ { cx: first_cx, cy: first_cy }, { cx: second_cx, cy: second_cy } ]; } else { path_data = predicates.map((d) => ({ cx: sx(d3.mean(d[aj])), cy: sy(d3.mean(d[ai])) })); } // path_data = subsample(path_data, 6); let path_style = { size: 0, "stroke-width": 2 }; splo.plots[i][j] .selectAll("g.brush-path") .data([0]) .join("g") .attr("class", "brush-path") .attr("display", null) .call(draw_path, path_data, path_style); //TODO update color //splo.plots[i][j].update_style(...) } } } }56:T6c8,// function get_point_style(mode = "confusion") { // let brushed_ids = brushed_data.get_brushed().map((m) => m.map((b) => +b)); // let pred_ids = pred_selected_data.get_pred_ids().map((m) => m.map((b) => +b)); // let style; // if (mode === "confusion") { // //set style - color by confusion (tp, tn, fp, fn) // style = (d, i) => // // d.pred && d.selected //tp = true positive // pred_ids[0].includes(+d.id) && brushed_ids[0].includes(+d.id) //tp = true positive // ? { fill: d3.rgb(116, 43, 122), stroke: "#333" } // : // : !d.pred && !d.selected //tn // !pred_ids[0].includes(+d.id) && !brushed_ids[0].includes(+d.id) //tn // ? { fill: d3.rgb(204, 204, 204), stroke: "#333" } // : // : !d.pred && d.selected //fn // !pred_ids[0].includes(+d.id) && brushed_ids[0].includes(+d.id) //fn // ? { fill: d3.rgb(49, 111, 200), stroke: "#eee" } // : //fp // { fill: d3.rgb(167, 61, 47), stroke: "#333" }; // } else if (mode === "selection") { // //color by selected vs. unselected // style = (d, i) => // d.brushed // ? // ? { fill: "#6a3d9a", stroke: "#eee" } //blue // { fill: "#43a2ca", stroke: "#eee" } //green blue // : { fill: "#eee", stroke: "#333" }; // } else if (mode === "contrastive") { // style = (d, i) => { // return brushed_ids[0].map((m) => +m).includes(+d.id) // ? // return d.first_brush // { fill: d3.schemeCategory10[0], stroke: "#eee" } // : brushed_ids[1].map((m) => +m).includes(+d.id) // ? { fill: d3.schemeCategory10[1], stroke: "#333" } // : { fill: "#eee", stroke: "#333" }; // }; // } // return style; // }57:T88c,// // numpy.get_array(`${predicate_host}/get_data_numpy`) // function get(url) { // return fetch(url).then(async (res) => { // console.log("RES", res); // console.log("RES TEXT", res.text); // let buf = await res.arrayBuffer(); // console.log("BUF", buf); // console.log("rres", typeof res); // console.log(typeof res); // // let ndarray = numpy.fromArrayBuffer(buf); // // console.log("NDARRAY", ndarray); // // return ndarray; // }); // } // fetch(`${predicate_host}/get_data_numpy`) // .then((response) => response.arrayBuffer()) // .then((data) => { // // Assuming you know the shape of the NumPy array // console.log("DATAAA", data); // let d = numpy.fromArrayBuffer(data); // }) // .catch((error) => console.error(error)) // Fetch data from the Flask endpoint // async function fetchData() { // const response = await fetch(`${predicate_host}/get_data_numpy`); // if (response.ok) { // console.log(typeof response); // const compressedArrayBuffer = await response.arrayBuffer(); // console.log( // "TYPEE com", // compressedArrayBuffer, // typeof compressedArrayBuffer // ); // console.log("res text", response.text()); // // Convert ArrayBuffer to a TypedArray (e.g., Float32Array, Int16Array, etc.) // // const typedArray = new Float32Array(arrayBuffer); // const decompressedArrayBuffer = pako.inflate(compressedArrayBuffer); // console.log("TYPEE decom", decompressedArrayBuffer); // // const arrayBuffer = await response.arrayBuffer(); // // const uint8Array = new Uint8Array(arrayBuffer); // // // Convert Uint8Array to NumPy array // // const numRows = 22352; // Replace with the actual number of rows // // const numCols = 2701; // Replace with the actual number of columns // // const numpyArray = new Float64Array( // // uint8Array.buffer, // // 0, // // numRows * numCols // // ); // // // Now you have your NumPy-like array in JavaScript // // console.log(numpyArray); // // } else { // // console.error("Error fetching data:", response.statusText); // } // }58:[{"id":"118d0a3f8d8a828c45104d993daa16bc45a469fd1abadec8608066623de8923d6fe49265fc9cb011635c249723a35e6eabd1967316a3d8c0489c47f740a91060","href":"https://static.observableusercontent.com/files/118d0a3f8d8a828c45104d993daa16bc45a469fd1abadec8608066623de8923d6fe49265fc9cb011635c249723a35e6eabd1967316a3d8c0489c47f740a91060","name":"animals (1).csv","type":"text/csv","lastModified":1700435900661.01,"size":121060},{"id":"c967d517a334b25f1429bd56ec0f9f309a16ec3f31daf8ffe40e9b698b84c1e79097cc539b2f61a68ef5959e637aaf7829749364f4732e4d0ab722c60932395f","href":"https://static.observableusercontent.com/files/c967d517a334b25f1429bd56ec0f9f309a16ec3f31daf8ffe40e9b698b84c1e79097cc539b2f61a68ef5959e637aaf7829749364f4732e4d0ab722c60932395f","name":"1000_hs_healthy_with_tsne.csv","type":"text/csv","lastModified":1700435900661.01,"size":31954582},{"id":"0f44b5b5dbe91c7bf5329affcde033925e66a0b3bac24315d101cc0577a78c19fd01217d493c93d41a8c9051ad829ce09d7f4d39add6f6e5ad5a1a17b2a433a0","href":"https://static.observableusercontent.com/files/0f44b5b5dbe91c7bf5329affcde033925e66a0b3bac24315d101cc0577a78c19fd01217d493c93d41a8c9051ad829ce09d7f4d39add6f6e5ad5a1a17b2a433a0","name":"gait2 (3).csv","type":"text/csv","lastModified":1700435900661.01,"size":800426},{"id":"681dda510e31b4afa70077b3eac6687d51080f5693784473df9d0a886b54d9945ccbe759c82482583d285532f3eeec62a73f5f63750c123494058e23327dfab4","href":"https://static.observableusercontent.com/files/681dda510e31b4afa70077b3eac6687d51080f5693784473df9d0a886b54d9945ccbe759c82482583d285532f3eeec62a73f5f63750c123494058e23327dfab4","name":"animals5.csv","type":"text/csv","lastModified":1700435900661.01,"size":747475},{"id":"fd53f5fd9f3cc5538420736522fd060635ff21e41d36726aa25607056f1cdbc5b2e91e2989b734c38c248cc568aaaf40c6e39f5deb0a398f8156d04ab73b6f35","href":"https://static.observableusercontent.com/files/fd53f5fd9f3cc5538420736522fd060635ff21e41d36726aa25607056f1cdbc5b2e91e2989b734c38c248cc568aaaf40c6e39f5deb0a398f8156d04ab73b6f35","name":"animals4 (1).csv","type":"text/csv","lastModified":1700435900661.01,"size":373761},{"id":"e84ac8a5d275d4a67075f8d2b29a4478126b336e00fc98b8f823465891360a57ee0162b680264e181882647562cd769c65277c0a062efae43cfa0bd6b8e4245f","href":"https://static.observableusercontent.com/files/e84ac8a5d275d4a67075f8d2b29a4478126b336e00fc98b8f823465891360a57ee0162b680264e181882647562cd769c65277c0a062efae43cfa0bd6b8e4245f","name":"embedding@1.csv","type":"text/csv","lastModified":1700435900661.01,"size":1121542},{"id":"885c29415f30b4a025e0f13ce725f4703292a9c29518d9c1c50dbd3d228b57019ec21a9e68fbb685613709f6dbbcb32134f283e2da6523c51a29534dc3141224","href":"https://static.observableusercontent.com/files/885c29415f30b4a025e0f13ce725f4703292a9c29518d9c1c50dbd3d228b57019ec21a9e68fbb685613709f6dbbcb32134f283e2da6523c51a29534dc3141224","name":"meuse.txt","type":"text/plain","lastModified":1700435900661.01,"size":10520},{"id":"27f8b56c618c32c15c67298f3097188fa17365560dce2cf694c650eb86cfb880bda01a77bf94fb39e508128889eac00978c41fc840bd7ef29e0a07b7a2655900","href":"https://static.observableusercontent.com/files/27f8b56c618c32c15c67298f3097188fa17365560dce2cf694c650eb86cfb880bda01a77bf94fb39e508128889eac00978c41fc840bd7ef29e0a07b7a2655900","name":"gait_joined.csv","type":"text/csv","lastModified":1700435900661.01,"size":3394351},{"id":"9e5ef1d7b38a08b892e87c8550db5db97191c9f317ded9e70f3b5c66d2170a9b55898d724ad0878c69c0c7301e3463168dc411431cb24ca27b3b04c8690426b3","href":"https://static.observableusercontent.com/files/9e5ef1d7b38a08b892e87c8550db5db97191c9f317ded9e70f3b5c66d2170a9b55898d724ad0878c69c0c7301e3463168dc411431cb24ca27b3b04c8690426b3","name":"animals-3.csv","type":"text/csv","lastModified":1700435900661.01,"size":459722},{"id":"21d5d6c7bd4b7093e853826c0139da59b51a8ffe48da6913407aa751eb43b7ec080cfae6e9b29597d35721b02e3f073a3232d61cf58ddb9aa0d4f1ce0acd71b2","href":"https://static.observableusercontent.com/files/21d5d6c7bd4b7093e853826c0139da59b51a8ffe48da6913407aa751eb43b7ec080cfae6e9b29597d35721b02e3f073a3232d61cf58ddb9aa0d4f1ce0acd71b2","name":"animals-2 (2).csv","type":"text/csv","lastModified":1700435900661.01,"size":398673},{"id":"31d505b672df78726117b3a73db228a5d7cc8dd06a550b9b06083350b87cf78111a0a286da80d90209940004cbab395a470783153117cec33ae8762d5a7962b3","href":"https://static.observableusercontent.com/files/31d505b672df78726117b3a73db228a5d7cc8dd06a550b9b06083350b87cf78111a0a286da80d90209940004cbab395a470783153117cec33ae8762d5a7962b3","name":"1000_hs_healthy_with_tsne_perplexity_adjust.csv","type":"text/csv","lastModified":1700435900661.01,"size":31958491}] 29:{"id":"07b13a2cfcdf4659","slug":null,"title":"Dimbridge scRNA application","thumbnail":"3b8ee68f214d3e4a77c5a7ed90ae54988df8bcfde0732cfd4923b7d5005cd2c8","access_level":"public","create_time":"$D2023-11-19T23:18:20.661Z","update_time":"$D2024-02-18T23:13:18.237Z","view_time":null,"first_public_time":"$D2023-11-19T23:18:20.661Z","has_unpublished_edits":null,"fork":true,"stars":1,"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":7378,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dimbridge scRNA application","cells":[{"id":6345,"value":"# Dimbridge scRNA application","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1529,"value":"// predicate_host = \"https://5f95-35-194-212-250.ngrok-free.app\"\npredicate_host = \"http://127.0.0.1:9001\"\n// 'http://localhost:9001'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7206,"value":"numpy","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6880,"value":"projection_data = {\n let _proj_data = null;\n if (_proj_data !== null) {\n return _proj_data;\n } else {\n // Fetch the data if not already fetched\n const resp = await d3.csv(`${predicate_host}/get_projection_scatter`, {\n headers: new Headers({\n \"ngrok-skip-browser-warning\": true,\n \"Access-Control-Allow-Origin\": \"*\"\n })\n });\n\n // Perform any additional processing or filtering if needed\n const processedData = resp.map((m) => {\n if (splom_attributes.includes(color_attr)) {\n m[color_attr] = data.get_data_subset()[m.id][color_attr];\n }\n return m;\n });\n\n _proj_data = processedData;\n return _proj_data;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6272,"value":"splom_attributes = {\n let _data = null;\n if (_data !== null) {\n return _data;\n } else {\n // Fetch the data if not already fetched\n const resp = await d3.json(`${predicate_host}/get_splom_attributes`, {\n headers: new Headers({\n \"ngrok-skip-browser-warning\": true,\n \"Access-Control-Allow-Origin\": \"*\"\n })\n });\n\n _data = resp;\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":6091,"value":"brushed_data = {\n let _brushed = [];\n let get_brushed = () => {\n return _brushed;\n };\n let set_brushed = (brush_data) => {\n _brushed = brush_data;\n };\n\n /* \n Called in brush end and compute predicates\n */\n let filter_brushed_data = (p_data, brush_data, x, y) => {\n //return list of boolean based on brush selection\n // x, y are coordinate getter functions for points in data\n\n let { x_extent, y_extent } = brush_data;\n let [x0, x1] = x_extent;\n let [y0, y1] = y_extent;\n\n // return p_data.map((d) => x0 < x(d) && x(d) < x1 && y0 < y(d) && y(d) < y1);\n return p_data\n .filter((d) => x0 < x(d) && x(d) < x1 && y0 < y(d) && y(d) < y1)\n .map((m) => m.id);\n };\n\n return {\n get_brushed,\n set_brushed,\n filter_brushed_data\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6174,"value":"pred_selected_data = {\n let _selected_by_pred_ids = [];\n let get_pred_ids = () => {\n return _selected_by_pred_ids;\n };\n let set_pred_ids = (ids) => {\n _selected_by_pred_ids = ids;\n };\n return {\n get_pred_ids,\n set_pred_ids\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6104,"value":"attribute_data = {\n let _scatter_attributes = [...splom_attributes, \"gene\", \"id\", \"x\", \"y\"];\n let _manual_attributes = splom_attributes.filter(\n (f) => ![\"gene\", \"id\", \"x\", \"y\"].includes(f)\n );\n let _selected = manual_splom_attributes;\n\n let set_scatter_attributes = (att) => {\n _scatter_attributes = att;\n };\n let get_scatter_attributes = () => {\n return _scatter_attributes;\n };\n\n let set_manual_attributes = (att) => {\n _manual_attributes = att;\n };\n let get_manual_attributes = () => {\n return _manual_attributes;\n };\n let get_selected_attributes = () => {\n return _selected;\n };\n let set_selected_attributes = (attrs) => {\n _selected = attrs;\n };\n\n return {\n set_scatter_attributes,\n get_scatter_attributes,\n set_manual_attributes,\n get_manual_attributes,\n get_selected_attributes,\n set_selected_attributes\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6108,"value":"change_selected_attr = {\n manual_splom_attributes;\n return viewof manual_splom_attributes.changeValue;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6181,"value":"extent = {\n let _data = null;\n if (_data !== null) {\n return _data;\n } else {\n // Fetch the data if not already fetched\n const resp = await d3.json(`${predicate_host}/get_data_extents`, {\n headers: new Headers({\n \"ngrok-skip-browser-warning\": true,\n \"Access-Control-Allow-Origin\": \"*\"\n })\n });\n\n _data = Object.fromEntries(resp.map((m) => [m[0], [m[1], m[2]]]));\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":6184,"value":"data = {\n let temp = await d3.json(`${predicate_host}/get_data_subset`, {\n body: JSON.stringify({\n attrs: manual_splom_attributes\n }),\n headers: new Headers({\n \"Content-Type\": \"application/json\",\n \"ngrok-skip-browser-warning\": true,\n \"Access-Control-Allow-Origin\": \"*\"\n }),\n method: \"POST\",\n mode: \"cors\"\n });\n let temp_sub = Object.entries(temp).map((m) => m[1]);\n const get_data_subset = () => temp_sub;\n const set_data_subset = (sub) => (temp_sub = sub);\n return { get_data_subset, set_data_subset };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2541,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":976,"value":"viewof scatter_attr_x = Inputs.select(attribute_data.get_scatter_attributes(), {\n label: \"X\",\n value: \"x\" //dataset_name == \"gait\" ? \"leg1.joint2.angle\" : \"x\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"viewof scatter_attr_y = Inputs.select(attribute_data.get_scatter_attributes(), {\n label: \"Y\",\n value: \"y\" //dataset_name == \"gait\" ? \"leg1.joint3.angle\" : \"y\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1434,"value":"viewof color_scale = Inputs.select([\"linear\", \"log\"], {label: \"Color scale\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4173,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3540,"value":"viewof config = Inputs.form({\n margin_outer: Inputs.range([0, 100], {\n label: \"margin_outer\",\n step: 1,\n value: 10\n }),\n margin_inner: Inputs.range([0, 50], {\n label: \"margin_inner\",\n step: 1,\n value: 4\n }),\n scatter_padding: Inputs.range([10, 50], {\n label: \"scatter_padding\",\n step: 1,\n value: 10\n }),\n font_size: Inputs.range([10, 50], {\n label: \"font_size\",\n step: 1,\n value: 16\n }),\n gap: Inputs.range([10, 50], {\n label: \"gap\",\n step: 1,\n value: 10\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4033,"value":"---\n#### Single brush style settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3907,"value":"viewof predicate_view_fontsize = Inputs.range([0, 14], {label: \"predicate_fontsize\", step: 0.5, value:10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3894,"value":"viewof scatter_width = Inputs.range([0, 0.5], {label: \"scatter_width\", step: 0.01, value:0.4})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4686,"value":"viewof scatter_height = Inputs.range([0, 1.0], {\n label: \"scatter_height\",\n step: 0.01,\n value: 0.4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3912,"value":"viewof predicate_view_subplot_height = Inputs.range([10, 100], {label: \"predicate_subplot_height\", step: 1, value:20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4103,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4162,"value":"#### Mode settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":736,"value":"viewof dataset_name = Inputs.select(\n [\n \"gait2\",\n // \"meuse\", \"animals1\", \"animals2\", \"animals3\",\n // \"animals3\", \"animals4\",\n \"animals5\",\n \"1000_hs_healthy_with_tsne\",\n \"1000_hs_healthy_with_tsne_perplexity_adjust\",\n \"full_hs_healthy_with_tsne\"\n ],\n { label: \"Dataset\", value: \"full_hs_healthy_with_tsne\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4522,"value":"viewof mode = Inputs.select([\"single brush / curve\", \"contrastive\"], {\n label: \"Brush mode\",\n value: \"contrastive\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"viewof color_attr = Inputs.select([\"none\", ...manual_splom_attributes], {\n label: \"Color by\",\n value: \"none\" // default this -> assume case where we have too many attributes to even select one\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3082,"value":"viewof predicate_algorithm = Inputs.select(\n [\"logistic regression\", \"data extent\"],\n { label: \"Predicate algorithm\", value: \"logistic regression\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6638,"value":"viewof attribute_number = Inputs.range([0, splom_attributes.length], {\n label: \"Attributes at Start\",\n step: 1,\n value: 7\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6110,"value":"viewof manual_splom_attributes = multiAutoSelect({\n options: splom_attributes,\n placeholder: \"Select at least 2 . . .\",\n value: splom_attributes.slice(0, 20)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5657,"value":"main_view = {\n //add margins in between\n let margin = `${config.gap}px`;\n d3.select(viewof projection_view).style(\"margin-right\", margin);\n d3.select(predicate_view).style(\"margin-right\", margin);\n\n let return_node = flexbox(\n [viewof projection_view, predicate_view, splom_view],\n // [viewof projection_view, predicate_view],\n width\n );\n return return_node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5714,"value":"---\n## View Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5085,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5091,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5105,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5686,"value":"---\n## Plot utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6725,"value":"function get_brushed_region(selection, sx, sy) {\n let [[x0, y0], [x1, y1]] = selection;\n let cx = (x0 + x1) / 2;\n let cy = (y0 + y1) / 2;\n let brush_size = 1.2 * Math.sqrt(Math.abs((x0 - x1) * (y0 - y1)));\n x0 = sx.invert(x0);\n x1 = sx.invert(x1);\n y0 = sy.invert(y0);\n y1 = sy.invert(y1);\n [y0, y1] = [Math.min(y0, y1), Math.max(y0, y1)];\n return { x0, x1, y0, y1, cx, cy, brush_size };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6956,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5506,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5331,"value":"function get_selected(data, brush_data, { x, y } = {}) {\n //return list of boolean based on brush selection\n // x, y are coordinate getter functions for points in data\n\n let { x_extent, y_extent } = brush_data;\n let [x0, x1] = x_extent;\n let [y0, y1] = y_extent;\n let test = projection_data.map((d) => {\n // return x0 < x(+d.x) && x(+d.x) < x1 && y0 < y(+d.y) && y(+d.y) < y1;\n return { id: d.id, bool: x0 < +d.x && +d.x < x1 && y0 < +d.y && +d.y < y1 };\n });\n\n return test;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5454,"value":"function set_pred(data, predicate) {\n // compute prediction from given predicate\n // and set to d.pred for each item in data\n data.forEach((d, i) => {\n d.pred = true;\n for (let attr of Object.keys(predicate)) {\n let [a0, a1] = predicate[attr];\n if (d[attr] < a0 || d[attr] > a1) {\n // if ever d[attr] falls outside of predicate[attr] interval,\n // it is considered unselected/false by predicate\n d.pred = false;\n break;\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5464,"value":"function update_point_style(sca, mode = \"confusion\") {\n let style = get_point_style(mode);\n sca.update_style(style);\n //raise\n sca\n .selectAll(\".point\")\n .filter((d) => d.brushed)\n .raise();\n sca\n .selectAll(\".point\")\n .filter((d) => d.pred == 1 && d.selected) //true postives\n .raise();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5305,"value":"function update_brush_history(full_brush_history, brushed_region, n_boxes) {\n let { x0, x1, y0, y1, cx, cy, brush_size } = brushed_region;\n full_brush_history.push({\n x_extent: [x0, x1],\n y_extent: [y0, y1],\n cx: cx,\n cy: cy,\n brush_size: brush_size\n // selected: JSON.parse(JSON.stringify(data.map((d) => d.selected)))\n // selected: data.map((d) => d.selected)\n });\n let sample_brush_history = subsample(full_brush_history, n_boxes);\n return sample_brush_history;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5297,"value":"function clear_selected(data) {\n data.forEach((d) => {\n d.brushed = false;\n d.selected = false;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"sc = (d) => {\n // let cmap;\n // if([\"subject\", \"condition\", \"replication\"].includes(color_attr)){\n // cmap = d3.scaleOrdinal().range(d3.schemeCategory10);\n // return cmap(d[color_attr]);\n\n if (color_attr === \"none\") {\n return d3.hcl(0, 0, 30);\n } else if (color_attr === \"subject\") {\n //categorical attributes\n let colors = d3.schemeSet2;\n return [colors[1], colors[2]][d[color_attr] - 1];\n } else if (color_attr === \"condition\") {\n //categorical attributes\n // let colors = d3.schemeCategory10;\n // return ([colors[0], colors[2], colors[1]])[d[color_attr] - 1];\n\n let colors = d3.schemeSet2;\n return [colors[1], colors[2], colors[5]][d[color_attr] - 1];\n } else {\n //continuous attribute\n let cmap = d3.interpolateViridis;\n\n let sc;\n if (color_scale === \"linear\") {\n sc = d3.scaleLinear();\n } else if (color_scale === \"log\") {\n sc = d3.scaleLog();\n }\n sc.domain(extent[color_attr]);\n\n return cmap(sc(d[color_attr]));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3463,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3814,"value":"---\n## Three drawing modes of predicate view","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3330,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4606,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3332,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5624,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4269,"value":"function clear_path(g){\n g.selectAll('path').attr('display', 'none');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3961,"value":"function draw_path(g, path_data, path_style) {\n let line_generator = d3\n .line()\n .x((d) => d.cx)\n .y((d) => d.cy)\n // .curve(d3.curveCatmullRom)\n .curve(d3.curveBasis);\n\n // a thicker stroke on the background\n // and a think stroke with arrow head\n let path_styles = [\n {\n // stroke: \"#1f78b4\",\n // stroke: \"#00ff00\",\n stroke: \"#333\",\n \"stroke-width\": path_style.size,\n opacity: 0.3,\n \"marker-end\": \"\",\n },\n {\n stroke: \"#000\",\n \"stroke-width\": path_style[\"stroke-width\"],\n opacity: 1,\n \"marker-end\": \"url(#arrowhead)\",\n }\n ];\n\n let path = g\n .selectAll(\"path\")\n .data(path_styles)\n .join(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"display\", \"\")\n .attr(\"stroke\", (d) => d.stroke)\n .attr(\"stroke-width\", (d) => d[\"stroke-width\"])\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"marker-end\", (d) => d[\"marker-end\"])\n .attr(\"opacity\", (d) => d.opacity)\n .attr(\"d\", line_generator(path_data));\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3354,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7016,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1578,"value":"function data_extent_predicate(selected) {\n //From brush data, produce predicates derived base on data extent only.\n //Front end only. No backend server\n let selected_data = data.get_data_subset().filter((d, i) => selected[i]);\n\n if (selected_data.length == 0) {\n return {};\n } else {\n let attr_interval_pairs = Object.keys(selected_data[0]).map((attr) => {\n // let attr_interval_pairs = splom_attributes.map((attr) => {\n let interval;\n if (typeof selected_data[0][attr] === \"string\") {\n interval = new Set(selected_data.map((d) => d[attr]));\n } else {\n interval = d3.extent(selected_data, (d) => +d[attr]);\n }\n return [attr, interval];\n });\n let predicate = Object.fromEntries(attr_interval_pairs);\n return predicate;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1615,"value":"function draw_boxes(sca, intervals, {stroke_width=2}={}) {\n let { sx, sy } = sca.scales;\n let n = intervals.length;\n let sc = d3.interpolateViridis;\n // let sc = d3.interpolateCividis;\n // let sc = d3.interpolateBlues;\n \n sca\n .selectAll(\".bbox\").remove();\n sca\n .selectAll(\".bbox\")\n .data(intervals)\n .join(\"rect\")\n .attr(\"class\", \"bbox\")\n .attr(\"x\", (d) => sx(d.x0))\n .attr(\"y\", (d) => sy(d.y1))\n .attr(\"width\", (d) => Math.abs(sx(d.x0) - sx(d.x1)))\n .attr(\"height\", (d) => Math.abs(sy(d.y0) - sy(d.y1)))\n .attr(\"fill\", \"none\")\n // .attr('fill-opacity', (d,i)=> i==n-1 ? 0.1 : 0.0)\n .attr(\"stroke\", (d, i) => {\n return sc(Math.pow(i/n, 0.3));\n }) //the darker the more recent, and less dark boxes\n .attr('stroke-width', stroke_width)\n // .attr(\"stroke-width\", (d, i) => {\n // return 0.3 + (1.2 * 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":1259,"value":"## More settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1110,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4999,"value":"## Simple Attribute Histogram","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6552,"value":"subset_data = data.get_data_subset().filter((f) =>\n brushed_data.get_brushed().length > 0\n ? brushed_data\n .get_brushed()[0]\n .map((m) => +m)\n .includes(f.id)\n : []\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6557,"value":"subset_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"viewof attr_index = Inputs.range([0, Object.keys(subset_data[0]).length - 1], {\n label: \"histogram attr\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5609,"value":"Object.keys(data.get_data_subset()[0])[attr_index]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6555,"value":"Object.keys(subset_data[0])[attr_index]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"{\n // let subset_data = data.get_data_subset().filter((f) =>\n // brushed_data\n // .get_brushed()[0]\n // .map((m) => +m)\n // .includes(f.id)\n // );\n return Plot.plot({\n height: 200,\n // x: { domain: [-1, 1] },\n marks: [\n // Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"leg1.joint1.angle\"})),\n Plot.rectY(\n subset_data,\n Plot.binX(\n { y: \"count\" },\n { x: Object.keys(subset_data[0])[attr_index] }\n )\n ),\n Plot.ruleY([0])\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6564,"value":"d3.extent(subset_data, (d) => d[Object.keys(subset_data[0])[attr_index]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"// gait_embedding = fetch_json(`${host}/get_embedding`, {\n// callback: (json)=>{\n// let coords = reshape(base64_to_array(json.value), json.shape);\n// return skip_entries(coords, data_skip);\n// }\n// })\n\ngait_embedding = FileAttachment(\"embedding@1.csv\").csv({ typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"function skip_entries(data, skip){\n return reshape(data, [data.length/skip, skip]).map(d=>d[0]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6573,"value":"function subsample(array, limit = 10) {\n // Usage:\n // subsample(d3.range(50), 10) // => [0, 5, 11, 16, 22, 27, 33, 38, 44, 49]\n\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 // return [first, ...middle, last];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4106,"value":"function define_arrowhead(svg){\n //def #arrowhead\n let marker_style = { w: 4, h: 4 };\n let m = marker_style;\n svg.append(\"defs\").node().innerHTML = ` \\\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5898,"value":"---\n## Bugs\n- Data extent mode colors data points wrong (in both projection and SPLOM view)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"---\n## TODOs\n\n### Frontend\n- Allow overflow in predicates view to support hundreds of predicates\n- [maybe] Color legend on top right of SPLOM, or somewhere else\n- [Maybe] Other '[sequence of] interval visualization' as alternative? e.g., PCP in the middle\n\n### Backend\n- better data loader\n- [Optional] Run multiple times\n\n### Data\n- Loading data directly from backend so that frontend attachment is not necessary. Frontend attached data are for testing/demo only\n\n### Other\n- [What did I mean?] Brush time slider\n- [Optional] Histogram to SPLOM and show latest brush interval per attr\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5727,"value":"---\n## Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5724,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5731,"value":"---\n## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6114,"value":"import { multiAutoSelect } from \"@jrogerthat/multi-auto-select\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {\n _,\n // canvas_overlay,\n numpy,\n flex_box,\n fetch_json,\n base64_to_array,\n reshape,\n linspace,\n scatter,\n // scatter_style,\n numeric,\n set_value,\n flexbox,\n overflow_box,\n create_svg\n} from \"@tiga1231/lib\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2629,"value":"import {\n make_frame,\n make_sub_frame,\n make_bridge_frame\n} from \"@mattberger/fancy-frames\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5299,"value":"// function set_selected_2(data, sample_brush_history, x, y) {\n// if (sample_brush_history.length < 2) return;\n// data.forEach((d) => {\n// d.selected = false;\n// d.first_brush = false;\n// d.second_brush = false;\n// let x0, x1, y0, y1;\n// [[x0, x1], [y0, y1]] = [\n// sample_brush_history[0].x_extent,\n// sample_brush_history[0].y_extent\n// ];\n// d.first_brush = x0 < x(d) && x(d) < x1 && y0 < y(d) && y(d) < y1;\n// [[x0, x1], [y0, y1]] = [\n// sample_brush_history[1].x_extent,\n// sample_brush_history[1].y_extent\n// ];\n// d.second_brush = x0 < x(d) && x(d) < x1 && y0 < y(d) && y(d) < y1;\n// d.selected = d.first_brush || d.second_brush;\n// });\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5302,"value":"// function set_selected(data, brushed_region, x, y) {\n// let { x0, x1, y0, y1 } = brushed_region;\n// data.forEach((d) => {\n// let is_within_extent = x0 < x(d) && x(d) < x1 && y0 < y(d) && y(d) < y1;\n// d.brushed = d.brushed || is_within_extent;\n// d.selected = is_within_extent;\n// });\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"// extent = Object.fromEntries(Object.keys(data[0]).map(attr=>[attr, d3.extent(data, d=>d[attr])]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7150,"value":"// numpy.get_array(`${predicate_host}/static/test.npy`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5514,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7364,"value":"$57","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7368,"value":"// function reshapeArray() {\n// const dataType = Float32Array;\n// const numRows = 22352;\n// const numCols = 2700;\n\n// console.log(response);\n\n// // Create a TypedArray view on the ArrayBuffer\n// // const typedArray = new dataType(response);\n// let typedArray = new Float32Array(response);\n// console.log(\"TYPE ARR\", typedArray);\n\n// const reshapedArray = [];\n// for (let i = 0; i < numRows; i++) {\n// reshapedArray.push(\n// Array.from(typedArray.subarray(i * numCols, (i + 1) * numCols))\n// );\n// }\n\n// // Use NumPy's frombuffer function to convert the TypedArray to a NumPy array\n// // const numpyArray = np\n// // .frombuffer(typedArray.buffer, dataType)\n// // .reshape([numRows, numCols]);\n\n// // // Now 'numpyArray' is the NumPy array equivalent of the original data\n// // console.log(numpyArray);\n// return reshapedArray;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7371,"value":"// response = fetch(`${predicate_host}/get_data_numpy`).then(\n// (t) => t.arrayBuffer()\n// // t.blob()\n// )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7374,"value":"// pako = require(\"pako/dist/pako.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W58","stdlib":"1"}} 24:null