2a:null 2b:["$","title",null,{"children":"data_driven_insights_fun_mof_free_energy | tiga1231 | Observable"}] 30:Tbb8,datasets = { let all_datasets = {}; let local_datasets = { //local FileAttachment data general: await FileAttachment("general.csv").csv({ typed: true }), polymorphs: await FileAttachment("polymorphs@2.csv").csv({ typed: true }) // animals5_local: await FileAttachment("animals5.csv").csv({ typed: true }), // gait2: await FileAttachment("gait2 (3).csv").csv({ typed: true }) // MOF: await FileAttachment("mof_umap(1).csv").csv({ typed: true }), // MOF2: await FileAttachment("mof_textural_umap@1.csv").csv({ typed: true }), // MOF3: await FileAttachment("mof_umap_fun.csv").csv({ typed: true }), }; Object.assign(all_datasets, local_datasets); // remote data // let remote_dataset_names = ['animals5', 'pigments']; let remote_datasets = {}; try { let remote_dataset_names = await ( await fetch(`${dataset_host}/get_dataset_names`) ).json(); for (let remote_dataset_name of remote_dataset_names) { remote_datasets[remote_dataset_name] = d3.csv( `${dataset_host}/get_dataset/${remote_dataset_name}`, d3.autoType ); } } catch (error) { console.log("remote datasets failed to load:", error); } Object.assign(all_datasets, remote_datasets); return all_datasets; } // ({ // // meuse river dataset // // meuse: FileAttachment("meuse.txt").csv({ typed: true }), //https://rsbivand.github.io/sp/reference/meuse.html // //animals generated by StyleGAN3, attributes given by prompting to CLIP // // animals1: FileAttachment("animals (1).csv").csv({ typed: true }), // // animals2: FileAttachment("animals-2 (2).csv").csv({ typed: true }), // // animals3: FileAttachment("animals-3.csv").csv({ typed: true }), // // animals4: FileAttachment("animals4 (1).csv").csv({ typed: true }), // // "1000_hs_healthy_with_tsne": FileAttachment( // // "1000_hs_healthy_with_tsne.csv" // // ).csv({ typed: true }), // // "1000_hs_healthy_with_tsne_perplexity_adjust": FileAttachment( // // "1000_hs_healthy_with_tsne_perplexity_adjust.csv" // // ).csv({ typed: true }), // // pigments: FileAttachment("pigments_umap(1).csv").csv({ typed: true }), // // pigments: FileAttachment("pigments_umap3(2).csv").csv({ typed: true }), // // pigments: await FileAttachment("pigments_umap4.csv").csv({ typed: true }), // // motion captures data // // gait1: FileAttachment("gait_joined.csv").csv({ typed: true }), // gait2: await FileAttachment("gait2 (3).csv").csv({ typed: true }), // animals5_local: await FileAttachment("animals5.csv").csv({ typed: true }), // MOF: await FileAttachment("mof_umap(1).csv").csv({ typed: true }), // // remote data // animals5: d3.csv( // // `${dataset_host}/static/animals5/animals5.csv`, // `${dataset_host}/get_dataset/animals5`, // d3.autoType // ), // pigments: d3.csv( // // `${dataset_host}/static/pigments/pigments_umap.csv`, // `${dataset_host}/get_dataset/pigments`, // d3.autoType // ) // })31:T7fb,viewof manual_splom_attributes = { let numerical_attributes = attributes.filter( (attr) => typeof data[0][attr] === "number" ); //selectable attributes for splom: let selected_attributes; if (dataset_name.includes("gait")) { selected_attributes = [ // "time", "leg1.joint1.angle", "leg1.joint2.angle", "leg1.joint3.angle", "leg2.joint1.angle", "leg2.joint2.angle", "leg2.joint3.angle" ]; } else if (dataset_name === "meuse") { selected_attributes = ["om", "elev", "cadmium", "copper", "lead", "zinc"]; } else if (dataset_name === "animals-1") { selected_attributes = [ "mouth open", "eyes squinting", "furry", "scary", "excited", "spotted", // "stoic", "whiskers" ]; } else if (dataset_name.includes("MOF")) { selected_attributes = [ "fun_MW", "fun_eps", "fun_vol", "fun_elen", "delta_FE", "delta_VF", "dLM_FE" ]; // selected_attributes = [ // "metal_nonmetal_ratio", // "SE", // "LFS", // "LISAFP", // "SA_vol", // "SA_gra", // "inv_dens", // "VF" // ]; } else if (dataset_name === "pigments") { selected_attributes = ["chroma", "Hue", "ISO Light Fastness"]; } else { selected_attributes = numerical_attributes.slice(0, 5); } // return Inputs.select( // mode == "data extent" ? numerical_attributes : [], // { // disabled: mode != "data extent", // multiple: true, // label: // mode == "data extent" // ? "SPLOM attributes" // : "SPLOM attributes (disabled)", // value: selected_attributes // } // ); return Inputs.checkbox( predicate_mode === "data extent" ? numerical_attributes : [], { disabled: predicate_mode != "data extent", label: predicate_mode === "data extent" ? "SPLOM attributes" : "SPLOM attributes (disabled)", value: selected_attributes } ); }32:T436,colorbar_view = { if (color_attr === "none") { return ""; } else if (typeof data[0][color_attr] === "number" && sc.sc !== undefined) { //continuous color scale let color_domain = linspace(sc.sc.domain()[0], sc.sc.domain()[1], 10); let color_range = linspace(0, 1, 10).map((x) => d3.interpolateViridis(x)); let color_scale = d3.scaleLinear().domain(color_domain).range(color_range); let svg = create_svg(width, 50); svg.append("g").call(colorbar_horizontal, color_scale, { title: color_attr, width: width, height: 15, // ticks: linspace(-1, 1, 5), // tick_labels: linspace(-1, 1, 5).map((v) => `${v}`), n_ticks: 9 }); return svg.node(); } else { //discrete color legend let labels = color_domain; let lagend_data = labels.map((l) => { let d = {}; d[color_attr] = l; return d; }); let colors = lagend_data.map((d) => sc(d)); return legend(colors, { rect_size: 14, n_cols: 10, labels: labels, padding: 2, text_pad: 70 }); } }33:Tb15,class InteractionController { //fields projection_view; predicate_view; splom_view; predicates_prev; constructor(data, image_urls, predicate_mode) { this.data = data; this.image_urls = image_urls; this.predicates_prev = undefined; this.predicate_mode = predicate_mode; return this; } add_views(projection_view, predicate_view, splom_view, image_view) { this.projection_view = projection_view; this.predicate_view = predicate_view; this.splom_view = splom_view; this.image_view = image_view; } on_predicate_view_brushed(predicates, data_size = 1000) { let splom_attributes = Object.keys(predicates[0]); } on_projection_view_brush_start() { this.splom_view.hide_arrows(); } on_projection_view_change(predicates, data_size = 1000) { //get projection view brush-selected data //start predicate computation //update predicate view this.predicate_view.draw(predicates); // this.predicate_view.draw( // n_boxes, // predicates, // attributes, // sample_brush_history, // x, // y // ); if (this.image_view !== undefined) { // let brushed_data = this.projection_view.brush_cf.allFiltered(); let images = []; let n_brushes = predicates.length; let sample_brushes = subsample(d3.range(n_brushes), 6); for (let brush_index of sample_brushes) { let brushed_data = this.data.filter((d) => d.brushed[brush_index]); images.push(brushed_data.map((d) => this.image_urls[d.index])); } this.image_view.draw(images); } //update splom view if (data_size < 20000) { let splom_attributes; if (predicate_mode === "predicate regression") { // let subplot_limit = 6; splom_attributes = Object.keys(predicates[0]); //.slice(0, subplot_limit); } else if (predicate_mode === "data extent") { splom_attributes = manual_splom_attributes; } if ( this.predicates_prev !== undefined && !same_set(new Set(this.predicates_prev), new Set(splom_attributes)) ) { // force redraw SPLOM if predicates are different // this will remove and redraw SPLOM this.splom_view.splom_obj = undefined; this.splom_view.draw(splom_attributes, predicates); } else { // this will only recolor the current SPLOM this.splom_view.draw(splom_attributes, predicates); } this.predicates_prev = splom_attributes; } mutable should_update_table = true; } on_predicate_view_change(data) { //update projection view crossfilter_dimensions["x"].filterAll(); crossfilter_dimensions["y"].filterAll(); // update_point_style(this.projection_view.sca, "selection"); } on_splom_view_change() {} }34:T3632,class ProjectionView { constructor(controller) { /* - 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 */ console.log("new ProjectionView"); this.x = data.map((d, i) => d.x); this.y = data.map((d, i) => d.y); this.s = splom_mark_size; //size // this.c = data.map((d, i) => [1.0, 1.0, 0.0, 1, 0]); //color this.controller = controller; // this.config = config; this.attributes = attributes; this.predicate_mode = predicate_mode; this.predicate_engine = new DataExtentPredicate(data, this.attributes); this.brush_cf = this.init_brush_crossfilter(data, this.attributes); this.predicate_cf = this.init_predicate_crossfilter(data, this.attributes); this.node = this.init_node(); this.draw(); this.brush = this.init_brush(); this.brush_mode = brush_mode; return this; } predicate_callback(predicates, qualities) { // this.model.on("change:predicates", (event, data) => { // let { predicates, qualities } = data; console.log("PREDICATES", predicates); //find union of predicate attributes in response.predicates let attributes_union = d3 .groups(predicates.flat(), (d) => d.attribute) .map((d) => d[0]); // set predicates to be an array of {attr_name:interval} objects, indexed by brush time predicates = predicates.map((predicate_t) => { let key_value_pairs = predicate_t.map((p) => [p.attribute, p.interval]); let predicate = Object.fromEntries(key_value_pairs); for (let attr of attributes_union) { if (predicate[attr] === undefined) { predicate[attr] = this.predicate_engine.extent[attr]; } } return predicate; }); //update plots if (predicates !== undefined && predicates.length >= 1) { //Color scatter plot points by false positives, false negatives, etc. let last_predicate = predicates[predicates.length - 1]; set_selected( data, this.sample_brush_history, this.brush_cf, this.brush_cf_dimensions ); set_pred( data, last_predicate, this.attributes, this.predicate_cf, this.predicate_cf_dimensions ); if (this.n_boxes == 1) { if (this.predicate_mode === "data extent") { update_point_style_gl(this.sca, "selection"); } else { //color points by false netagivity, false postivity, etc. update_point_style_gl(this.sca, "confusion"); } } else if (this.n_boxes == 2) { //color two sets of points by 2 brush boxes update_point_style_gl(this.sca, "contrastive"); } else { //highligh all selected points by brush curve update_point_style_gl(this.sca, "brush"); } //inform other views this.controller.on_projection_view_change(predicates); } // }); } init_brush_crossfilter(data, attributes) { //Take all data and an awway of attribute strings //Returns //this.brush_cf_dimensions - an object with keys being attributes, //and values beinging the corresponding crossfilter dimension objects let cf_attributes = attributes.slice(); let cf = crossfilter(data); this.brush_cf_dimensions = { x: cf.dimension((d, i) => this.x[i]), y: cf.dimension((d, i) => this.y[i]) }; return cf; } init_predicate_crossfilter(data, attributes) { //Take all data and an awway of attribute strings //Returns //this.brush_cf_dimensions - an object with keys being attributes, //and values beinging the corresponding crossfilter dimension objects let cf_attributes = attributes.slice(); let cf = crossfilter(data); let cf_dimensions = cf_attributes.map((attr) => cf.dimension((d) => d[attr]) ); this.predicate_cf_dimensions = Object.fromEntries( zip(cf_attributes, cf_dimensions) ); return cf; } init_node() { let font_size = 16; // let { width, scatter_width, scatter_height, font_size, scatter_padding } = // this.config; //layout configs // width measures include margins assigned to frame this.plot_width = width * scatter_width; //width of main scatter plot and SPLOM this.plot_height = width * scatter_height + 2.6 * 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 scatter_padding = 0.1; this.padding_left = scatter_padding; this.padding_right = scatter_padding; this.padding_bottom = scatter_padding; this.padding_top = font_size * 1.6 + scatter_padding; this.fancy_frame = d3 .create("svg") .attr("width", this.plot_width) //give enough margin for frame shadow .attr("height", this.plot_height) .style("overflow", "visible"); let return_node = d3.create("div").node(); return_node.appendChild(this.fancy_frame.node()); // let return_node = this.fancy_frame.node(); // set_value(return_node, {}); //initial empty value this.projection_g = this.fancy_frame.append("g"); make_frame( this.projection_g, 0, 0, this.plot_width, this.plot_height, "Projection View", font_size, true ); return return_node; } draw() { // sc = (d, i) => d3.schemeCategory10[0]; let sc1; if (color_attr !== "none") { sc1 = sc; } else { sc1 = get_point_style("selection").fill; } // let style = get_point_style("selection"); // let sc = (d, i) => style(d, i).fill; this.sca = scatter_gl(d3.select(this.node), data, { x: (d, i) => d.x, y: (d, i) => d.y, s: (d, i) => this.s, stroke_width: 0.5, width: this.plot_width, height: this.plot_height, padding_left: this.padding_left, padding_right: this.padding_right, padding_bottom: this.padding_bottom, padding_top: this.padding_top, pad: 0.04, scales: { sc: sc1 }, is_square_scale: true, dpi_scale: 2.0, xticks: 5, yticks: 5 }); this.sca.overlay.selectAll(".tick text").remove(); // remove tick marks as dim-reduction axes are arbitrary define_arrowhead(this.sca.overlay); return this.sca; } init_brush() { //BRUSH this.n_boxes = 1; this.full_brush_history = []; this.sample_brush_history = []; this.g_brush = this.sca.overlay.append("g").attr("class", "brush"); this.g_brush_path = this.sca.overlay.append("g"); // arrow drawn for contrastive and curve brush //bounding box of the plot rectangle in the svg, in pixels let plot_extent_x = [ this.padding_left, this.plot_width - this.padding_right ]; let plot_extent_y = [ this.padding_top, this.plot_height - this.padding_bottom ]; let brush = d3 .brush() .extent([ [plot_extent_x[0], plot_extent_y[0]], [plot_extent_x[1], plot_extent_y[1]] ]) .on("start", (event) => this.brush_start(event)) .on("brush", (event) => this.brushed(event)) .on("end", (event) => this.brush_end(event)); this.g_brush.call(brush); this.g_brush //remove brush UI stroke .select("rect.selection") .attr("stroke", "none"); return brush; } brush_start(event) { this.full_brush_history = []; clear_selected(data); //clear all cross filters for (let dimension of Object.values(this.brush_cf_dimensions)) { dimension.filterAll(); } // reveal brush bounding box this.g_brush.selectAll(".selection").attr("display", null); if (event.mode === "handle") { //brush resized, single predicate mode this.n_boxes = 1; this.g_brush_path.call(clear_path); } else if (event.mode === "drag") { //brush drag=>contrastive/multiple predicates mode //set n_boxes based on brush mode if (this.brush_mode == "single") { this.n_boxes = 1; } else if (this.brush_mode == "contrastive") { this.n_boxes = 2; } else if (this.brush_mode == "curve") { this.n_boxes = 12; } } this.controller.on_projection_view_brush_start(); } async brushed(event) { console.log("brushed n_boxes:", this.n_boxes); if (this.n_boxes > 1 && event.mode !== "drag") { return; } //grab selection let brushed_region = this.get_brushed_region( event.selection, this.sca.scales.sx, this.sca.scales.sy ); //update brush history this.sample_brush_history = update_brush_history( this.full_brush_history, brushed_region, this.n_boxes ); //draw fancy brush stroke (arrow, and shaded stroke) if (this.n_boxes == 2) { this.g_brush_path.call(draw_path, this.sample_brush_history, { size: 0, "stroke-width": 4 }); } else if (this.n_boxes > 2) { this.g_brush_path.call(draw_path, this.sample_brush_history, { size: this.full_brush_history[0].brush_size, "stroke-width": 4 }); } //draw boxes in the main scatter plot draw_boxes( this.sca, this.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 drawn brush rectangle on top this.g_brush.raise(); //eager draw: in single brush, draw highlights on splom immediately if (this.predicate_mode === "data extent") { //compute predicates based on selected data let n_brushes = this.full_brush_history.length; let predicates = this.predicate_engine.compute_predicates( this.sample_brush_history ); if (this.n_boxes == 1) { //update data - the d.selected and d.brushed attribute base on brush set_selected( data, this.sample_brush_history, this.brush_cf, this.brush_cf_dimensions ); set_pred( data, predicates[predicates.length - 1], this.attributes, this.predicate_cf, this.predicate_cf_dimensions ); set_brushed( data, this.sample_brush_history, this.brush_cf, this.brush_cf_dimensions ); if (predicate_mode === "data extent") { update_point_style_gl(this.sca, "selection"); } else { update_point_style_gl(this.sca, "confusion"); } } else if (this.n_boxes == 2) { set_selected_2( data, this.sample_brush_history, this.brush_cf, this.brush_cf_dimensions ); set_brushed( data, this.sample_brush_history, this.brush_cf, this.brush_cf_dimensions ); update_point_style_gl(this.sca, "contrastive"); } else { set_brushed( data, this.sample_brush_history, this.brush_cf, this.brush_cf_dimensions ); update_point_style_gl(this.sca, "brush"); } //update other views this.controller.on_projection_view_change(predicates, data.length); } } async brush_end(event) { //sync with backend //dragging brushed region if (this.n_boxes == 1) { set_selected( data, this.sample_brush_history, this.brush_cf, this.brush_cf_dimensions ); // let selected = this.brush_cf.allFiltered().map((d) => d.index); // let selected = data.map((d) => d.selected); } else if (this.n_boxes == 2) { //annotate brush-selected data by .first_brush and .second_brush set_selected_2( data, this.sample_brush_history, this.brush_cf, this.brush_cf_dimensions ); } //update data - the d.selected and d.brushed attribute base on brush set_brushed( data, this.sample_brush_history, this.brush_cf, this.brush_cf_dimensions ); if (event.selection === null) { // remove brush bounding boxes (bboxes) after brush cancelled this.sca.overlay.selectAll(".bbox").remove(); //when brush get cleared, clear data selection and crossfilter // this.brush_cf_dimensions["x"].filterAll(); // this.brush_cf_dimensions["y"].filterAll(); // clear_selected(data); //redraw // let sc = (d) => d3.schemeCategory10[0]; // this.sca.recolor(sc, {depth: depth_func("selection")}); return; } // optionally, remove brush bounding boxes (bboxes) after brush end (e.g, mouse release) this.sca.overlay.selectAll(".bbox").remove(); // In contrastive or curve mode (n_boxes > 1), // if the brush is resized rather than dragged, do nothing. if (this.n_boxes > 1 && event.mode !== "drag") { return; } else if (this.n_boxes > 1 && event.mode === "drag") { //dragging brushed region //hide brush this.g_brush.selectAll(".selection").attr("display", "none"); } //compute predicates based on selected data points let predicates = this.predicate_engine.compute_predicates( this.sample_brush_history ); // this.predicate_callback(predicates); } get_brushed_region(selection, sx, sy) { let [[x0, y0], [x1, y1]] = selection; let cx = (x0 + x1) / 2; let cy = (y0 + y1) / 2; let brush_size = 1.2 * Math.sqrt(Math.abs((x0 - x1) * (y0 - y1))); x0 = sx.invert(x0); x1 = sx.invert(x1); y0 = sy.invert(y0); y1 = sy.invert(y1); [y0, y1] = [Math.min(y0, y1), Math.max(y0, y1)]; return { x0, x1, y0, y1, cx, cy, brush_size }; } }35:T11dc,class PredicateView { constructor(controller) { console.log("new PredicateView"); this.data = data; // this.model = model; this.controller = controller; // this.config = config; this.extent = Object.fromEntries( Object.keys(data[0]).map((attr) => { let ex = d3.extent( data.filter((d) => d[attr] !== null), (d) => d[attr] ); ex[0] = Number(ex[0]); ex[1] = Number(ex[1]); return [attr, ex]; }) ); this.node = this.init_node(); return this; } init_node() { // let { // width, // scatter_width, // scatter_height, // font_size, // scatter_padding, // gap // } = this.config; let gap = 10; let font_size = 16; this.plot_width = width * (1 - scatter_width * 2) - gap; //width of predicate view this.plot_height = width * scatter_height + 2.6 * font_size; // "+ 2.6 * fs" makes sure the scatter plot is squared // let padding_left = 1 + scatter_padding; // let padding_right = 1 + scatter_padding; let scatter_padding = 0.1; this.padding_bottom = scatter_padding; this.padding_top = font_size * 1.6 + scatter_padding; let return_node = d3 .create("div") .style("width", `${this.plot_width}px`) .style("height", `${this.plot_height}px`) .style("position", "relative") .node(); let frame = create_svg(this.plot_width, this.plot_height).style( "overflow", "visible" ); frame .append("g") .call( make_bridge_frame, 0, 0, this.plot_width, this.plot_height, "Predicate View", font_size, true ); return_node.appendChild(frame.node()); this.svg = create_svg(this.plot_width, this.plot_height); //predicate view this.view_g = this.svg.append("g"); let ob = overflow_box([this.svg.node()], width * scatter_height); d3.select(ob) .style("position", "absolute") .style("top", `${this.padding_top}px`) .style("left", "0"); return_node.appendChild(ob); return return_node; } draw(predicates) { // 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_ as a series of intervals console.log(predicates); let n_boxes = predicates.length; //grab all numeric attributes from predicates let attributes = Object.keys(predicates[0]).filter( (attr) => typeof data[0][attr] === "number" ); console.log("attributesattributes", attributes); //resize height of the overflowed svg let subplot_height = n_boxes > 2 ? predicate_view_subplot_height * 4.1 : predicate_view_subplot_height * 1.2; let svg_height = subplot_height * (attributes !== undefined ? attributes.length + 2 : 1000); this.svg.attr("height", svg_height + 300); if (this.data[0].image_url) { svg_height += 300; } //limit the number of attributes plot in both predicate view and splom if (attributes !== undefined) { let max_n_predicates = Infinity; attributes = attributes.slice(0, max_n_predicates); } //draw if (predicates !== undefined) { let predicate_view_style = { padding_top: this.padding_top, padding_bottom: this.padding_bottom, width: this.plot_width, height: this.plot_height, font_size: predicate_view_fontsize, // subplot_height: predicate_view_subplot_height, x_shift: this.plot_width }; //assign predicate_view different draw functions depending on brush number if (n_boxes == 1) { this.view_g.call( predicate_single, this.controller, this.extent, predicate_view_style ); } else if (n_boxes == 2) { this.view_g.call( predicate_contrastive, this.controller, this.extent, predicate_view_style ); } else { this.view_g.call( predicate_multiple, this.controller, this.extent, predicate_view_style ); } this.view_g.draw(predicates, attributes); } } }36:T25f6,class SplomView { constructor(controller) { /* - 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 */ console.log("new SplomView"); this.data = data; // this.model = model; // this.config = config; this.node = this.init_node(); this.splom_attributes = manual_splom_attributes; } init_node() { let gap = 10; let font_size = 16; let margin_inner = 0.1; let margin_outer = 0.1; this.splom_spacing = 4; //gap between subplots in splot, measured in proportion (0 to 1) to the size of a subplot this.plot_width = width * scatter_width - gap; //width of main scatter plot and SPLOM this.plot_height = width * scatter_height + 2.6 * font_size; // controls padding in svg for the frames //controls 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. this.padding_left = this.splom_spacing; this.padding_right = this.splom_spacing; this.padding_bottom = this.splom_spacing; this.padding_top = this.splom_spacing; let container_div = d3 .create("div") .style("height", `${this.plot_height}px`) .style("position", "relative"); let frame_svg = create_svg(this.plot_width, this.plot_height); frame_svg.style("overflow", "visible"); frame_svg.call( make_frame, 0, 0, this.plot_width, this.plot_height, "SPLOM View", font_size, true ); container_div.node().appendChild(frame_svg.node()); this.splom = container_div .append("div") .style("position", "absolute") .style("top", `${2.3 * font_size}px`); return container_div.node(); } recolor(mode = "selection") { let style = get_point_style(mode); let sc = (d, i) => style(d, i).fill; let sc_gl = (d, i) => { let c = sc(d, i); return [...color2gl(c), 1.0]; }; let depth = depth_func(mode); let new_colors = this.data.map((d, i) => sc_gl(d, i)); // array of RGBA tuples let new_depths = this.data.map((d, i) => depth(d, i)); this.splom_obj.recolor(new_colors, { depths: new_depths }); } redraw_kde(mode = "selection") { let style = get_point_style(mode); let sc = (d, i) => style(d, i).fill; let n_brushes = this.data[0].brushed.length; let kde_filters, kde_strokes; if (mode === "selection") { kde_filters = [(d) => d.selected, (d) => !d.selected]; kde_strokes = [sc({ selected: true }), sc({ selected: false })]; } else if (mode === "contrastive") { kde_filters = [ (d) => !d.first_brush && !d.second_brush, (d) => d.first_brush, (d) => d.second_brush ]; kde_strokes = [ sc({ first_brush: false, second_brush: false }), sc({ first_brush: true, second_brush: false }), sc({ first_brush: false, second_brush: true }) ]; } else if (mode === "confusion") { kde_filters = [ (d) => d.pred && d.selected, //true pos (d) => !d.pred && !d.selected, // true neg (d) => !d.pred && d.selected, // false neg (d) => d.pred && !d.selected // false posk ]; kde_strokes = [ sc({ pred: true, selected: true }), sc({ pred: false, selected: false }), sc({ pred: false, selected: true }), sc({ pred: true, selected: false }) ]; } else if (mode === "brush") { kde_filters = d3.range(n_brushes).map((i) => (d) => d.brushed[i]); kde_strokes = d3.range(n_brushes).map((i) => { return sc({ median_brush: i, brushed: d3.range(n_brushes) }); }); kde_filters = subsample(kde_filters, 6); kde_strokes = subsample(kde_strokes, 6); } this.splom_obj.redraw_kde(kde_filters, kde_strokes); } draw(splom_attributes = [], predicates = []) { if (splom_attributes.length == 0) { splom_attributes = this.splom_attributes; } // let { n_boxes, predicates } = projection_view.value; let n_boxes = predicates.length; this.predicate_mode = "data extent"; //TODO FIXME later let color_mode; if (n_boxes == 1) { if (this.predicate_mode === "data extent") { color_mode = "selection"; } else if (this.predicate_mode === "predicate regression") { color_mode = "confusion"; } } else if (n_boxes == 2) { color_mode = "contrastive"; } else if (n_boxes > 2) { color_mode = "brush"; } let style = get_point_style(color_mode); this.sc = (d, i) => style(d, i).fill; //draw SPLOM if (this.splom_obj === undefined) { console.log("SPLOM redrawing..."); console.log("attributes", splom_attributes); this.splom.selectAll("*").remove(); this.splom_obj = splom_gl2(this.splom, this.data, { s: (d) => splom_mark_size, //size of circle marks stroke: "#eee", stroke_width: 0.1, depth: depth_func(color_mode), padding_left: this.padding_left, padding_right: this.padding_right, padding_bottom: this.padding_bottom, padding_top: this.padding_top, layout: "both", //'upper', 'lower', or 'both', width: this.plot_width, height: this.plot_width, // kde_filters: [(d) => d.selected, (d) => !d.selected], kde_filters: [(d) => true], kde_strokes: [C[0]], //stroke colors attrs: splom_attributes, // x_tickvalues: linspace(0, 1, 4), xticks: 3, yticks: 3, wspace: this.splom_spacing, hspace: this.splom_spacing, scales: { sc: this.sc }, label_fontsize: 8, dpi_scale: 1.0 }); if (color_mode === "confusion") { this.redraw_kde("selection"); } else { this.redraw_kde(color_mode); } } else { this.recolor(color_mode); if (color_mode === "confusion") { this.redraw_kde("selection"); } else { this.redraw_kde(color_mode); } } //draw a predicate arrow path on each subplot of SPLOM if (n_boxes > 1) { this.draw_predicate_arrows( this.splom_obj.subplots, predicates, splom_attributes ); } } hide_arrows() { if (this.splom_obj == undefined) { return; } let subplots = this.splom_obj.subplots; for (let i = 0; i < subplots.length; i++) { for (let j = 0; j < subplots[0].length; j++) { if (subplots[i][j] === undefined) continue; if (i == j) continue; subplots[i][j].overlay .selectAll("g.brush-path") .attr("display", "none"); } } } draw_predicate_arrows( subplots, predicates, splom_attributes // n_boxes = 1, // sample_brush_history // ) { let n_boxes = predicates.length; let data = this.data; //for each plot: for (let i = 0; i < subplots.length; i++) { for (let j = 0; j < subplots[0].length; j++) { if (subplots[i][j] === undefined) continue; if (i == j) 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 } = subplots[i][j].scales; let path_data; if (n_boxes == 2) { //show data mean, instead of predicate let first_cx = sx( d3.mean( data.filter((d) => d.first_brush), (d) => d[aj] ) ); let first_cy = sy( d3.mean( data.filter((d) => d.first_brush), (d) => d[ai] ) ); let second_cx = sx( d3.mean( data.filter((d) => d.second_brush), (d) => d[aj] ) ); let second_cy = sy( d3.mean( data.filter((d) => d.second_brush), (d) => d[ai] ) ); path_data = [ { cx: first_cx, cy: first_cy }, { cx: second_cx, cy: second_cy } ]; } else { // n_boxes>2 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 }; subplots[i][j].overlay .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(...) } } } } }37:T1a46,function predicate_single( g_container, controller, extent, { width = 100, height = 100, padding_top = 10, padding_left = 10, padding_right = 10, font_size = 10, subplot_height = 48 } = {} ) { 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, attributes // selected, // should_draw_images, ) { // predicates: one-element-array that contains an attr:interval pairs in an Object // splom_attributes: union of attributes in a sequence of brushes let n_attributes = attributes.length; let predicate = predicates[0]; let attribute_text_max_length = d3.max(attributes, (d) => d.length); //origin at interval min let interval_start_x = padding_left + 10; let interval_stop_x = width - interval_start_x; // font_size * 0.5 * (2 + attribute_text_max_length); let sx = d3 .scaleLinear() .domain([0, 1]) .range([interval_start_x, interval_stop_x]); let sy = d3 .scaleLinear() .domain([0, n_attributes]) .range([padding_top, padding_top + n_attributes * subplot_height]); let interval_data = attributes.map((a) => { return { attr: a, vmin: extent[a][0], vmax: extent[a][1], interval_min: predicate[a][0], interval_max: predicate[a][1] }; }); //background rect let intervals_g = g .selectAll(".bg-rect") .data(interval_data) .join("rect") .attr("class", "bg-rect") .attr("x", padding_left) .attr("y", (d, i) => sy(i) - 15) .attr("width", width - padding_left - padding_right) .attr("height", subplot_height - 5) //n_attributes * subplot_height + 10) .attr("rx", 4) .attr("fill", "#eee"); // draw the interval bars 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", "#1f78b4") .attr("stroke-width", 10); //WIP draw the interval controls let control_circle_radii = 0; //TODO let drag_min = d3.drag().on("drag", function (event, d) { let new_interval_min = sx.domain([d.vmin, d.vmax]).invert(event.x); d.interval_min = clip(new_interval_min, d.vmin, d.vmax); d3.select(this).attr("cx", sx.domain([d.vmin, d.vmax])(d.interval_min)); intervals_fg.attr("x1", (d) => sx.domain([d.vmin, d.vmax])(d.interval_min) ); crossfilter_dimensions[d.attr].filter( (value) => value >= d.interval_min && value <= d.interval_max ); data.forEach((d, i) => { d.selected = cf.isElementFiltered(i); d.brushed = d.selected; //TODO later }); controller.on_predicate_view_change(data); }); let controls_start_circles = g .selectAll("control-start") .data(interval_data) .join("circle") .attr("class", "control-start") .attr("cx", (d) => sx.domain([d.vmin, d.vmax])(d.interval_min)) .attr("cy", (d, i) => sy(i)) .attr("r", (d, i) => control_circle_radii) .attr("fill", "#fff") .attr("stroke-linecap", "round") .attr("stroke", "#1f78b4") .attr("stroke-width", 1) .style("cursor", "grab") .call(drag_min); let drag_max = d3.drag().on("drag", function (event, d) { console.log("[max dragged]"); let { dx, dy } = event; let new_interval_max = sx.domain([d.vmin, d.vmax]).invert(event.x); d.interval_max = clip(new_interval_max, d.vmin, d.vmax); d3.select(this).attr("cx", sx.domain([d.vmin, d.vmax])(d.interval_max)); intervals_fg.attr("x2", (d) => sx.domain([d.vmin, d.vmax])(d.interval_max) ); crossfilter_dimensions[d.attr].filter( (value) => value >= d.interval_min && value <= d.interval_max ); data.forEach((d, i) => { d.selected = cf.isElementFiltered(i); d.brushed = d.selected; //TODO FIXME }); controller.on_predicate_view_change(data); }); let controls_end_circles = g .selectAll("control-end") .data(interval_data) .join("circle") .attr("class", "control-end") .attr("cx", (d) => sx.domain([d.vmin, d.vmax])(d.interval_max)) .attr("cy", (d, i) => sy(i)) .attr("r", (d, i) => control_circle_radii) .attr("fill", "orange") .attr("stroke-linecap", "round") .attr("stroke", "#1f78b4") .attr("stroke-width", 1) .style("cursor", "grab") .call(drag_max); intervals_fg.call( d3.drag().on("drag", (event, d) => { console.log("interval dragged", event, d); drag_min.on("drag")(); drag_max.on("drag")(); }) ); let labels = g .selectAll(".label") .data(attributes) .join("text") .attr("class", "label") .attr("x", (interval_start_x + interval_stop_x) / 2) .attr("y", (d, i) => sy(i) + font_size * 1.5) .attr("text-anchor", "middle") .attr("fill", "#888") // .attr("alignment-baseline", "central") .style("font-size", `${font_size}px`) .style("text-transform", "uppercase") .style("font-family", "sans-serif") .style("font-weight", 600) .style("font-style", "italic") .style("opacity", 0.7) .text((d) => d); }; 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; }38:T142f,function predicate_contrastive( g_container, controller, extent, { width = 100, height = 100, padding_top = 2, padding_left = 10, padding_right = 10, padding_bottom = 10, font_size = 12, subplot_height = 60 } = {} ) { 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, // should_draw_images, ) { 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, padding_top + n_attributes * subplot_height //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: subplot_height - 10, width: width - 6 * 2 }); }); let attribute_text_max_length = d3.max(splom_attributes, (d) => d.length); //origin at interval min // let interval_start_x = font_size * 10; //width/2.5; let interval_start_x = padding_left + 10; let interval_stop_x = width - interval_start_x; // font_size * 0.5 * (2 + attribute_text_max_length); //width/2.5; //draw label let labels = g .selectAll(".label") .data(splom_attributes) .join("text") .attr("class", "label") .attr("x", (interval_start_x + interval_stop_x) / 2) .attr("y", (d, i) => sy(i) + font_size * 2.5) .style("font-size", `${font_size}px`) .attr("text-anchor", "middle") // .attr("alignment-baseline", "central") .attr("fill", "#888") .style("font-size", `${font_size}px`) .style("text-transform", "uppercase") .style("font-family", "sans-serif") .style("font-weight", 600) .style("font-style", "italic") .style("opacity", 0.7) .text((d) => d); g.selectAll("g.predicate-view-contrastive") .data([0, 1]) .join("g") .attr("class", "predicate-view-contrastive") ._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 }); }); }; 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: a in predicate ? predicate[a][0] : extent[a][0], interval_max: a in predicate ? predicate[a][1] : extent[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); } 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; }39:T1e4d,function predicate_multiple( g_container, controller, extent, { width = 100, height = 100, padding_top = 2, padding_bottom = 2, x_shift = 10, font_size = 12 } = {} ) { // 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) { // 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 = 100; //take up the full space // subplot_height = (height - padding_top - padding_bottom + spacing) / attributes.length; // (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); }); }; 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) => d) //bottom .attr("x", width / 2) .attr("y", height + font_size) .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", `${font_size}px`) .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 } = {} ) { height = height || container.height; width = width || container.width; let interval_stroke_width = clip(width / (intervals.length + 2), 2, 6); let margin_left = interval_stroke_width; let margin_right = interval_stroke_width; let margin_top = interval_stroke_width; let margin_bottom = interval_stroke_width; let interval_data = intervals; let sx = d3 .scaleLinear() .domain([0, interval_data.length - 1]) .range([margin_left, width - margin_right]); let sy = d3 .scaleLinear() .domain(extent) .range([height - margin_bottom, margin_top]); 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 n_intervals = interval_data.length; 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) => sc(i / (n_intervals - 1))) .attr("stroke-linecap", "round"); // .attr("opacity", 0.7); } return g_container; }3a:T4fb,data = { let data; //dataset-specific preprocessing if (dataset_name.includes("gait1")) { // for GAIT (human poses on walking), we subsample the data points by skipping let skip = 6; data = skip_entries(dataset, skip); if (dataset_name == "gait1") { let embed = skip_entries(gait_embedding, skip); data.forEach((d, i) => { d.x = embed[i].x; d.y = embed[i].y; }); } } else if (dataset_name === "gait2") { data = dataset; data.forEach((d) => (d.condition = d.condition.toString())); data.forEach((d) => (d.subject = d.subject.toString())); } else if (dataset_name === "MOF") { data = dataset; data.forEach((d) => { d.synth = d.synth.toString(); d.family = d.family.toString(); }); } else if (dataset_name === "general") { data = dataset; // data.forEach((d) => { // d.poly_family = d.poly_family.toString(); // }); } else if (dataset_name === "polymorphs") { data = dataset; data.forEach((d) => { d.Family = d.Family.toString(); d.memberX = d.memberX.toString(); }); } else { data = dataset; } //attach unique id to data // data.forEach((d, i) => { // d.id = i; // d.brushed = true; // }); return data; }3b:T5dc,class DataExtentPredicate { //From brush data, produce predicates derived base on data extent only. //Front end only. No backend server constructor(data, attributes) { console.log("DataExtentPredicate init"); this.mode = "data extent"; this.data = data; this.attributes = attributes; this.cf = crossfilter(data); this.dimensions = Object.fromEntries( attributes.map((a) => { return [a, this.cf.dimension((d) => d[a])]; }) ); this.dim_x = this.cf.dimension((d) => d.x); this.dim_y = this.cf.dimension((d) => d.y); } compute_predicates(brush_history) { return brush_history.map((b) => { let { x_extent, y_extent } = b; let [x0, x1] = x_extent; let [y0, y1] = y_extent; this.dim_x.filter([x0, x1]); this.dim_y.filter([y0, y1]); if (this.dim_x.top(1).length === 0) { let dummy_predicate = Object.fromEntries( this.attributes.map((k) => [k, [0, 1e-4]]) ); return dummy_predicate; } else { let intervals = this.attributes.map((attr) => { let dim = this.dimensions[attr]; let inter = [dim.bottom(1)[0][attr], dim.top(1)[0][attr]]; if (inter[0] === null) { inter[0] = extent[attr][0]; } if (inter[1] === null) { inter[1] = extent[attr][1]; } return inter; }); return Object.fromEntries(zip(this.attributes, intervals)); } }); } }3c:T6a0,async function compute_predicates( full_brush_history, n_boxes, get_selected, { x, y } = {} ) { //filter and consider non-empty brushes only full_brush_history = full_brush_history.filter((brush_data) => { let selected = get_selected(data, brush_data, { x, y }); return d3.sum(selected) > 0; }); if (full_brush_history.length === 0) { return [{}]; } let predicates, qualities, attributes; let sample_brush_history = subsample(full_brush_history, n_boxes); if (predicate_mode == "data extent") { // let selected_data = data.filter((d, i) => selected[i]); predicates = sample_brush_history.map((brush_data) => { let selected = get_selected(data, brush_data, { x, y }); return data_extent_predicate(selected); }); attributes = manual_splom_attributes; } else { // "predicate regression" let response = await fetch_json(`${predicate_host}/get_predicates`, { //query server body: { subsets: sample_brush_history.map((brush_data) => { return get_selected(data, brush_data, { x, y }); }), dataset: dataset_name } }); qualities = response.qualities; //find union of predicate attributes in response.predicates 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); }); } return { predicates, qualities, attributes }; }3d:T633,function images_view_single_brush() { let n_cols = 8; let n_rows = 12; let border_width = 0; let padding = config.margin_outer; if (main_view.projection_view.value.sample_brush_history === undefined) return; // let selected = main_view.get_selected(data, main_view.sample_brush_history[main_view.predicate_view.time]) let selected = get_selected( data, main_view.projection_view.value.sample_brush_history[0], { x: main_view.projection_view.value.x, y: main_view.projection_view.value.y } ); let selected_images = data .filter((d, i) => selected[i]) .sort((a, b) => d3.ascending(a.x, b.x)); //subsample images // selected_images = _.shuffle(selected_images); selected_images = selected_images.slice(0, n_cols * n_rows); let image_size = (width - 2 * padding - border_width * 2 - 10) / n_cols; let images = selected_images.map((d) => { return d3 .create("img") .attr("width", image_size) //minus border width on both sides .style("max-width", `${image_size}px`) .style("max-height", `${image_size}px`) .style("object-fit", "contain") //keep original aspect ratio .style("border", "solid black 0.1px") .attr("src", d.image_url) .node(); }); let fb = flex_box(images); d3.select(fb) .style("margin-left", `${padding}px`) .style("margin-right", `${padding}px`); // .style("border", `solid ${border_width}px`); // .style("filter", "drop-shadow(0 0mm 1px rgb(48,48,48)"); // let frame = make_frame(d3.select(fb)); return overflow_box(fb, 400); }3e:Tbd8,function images_view_multibrush(n_cols) { let n_grid_x = n_cols == 2 ? 4 : 2; let n_grid_y = 3; let spacing = 2; let subview_border_width = 1; let image_border_width = 0; if (!(dataset_name.includes("animals") || dataset_name.includes("pigments"))) return; if (main_view.projection_view.sample_brush_history === undefined) return; let sample_brush = subsample( main_view.projection_view.sample_brush_history, n_cols ); let padding = config.margin_outer; let n_images_per_brush = n_grid_x * n_grid_y; let subview_width = Math.floor( (width - spacing * 2 * n_cols - subview_border_width * 2 * n_cols) / n_cols ); // let image_size = Math.min(width / n_cols, subview_width / n_grid_x); let image_size = Math.floor( subview_width / n_grid_x - image_border_width * 2 ); let selected = d3.range(n_cols).map((t) => { // let st = main_view.get_selected(data, sample_brush[t]); let st = get_selected(data, sample_brush[t], { x: main_view.projection_view.x, y: main_view.projection_view.y }); let d = data.filter((d, i) => st[i]); // .sort((a, b) => d3.ascending(a.x, b.x)) d = d.slice(0, n_images_per_brush); if (d.length < n_images_per_brush) { for (let i = d.length; i < n_images_per_brush; i++) { d.push({ image_url: "dummy" }); } } return d.slice(0, n_images_per_brush); }); let container_div = d3.create("div").node(); for (let selected_t of selected) { let selected_images = selected_t; if (selected_images.length > n_grid_x * n_grid_y) { // selected_images = _.shuffle(selected_images); selected_images = selected_images.slice(0, n_grid_x * n_grid_y); //limit to n_grid^2 images } let images = selected_images.map((d) => { return d3 .create("img") .attr("width", image_size) .style("max-width", `${image_size}px`) .style("max-height", `${image_size}px`) .style("border", `solid ${image_border_width}px`) .attr("src", d.image_url !== "dummy" ? d.image_url : "") .style("object-fit", "contain") //keep original aspect ratio .node(); }); let fb = flex_box(images, subview_width); d3.select(fb) .style("float", "left") .style("margin-left", `${spacing}px`) .style("margin-right", `${spacing}px`) .style("border", `solid ${subview_border_width}px`); // .style("filter", "drop-shadow(0 0mm 3px rgb(48,48,48)"); //drop shadow container_div.appendChild(fb); } d3.select(container_div); // .style('background', `white`) // .style('margin-left', `${padding}px`) // .style('margin-right', `${padding}px`) // .style('border', `solid ${border_width}px`) // .style('filter', "drop-shadow(0 0mm 3px rgb(48,48,48)") return container_div; } // d3.select(fb).style('height', '500px') //TODO overflow scroll //TODO, optional: better ordering to preserve consistency between updates //e.g., append new selection to the end, remove unselected using animation3f:Tb1b,function get_point_style(mode = "confusion") { let style; if (mode === "confusion") { //set style - color by confusion (tp, tn, fp, fn) style = (d, i) => { if (d.pred && d.selected) { return {fill: "#742B70", stroke: "#eee"}; //tp = true positive } else if (!d.pred && !d.selected) { return {fill: "#CCCCCC", stroke: "#eee"}; //tn } else if (!d.pred && d.selected) { return {fill: "#310BC8", stroke: "#eee"}; //fn } else { return {fill: "#A73D2F", stroke: "#eee"}; //fp } }; } else if (mode === "selection") { //color by selected vs. unselected style = (d, i) => d.selected ? {fill: d3.schemeCategory10[0], stroke: "#eee"} : {fill: "#aaa", stroke: "#eee"}; } else if (mode === "contrastive") { //color by first/second brush style = (d, i) => d.first_brush ? {fill: d3.schemeCategory10[0], stroke: "#eee"} : d.second_brush ? {fill: d3.schemeCategory10[1], stroke: "#eee"} : {fill: "#aaa", stroke: "#eee"}; } else if (mode === "brush") { //color by brush indices style = (d, i) => { if (d.last_brush === -1) { return {fill: "#aaa", stroke: "#eee"}; } else { return { fill: d3.interpolateViridis( d.median_brush / (d.brushed.length - 1), ), stroke: "#eee", }; } }; } return style; } // function get_point_style(mode = "confusion") { // let style; // if (mode === "confusion") { // //set style - color by confusion (tp, tn, fp, fn) // style = (d, i) => // d.pred && d.selected //tp = true positive // ? { fill: d3.rgb(116, 43, 122), stroke: "#eee" } // : !d.pred && !d.selected //tn // ? { fill: d3.rgb(204, 204, 204), stroke: "#eee" } // : !d.pred && d.selected //fn // ? { fill: d3.rgb(49, 111, 200), stroke: "#eee" } // : //fp // { fill: d3.rgb(167, 61, 47), stroke: "#eee" }; // } else if (mode === "selection") { // //color by selected vs. unselected // style = (d, i) => // d.brushed // ? { fill: d3.schemeCategory10[0], stroke: "#eee" } // : { fill: "#aaa", stroke: "#eee" }; // } else if (mode === "contrastive") { // style = (d, i) => // d.first_brush // ? { fill: d3.schemeCategory10[0], stroke: "#eeeeee" } // : d.second_brush // ? { fill: d3.schemeCategory10[1], stroke: "#eeeeee" } // : { fill: "#aaaaaa", stroke: "#eeeeee" }; // } // return style; // }40:T60b,// function set_selected_2(data, sample_brush_history, x, y) { // if (sample_brush_history.length < 2) return; // data.forEach((d) => { // d.selected = false; // d.first_brush = false; // d.second_brush = false; // let x0, x1, y0, y1; // [[x0, x1], [y0, y1]] = [ // sample_brush_history[0].x_extent, // sample_brush_history[0].y_extent // ]; // d.first_brush = x0 < x(d) && x(d) < x1 && y0 < y(d) && y(d) < y1; // [[x0, x1], [y0, y1]] = [ // sample_brush_history[1].x_extent, // sample_brush_history[1].y_extent // ]; // d.second_brush = x0 < x(d) && x(d) < x1 && y0 < y(d) && y(d) < y1; // d.selected = d.first_brush || d.second_brush; // }); // } function set_selected_2( data, sample_brush_history, cf, crossfilter_dimensions ) { //update first_brush and second_brush based on two brushed regions in sample_brush_history console.assert(sample_brush_history.length == 2); crossfilter_dimensions["x"].filter(sample_brush_history[0].x_extent); crossfilter_dimensions["y"].filter(sample_brush_history[0].y_extent); data.forEach((d, i) => { let is_within_extent = cf.isElementFiltered(i); d.first_brush = is_within_extent; }); crossfilter_dimensions["x"].filter(sample_brush_history[1].x_extent); crossfilter_dimensions["y"].filter(sample_brush_history[1].y_extent); data.forEach((d, i) => { let is_within_extent = cf.isElementFiltered(i); d.second_brush = is_within_extent; d.selected = d.first_brush || d.second_brush; }); }41:T590,sc = { // cmap = d3.scaleOrdinal().range(d3.schemeCategory10); if (color_attr === "none") { // return d3.hcl(0, 0, 30); return (d) => d3.schemeCategory10[0]; } // else if (color_attr === "subject") { // //categorical attributes // let colors = d3.schemeSet2; // return (d) => [colors[1], colors[2]][d[color_attr] - 1]; // } // else if (color_attr === "condition") { // //categorical attributes // let colors = d3.schemeSet2; // return (d) => [colors[1], colors[2], colors[5]][d[color_attr] - 1]; // } else if (color_attr === "color") { return (d) => d.color; } else { // automatic color scale based on data type if (typeof data[0][color_attr] === "number") { //numerical attribute, continuous colorscale let cmap = d3.interpolateViridis; let sc; if (color_scale === "linear") { sc = d3.scaleLinear(); } else if (color_scale === "log") { sc = d3.scaleLog(); } sc.domain(extent[color_attr]); let return_function = (d) => cmap(sc(d[color_attr])); return_function.sc = sc; return return_function; } else if (typeof data[0][color_attr] === "string") { //categorical attribute, discrete colorscale let cmap = d3 .scaleOrdinal() .domain(color_domain) .range(d3.schemeCategory10); let sc = (d) => cmap(d[color_attr]); return sc; } } }42:T420,// 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(attributes.map((d) => [d, d])); } }43:Tc0d,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{ 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; }44:T9e7,function draw_predicates( splom_subplots, overlays, predicates, splom_attributes, n_boxes = 2 // sample_brush_history ) { //for each plot: for (let i = 0; i < splom_subplots.length; i++) { for (let j = 0; j < splom_subplots[0].length; j++) { if (splom_subplots[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] }; } }); // draw_boxes(splo.plots[i][j], intervals); let { sx, sy } = splom_subplots[i][j].scales; let path_data; // if (n_boxes == 2) { // //show data mean, instead of predicate // let first_cx = sx( // d3.mean( // data.filter((d) => d.first_brush), // (d) => d[aj] // ) // ); // let first_cy = sy( // d3.mean( // data.filter((d) => d.first_brush), // (d) => d[ai] // ) // ); // let second_cx = sx( // d3.mean( // data.filter((d) => d.second_brush), // (d) => d[aj] // ) // ); // let second_cy = sy( // d3.mean( // data.filter((d) => d.second_brush), // (d) => d[ai] // ) // ); // path_data = [ // { // cx: first_cx, // cy: first_cy // }, // { // cx: second_cx, // cy: second_cy // } // ]; // } else { // // n_boxes>2 path_data = predicates.map((d) => ({ cx: sx(d3.mean(d[aj])), cy: sy(d3.mean(d[ai])) })); console.log("path_data", path_data); // } let path_style = { size: 0, "stroke-width": 2 }; overlays[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(...) } } }45:T6a7,function draw_boxes(sca, intervals, { stroke_width = 2 } = {}) { let { sx, sy } = sca.scales; let n = intervals.length; let sc = d3.interpolateViridis; sca.overlay.selectAll(".bbox").remove(); sca.overlay .selectAll(".bbox") .data(intervals) .join("rect") .attr("class", "bbox") .attr("x", (d) => sx(d.x0)) .attr("y", (d) => sy(d.y1)) .attr("width", (d) => Math.abs(sx(d.x0) - sx(d.x1))) .attr("height", (d) => Math.abs(sy(d.y0) - sy(d.y1))) .attr("fill", "none") .attr("stroke", (d, i) => { //the darker the more recent, and less dark boxes return sc(Math.pow(i / n, 0.3)); }) .attr("stroke-width", stroke_width); // .attr('fill-opacity', (d,i)=> i==n-1 ? 0.1 : 0.0) } // function draw_boxes(sca, intervals, {stroke_width=2}={}) { // let { sx, sy } = sca.scales; // let n = intervals.length; // let sc = d3.interpolateViridis; // // let sc = d3.interpolateCividis; // // let sc = d3.interpolateBlues; // sca // .selectAll(".bbox").remove(); // sca // .selectAll(".bbox") // .data(intervals) // .join("rect") // .attr("class", "bbox") // .attr("x", (d) => sx(d.x0)) // .attr("y", (d) => sy(d.y1)) // .attr("width", (d) => Math.abs(sx(d.x0) - sx(d.x1))) // .attr("height", (d) => Math.abs(sy(d.y0) - sy(d.y1))) // .attr("fill", "none") // // .attr('fill-opacity', (d,i)=> i==n-1 ? 0.1 : 0.0) // .attr("stroke", (d, i) => { // return sc(Math.pow(i/n, 0.3)); // }) //the darker the more recent, and less dark boxes // .attr('stroke-width', stroke_width) // // .attr("stroke-width", (d, i) => { // // return 0.3 + (1.2 * i) / n; // // }); // }46:[{"id":"b60f02c1e02092fc50b7c21446a7457b3c8f1a564d7583cad800bfa78d3ba1536003fa7a38eaf6ab76e167a1598200de120d378ef0f8dcc641276dc3a142c48a","href":"https://static.observableusercontent.com/files/b60f02c1e02092fc50b7c21446a7457b3c8f1a564d7583cad800bfa78d3ba1536003fa7a38eaf6ab76e167a1598200de120d378ef0f8dcc641276dc3a142c48a","name":"general.csv","type":"text/csv","lastModified":1736797387003.998,"size":6417313},{"id":"0b3521f2fe3c255948bfe5f4829b93f5a10ff6e43293c9d9ae2bdf732dcc55157a8bf50cdfb00852cbd54b6e1ad02fbb548046ea4c518e5091276367d3a970d2","href":"https://static.observableusercontent.com/files/0b3521f2fe3c255948bfe5f4829b93f5a10ff6e43293c9d9ae2bdf732dcc55157a8bf50cdfb00852cbd54b6e1ad02fbb548046ea4c518e5091276367d3a970d2","name":"polymorphs@2.csv","type":"text/csv","lastModified":1736797387003.998,"size":687816},{"id":"681dda510e31b4afa70077b3eac6687d51080f5693784473df9d0a886b54d9945ccbe759c82482583d285532f3eeec62a73f5f63750c123494058e23327dfab4","href":"https://static.observableusercontent.com/files/681dda510e31b4afa70077b3eac6687d51080f5693784473df9d0a886b54d9945ccbe759c82482583d285532f3eeec62a73f5f63750c123494058e23327dfab4","name":"animals5.csv","type":"text/csv","lastModified":1736797387003.998,"size":747475},{"id":"0f44b5b5dbe91c7bf5329affcde033925e66a0b3bac24315d101cc0577a78c19fd01217d493c93d41a8c9051ad829ce09d7f4d39add6f6e5ad5a1a17b2a433a0","href":"https://static.observableusercontent.com/files/0f44b5b5dbe91c7bf5329affcde033925e66a0b3bac24315d101cc0577a78c19fd01217d493c93d41a8c9051ad829ce09d7f4d39add6f6e5ad5a1a17b2a433a0","name":"gait2 (3).csv","type":"text/csv","lastModified":1736797387003.998,"size":800426},{"id":"e84ac8a5d275d4a67075f8d2b29a4478126b336e00fc98b8f823465891360a57ee0162b680264e181882647562cd769c65277c0a062efae43cfa0bd6b8e4245f","href":"https://static.observableusercontent.com/files/e84ac8a5d275d4a67075f8d2b29a4478126b336e00fc98b8f823465891360a57ee0162b680264e181882647562cd769c65277c0a062efae43cfa0bd6b8e4245f","name":"embedding@1.csv","type":"text/csv","lastModified":1736797387003.998,"size":1121542}] 2e:{"id":"f738f7e39a6abb2d","slug":"data_driven_insights_fun_mof_free_energy","title":"data_driven_insights_fun_mof_free_energy","thumbnail":"7fb49a38c48e42b1b13fa1c452de1f50f486c102e4735c0cc13c12f7da160548","access_level":"unlisted","create_time":"$D2025-01-13T19:43:07.003Z","update_time":"$D2025-07-18T20:24:28.504Z","view_time":null,"first_public_time":"$D2025-01-13T19:43:07.003Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"7775d06948a95c4e","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":"starter_2024"},"version":10893,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"915574b67e472374","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":null}],"members":[{"type":"individual","id":"915574b67e472374","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"data_driven_insights_fun_mof_free_energy","cells":[{"id":0,"value":"# data_driven_insights_fun_mof_free_energy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8191,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6805,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"viewof dataset_name = Inputs.select(\n Object.keys(datasets),\n // [\n // \"animals5_local\",\n // \"gait2\",\n // //remote only\n // \"pigments\",\n // \"animals5\"\n // // \"meuse\",\n // // \"1000_hs_healthy_with_tsne\",\n // // \"1000_hs_healthy_with_tsne_perplexity_adjust\",\n // // \"MOF\"\n // ],\n { label: \"Dataset\", value: \"pigments\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7215,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3082,"value":"predicate_mode = \"data extent\"\n\n// viewof predicate_mode = Inputs.select([\"predicate regression\", \"data extent\"], {\n// label: \"Predicate mode\",\n// value: \"data extent\"\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4522,"value":"viewof brush_mode = Inputs.select(\n predicate_mode == \"predicate regression\"\n ? [\"single\", \"lasso(TODO)\", \"contrastive\", \"curve\"]\n : [\"single\", \"contrastive\", \"curve\"],\n {\n label: \"Brush mode\",\n value: \"contrastive\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7251,"value":"// viewof color_attr = Inputs.radio(\n// [\"none\", ...attributes.filter((a) => !excluded_columns.includes(a))],\n// {\n// label: \"Color by\",\n// value: \"none\"\n// }\n// )\n\nviewof color_attr = Inputs.select(\n [\"none\", ...attributes.filter((a) => !excluded_columns.includes(a))],\n {\n label: \"Color by\",\n value: \"none\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6991,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5657,"value":"viewof main_view = {\n let controller = new InteractionController();\n let projection_view = new ProjectionView(controller);\n let predicate_view = new PredicateView(controller);\n let splom_view = new SplomView(projection_view, controller);\n // let controller manage between-view interactions\n controller.add_views(projection_view, predicate_view, splom_view);\n\n //add margins between view components\n d3.select(projection_view.node).style(\"margin-right\", `${config.gap}px`);\n d3.select(predicate_view.node).style(\"margin-right\", `${config.gap}px`);\n //return main view\n let return_node = flexbox(\n [projection_view.node, predicate_view.node, splom_view.node],\n width\n );\n set_value(return_node, { projection_view, predicate_view, splom_view });\n return return_node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7367,"value":"{\n if (data[0].image_url === undefined) {\n should_update_table;\n return Inputs.table(\n data.filter((d) => d.brushed[0]),\n {\n rows: 10,\n columns: attributes.filter((a) => !excluded_columns.includes(a))\n }\n );\n }\n\n if (main_view.projection_view.value.n_boxes === undefined) {\n return \"no selection\";\n }\n\n if (main_view.projection_view.value.n_boxes == 1) {\n return images_view_single_brush();\n }\n if (main_view.projection_view.value.n_boxes == 2) {\n return images_view_multibrush(2);\n } else {\n return images_view_multibrush(6);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10737,"value":"---\n## Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10702,"value":"mutable should_update_table = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9175,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9020,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10147,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10107,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9850,"value":"---\n## predicate view drawing functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10157,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10165,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10159,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9050,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7628,"value":"---\n### Servers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7599,"value":"dataset_host = \"http://127.0.0.1:9001\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"predicate_host = \"http://127.0.0.1:9001\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6418,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":627,"value":"dataset = await datasets[dataset_name]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"attributes = Object.keys(data[0]).filter((a) => !excluded_columns.includes(a))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7285,"value":"//excluded_columns for color\nexcluded_columns = [\n \"x\",\n \"y\",\n \"image_filename\",\n \"image_url\",\n \"id\",\n \"brushed\",\n \"selected\",\n \"pred\",\n \"first_brush\",\n \"second_brush\",\n \"last_brush\",\n \"brush_indices\",\n \"median_brush\",\n \"brush_depth\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7043,"value":"color_domain = {\n if (typeof data[0][color_attr] === \"string\") {\n let limit = 50;\n return Array.from(new Set(data.map((d) => d[color_attr])))\n .sort()\n .slice(0, limit);\n } else {\n return [];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2541,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8348,"value":"viewof splom_mark_size = Inputs.range([0, 10], {\n label: \"splom_mark_size\",\n step: 0.001,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"viewof scatter_attr_x = Inputs.select(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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"viewof scatter_attr_y = Inputs.select(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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4173,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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\n scatter_padding: Inputs.range([1, 50], {\n label: \"scatter_padding\",\n step: 1,\n value: 2\n }),\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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3907,"value":"viewof predicate_view_fontsize = Inputs.range([0, 16], {\n label: \"predicate_fontsize\",\n step: 0.5,\n value: 14\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3912,"value":"viewof predicate_view_subplot_height = Inputs.range([10, 100], {\n label: \"predicate_subplot_height\",\n step: 1,\n value: 30\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4103,"value":"---\n## Predicate Engine","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9578,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9588,"value":"class PredicateRegression {\n constructor() {}\n async compute_predicates(sample_brush_history, { x, y } = {}) {\n // \"predicate regression\"\n let response = await fetch_json(`${predicate_host}/get_predicates`, {\n //query server\n body: {\n subsets: sample_brush_history.map((brush_data) => {\n return get_selected(data, brush_data, { x, y });\n }),\n dataset: dataset_name\n }\n });\n let qualities = response.qualities;\n\n //find union of predicate attributes in response.predicates\n let attributes = d3\n .groups(response.predicates.flat(), (d) => d.attribute)\n .map((d) => d[0]);\n\n //set predicates to be an array of {attr_name:interval} dictionaries indexed by brush time\n let predicates = response.predicates.map((predicate_t) => {\n let key_value_pairs = predicate_t.map((p) => [p.attribute, p.interval]);\n return Object.fromEntries(key_value_pairs);\n });\n return { predicates, qualities, attributes };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3354,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8834,"value":"---\n### Crossfilter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8737,"value":"//define new crossfilter object\ncf = crossfilter(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8745,"value":"crossfilter_dimensions = {\n //given global attributes and cf (crossfilter);\n let cf_dimensions = attributes.map((attr) => cf.dimension((d) => d[attr]));\n //return an object with keys being attributes,\n //and values beinging the corresponding crossfilter dimension objects\n return Object.fromEntries(zip(attributes, cf_dimensions));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10007,"value":"function update_point_style_gl(sca_gl, mode = \"confusion\") {\n let style = get_point_style(mode);\n let sc = (d, i) => style(d, i).fill;\n let depth = depth_func(mode);\n sca_gl.recolor(sc, { depth });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6459,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6508,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5514,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5506,"value":"function update_splom_point_style(splo, mode = \"confusion\") {\n let n_attrs = splo.plots.length;\n\n let style = get_point_style(mode);\n //raise the brushed points in SPLON\n for (let i = 0; i < n_attrs; i++) {\n for (let j = 0; j < n_attrs; j++) {\n if (splo.plots[i][j] !== undefined) {\n splo.plots[i][j].update_style(style);\n splo.plots[i][j]\n .selectAll(\".point\")\n .filter((d) => d.brushed)\n .raise();\n splo.plots[i][j]\n .selectAll(\".point\")\n .filter((d) => d.pred == 1 && d.selected) // true positives\n .raise();\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 let { x_extent, y_extent } = brush_data;\n let [x0, x1] = x_extent;\n let [y0, y1] = y_extent;\n return data.map((d) => x0 < x(d) && x(d) < x1 && y0 < y(d) && y(d) < y1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5297,"value":"function clear_selected(data) {\n //reset all brush-related attributes\n data.forEach((d) => {\n d.selected = false;\n d.brushed = [];\n d.first_brush = false;\n d.second_brush = false;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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// crossfilter_dimensions[\"x\"].filter((v) => v >= x0 && v <= x1);\n// crossfilter_dimensions[\"y\"].filter((v) => v >= y0 && v <= y1);\n// data.forEach((d, i) => {\n// // let is_within_extent = x0 < x(d) && x(d) < x1 && y0 < y(d) && y(d) < y1;\n// let is_within_extent = cf.isElementFiltered(i);\n// d.brushed = d.brushed || is_within_extent;\n// d.selected = is_within_extent;\n// });\n// }\n\nfunction set_selected(\n data,\n sample_brush_history,\n cf,\n crossfilter_dimensions,\n) {\n let last_brush = sample_brush_history[sample_brush_history.length - 1];\n crossfilter_dimensions[\"x\"].filter(last_brush.x_extent);\n crossfilter_dimensions[\"y\"].filter(last_brush.y_extent);\n data.forEach((d, j) => {\n d.selected = cf.isElementFiltered(j);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5299,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9983,"value":"function set_brushed(data, sample_brush_history, cf, crossfilter_dimensions) {\n data.forEach((d, j) => {\n d.last_brush = -1;\n d.brush_indices = [];\n });\n\n for (let [i, brush_hist] of zip(\n d3.range(sample_brush_history.length),\n sample_brush_history\n )) {\n crossfilter_dimensions[\"x\"].filter(brush_hist.x_extent);\n crossfilter_dimensions[\"y\"].filter(brush_hist.y_extent);\n data.forEach((d, j) => {\n let brushed = cf.isElementFiltered(j);\n d.brushed[i] = brushed;\n if (brushed) {\n d.brush_indices.push(i);\n d.last_brush = i;\n }\n });\n }\n\n data.forEach((d, j) => {\n if (d.brush_indices.length > 0) {\n d.median_brush = math.median(d.brush_indices);\n d.brush_depth = 0.9 * (1 - d.median_brush / d.brushed.length) + 0.05;\n } else {\n d.median_brush = 0;\n d.brush_depth = 0.999;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5454,"value":"function set_pred(data, predicate, all_attributes, cf, crossfilter_dimensions) {\n let cd = crossfilter_dimensions;\n for (let attr of all_attributes) {\n if (attr in predicate) {\n cd[attr].filter([predicate[attr][0], predicate[attr][1] + 1e-4]);\n } else {\n cd[attr].filterAll();\n }\n }\n data.forEach((d, i) => {\n d.pred = cf.isElementFiltered(i);\n });\n}\n\n// 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","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) // || d.first_brush || d.second_brush\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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3463,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10184,"value":"function same_set(xs, ys) {\n return xs.size === ys.size && [...xs].every((x) => ys.has(x));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5624,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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.filter((d, i) => selected[i]);\n if (selected_data.length == 0) {\n return {};\n } else {\n // let attr_interval_pairs = Object.keys(selected_data[0]).map(\n let attr_interval_pairs = 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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1615,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"// //testing image host\nhtml`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"---\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9143,"value":"function clip(value, vmin, vmax) {\n return Math.min(Math.max(vmin, value), vmax);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9964,"value":"function depth_func(mode) {\n // 0 - near\n // 1 - far\n // d.brushed || d.first_brush || d.second_brush || d.pred || d.selected\n if (mode == \"selection\") {\n return (d, i) => (d.selected ? 0 : 0.9);\n } else if (mode == \"brush\") {\n return (d, i) => {\n return d.brush_depth;\n };\n } else if (mode == \"contrastive\") {\n return (d, i) => (d.first_brush ? 0.7 : d.second_brush ? 0 : 0.9);\n } else if (mode == \"confusion\") {\n return (d, i) => {\n if (d.pred && d.selected) {\n return 0.3;\n } else if (d.pred && !d.selected) {\n return 0.2;\n } else if (!d.pred && d.selected) {\n return 0.1;\n } else if (!d.pred && !d.selected) {\n return 0.5;\n }\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4999,"value":"---\n## Attribute Histograms","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":786,"value":"viewof attr_index = Inputs.range([0, Object.keys(data[0]).length-1], {label: \"histogram attr\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5609,"value":"Object.keys(data[0])[attr_index]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"Plot.plot({\n height: 200,\n marks: [\n // Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"leg1.joint1.angle\"})),\n Plot.rectY(data, Plot.binX({y: \"count\"}, {x: Object.keys(data[0])[attr_index]})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1131,"value":"extent = Object.fromEntries(\n Object.keys(data[0]).map((attr) => [\n attr,\n d3.extent(\n data.filter((d) => d[attr] !== null),\n (d) => d[attr]\n )\n ])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2199,"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 first = array[0];\n // let last = array[n-1];\n // let m = limit - 1;\n // let step = n/m;\n // let indices = d3.range(0, n, step).map(x=>Math.round(x)).slice(1,);\n // let middle = indices.map(i=>array[i]);\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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7951,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7941,"value":"## Notes\n- The predicate backend:\nhttps://github.com/tiga1231/dim-bridge\n\n- To see images and use the predicate server, one needs to either run the predicate backend on port 9001 locally, or run it remotely and forward port 9001 via SSH. E.g., \n - `ssh -L 9001:localhost:9001 username@remotemachine`\n \n- Demo Datasets (WIP): \n - Animal faces\n - motion capture (GAIT)\n - [TODO] word embedding data\n - ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5930,"value":"## Changes from the [original notebook](https://observablehq.com/d/bc84ced61d90006e) \n- Split the main view into three components\n- Renamed \"logistic regression\" => \"soft bounding box\"\n- [DONE] WebGL backend for scatter plot matrix (`splom_view`)\n \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5731,"value":"---\n## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"import {\n color2gl,\n colorbar_horizontal,\n crossfilter,\n zip,\n numpy,\n _,\n // canvas_overlay,\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 create_canvas,\n frame,\n regl2,\n overlay,\n scatter_gl,\n // splom_gl,\n splom_gl2,\n C,\n legend,\n colorbar,\n math\n} from \"@tiga1231/lib\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6273,"value":"// numpy.get_array(\"http://127.0.0.1:9001/static/a.npy\")\n// (await fetch(`${predicate_host}/get_dummy`)).text()\n// numpy.get(`${predicate_host}/get_dummy`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7971,"value":"## Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5724,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 2f:"$2e:body"