2f: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() }30: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') }31: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) } }32: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) } } }) } }33: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" } }34: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) } }) } }35: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" }36: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) } }37: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() } }38: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() }39:[] 2d:{"title":"Eurovis-2022: Bias 2","cells":[{"id":0,"value":"md`# Eurovis-2022: Bias 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"html`\n

Settings

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"walk_method = 'supervised'","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"selected_direction = 'Pale_Skin'","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"viewof num_instances = slider({\n title: 'Number of Data Instances to Show',\n min: 1,\n max: 1000,\n step: 1,\n value: 1000,\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"html`\n

Main

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4191,"value":"html`\n

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

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"image_strip = {\n let folder_name ='served_data'\n let image_url = `https://eurovis-2022.s3.amazonaws.com/${folder_name}/` + image_path\n \n let svg = d3.create('svg')\n .attr('width', width)\n .attr('height', 120)\n \n let img = svg\n .append('image')\n .attr('href', image_url)\n .attr('x', (_, i) => 0)\n .attr('y', (_, i) => 0)\n .attr('width', width)\n \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"// viewof mydom = drawdom(main, 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"gan_domain = 'ffhq256'","pinned":false,"hidden":false,"mode":"ojs"},{"id":5056,"value":"default_regression_selection = [[scatm_margin.left + scatm_width * 0.55, scatm_margin.top], [scatm_width, scatm_height * 0.3]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2544,"value":"html`

Functions

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2547,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"html`\n

Visual Parameters

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"html`

