25:["$","title",null,{"children":"Dimbridge Demo with Scaled Data | jrogerthat | Observable"}] 4b:T917,dataset_parameters = ({ combined_no_width: { data: await FileAttachment("combined_nowidths.csv").csv({ typed: true }), preloaded: false, cat_cols: ["dataset", "POSCAR"], to_avoid_in_projection: [""], n_neighbors: 10, min_dist: 0.6, n_components: 2 }, all_combined_real_vals: { data: await FileAttachment("all_combined_realvals.csv").csv({ typed: true }), preloaded: false, cat_cols: ["dataset", "POSCAR", "length_scale"], to_avoid_in_projection: [], to_avoid_in_predicate: ["dataset", "POSCAR", "length_scale"], n_neighbors: 10, min_dist: 0.6, n_components: 2 }, combo_2_10_real: { data: await FileAttachment("2-10_combined_realvals.csv").csv({ typed: true }), preloaded: false, cat_cols: ["dataset", "POSCAR", "length_scale"], to_avoid_in_projection: [ "MnGe_r2", "MnGe_height2", "Mn_r2", "Mn_height2", "Ge_r2", "Ge_height2", "Te_r2", "Te_height2", "MnTe_r2", "MnTe_height2", "GeTe_r2", "GeTe_height2" ], to_avoid_in_predicate: ["dataset", "POSCAR", "MnGe_r2"], n_neighbors: 10, min_dist: 0.6, n_components: 2 }, combo_10_20_real: { data: await FileAttachment("10-20_combined_realvals.csv").csv({ typed: true }), preloaded: false, cat_cols: ["dataset", "POSCAR", "length_scale"], to_avoid_in_projection: [], to_avoid_in_predicate: ["dataset", "POSCAR", "length_scale"], n_neighbors: 10, min_dist: 0.6, n_components: 2 }, real_and_scaled: { data: real_and_scaled_data, preloaded: false, cat_cols: [], to_avoid_in_projection: Object.keys(scaled_data[0]), to_avoid_in_predicate: Object.keys(scaled_data[0]).map((m) => m === "dataset" || m === "POSCAR" ? m : `${m}_scaled` ), n_neighbors: 25, min_dist: 0.1, n_components: 2 }, combined_individualminmax: { data: await FileAttachment("combined_individualminmax.csv").csv({ typed: true }), preloaded: false, cat_cols: ["dataset", "POSCAR", "length_scale"], to_avoid_in_projection: ["dataset", "POSCAR", "length_scale"], to_avoid_in_predicate: ["dataset", "POSCAR", "length_scale"], n_neighbors: 10, min_dist: 0.1, n_components: 2 } })4c:T4b0,attribute_data = { let all_atts = [ ...Object.keys(initial_full_data[0]).filter((f) => dataset_parameters[dataset_name].cat_cols.includes(f) ), "id", "x", "y" ]; let _scatter_attributes = all_atts; // let _scatter_attributes = [...splom_attributes, "gene", "id", "x", "y"]; // let _manual_attributes = splom_attributes.filter( // (f) => !["gene", "id", "x", "y"].includes(f) // ); let _manual_attributes = all_atts.filter( (f) => !["gene", "id", "x", "y"].includes(f) ); let _selected = manual_projection_attributes; let set_scatter_attributes = (att) => { _scatter_attributes = att; }; let get_scatter_attributes = () => { return _scatter_attributes; }; let set_manual_attributes = (att) => { _manual_attributes = att; }; let get_manual_attributes = () => { return _manual_attributes; }; let get_selected_attributes = () => { return _selected; }; let set_selected_attributes = (attrs) => { _selected = attrs; }; return { set_scatter_attributes, get_scatter_attributes, set_manual_attributes, get_manual_attributes, get_selected_attributes, set_selected_attributes }; }4d:T820,viewof saver = { let data_selection = null; let button = d3.create("button"); button.text("SAVE SELECTION"); let pred_selected = [ ...returned_selection.get_selection().false_positives.map((m) => m.points), ...returned_selection.get_selection().true_positives.map((m) => m.points) ]; let brushed = brushed_data.get_brushed().flatMap((f) => f); button.on("click", () => { let keeper = []; d3.select("#projection_scatter") .selectAll(".point") .each((d, i, n) => { d.color = d3.select(n[i]).attr("fill"); d.brushed = brushed.indexOf(d.id) > -1; d.in_predicate = pred_selected.flatMap((m) => m).indexOf(d.id) > -1; keeper.push(d); }); console.log(keeper); console.log("PREDD", pred_keeper.get_preds()); fetch_json(`${predicate_host}/save_data_selection`, { //query server body: { point_data: keeper, predicates: pred_keeper.get_preds() // true_positives: returned_selection.get_selection().false_positives, // false_negatives: returned_selection.get_selection().false_negatives, // false_positives: returned_selection.get_selection().true_positives }, headers: new Headers({ // "ngrok-skip-browser-warning": true, "Access-Control-Allow-Origin": "*" }) }); }); button .style("border-radius", 4) .style("background", "#5362a1") .style( "font-family", '-apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif;' ) .style("color", "#ffffff") .style("font-size", 14) .style("font-weight", 600) .style("line-height", "24px") .style("padding", "8px 32px") .style("display", "inline-block") .style("border", "none"); let return_node = button.node(); return return_node; // button.button-cta:hover { // box-shadow: 0 4px 12px rgba(0, 0, 0, .08); // text-decoration: none; // transform: translateY(-1px); // } // // `; }4e:T1c22,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 * config.scatter_width; //width of main scatter plot and SPLOM let plot_height = width * config.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; sca.attr("id", "projection_scatter"); //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"); g_brush_path.attr("id", "projection_brush"); if (mode === "contrastive" || mode === "single brush / curve") { g_brush.call(brush_projection, { full_brush_history: full_brush_history, sample_brush_history: sample_brush_history, n_boxes: n_boxes, return_node: return_node, plot_extent_x: plot_extent_x, plot_extent_y: plot_extent_y, sx: sx, sy: sy, sca: sca, x: x, y: y, g_brush_path: g_brush_path }); } else { let circles = svg.selectAll("circle"); // lasso selection based on the drag events let coords = []; const lineGenerator = d3.line(); function drawPath() { d3.select("#lasso") .style("stroke", "gray") .style("stroke-width", 2) .style("fill", "#00000054") .style("fill-opacity", 0.2) .attr("d", lineGenerator(coords)); } function dragStart() { coords = []; d3.select("#lasso").remove(); svg.append("path").attr("id", "lasso"); } function dragMove(event) { let mouseX = event.sourceEvent.offsetX; let mouseY = event.sourceEvent.offsetY; coords.push([mouseX, mouseY]); drawPath(); } async function dragEnd() { let selectedDots = []; circles.each((d, i, n) => { let c = d3.select(n[i]); // let point = [x(d.x), y(d.y)]; let point = [+c.attr("cx"), +c.attr("cy")]; if (pointInPolygon(point, coords)) { c.attr("fill", "steelblue"); selectedDots.push(d.id); } }); brushed_data.set_brushed([selectedDots]); let { predicates, attributes, qualities, selected_ids } = await compute_predicates(full_brush_history, n_boxes, { x, y }); console.log("pred", predicates); 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); let pred_selected = pred_selected_data.get_pred_ids(); let brush_selected = brushed_data.get_brushed(); let circs = circles; let true_positives = pred_selected.map((pred_array, i) => { let blob = {}; blob.brush_key = i; blob.points = circs .filter((f) => { return ( pred_array.includes(+f.id) && brush_selected[i].includes(+f.id) ); }) .data() .map((m) => m.id); return blob; }); let false_negatives = pred_selected.map((pred_array, i) => { let blob = {}; blob.brush_key = i; blob.points = circs .filter((f) => { return ( !pred_array.includes(+f.id) && brush_selected[i].includes(+f.id) ); }) .data() .map((m) => m.id); return blob; }); let false_positives = pred_selected.map((pred_array, i) => { let blob = {}; blob.brush_key = i; blob.points = circs .filter((f) => { return ( pred_array.includes(+f.id) && !brush_selected[i].includes(+f.id) ); }) .data() .map((m) => m.id); return blob; }); returned_selection.set_selection( false_positives, false_negatives, true_positives ); // update_point_style(sca, "confusion"); // let circs = sca.selectAll("circle.point") circs.style("fill", d3.rgb(204, 204, 204)); // fill: d3.rgb(204, 204, 204), stroke: "#333" let fpC = circs.filter((f) => Object.entries(false_positives) .flatMap((f) => f[1].points) .includes(f.id) ); fpC.style("fill", d3.rgb(167, 61, 47)); let tpC = circs.filter((f) => Object.entries(true_positives) .flatMap((f) => f[1].points) .includes(f.id) ); tpC.style("fill", d3.rgb(116, 43, 122)); let fnC = circs.filter((f) => Object.entries(false_negatives) .flatMap((f) => f[1].points) .includes(f.id) ); fnC.style("fill", d3.rgb(49, 111, 200)); //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, sca }); } const drag = d3 .drag() .on("start", dragStart) .on("drag", dragMove) .on("end", dragEnd); svg.call(drag); } return return_node; }4f:T1f67,function brush_projection( g_brush, { full_brush_history: full_brush_history, sample_brush_history: sample_brush_history, n_boxes: n_boxes, return_node: return_node, plot_extent_x: plot_extent_x, plot_extent_y: plot_extent_y, sx: sx, sy: sy, sca: sca, x: x, y: y, g_brush_path: g_brush_path } ) { let brush = d3 .brush() .extent([ [plot_extent_x[0], plot_extent_y[0]], [plot_extent_x[1], plot_extent_y[1]] ]) .on("start", (event) => { // sca.selectAll("circle.point").style("fill", d3.rgb(71, 71, 71)); 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 ); //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"); let brushed = sample_brush_history.map((brush, i) => { return brushed_data.filter_brushed_data(projection_data, brush, x, y); }); brushed_data.set_brushed(brushed); 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); let pred_selected = pred_selected_data.get_pred_ids(); let brush_selected = brushed_data.get_brushed(); let circs = sca.selectAll("circle.point"); let true_positives = pred_selected.map((pred_array, i) => { let blob = {}; blob.brush_key = i; blob.points = circs .filter((f) => { return ( pred_array.includes(+f.id) && brush_selected[i].includes(+f.id) ); }) .data() .map((m) => m.id); return blob; }); let false_negatives = pred_selected.map((pred_array, i) => { let blob = {}; blob.brush_key = i; blob.points = circs .filter((f) => { return ( !pred_array.includes(+f.id) && brush_selected[i].includes(+f.id) ); }) .data() .map((m) => m.id); return blob; }); let false_positives = pred_selected.map((pred_array, i) => { let blob = {}; blob.brush_key = i; blob.points = circs .filter((f) => { return ( pred_array.includes(+f.id) && !brush_selected[i].includes(+f.id) ); }) .data() .map((m) => m.id); return blob; }); returned_selection.set_selection( false_positives, false_negatives, true_positives ); if (n_boxes == 1) { //color points by false netagivity, false postivity, etc. // update_point_style(sca, "confusion"); circs.style("fill", d3.rgb(204, 204, 204)); // fill: d3.rgb(204, 204, 204), stroke: "#333" let fpC = circs.filter((f) => Object.entries(false_positives) .flatMap((f) => f[1].points) .includes(f.id) ); fpC.style("fill", d3.rgb(167, 61, 47)); let tpC = circs.filter((f) => Object.entries(true_positives) .flatMap((f) => f[1].points) .includes(f.id) ); tpC.style("fill", d3.rgb(116, 43, 122)); let fnC = circs.filter((f) => Object.entries(false_negatives) .flatMap((f) => f[1].points) .includes(f.id) ); fnC.style("fill", d3.rgb(49, 111, 200)); } else if (n_boxes == 2) { //color two sets of points by 2 brush boxes // update_point_style(sca, "contrastive"); circs.style("fill", d3.rgb(204, 204, 204)); let g_1 = circs .filter((f) => brush_selected[0].includes(+f.id)) .style("fill", d3.schemeCategory10[0]); let g_2 = circs .filter((f) => brush_selected[1].includes(+f.id)) .style("fill", d3.schemeCategory10[1]); } else { //highligh all selected points by brush curve sca.selectAll(".point").style("fill", d3.rgb(204, 204, 204)); const sequence_color = d3.scaleSequential( [0, brushed_data.get_brushed().length], d3.interpolateViridis ); let brush_points = brushed_data.get_brushed(); brush_points.map((b, i) => { sca .selectAll(".point") .filter((c) => b.includes(c.id)) .style("fill", sequence_color(i)); }); // 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, sca }); }); g_brush.call(brush); g_brush //remove brush UI stroke .select("rect.selection") .attr("stroke", "none"); }50:Te3d,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, sca } = 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); } let plot_width = 1000 * (1 - config.scatter_width * 2) - config.gap; // width * (1 - config.scatter_width * 2) - config.gap; //width of predicate view let plot_height = width * config.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") .attr("id", "predicate_view") .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 * (attributes ? attributes.length + 15 : 1000) ); let ob = overflow_box(svg.node(), width * config.scatter_height); // svg.remove(); svg.attr("id", "to-remove"); let att_wrap = 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); let predicate_div_selection = att_wrap.append("div"); predicate_div_selection.attr("id", "interactive_predicate_wrap"); 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 (mode == "shape" || n_boxes == 1) { // svg.remove(); svg.attr("height", 0); predicate_div_selection.call(predicate_single, predicate_view_style); let selected_data = get_selected( // data.get_data_subset(), projection_data, sample_brush_history[sample_brush_history.length - 1], { x, y } ); predicate_div_selection.draw(predicates, attributes, selected_data); } else if (n_boxes == 2) { svg.attr("height", 340); svg.call(predicate_contrastive, predicate_view_style); let selected_TODO = undefined; svg.draw(predicates, attributes, n_boxes, selected_TODO); } else { svg.call(predicate_multiple, predicate_view_style); svg.draw(predicates, attributes, n_boxes); svg.attr("height", Object.keys(predicates[0]).length * 150); } } if (predicates !== undefined) { draw(); } else if (color_attr !== "none") { svg.call(draw_legend, color_attr); } return return_node; }51:Tfe3,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 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 * config.scatter_width - config.gap; //width of main scatter plot and SPLOM let plot_height = width * config.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 + 5; 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 % 10 === 0); let used_data_points = hide_other_points ? brushed_d : [...not_brushed, ...brushed_d]; //draw SPLOM if (attributes !== undefined && Object.entries(predicates[0]).length > 1) { // splo.call(splom, brushed_d, { splo.call(splom, used_data_points, { 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); } else if ( attributes !== undefined && Object.entries(predicates[0]).length === 1 ) { ///VIOLIN STARTS HERE/// let key = Object.entries(predicates[0])[0][0]; let scale = extent[key]; const xScale = d3.scaleLinear().range([0, 400]).domain(extent[key]); let charWrap = d3.selectAll(splo).append("g").attr("class", "chart-wrap"); charWrap.attr("transform", "translate(0, 200)"); const gx = charWrap.append("g").call(d3.axisBottom(xScale)); let circs = charWrap .selectAll("circle.violin_selected") .data(brushed_d) .join("circle") .classed("violin_selected", true); circs .attr("cx", (d) => xScale(+d[key])) .attr("cy", -10) .attr("r", 5) .attr("fill", "gray") .attr("opacity", 0.5); ///VIOLIN ENDS HERE } return svg.node(); }52:Tad3,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)); const sequence_color = d3.scaleSequential( [0, brushed_data.get_brushed().length], d3.interpolateViridis ); let req_sel = returned_selection.get_selection(); let tp = req_sel.true_positives.flatMap((f) => f.points); let fp = req_sel.false_positives.flatMap((f) => f.points); let fn = req_sel.false_negatives.flatMap((f) => f.points); return (d, i) => { const isPredSelected = pred_ids[0].includes(+d.id); const isBrushed = brushed_ids.flatMap((b) => b).includes(+d.id); if (mode === "confusion") { // Set style - color by confusion (tp, tn, fp, fn) if (tp.includes(+d.id)) { return { fill: d3.rgb(116, 43, 122), stroke: "#333" }; // True Positive } else if (fn.includes(+d.id)) { return { fill: d3.rgb(49, 111, 200), stroke: "#eee" }; // False Negative } else if (fp.includes(+d.id)) { return { fill: d3.rgb(167, 61, 47), stroke: "#333" }; // False Positive } else { return { fill: d3.rgb(204, 204, 204), stroke: "#333" }; // True Negative } // 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 let test = brushed_data .get_brushed() .map((b, i) => (b.includes(+d.id) ? i : null)) .filter((f) => f != null); // return d.brushed // return isBrushed return test.length > 0 ? { fill: sequence_color(test[test.length - 1]), stroke: "#eee" } // Selected : // ? { 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 }; }53: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(); } }); }); }54:T670,sc = (d) => { // let cmap; // if(["subject", "condition", "replication"].includes(color_attr)){ // cmap = d3.scaleOrdinal().range(d3.schemeCategory10); // return cmap(d[color_attr]); if (color_attr === "none") { return d3.hcl(0, 0, 30); } else if (color_attr === "subject") { //categorical attributes let colors = d3.schemeSet2; return [colors[1], colors[2]][d[color_attr] - 1]; } else if (color_attr === "condition") { //categorical attributes // let colors = d3.schemeCategory10; // return ([colors[0], colors[2], colors[1]])[d[color_attr] - 1]; let colors = d3.schemeSet2; return [colors[1], colors[2], colors[5]][d[color_attr] - 1]; } else { //continuous attribute let cmap = d3.interpolateViridis; let sc; if (color_attr === "POSCAR") { // sc = d3.scaleOrdinal(d3.schemePaired); let colDom = new Set(data.get_data_subset().map((m) => m["POSCAR"])); sc = d3.scaleOrdinal(d3.schemeSpectral[11]); sc.domain(colDom); return sc(d[color_attr]); } else if (color_attr === "dataset") { // sc = d3.scaleOrdinal(d3.schemePaired); let colDom = new Set(data.get_data_subset().map((m) => m["dataset"])); sc = d3.scaleOrdinal(d3.schemeSpectral[11]); sc.domain(colDom); return sc(d[color_attr]); } else if (color_scale === "linear") { sc = d3.scaleLinear(); sc.domain(extent[color_attr]); return cmap(sc(d[color_attr])); } else if (color_scale === "log") { sc = d3.scaleLog(); sc.domain(extent[color_attr]); return cmap(sc(d[color_attr])); } } }55:T432,// 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(manual_projection_attributes.map((d) => [d, d])); } }56:T1f38,function rangeInput(div, options = {}) { const { min = 0, max = 100, step = "any", value: defaultValue = [min, max], color, width, theme = theme_Retro1, data = null } = options; const controls = {}; function randomScope(prefix = "scope-") { return ( prefix + (performance.now() + Math.random()).toString(32).replace(".", "-") ); } const cssLength = (v) => v == null ? null : typeof v === "number" ? `${v}px` : `${v}`; const scope = randomScope(); const clamp = (a, b, v) => (v < a ? a : v > b ? b : v); const html = htl.html; // Will be used to sanitize values while avoiding floating point issues. const input = html``; const dom = html`

${(controls.track = html`

${(controls.zone = html`

${(controls.range = html`

${(controls.min = html`

`)} ${(controls.max = html`

`)} `)} `)} `)} ${html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8219,"value":"theme_Retro1 = `\n/* Options */\n:scope {\n color: #3b99fc; \n width: 130px;\n}\n\n:scope {\n position: relative;\n display: inline-block;\n vertical-align: -10px;\n margin: 2px;\n}\n:scope .range-track {\n height: 15px;\n border: 2px solid #141414;\n padding: 0 18px;\n position: relative;\n background: #fff;\n}\n:scope .range-track-zone {\n position: relative;\n height: 100%;\n}\n:scope .range-select {\n box-sizing: border-box;\n position: relative;\n left: var(--range-min);\n width: calc(var(--range-max) - var(--range-min));\n height: 100%;\n cursor: ew-resize;\n background: currentColor;\n}\n:scope .range-select:focus,\n:scope .thumb:focus {\n outline: none;\n}\n:scope .thumb {\n box-sizing: border-box;\n position: absolute;\n height: 100%;\n top: 0;\n width: 10px;\n background: #fff;\n border: 1px solid #141414;\n border-width: 0 2px;\n cursor: default;\n}\n:scope .thumb:active {\n background: #141414;\n}\n:scope .thumb-min {\n left: -10px;\n}\n:scope .thumb-max {\n right: -10px;\n}\n`","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":7624,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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_gl,\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8076,"value":"import { theme_Flat } from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8811,"value":"d3lasso = require(\"d3-lasso\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W5f","stdlib":"1"}} 24:null