2c:null 2d:["$","title",null,{"children":"Eurovis-2022: Bias 1 | Sangwon Jeong | Observable"}] 32:T3258,main = { // Parent Container let svg = d3.create('svg') .attr('viewBox', svg_viewbox) // ===================================================== Group 1 Redux -- Reduced 2-dimensional coordinates let reduxplot = svg.append('g') .classed('reduxplot', true) .attr('transform', `translate(0, 0)`) .attr('width', redux_width) .attr('height', redux_height) // Draw Circles let redux_dots = reduxplot.selectAll('circle') .data(data_current_direction_redux) // Ploting all walk * attributes (large) .enter() .append('circle') .classed('reduxdot', true) .classed('highlighted', false) .classed('brushed', false) .classed('chosen', false) .attr('cx', d => redux_x(d.redux_0)) .attr('cy', d => redux_y(d.redux_1)) .attr('r', circle_radii.large_normal) .attr('fill-opacity', 0.3) .attr('stroke', color_fills.redux_normal) .attr('stroke-width', strokes.redux_normal) .style('fill', color_fills.redux_normal) .raise() // Events redux_dots .on('mouseover', redux_mouseover_evt) .on('mouseout', redux_mouseout_evt) .on('click', redux_mouseclick_evt) // Plot title reduxplot.append('text') .attr("text-anchor", "end") .attr('alignment-baseline', 'ideographic') .attr('x', redux_width) .attr('y', redux_margin.top) .attr('font-size', '1vw') .attr('font-weight', 'bold') .text('UMap Projection') // No axis, just boundary reduxplot.append('rect') .attr('x', redux_margin.left) .attr('y', redux_margin.top) .attr('width', redux_width - redux_margin.right) .attr('height', redux_height - redux_margin.bottom) .attr('stroke', d3.hcl(0, 0, 50)) .attr('stroke-width', 2.0) .attr('fill', 'none') .lower() // Reduxplot Brush var brush_reduxplot = d3.brush() .extent([[redux_margin.left, redux_margin.top], [redux_width, redux_height]]) // Attach brush to DOM let brush_reduxplot_g = svg.append("g") .attr("class", "brush") .call(brush_reduxplot) .lower() // Brush events brush_reduxplot.on("brush start", ({selection}) => { brushed_redux(svg, selection, redux_dots) }) .on("start.nokey", function() { unbrushed_redux() // Remove other brush if (mutable regression_plot_brushed == "true" && mutable attribute_view_clicked == "true") { } else { brush_scatterplot_g.call(d3.brush().clear) } d3.select(window).on("keydown.brush keyup.brush", null) brush_reduxplot.extent([[0, 0], [0, 0]]) reset_all_brush_selection() }) // ===================================================================== Group 2 Scatterplot minor -- Slope and R^2 let scatterplot_minor = svg.append('g') .classed('scatterplot', true) .attr('transform', `translate(0, ${redux_height})`) .attr('width', scatm_width) .attr('height', scatm_height) // Draw circles let dots = scatterplot_minor .selectAll() .data(data_current_direction) .enter() .append('circle') .classed('scatter_dot', true) .classed('brushed', false) .classed('highlighted', false) .classed('chosen', false) .attr('cx', d => scatm_x(Math.abs(d.slope))) .attr('cy', d => scatm_y(d.r2)) .attr('r', d => scatterdot_size_scale(d.slope)) //.attr('fill-opacity', 1.0) .attr('stroke', d3.hcl(0, 0, 50)) .attr('stroke-width', strokes.regress_normal) .style('fill', color_fills.dot_normal) .attr('mix-blend-mode', 'hard-light') .lower() // Scatterplot Brush var brush_scatterplot = d3.brush() .extent([[scatm_margin.left, redux_height + scatm_margin.top], [scatm_width, redux_height + scatm_height]]) // Attach brush to DOM let brush_scatterplot_g = svg.append("g") .attr("class", "brush") //.call(brush_scatterplot) //.raise() if(default_regression_selection.length > 0) { default_regression_selection[0][1] += redux_height default_regression_selection[1][1] += redux_height brush_scatterplot_g.call(brush_scatterplot).raise().call(brush_scatterplot.move, default_regression_selection) } else { brush_scatterplot_g.call(brush_scatterplot).raise() } // Brush events brush_scatterplot .on("brush start", ({selection}) => { mutable regreesion_plot_selection = selection brushed(svg, selection) }) .on("start.nokey", function() { unbrushed() // Remove the other brush brush_reduxplot_g.call(d3.brush().clear) d3.select(window).on("keydown.brush keyup.brush", null) brush_scatterplot.extent([[0, 0], [0, 0]]) reset_all_brush_selection() }) // Plot title scatterplot_minor.append('text') .attr("text-anchor", "end") .attr('alignment-baseline', 'ideographic') .attr('x', scatm_width) .attr('y', scatm_margin.top) .attr('font-size', '1vw') .attr('font-weight', 'bold') .text('Regression Plot') // Draw axis scatterplot_minor.append('g') .call(axis_scatx) scatterplot_minor.append('g') .call(axis_scaty) // Guides scatterplot_minor.selectAll('.x').selectAll('.tick') .append('line') // vertical guides .attr('y1', -scatm_y.range()[0] + scatm_margin.top) .attr('y2', scatm_y.range()[1] - scatm_margin.bottom) // use scale to position guides .attr('stroke-width', .5).attr('stroke', d3.hcl(0,0,90)) .lower() scatterplot_minor.select('.y').selectAll('.tick') .append('line') // horizontal guides .attr('x1', scatm_x.range()[0] - scatm_margin.right) .attr('x2', scatm_x.range()[1] - scatm_margin.left) // use scale to position guides .attr('stroke-width', .5).attr('stroke', d3.hcl(0,0,90)) .raise() // Axis title, relative to the group scatterplot_minor.append("text") .attr("text-anchor", "end") .attr('alignment-baseline', 'ideographic') .attr("x", scatm_width - scatm_margin.right) .attr("y", scatm_height - scatm_margin.bottom) .attr('font-size', '1vw') .text(`| Slope |`) scatterplot_minor.append("text") .attr("text-anchor", "end") .attr('alignment-baseline', 'hanging') .attr("transform", "rotate(-90)") .attr("x", -scatm_margin.top * 1.05) .attr("y", scatm_margin.left * 1.05) .attr('font-size', '1vw') .text("R^2") // ===================================================================== Group 3 Summarization let summarization = svg.append('g') .attr('class', 'summarization_container') .attr('transform', `translate(${redux_width}, ${0})`) .attr('width', summ_width) .attr('height', summ_height) .lower() // Summarization Title summarization.append('text') .attr("text-anchor", "start") .attr('alignment-baseline', 'ideographic') .attr('x', summ_width * summ_x.paddingOuter() / summ_num_columns) .attr('y', summ_margin.top) .attr('font-size', '1vw') .attr('font-weight', 'bold') .text('Attribute View') // For each classifying attribute summarization.selectAll() .data(summarization_data) // Group by attributes .join('g') // Append the outline let summ_box = summarization.selectAll('g') .append('rect') .classed('summ_box', true) .attr('x', (d, i) => summ_x(summ_x_index(i))) .attr('y', (d, i) => summ_y(i % summ_num_rows)) .attr('width', summ_x.bandwidth()) .attr('height', summ_y.bandwidth()) .attr('stroke', color_fills.summ_outline_normal) .attr('stroke-width', strokes.summ_normal) .attr('fill', 'none') .lower() let text_height = parseInt(summ_text_size_vw) + 1 // Attribute name let attribute_name_texts = summarization.selectAll('g') .append('text') .classed('attribute_name_text', true) .classed('clicked', false) .attr('x', (d, i) => summ_x(summ_x_index(i))) .attr('y', (d, i) => summ_y(i % summ_num_rows)) .attr('font-size', summ_text_size_vw + 'vw') //.attr('alignment-baseline', 'hanging') .attr('transform', `translate(0, ${text_height * 5})`) // Move a little bit more downwards .text(d => d[0].replaceAll('_', ' ')) // Attribute name box let attribute_name_box = summarization.selectAll('g') .append('rect') .classed('textbound', true) .attr('x', (d, i) => summ_x(summ_x_index(i))) .attr('y', (d, i) => summ_y(i % summ_num_rows)) .attr('width', scores_width + summ_r2_width) .attr('height', summ_textbox_height) .attr('fill-opacity', opacities.summ_textbox) .attr('fill', 'none') attribute_name_texts .on('mouseover', summ_box_mouseover_evt) .on('mouseout', summ_box_mouseout_evt) .on('click', summ_box_mouseclick_evt) // R^2 value color strip summarization.selectAll('g') .append('rect') .attr('x', (d, i) => summ_x(summ_x_index(i))) .attr('y', (d, i) => summ_textbox_height + summ_y(i % summ_num_rows)) .attr('width', summ_r2_width) .attr('height', summ_r2_height) .attr('stroke', color_fills.r2_normal) .attr('fill', function(d, i) { // Average let mean = d3.mean(d[1], x => x.r2) return summ_r2_colorband(mean) }) // ===================================== ATTRIBUTE SCORES let scores_linefunc = d3.line() .x((d, i) => score_x(i)) .y(d => score_y(d)) // Attribute Scores let attribute_scores = summarization.selectAll('g') .append('g') .classed('scores', true) .attr('width', scores_width) .attr('height', scores_height) .attr('transform', (d, i) => `translate(${summkp_x(d[0])}, ${summkp_y(d[0])})`) // Score paths let each_scoreline = attribute_scores.selectAll('g') .data((d, i) => d[1].map(x => { return { 'xid': i, 'walk_id': x.walk_id, 'running_id': x.running_id, 'classification': x.classification, } })) // Make it so that the data includes instance id (running id). .enter() .append('path') .classed('scorepath', true) .attr('transform', `translate(${summ_r2_width}, ${summ_textbox_height})`) .attr('d', (x, i) => scores_linefunc(x.classification)) .attr('opacity', opacities.scoreline_normal) .attr('stroke', color_fills.scoreline_normal) .attr('stroke-width', strokes.score_normal) .style('fill', 'none') .attr('mix-blend-mode', 'screen') // ======================================================== HISTOGRAMS // Histogram container let histograms = summarization.selectAll('g') .data(histo_bin, d => d[0]) .append('g') .attr('class', d => d[0]) .classed('histogram', true) .attr('transform', d => `translate( ${summkp_x(d[0]) + summ_x.bandwidth() * (1 - summ_histo_ratio.width)}, ${summkp_y(d[0])} )` ) .attr('width', histo_width) .attr('height', histo_height) histograms .selectAll('g') .data(d => d[1]) .enter() .append('rect') .attr('fill', d => d.x0 < 0 ? color_fills.histo_negative : color_fills.histo_positive) .attr('fill-opacity', opacities.histo) .attr('x', d => histo_x(d.x0) + 1) .attr('width', d => Math.abs(histo_x(d.x1) - histo_x(d.x0) - 1)) .attr('y', d => histo_y(d.length)) .attr('height', d => Math.abs(histo_y(0) - histo_y(d.length))) // Bounding box histograms .append('rect') .attr('class', 'histogram_boundary') .attr('width', histo_width) .attr('height', histo_height) .attr('fill', 'none') .attr('stroke', d3.hcl(0, 0, 50)) .attr('stroke-width', 1.5) // Histo axis only in the visually-bottom histograms let histo_w_axis = histograms.filter((d, i) => i % summ_num_rows == summ_num_rows - 1) .append('g') .classed('axis', true) .call(d3.axisBottom(d3.scaleLinear() .domain([-slope_domain, slope_domain]) .range([0, histo_width])) .ticks(3)) .attr('transform', `translate(${0}, ${histo_height})`) // Weaken that histo let histoaxis_tweak = (axis_g) => { axis_g.selectAll('path').attr('stroke', d3.hcl(0,0,70)) axis_g.selectAll('path').attr('stroke-width', 0.6) axis_g.selectAll('.tick').selectAll('line').attr('stroke', d3.hcl(0,0,45)) axis_g.selectAll('.tick').selectAll('text').attr('fill', d3.hcl(0,0,45)) axis_g.selectAll('.tick').selectAll('text').style('font-size', '0.8vw') } histograms.selectAll('.axis').call(histoaxis_tweak) if(default_regression_selection.length > 0) { brushed(svg, default_regression_selection) } // Return node return svg.node() }33:T485,function make_markers(svg) { // Marker svg .append('defs') .append('marker') .attr('id', 'startingdot') .attr('viewBox', [0, 0, 5, 5]) .attr('refX', 2.5) .attr('refY', 2.5) .attr('markerWidth', 2.5) .attr('markerHeight', 2.5) .append('circle') .attr('cx', 2.5) .attr('cy', 2.5) .attr('r', 2.5) .style('fill', 'green') svg.selectAll('defs') .append('marker') .attr('id', 'middot') .attr('viewBox', [0, 0, 5, 5]) .attr('refX', 2.5) .attr('refY', 2.5) .attr('markerWidth', 2.5) .attr('markerHeight', 2.5) .append('circle') .attr('cx', 2.5) .attr('cy', 2.5) .attr('r', 2.5) .style('fill', color_fills.redux_normal) svg.selectAll('defs') .append('marker') .attr('id', 'endingarrow') .attr('viewBox', [0, 0, 5, 5]) .attr('refX', 0.5) .attr('refY', 1.5) .attr('markerUnits', 'strokeWidth') .attr('markerWidth', 3) .attr('markerHeight', 3) .attr('orient', 'auto') .append('path') .attr('d', 'M 0 0 L 5 2.5 L 0 5 z') }34:T4c9,function summ_box_mouseover_evt() { let click_state = d3.select(this).classed('clicked') // Only when it is not clicked if (mutable attribute_view_clicked == "false") { let selected_attribute = d3.select(this).data()[0][0] // Highlight itself d3.select(this.parentNode).selectAll('.textbound') .attr('fill', color_fills.summ_outline_highlight) .lower() // Highlight scatterplot d3.selectAll('.scatterplot').selectAll('circle').filter(d => d.classifying == selected_attribute) .classed('hovered', true) .style('fill', color_fills.dot_highlight) .attr('r', circle_radii.large_mouseover) .raise() // Change projection plot // New data let new_current_redux = data_current_direction_attribute_grouped.get(selected_attribute) // Update let reduxdots = d3.select('.reduxplot').selectAll('.reduxdot') .data(new_current_redux, d => d.walk_id) .filter(d => d.classifying == selected_attribute) .attr('r', d => reduxdot_size_scale(d.slope)) .style('fill', d => reduxdot_color_scale(d.slope)) .attr('stroke', d => reduxdot_stroke_scale(d.r2)) .classed('hovered', true) } }35:T855,function summ_box_mouseout_evt() { let click_state = d3.select(this).classed('clicked') if (mutable attribute_view_clicked == "false") { // Revert visual highlight d3.select(this.parentNode).selectAll('.textbound') .attr('fill', 'none') .lower() // Revert scatterplot d3.selectAll('.scatterplot').selectAll('circle') .filter(function(d, i) { let comp = d3.select(this) let is_brushed = comp.classed('brushed') let is_chosen = comp.classed('chosen') if(!is_brushed && !is_chosen) { comp.style('fill', color_fills.dot_normal).attr('r', d => scatterdot_size_scale(d.slope)) } else if(is_brushed) { // Revert to the brushed state comp.style('fill', color_fills.dot_normal).attr('r', circle_radii.small_brushed) } else if(is_chosen) { // Revert to the chosen state comp.style('fill', color_fills.dot_highlight).attr('r', circle_radii.large_mouseover) } }) // Revert projection let reduxdots = d3.select('.reduxplot').selectAll('.reduxdot') .filter(function(d, i) { let comp = d3.select(this) let is_brushed = comp.classed('brushed') let is_chosen = comp.classed('chosen') if(!is_brushed && !is_chosen) { // Initial state comp.attr('r', circle_radii.large_normal) .attr('stroke', color_fills.redux_normal) .attr('stroke-width', strokes.redux_normal) .style('fill', color_fills.dot_normal) } else { if(is_chosen) { // Chosen state comp.attr('r', circle_radii.large_normal) .attr('stroke', color_fills.redux_highlight) .attr('stroke-width', strokes.redux_normal) .style('fill', color_fills.redux_highlight) } if(is_brushed) { // Brushed state comp.attr('r', circle_radii.large_normal) .attr('stroke', color_fills.redux_highlight) .attr('stroke-width', strokes.redux_normal) .style('fill', color_fills.redux_highlight) } } }) } }36:T1674,function summ_box_mouseclick_evt() { let click_state = d3.select(this).classed('clicked') let selected_attribute = d3.select(this).data()[0][0] let brushed_scatter_dots = [] if (mutable first_interaction == "true") { brushed_scatter_dots = d3.selectAll('.scatterplot').selectAll('circle') .filter(d => dot_contains(mutable regreesion_plot_selection, d)) mutable first_interaction = "false" } else { if (mutable regreesion_plot_selection.length == 0) { brushed_scatter_dots = d3.selectAll('.scatterplot').selectAll('circle') } else { brushed_scatter_dots = d3.selectAll('.scatterplot').selectAll('circle') .filter(d => dot_contains(mutable regreesion_plot_selection, d)) } } let walk_id_subset_scatter = new Set(brushed_scatter_dots.data().map(d => d.walk_id)) // If anything is already clicked reset everything if (mutable attribute_view_clicked == "true") { // Reverse everything d3.select(this.parentNode.parentNode).selectAll('.textbound') .attr('fill', 'none') .lower() d3.selectAll('.attribute_name_text') .classed('clicked', false) // Revert scatterplot d3.selectAll('.scatterplot').selectAll('circle') .filter(function(d, i) { let comp = d3.select(this) let is_brushed = comp.classed('brushed') let is_chosen = comp.classed('chosen') if(!is_brushed && !is_chosen) { comp.style('fill', color_fills.dot_normal).attr('r', d => scatterdot_size_scale(d.slope)) } else if(is_brushed) { // Revert to the brushed state comp.style('fill', color_fills.dot_normal).attr('r', circle_radii.small_brushed) } else if(is_chosen) { // Revert to the chosen state comp.style('fill', color_fills.dot_highlight).attr('r', circle_radii.large_mouseover) } }) } // if (click_state == false) { // If the summariazation box is not clicked, // 1. Augment UMap projection // 2. Lock regression plot selection. // 3. Highlight itself d3.select(this.parentNode).selectAll('.textbound') .attr('fill', color_fills.summ_outline_highlight) .lower() // Highlight scatterplot d3.selectAll('.scatterplot').selectAll('circle').filter(d => d.classifying == selected_attribute) .classed('hovered', true) .style('fill', color_fills.dot_highlight) .attr('r', circle_radii.large_mouseover) .raise() // New data let new_current_redux = data_current_direction_attribute_grouped.get(selected_attribute) // Update let reduxdots = d3.select('.reduxplot').selectAll('.reduxdot') .data(new_current_redux, d => d.walk_id) .filter(d => d.classifying == selected_attribute) .attr('r', d => reduxdot_size_scale(d.slope)) .style('fill', d => reduxdot_color_scale(d.slope)) .attr('stroke', d => reduxdot_stroke_scale(d.r2)) .classed('hovered', true) if (umap_filtering == 'true') { d3.select('.reduxplot').selectAll('.reduxdot') .data(new_current_redux, d => d.walk_id) .filter(d => d.classifying == selected_attribute) .filter(d => !walk_id_subset_scatter.has(d.walk_id)) .attr('r', 0) .classed('hovered', true) } // Change state d3.select(this).classed('clicked', true) mutable attribute_view_clicked = "true" } else { // If the summarization box is in the clicked state, // 1. Revert the changes d3.select(this.parentNode).selectAll('.textbound') .attr('fill', 'none') .lower() // Revert visual highlight d3.select(this.parentNode).selectAll('.textbound') .attr('fill', 'none') .lower() // Revert scatterplot d3.selectAll('.scatterplot').selectAll('circle') .filter(function(d, i) { let comp = d3.select(this) let is_brushed = comp.classed('brushed') let is_chosen = comp.classed('chosen') if(!is_brushed && !is_chosen) { comp.style('fill', color_fills.dot_normal).attr('r', d => scatterdot_size_scale(d.slope)) } else if(is_brushed) { // Revert to the brushed state comp.style('fill', color_fills.dot_normal).attr('r', circle_radii.small_brushed) } else if(is_chosen) { // Revert to the chosen state comp.style('fill', color_fills.dot_highlight).attr('r', circle_radii.large_mouseover) } }) // Revert projection let reduxdots = d3.select('.reduxplot').selectAll('.reduxdot') .filter(function(d, i) { let comp = d3.select(this) let is_brushed = comp.classed('brushed') let is_chosen = comp.classed('chosen') if(!is_brushed && !is_chosen) { // Initial state comp.attr('r', circle_radii.large_normal) .attr('stroke', color_fills.redux_normal) .attr('stroke-width', strokes.redux_normal) .style('fill', color_fills.dot_normal) } else { if(is_chosen) { // Chosen state comp.attr('r', circle_radii.large_normal) .attr('stroke', color_fills.redux_highlight) .attr('stroke-width', strokes.redux_normal) .style('fill', color_fills.redux_highlight) } if(is_brushed) { // Brushed state comp.attr('r', circle_radii.large_normal) .attr('stroke', color_fills.redux_highlight) .attr('stroke-width', strokes.redux_normal) .style('fill', color_fills.redux_highlight) } } }) // Change state d3.select(this).classed('clicked', false) mutable attribute_view_clicked = "false" } }37:T72b,function redux_mouseout_evt() { if (mutable attribute_view_clicked == "true") { // Don't do anything } else { // ======================================================= Revert Itself d3.select('.reduxplot').selectAll('circle').filter(function(d, i) { let comp = d3.select(this) let is_brushed = comp.classed('brushed') let is_chosen = comp.classed('chosen') if(!is_brushed & !is_chosen) { comp .attr('stroke', color_fills.redux_normal) .attr('stroke-width', strokes.redux_normal) } else if(is_brushed) { comp .attr('stroke', color_fills.redux_highlight) .attr('stroke-width', strokes.redux_normal) } else if(is_chosen) { comp .attr('stroke', color_fills.redux_highlight) .attr('stroke-width', strokes.redux_normal) } }) // ======================================================= Revert brushed scatterplot d3.selectAll('.scatterplot').selectAll('circle') .filter(function(d, i) { let comp = d3.select(this) let is_brushed = comp.classed('brushed') let is_chosen = comp.classed('chosen') let is_highlighted = comp.classed('highlighted') if(is_highlighted && !is_brushed && !is_chosen) { comp.style('fill', color_fills.dot_normal).attr('r', d => scatterdot_size_scale(d.slope)) //.classed('chosen', false) } if(!is_brushed && !is_chosen) { // Go back to the initial state comp.style('fill', color_fills.dot_normal).attr('r', d => scatterdot_size_scale(d.slope)) //.classed('highlighted', false) } if(is_brushed) { // Go back to the brushed state comp.style('fill', color_fills.dot_normal).attr('r', circle_radii.small_brushed) //.classed('highlighted', false) } }) } }38:Tacd,function brushed(svg, selection) { // If anything is already clicked reset everything if (mutable attribute_view_clicked == "true") { // Reverse everything reset_attribute_text() // Revert projection let reduxdots = d3.select('.reduxplot').selectAll('.reduxdot') .filter(function(d, i) { let comp = d3.select(this) let is_brushed = comp.classed('brushed') let is_chosen = comp.classed('chosen') if(!is_brushed && !is_chosen) { // Initial state comp.attr('r', circle_radii.large_normal) .attr('stroke', color_fills.redux_normal) .attr('stroke-width', strokes.redux_normal) .style('fill', color_fills.dot_normal) } else { if(is_chosen) { // Chosen state comp.attr('r', circle_radii.large_normal) .attr('stroke', color_fills.redux_highlight) .attr('stroke-width', strokes.redux_normal) .style('fill', color_fills.redux_highlight) } if(is_brushed) { // Brushed state comp.attr('r', circle_radii.large_normal) .attr('stroke', color_fills.redux_highlight) .attr('stroke-width', strokes.redux_normal) .style('fill', color_fills.redux_highlight) } } }) mutable attribute_view_clicked = "false" } // Clear previous selection reset_regression_plot(svg) // Visual highlighting - size let scatter_dots = svg.selectAll('.scatterplot').selectAll('circle').filter(d => dot_contains(selection, d)) scatter_dots.attr("r", circle_radii.small_brushed) .classed('brushed', true) let subset = scatter_dots.data().map(d => d.running_id) let walk_ids = scatter_dots.data().map(d => d.walk_id) // Unique subset = new Set(subset) walk_ids = new Set(walk_ids) // ======================================= Hightlight Reduxplot ============================================= // Un-highlight previous selection svg.selectAll('.reduxplot').selectAll('.reduxdot') .attr('stroke', color_fills.redux_normal) .attr('stroke-width', strokes.redux_normal) .classed('highlighted', false) .classed('chosen', false) // Highlight current selection svg.selectAll('.reduxplot').selectAll('.reduxdot') .filter(d => walk_ids.has(d.walk_id)) .attr('stroke', color_fills.redux_highlight) .attr('stroke-width', strokes.redux_brushed) .classed('highlighted', true) .classed('chosen', true) // ======================================= Update Histogram ================================================= update_histogram(svg, subset) update_score_plot(svg, subset, true) mutable regression_plot_brushed = "true" }39:Tc45,function brushed_redux(svg, selection, lines) { if (mutable attribute_view_clicked == "true") { // if attribute view is clicked - Don't do anything aesthetically reset_umap_projection(false) // Selection let brushed_redux_dots = d3.select('.reduxplot').selectAll('.reduxdot').filter(d => redux_contains(selection, d)) // Visual hightlighting brushed_redux_dots .classed('brushed', true) .raise() if (mutable regression_plot_brushed == "true") { // Conditional selection // Don't reset regression plot selection //d3.selectAll('.scatterplot').selectAll('circle') // .style('fill', color_fills.dot_normal) // .attr('r', d => scatterdot_size_scale(d.slope)) let brushed_scatter_dots = d3.selectAll('.scatterplot').selectAll('circle') .filter(d => dot_contains(mutable regreesion_plot_selection, d)) let walk_id_subset_redux = new Set(brushed_redux_dots.data().map(d => d.walk_id)) let walk_id_subset_scatter = new Set(brushed_scatter_dots.data().map(d => d.walk_id)) // Intersection let walk_id_subset = new Set([...walk_id_subset_redux].filter(d => walk_id_subset_scatter.has(d))) // Unique IDs. let running_ids = d3.filter(data_current_direction, d => walk_id_subset.has(d.walk_id)).map(d => d.running_id) running_ids = new Set(running_ids) update_histogram(svg, running_ids) update_score_plot(svg, running_ids, true) // update_regression_plot(walk_id_subset, false) } else { // Non-conditional selection reset_regression_plot() // Walk IDs let walk_id_subset = new Set(brushed_redux_dots.data().map(d => d.walk_id)) // Unique IDs. let running_ids = d3.filter(data_current_direction, d => walk_id_subset.has(d.walk_id)).map(d => d.running_id) running_ids = new Set(running_ids) update_histogram(svg, running_ids) update_score_plot(svg, running_ids, true) // update_regression_plot(walk_id_subset, true) } } else { // console.log("Brushing redux plot || attribute view not clicked") // Clear previous selection reset_umap_projection(true) reset_regression_plot() // Selection let brushed_dots = d3.select('.reduxplot').selectAll('.reduxdot').filter(function(d, i) { return redux_contains(selection, d) }) // Visual hightlighting brushed_dots .attr("stroke", color_fills.redux_highlight) .attr("stroke-width", strokes.redux_brushed) .attr('r', circle_radii.large_normal) .attr('fill-opacity', 0.3) .style('fill', color_fills.dot_normal) .classed('brushed', true) .raise() // Walk IDs let walk_id_subset = new Set(brushed_dots.data().map(d => d.walk_id)) // Unique IDs. let running_ids = d3.filter(data_current_direction, d => walk_id_subset.has(d.walk_id)).map(d => d.running_id) running_ids = new Set(running_ids) update_histogram(running_ids) update_score_plot(svg, running_ids, true) update_regression_plot(walk_id_subset, true) } }3a:T460,function reset_all_brush_selection() { // Reset called when the user switches from one view to another if (mutable attribute_view_clicked == "true") { // Reset redux - maintain aesthetics d3.selectAll('.reduxplot').selectAll('.reduxdot') .classed('highlighted', false) .classed('brushed', false) .classed('chosen', false) let brushed_scatter_dots = d3.selectAll('.scatterplot').selectAll('circle') .filter(d => dot_contains(mutable regreesion_plot_selection, d)) let subset = new Set(brushed_scatter_dots.data().map(d => d.running_id)) // reset_regression_plot() update_histogram(subset) update_score_plot(subset, true) // update_regression_plot(running_ids, false) } else { // Reset redux d3.selectAll('.reduxplot').selectAll('.reduxdot') .style('fill', color_fills.dot_normal) .attr("stroke", color_fills.redux_normal) .attr("stroke-width", strokes.redux_normal) .classed('highlighted', false) .classed('brushed', false) .classed('chosen', false) reset_regression_plot() reset_score_plot() } }3b:T425,function update_histogram(svg, running_ids) { // Filtered histo bin let uhisto_bin = updated_histo_bin(running_ids) // Actual histogram let histogram_group_update = d3.selectAll('.summarization_container').selectAll('.histogram') .data(uhisto_bin, d => d[0]) let overlay_update = histogram_group_update.selectAll('.overlay') .data(d => d[1]) // take care of new bars overlay_update .enter() .append('rect') // rectangle creation .classed('overlay', true) // update existing bars histogram_group_update.selectAll('.overlay') // update appearance (y,height) .attr('fill', d => d.x0 < 0 ? color_fills.histo_negative_overlay : color_fills.histo_positive_overlay) .attr('x', (d, i) => histo_x(d.x0) + 1) .attr('width', d => Math.abs(histo_x(d.x1) - histo_x(d.x0) - 1)) .attr('y', (d, i) => histo_y(d.length)) .attr('height', d => Math.abs(histo_y(0) - histo_y(d.length))) // deal with bars that shouldn't exist histogram_group_update.exit().selectAll('.overlay').remove() }3c:[] 30:{"id":"6e85931d8e12c156","slug":null,"title":"Eurovis-2022: Bias 1","thumbnail":"0da0397b61e561c689a239add1cf45507e714024eed32d9d7da31e6f0834dd98","access_level":"public","create_time":"$D2021-12-02T07:00:53.624Z","update_time":"$D2026-09-29T19:17:21.871Z","view_time":null,"first_public_time":"$D2023-02-27T18:38:56.012Z","has_unpublished_edits":null,"fork":{"id":"58f90c0a153bd534","slug":"eurovis-2022","title":"Slow Walker: Scatterplot V11 - Eurovis 2022 Paper Ready","owner":{"id":"40d66d97657a7a59","login":"swj0418","name":"Sangwon Jeong"}},"stars":1,"starred":false,"owner":{"type":"team","id":"40d66d97657a7a59","login":"swj0418","name":"Sangwon Jeong","avatar_url":"https://avatars-next.observableusercontent.com/64ecd737bd36ef9d83322a9394e293bb02d6386e1315e041ecc74f9463587a0a","tier":"starter_2024","bio":"Vanderbilt University\nComputer Science. Ph.D. Student 2021~"},"version":5099,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fcde09a0ee20cb13","login":"swj0418","name":"Sangwon Jeong","avatar_url":"https://avatars-next.observableusercontent.com/64ecd737bd36ef9d83322a9394e293bb02d6386e1315e041ecc74f9463587a0a","tier":null,"bio":"Vanderbilt University\nComputer Science. Ph.D. Student 2021~"}],"members":[{"type":"individual","id":"fcde09a0ee20cb13","login":"swj0418","name":"Sangwon Jeong","avatar_url":"https://avatars-next.observableusercontent.com/64ecd737bd36ef9d83322a9394e293bb02d6386e1315e041ecc74f9463587a0a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"ea3c0c338a1fcdb7","slug":"eurovis-2022","title":"Eurovis-2022","owner":{"id":"40d66d97657a7a59","login":"swj0418","name":"Sangwon Jeong"}},"type":"notebook","body":{"titling":"auto","title":"Eurovis-2022: Bias 1","cells":[{"id":0,"value":"md`# Eurovis-2022: Bias 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html`\n

Settings

Main

It may take a while to retrieve data depending on your internet connection.

Functions

Visual Parameters

Interactive Params

Real Values

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"height = width / 1.618","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"svg_viewbox = [0, 0, width, height]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"redux_width = width * redux_ratio.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"redux_height = height * redux_ratio.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"scatm_width = width * scatm_ratio.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"scatm_height = height * scatm_ratio.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"summ_width = width * summ_ratio.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"summ_height = height * summ_ratio.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2866,"value":"summ_textbox_height = summ_y.bandwidth() - summ_r2_height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"summ_r2_width = summ_x.bandwidth() * summ_r2_ratio.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"summ_r2_height = summ_y.bandwidth() * summ_r2_ratio.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"histo_width = summ_x.bandwidth() * summ_histo_ratio.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"histo_height = summ_y.bandwidth() * summ_histo_ratio.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"scores_width = summ_x.bandwidth() * summ_scores_ratio.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1670,"value":"scores_height = summ_y.bandwidth() * summ_scores_ratio.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"summ_text_size_vw = {\n if (limit_summarization == 'true') {\n return '2'\n } else {\n return '1.2'\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3444,"value":"circle_radii = ({\n small_normal: 1.5,\n small_mouseover: 2.5,\n small_brushed: 2.5,\n large_normal: 3.0,\n large_mouseover: 3.0,\n large_hovered: 6.0,\n scatterdot_small: 0.6,\n scatterdot_large: 1.5,\n slope_minimum: 2.0,\n slope_maximum: 10.0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3423,"value":"strokes = ({\n score_normal: d => {\n if (num_instances < 30) { \n return 3.0\n } else if (num_instances >= 30 && num_instances < 400) {\n return 0.5\n } else { \n return 0.2\n }\n },\n score_highlight: d => {\n if (num_instances < 30) { \n return 5.0\n } else if (num_instances >= 30 && num_instances < 400) {\n return 1.0\n } else { \n return 0.4\n }\n },\n score_hidden: 0.0,\n redux_normal: 2.0,\n redux_brushed: 2.0,\n summ_normal: 1.5,\n summ_highlight: 3.0,\n regress_normal: 0.2,\n regress_brushed: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3185,"value":"color_fills = ({\n 'histo_positive': d3.hcl(40, 50, 50), // Blue\n 'histo_negative': d3.hcl(225, 50, 50), // Red\n 'histo_positive_overlay': d3.hcl(40, 50, 50),\n 'histo_negative_overlay': d3.hcl(255, 50, 50),\n 'scoreline_normal': d3.hcl(0, 0, 50),\n 'scoreline_highlight': d3.hcl(150, 50, 50),\n 'summ_outline_normal': d3.hcl(0, 0, 50),\n 'summ_outline_highlight': d3.hcl(150, 50, 50),\n 'redux_normal': d3.hcl(0, 0, 40),\n 'redux_highlight': d3.hcl(150, 50, 50),\n 'dot_normal': d3.hcl(0, 0, 40),\n 'dot_highlight': d3.hcl(150, 50, 70),\n 'r2_normal': d3.hcl(0, 0, 50),\n 'redux_negative': d3.hcl(225, 50, 50), // Blue\n 'redux_positive': d3.hcl(40, 50, 50) // Red\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4512,"value":"opacities = ({\n summ_textbox: 0.4,\n histo: 0.5,\n histo_overlay: 0.9,\n scoreline_normal: 0.3,\n scoreline_highlight: 0.3,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"html`

Ratios

Margins

Mutatbles

Scales

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"redux_x = d3.scaleLinear()\n .domain([redux_data_extent.x.min, redux_data_extent.x.max])\n .range([redux_margin.left + 5, redux_width - 5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"redux_y = d3.scaleLinear()\n .domain([redux_data_extent.y.min, redux_data_extent.y.max])\n .range([redux_height - 5, redux_margin.bottom + 5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"scatm_x = d3.scaleLinear()\n .domain([0, slope_domain])\n .range([0 + scatm_margin.left, scatm_width - scatm_margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"scatm_y = d3.scaleLinear()\n .domain([0.0, 1.0])\n .range([scatm_height - scatm_margin.bottom, scatm_margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"score_x = d3.scaleLinear()\n .domain([0, num_steps - 1])\n .range([0, scores_width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1702,"value":"score_y = d3.scaleLinear()\n .domain([0, 1])\n .range([scores_height, 0]) // Invert?","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":943,"value":"histo_x = d3.scaleLinear()\n .domain([-slope_domain, slope_domain])\n .range([0, histo_width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"histo_y = d3.scaleLinear()\n .domain([0, d3.max(histo_bin.map(d => d[1]).flat(), d => d.length)]).nice()\n .range([histo_height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4854,"value":"scoreline_stroke_normal = d3.scaleLinear()\n .domain([0, 1000])\n .range([5.0, 0.1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4856,"value":"scoreline_stroke_highlighted = d3.scaleLinear()\n .domain([0, 1000])\n .range([7.0, 0.3])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3842,"value":"reduxdot_size_scale = d3.scaleLinear()\n .domain([-slope_domain, 0, slope_domain]) // Might need to do extent\n .range([circle_radii.slope_maximum, circle_radii.slope_minimum, circle_radii.slope_maximum])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3845,"value":"reduxdot_color_scale = d3.scaleLinear()\n .domain([-1.5, 0, 1.5])\n .range([color_fills.redux_negative, d3.hcl(0, 50, 50), color_fills.redux_positive])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3848,"value":"reduxdot_stroke_scale = d3.scaleLinear()\n .domain([0, 1])\n .range([d3.hcl(0, 0, 100), d3.hcl(0, 0, 0)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4405,"value":"scatterdot_size_scale = d3.scaleLinear()\n .domain([-slope_domain, 0, slope_domain]) // Might need to do extent\n .range([circle_radii.scatterdot_large, circle_radii.scatterdot_small, circle_radii.scatterdot_large])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"html`

Container

Color

Data extents

Axes

Axes Modification

Data

The Nested and Flaatened

Reorganized

Attached Data

Derived Data

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"histo_bin = {\n let num_bin = 5\n let bin = d3.bin()\n .value(x => x)\n .thresholds(d3.range(-slope_domain, slope_domain, 0.30))\n .domain([-slope_domain, slope_domain])\n \n let data_array = Array.from(summarization_data, ([key, value]) => value)\n \n let bin_data = data_array.map(function(d) {\n let tmp = d.map(x => parseFloat(x.slope))\n return bin(tmp)\n })\n \n return bin_data.map((d, i) => [sorted_index[i], d])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2344,"value":"function updated_histo_bin(walk_ids) {\n // By walk id\n let filtered_data_current_direction = d3.filter(data_current_direction, d => walk_ids.has(d.running_id))\n\n // Group\n let tmp = new Map()\n for (var i in sorted_index) {\n tmp.set(sorted_index[i], \n d3.group(filtered_data_current_direction, d => d.classifying)\n .get(sorted_index[i]))\n }\n \n // Histo bin\n let num_bin = 10\n let bin = d3.bin()\n .value(x => x)\n .thresholds(d3.range(-slope_domain, slope_domain, 0.30))\n .domain([-slope_domain, slope_domain])\n \n let data_array = Array.from(tmp, ([key, value]) => value)\n \n let bin_data = data_array.map(function(d) {\n try {\n let t = d.map(x => parseFloat(x.slope))\n return bin(t)\n } catch {\n // Do nothing\n }\n\n })\n let newbin = bin_data.map((d, i) => [sorted_index[i], d])\n let recorded = d3.filter(newbin, d => d[1] != null)\n \n return recorded\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1635,"value":"//histo_max_bucket = d3.max(histo_bin.flat(), d => d.length)\nhisto_max_bucket = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"num_steps = {\n return d3.max(data_current_direction_flattened, x => x.step) + 1\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"html`

Events

Brushing

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"function redux_contains([[x0, y0], [x1, y1]], d) {\n const x = redux_x(d.redux_0)\n const y = redux_y(d.redux_1)\n return x >= x0 && x < x1 && y >= y0 && y < y1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1928,"value":"function dot_contains([[x0, y0], [x1, y1]], d) {\n const x = scatm_x(Math.abs(d.slope))\n const y = scatm_y(d.r2) + redux_height\n return x >= x0 && x < x1 && y >= y0 && y < y1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2527,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2524,"value":"function unbrushed() {\n // Revert the changes made to other elements\n reset_score_plot()\n reset_umap_projection(true)\n\n mutable regreesion_plot_selection = []\n mutable regression_plot_brushed = \"false\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2466,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2646,"value":"function unbrushed_redux() {\n if (mutable attribute_view_clicked == \"true\") {\n // Do nothing\n } else {\n reset_umap_projection(true)\n \n reset_score_plot()\n reset_regression_plot()\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3292,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4710,"value":"md`### Helper functions for updates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4673,"value":"function reset_regression_plot(svg) {\n d3.selectAll('.scatterplot').selectAll('circle')\n .style('fill', color_fills.dot_normal)\n .attr('r', d => scatterdot_size_scale(d.slope))\n .classed('brushed', false)\n .classed('highlighted', false)\n .classed('chosen', false)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4676,"value":"function reset_umap_projection(functional) {\n if (functional == true) {\n d3.select('.reduxplot').selectAll('.reduxdot')\n .attr(\"stroke\", color_fills.redux_normal)\n .attr(\"stroke-width\", strokes.redux_normal)\n .classed('highlighted', false)\n .classed('chosen', false)\n .classed('brushed', false)\n } else {\n d3.select('.reduxplot').selectAll('.reduxdot')\n .classed('highlighted', false)\n .classed('brushed', false)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4702,"value":"function reset_score_plot() {\n d3.selectAll('.summarization_container').selectAll('.scorepath')\n .classed('highlighted', false)\n .classed('chosen', false)\n .classed('brushed', false)\n .attr('stroke', color_fills.scoreline_normal)\n .attr('stroke-width', strokes.score_normal)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4744,"value":"function reset_attribute_text() {\n d3.selectAll('.textbound')\n .attr('fill', 'none')\n .lower()\n\n d3.selectAll('.attribute_name_text')\n .classed('clicked', false)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4715,"value":"function update_regression_plot(walk_id_subset, reset_update) {\n if (reset_update == true) {\n // Reset previous selection\n d3.selectAll('.scatterplot').selectAll('circle')\n .style('fill', color_fills.dot_normal)\n .attr('r', d => scatterdot_size_scale(d.slope))\n }\n // Current\n d3.selectAll('.scatterplot').selectAll('circle').filter(d => walk_id_subset.has(d.walk_id))\n .style('fill', color_fills.dot_highlight)\n .attr('r', circle_radii.large_mouseover)\n .classed('highlighted', true)\n .classed('chosen', true)\n .raise()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4723,"value":"function update_score_plot(svg, running_ids, reset_update) {\n // Un-highlight previous selection\n if (reset_update == true) {\n svg.selectAll('.summarization_container').selectAll('.scorepath')\n .attr('stroke-width', strokes.score_hidden)\n .attr('stroke', color_fills.scoreline_normal) \n }\n // Current\n svg.selectAll('.summarization_container').selectAll('.scorepath')\n .filter(d => running_ids.has(d.running_id))\n .attr('stroke-width', strokes.score_highlight)\n .attr('stroke', color_fills.scoreline_highlight)\n .raise()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4685,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4873,"value":"function moving_average(d, window) {\n if (!d || d.length < window) {\n return []\n }\n const new_d = Object.assign(d)\n\n let idx = window - 1\n const length = d.length + 1\n let moving_average = []\n\n while (++idx < length) {\n const windowSlice = new_d.slice(idx - window, idx);\n const sum = windowSlice.reduce((prev, curr) => prev + curr, 0);\n moving_average.push(sum / window);\n }\n return moving_average\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4881,"value":"function interpolate(d, num_interps) {\n if (!d || d.length < 2) {\n return []\n }\n\n let interpolated_values = []\n let idx = -1\n const length = d.length - 1\n\n while (++idx < length) {\n const a = d[idx]\n const b = d[idx + 1]\n interpolated_values.push(a)\n for (var i = 1; i < num_interps + 1; ++i) {\n const factor = (i / (num_interps + 1))\n let iv = (a + b) * factor\n interpolated_values.push(iv)\n }\n }\n interpolated_values.push(d[d.length - 1])\n \n return interpolated_values\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"html`\n

Imports

Helpers