Interactive Params

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"viewof slope_domain = slider({\n title: 'slope domain',\n min: 0,\n max: 3.0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3943,"value":"default_num_col = {\n if (gan_domain == 'scenery256') {\n return 2\n } else {\n return 2\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4076,"value":"viewof limit_summarization = radio({\n title: 'Limit Summarization',\n options: [\n {label: 'True', value: 'true'},\n {label: 'False', value: 'false'}\n ],\n value: 'false'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5039,"value":"viewof umap_filtering = radio({\n title: 'UMAP Filtering',\n options: [\n {label: 'True', value: 'true'},\n {label: 'False', value: 'false'}\n ],\n value: 'true'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"viewof summ_num_columns = radio({\n title: 'Number of Summarization Columns',\n options: [\n {label: 1, value: 1},\n {label: 2, value: 2},\n {label: 3, value: 3},\n {label: 4, value: 4},\n {label: 5, value: 5},\n {label: 6, value: 6},\n ],\n value: default_num_col\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"// summ_num_rows = Math.ceil(Array.from(scat_data_grouped.keys()).length / summ_num_columns)\nsumm_num_rows = Math.ceil(sorted_index.length / summ_num_columns)","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"summ_x_index = (i) => {\n return Math.floor(i / summ_num_rows)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"html`

Real Values

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"height = width / 1.618","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"svg_viewbox = [0, 0, width, height]","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"redux_width = width * redux_ratio.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"redux_height = height * redux_ratio.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"scatm_width = width * scatm_ratio.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"scatm_height = height * scatm_ratio.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"summ_width = width * summ_ratio.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"summ_height = height * summ_ratio.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":2866,"value":"summ_textbox_height = summ_y.bandwidth() - summ_r2_height","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"summ_r2_width = summ_x.bandwidth() * summ_r2_ratio.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"summ_r2_height = summ_y.bandwidth() * summ_r2_ratio.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"histo_width = summ_x.bandwidth() * summ_histo_ratio.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"histo_height = summ_y.bandwidth() * summ_histo_ratio.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"scores_width = summ_x.bandwidth() * summ_scores_ratio.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":1670,"value":"scores_height = summ_y.bandwidth() * summ_scores_ratio.height","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":202,"value":"html`

Ratios

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"redux_ratio = ({'width': 0.4, 'height': 0.5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"scatm_ratio = ({width: redux_ratio.width, height: 1 - redux_ratio.height})","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"summ_ratio = ({'width': 1.0 - redux_ratio.width, 'height': 1.0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"summ_r2_ratio = ({width: 0.03, height: 0.8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"summ_histo_ratio = ({width: 0.3, height: 1.0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"summ_scores_ratio = ({width: 1.0 - summ_histo_ratio.width - summ_r2_ratio.width, height: 0.8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"html`

Margins

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"redux_margin = ({'top': 12, 'bottom': 10, 'left': 10, 'right': 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"scatm_margin = ({'top': 20, 'bottom': 20, 'left': 25, 'right': 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"summ_margin = ({'top': 12, 'bottom': 15, 'left': 10, 'right': 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"html`

Mutatbles

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"mutable image_path = ''","pinned":false,"hidden":false,"mode":"ojs"},{"id":4865,"value":"mutable num_instances_selected = num_instances","pinned":false,"hidden":false,"mode":"ojs"},{"id":3582,"value":"mutable hovered_attribute = available_directions[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4233,"value":"mutable attribute_view_clicked = \"false\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4662,"value":"mutable regression_plot_brushed = \"false\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4781,"value":"mutable regreesion_plot_selection = default_regression_selection","pinned":false,"hidden":false,"mode":"ojs"},{"id":5106,"value":"mutable first_interaction = 'true'","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"html`\n

Scales

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":1700,"value":"score_x = d3.scaleLinear()\n .domain([0, num_steps - 1])\n .range([0, scores_width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1702,"value":"score_y = d3.scaleLinear()\n .domain([0, 1])\n .range([scores_height, 0]) // Invert?","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"histo_x = d3.scaleLinear()\n .domain([-slope_domain, slope_domain])\n .range([0, histo_width])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":4854,"value":"scoreline_stroke_normal = d3.scaleLinear()\n .domain([0, 1000])\n .range([5.0, 0.1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4856,"value":"scoreline_stroke_highlighted = d3.scaleLinear()\n .domain([0, 1000])\n .range([7.0, 0.3])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":1691,"value":"html`

Container

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"summ_x = d3.scaleBand()\n .domain(d3.range(summ_num_columns))\n .range([0, summ_width])\n .paddingInner(0.05)\n .paddingOuter(0.02)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2179,"value":"function summkp_x(key) {\n // Gives index for the grid\n let keys = histo_bin.map(d => d[0])\n let myIndex = keys.indexOf(key)\n \n return summ_x(summ_x_index(myIndex))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2241,"value":"function summkp_y(key) {\n // Gives index for the grid\n let keys = histo_bin.map(d => d[0])\n let myIndex = keys.indexOf(key)\n \n return summ_y(myIndex % summ_num_rows)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"summ_y = d3.scaleBand()\n .domain(d3.range(summ_num_rows))\n .range([summ_margin.top, summ_height - summ_margin.bottom])\n .paddingInner(0.05)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1688,"value":"html`

Color

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"summ_r2_colorband = d3.scaleLinear()\n.domain([average_r2_extent.min, average_r2_extent.max])\n.range([\"#f7fbff\",\"#08306b\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"html`

Data extents

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"redux_data_extent = {\n let a = 1.0\n return ({ // Slightly larger than the real data so that walks will not touch the boundary.\n x: {max: d3.max(data_current_direction_flattened, d => parseFloat(d.redux_0)) * a,\n min: d3.min(data_current_direction_flattened, d => parseFloat(d.redux_0)) * a},\n \n y: {max: d3.max(data_current_direction_flattened, d => parseFloat(d.redux_1)) * a,\n min: d3.min(data_current_direction_flattened, d => parseFloat(d.redux_1)) * a}\n })\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"average_r2_extent = {\n let means = []\n scat_data_grouped.forEach(d => {\n let m = d3.mean(d, d => d.r2) \n means.push(m)\n })\n return ({\n min: d3.min(means),\n max: d3.max(means)\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2896,"value":"html`

Axes

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2900,"value":"axis_scatx = ax => ax\n .classed('axis x', true)\n .attr('transform', \n `translate(${0}, ${scatm_height - scatm_margin.top})`)\n .call(d3.axisBottom(scatm_x).ticks(4))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2904,"value":"axis_scaty = ax => ax\n .classed('axis y', true)\n .attr('transform', \n `translate(${scatm_margin.left}, ${0})`)\n .call(d3.axisLeft(scatm_y).ticks(3))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2907,"value":"html`

Axes Modification

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2908,"value":"{\n let axis_tweak = (axis_g) => {\n axis_g.selectAll('path').attr('stroke', d3.hcl(0,0,70))\n axis_g.selectAll('path').attr('stroke-width', 0.6)\n axis_g.selectAll('.tick').selectAll('line').attr('stroke', d3.hcl(0,0,45))\n axis_g.selectAll('.tick').selectAll('text').attr('fill', d3.hcl(0,0,45))\n }\n d3.select('.scatterplot').selectAll('.axis').call(axis_tweak)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"html`\n

Data

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5050,"value":"activation_layer = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":5001,"value":"projection_method = 'flat_diff'","pinned":false,"hidden":false,"mode":"ojs"},{"id":4997,"value":"pooling_method = 'max'","pinned":false,"hidden":false,"mode":"ojs"},{"id":4609,"value":"available_direction_url = {\n return `https://eurovis-2022.s3.amazonaws.com/available_directions/${walk_method}_directions.json`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"source_url = {\n let domain = ''\n let alt = ''\n if (gan_domain.startsWith('ffhq256')) {\n domain = 'celeba'\n } else if (gan_domain == 'scenery256') {\n domain = 'transient'\n }\n \n return `https://eurovis-2022.s3.amazonaws.com/served_data_index/${domain}_summary_${selected_direction}_${walk_method}_${projection_method}_${pooling_method}_${activation_layer}.json`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4604,"value":"available_directions = get_file_s3(available_direction_url)","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"file_attachment = get_file_s3(source_url)","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"dataraw = {\n // Convert to an array of items\n let arr = []\n \n let idx = 0\n for(var i in file_attachment) {\n // Limit number of data\n if (file_attachment[i].walk_id > num_instances - 1) {\n break\n }\n arr.push(JSON.parse(JSON.stringify(file_attachment[i])))\n\n let new_clf = JSON.parse(JSON.stringify(file_attachment[i]['classification']))\n \n let clf_interpolated = interpolate(interpolate(new_clf, 1), 1)\n let ma_applied = moving_average(clf_interpolated, 8)\n\n arr[idx]['running_id'] = idx\n arr[idx]['classification'] = ma_applied\n \n idx += 1\n }\n return arr\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"data_direction_group = {\n return d3.group(dataraw, (d, i) => d.generating)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1498,"value":"html`

The Nested and Flaatened

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"data_current_direction = {\n mutable attribute_view_clicked = 'false'\n return data_direction_group.get(selected_direction)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1481,"value":"data_current_direction_flattened = {\n let d = data_direction_group.get(selected_direction)\n let reconstructed_array = new Array()\n \n // Unfold\n for (var i in d) {\n let item = d[i]\n \n // steps\n for (var step in item.classification) {\n let newitem = {\n walk_id: item.walk_id,\n generating: item.generating,\n classifying: item.classifying,\n slope: parseFloat(item.slope),\n r2: parseFloat(item.r2),\n model: item.model,\n uuid: item.uuid,\n running_id: item.running_id\n }\n \n // Steps and scores\n newitem.step = parseInt(step)\n newitem.score = item.classification[step]\n \n // Reductions\n newitem.redux_0 = parseFloat(item.redux_0)\n newitem.redux_1 = parseFloat(item.redux_1)\n \n reconstructed_array.push(newitem)\n }\n }\n return reconstructed_array\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3608,"value":"data_current_direction_attribute_grouped = d3.group(data_current_direction, d => d.classifying)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1461,"value":"html`

Reorganized

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"scat_data_grouped = d3.group(data_current_direction_flattened, d => d.classifying)","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"sorted_index = {\n if (limit_summarization == 'true') {\n return d3.groupSort(data_current_direction_flattened, group => d3.mean(group, d => d.r2), d => d.classifying).reverse().slice(0, 10)\n } else {\n return d3.groupSort(data_current_direction_flattened, group => d3.mean(group, d => d.r2), d => d.classifying).reverse()\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"html`

Attached Data

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"data_current_direction_redux = {\n return data_current_direction_attribute_grouped.get(data_current_direction_attribute_grouped.keys().next().value)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1487,"value":"summarization_data = {\n let tmp = new Map()\n for (var i in sorted_index) {\n tmp.set(sorted_index[i], d3.group(data_current_direction, d => d.classifying).get(sorted_index[i]))\n }\n return tmp\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"html`\n\n

Derived Data

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1635,"value":"//histo_max_bucket = d3.max(histo_bin.flat(), d => d.length)\nhisto_max_bucket = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"num_steps = {\n return d3.max(data_current_direction_flattened, x => x.step) + 1\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"html`

Events

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3836,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3838,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4204,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3075,"value":"function redux_mouseover_evt() {\n if (mutable attribute_view_clicked == \"true\") {\n // Don't do anything\n d3.selectAll('.scatterplot').selectAll('circle')\n .classed('highlighted', false)\n .classed('chosen', false)\n .classed('chosen', false)\n } else {\n // Visual highlight\n let the_hovered = d3.select(this)\n .attr('stroke', color_fills.redux_highlight)\n .attr('stroke-width', strokes.redux_brushed)\n \n // Scatterplot highlight\n let walk_id = d3.select(this).data()[0].walk_id\n \n // Hightlight\n d3.selectAll('.scatterplot').selectAll('circle').filter(d => d.walk_id == walk_id)\n .classed('highlighted', true)\n .style('fill', color_fills.dot_highlight)\n .attr('r', circle_radii.large_mouseover)\n .raise()\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3076,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3071,"value":"function redux_mouseclick_evt() {\n let image_uuid = d3.select(this).data()[0].uuid\n mutable image_path = image_uuid + '.jpg'\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"html`

Brushing

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":2527,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2466,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":3292,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":4710,"value":"md`### Helper functions for updates`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":4685,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":32,"value":"html`\n

Imports

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"import {button, radio, slider, checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"import {drawdom,drawjoin} from '91007ee9d5fd152b'","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"html`

Helpers

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"viewof proxy = select({\n title: 'proxy',\n description: 'select CORS proxy if fetch fails',\n options: ['',\n 'https://eurovis-2022.herokuapp.com/',\n 'https://cors-anywhere.herokuapp.com/',\n 'https://observable-cors.glitch.me/',\n 'https://cors-proxy.htmldriven.com/?url=',\n 'https://cors-anywhere.herokuapp.com/', \n ],\n value: 'https://eurovis-2022.herokuapp.com/'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"function get_file_s3(url) {\n return fetch(proxy + url, {\n // https://observablehq.com/@randomfractals/fetch\n headers: {\n Accept: '*/*',\n 'Accept-Language': 'en-US,en;q=0.5',\n Referer: 'https://observablehq.com',\n },\n //credentials: 'include',\n cache: 'no-store',\n mode: 'cors',\n redirect: 'follow',\n}).then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n}).catch(error => {return error;})\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}