25:["$","title",null,{"children":"Explainability with SHAP - Lab | Visual Data Science Lab | Observable"}] 49:T5ef,tweak_scatterplot = (scatter_group) => { // bound our plot with a rectangle scatter_group.append('rect').attr('width', scatter_size).attr('height', scatter_size) .attr('fill', 'none').attr('stroke', d3.hcl(0,0,50)).attr('stroke-width', 1) scatter_group.append('g').attr('id', 'xaxis').attr('transform', 'translate(0,0)').call(d3.axisTop(scatter_x_scale).ticks(5)) scatter_group.append('g').attr('id', 'yaxis').call(d3.axisLeft(scatter_y_scale).ticks(5)) // get rid of the domains for the x and y axes scatter_group.selectAll('#xaxis,#yaxis').select('.domain').remove() // tone down the colors scatter_group.selectAll('#xaxis,#yaxis').selectAll('text').attr('fill', d3.hcl(0,0,50)) scatter_group.selectAll('#xaxis,#yaxis').selectAll('line').attr('stroke', d3.hcl(0,0,50)) // provide guides for our ticks scatter_group.select('#xaxis').selectAll('.tick').append('line') .attr('y1', scatter_size).attr('y2', 0) .attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5) scatter_group.select('#yaxis').selectAll('.tick').append('line') .attr('x1', 0).attr('x2', scatter_size) .attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5) scatter_group.append('text').text('X').attr('text-anchor', 'middle') .attr('x', (.5*scatter_size)).attr('y', (-22)).attr('fill', d3.hcl(0,0,40)) scatter_group.append('text').text('Y').attr('text-anchor', 'middle') .attr('transform', 'translate('+(-22)+','+(.5*scatter_size)+') rotate(270)').attr('fill', d3.hcl(0,0,40)) }4a:[{"id":"7ee2082d0a14259f8f4234008a39f2eaf3a4e7a7c16b59c52c73a61202898a1e95965203bc1ac9e18567a1f8c859b2ed6ca6e6b54154857af70ba5e744206b1f","href":"https://static.observableusercontent.com/files/7ee2082d0a14259f8f4234008a39f2eaf3a4e7a7c16b59c52c73a61202898a1e95965203bc1ac9e18567a1f8c859b2ed6ca6e6b54154857af70ba5e744206b1f","name":"ex1.png","type":"image/png","lastModified":1747756753317.633,"size":35522},{"id":"8b4a58d66e0feca57e01674ed311e3ff1f2b88e7d8b009fcd06e8be030175698cf6372beb4d7b76b4572a8436fa9dade17475febd17957c6a616ef84c444e739","href":"https://static.observableusercontent.com/files/8b4a58d66e0feca57e01674ed311e3ff1f2b88e7d8b009fcd06e8be030175698cf6372beb4d7b76b4572a8436fa9dade17475febd17957c6a616ef84c444e739","name":"ex2.png","type":"image/png","lastModified":1747756753317.633,"size":211868},{"id":"2d262043e129893931f26c827a0df1e54dcb2f6c476b56126ddcaa50ef7ef91358142832b2b467826911e3c4b2d505b1a7bab2a4649236dacf617fdd56572f37","href":"https://static.observableusercontent.com/files/2d262043e129893931f26c827a0df1e54dcb2f6c476b56126ddcaa50ef7ef91358142832b2b467826911e3c4b2d505b1a7bab2a4649236dacf617fdd56572f37","name":"ex3.png","type":"image/png","lastModified":1747756753317.633,"size":42844}] 29:{"id":"4f80bad08ccdb685","slug":null,"title":"Explainability with SHAP - Lab","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"unlisted","create_time":"$D2025-05-20T15:59:13.317Z","update_time":"$D2025-05-20T16:02:03.159Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"c57bf72d2971f116","slug":null,"title":"Explainability with SHAP - Lab (sol)","owner":{"id":"38bd4af71ac0acf4","login":"visualdslab","name":"Visual Data Science Lab"}},"stars":0,"starred":false,"owner":{"type":"team","id":"38bd4af71ac0acf4","login":"visualdslab","name":"Visual Data Science Lab","avatar_url":"https://avatars-next.observableusercontent.com/6d1f64ca9c8b06e310322f4ec43e8f99e9c60d95bea7013cb842ce2df3bde2cb","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":297,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c41db32d7d161def","login":"fmorenovr","name":"Felipe Moreno","avatar_url":"https://avatars-next.observableusercontent.com/5cbdced82c4f54b2283ccd380d8b647a53e82f1845da264fdd83624fa1a4aedb","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c41db32d7d161def","login":"fmorenovr","name":"Felipe Moreno","avatar_url":"https://avatars-next.observableusercontent.com/5cbdced82c4f54b2283ccd380d8b647a53e82f1845da264fdd83624fa1a4aedb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Explainability with SHAP - Lab","cells":[{"id":0,"value":"# Explainability with SHAP - Lab\n\nIn this document, we will start learning how to interact observable and d3-animation with a backend service.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"# Data\n\nOur data is a simple make_reggression() function.\n\n##

Exercise

\n\nCreate a function to obtain data from backend service.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"function get_projection(){\n var pca_data = $.ajax({\n url: 'http://'+host_name+':'+host_port+'/umap/',\n dataType: 'json',\n contentType: 'application/json;charset=UTF-8',\n type: 'GET',\n // data: JSON.stringify({ \"selected_ids\": proj_points, \"features\": type_features}), // data to submit\n success: function (data) {\n console.log(\"Sucess\", data);\n },\n error: function (jqXhr, textStatus, errorMessage) {\n console.log(errorMessage);\n }\n })\n return pca_data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"nba_data = get_projection()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"# Spatial Layout\n\nWe will have two main views:\n\n* A scatterplot corresponding to the UMAp projection.\n* A Barchar with the corresponding SHAP values.\n\nHere we create a group element for each view, so that we can work in separate local coordinate systems.\n\n##

Exercise

\n\nCreate your spatial layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"create_groups = (main_plot) => {\n let scatterplot_g = main_plot.append('g').attr('id', 'scatterplot')\n let shap_g = main_plot.append('g').attr('id', 'shapplot')\n .attr('transform', 'translate('+(scatter_size+2*pc_pad)+',0)')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"{\n let svg_elem = DOM.svg(width,height)\n let svg_selection = d3.select(svg_elem)\n let main_plot = svg_selection.append('g').attr('transform', 'translate('+pad+','+pad+')')\n create_groups(main_plot)\n return svg_elem\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"# Scatterplot\n\nOur scatterplot is rather straightforward.\n\nHowever, there is one addition made here. Our data join is no longer called with a single argument, but two arguments:\n\n* The first argument is our data array.\n* The second argument is a function. This function will be evaluated on _each item in our array_, and will associate each item with a **unique key**. This key will be the basis for how data bound to elements (in the selection) will be _matched_ with the data specified in the join. So, rather than matching based on item order, we now match based on a specified key, enabling for much more flexibility in how we perform data joins.\n\n## Scatterplot Scales\n\n##

Exercise

\n\nComplete the scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"scatter_x_scale = ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"scatter_y_scale = ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"## Scatterplot\n\n##

Exercise

\nYour result should look like:\n\n

Exercise

\nYour result should look like:\n\n

Exercise

\nComplete the scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":215,"value":"function get_explanation(new_points_){\n var pca_data = $.ajax({\n url: 'http://'+host_name+':'+host_port+'/explanation/',\n dataType: 'json',\n contentType: 'application/json;charset=UTF-8',\n type: 'POST',\n data: JSON.stringify({ \"selected_ids\": new_points_}), // data to submit\n success: function (data) {\n console.log(\"Sucess\");\n },\n error: function (jqXhr, textStatus, errorMessage) {\n console.log(errorMessage);\n }\n })\n return pca_data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"explanations = get_explanation(selected_ids)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"feature_names = {\n let all_scales = []\n explanations.forEach((element,i) => {\n all_scales.push(element.feature_name)\n })\n return all_scales\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"max_feature_importance = ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"feature_importance_domain = Math.ceil(max_feature_importance) + 0.5;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"// feature_importance_scale = d3.scaleDiverging().domain([-feature_importance_domain, feature_importance_domain]).range([importance_plot_width,0])\n\nfeature_importance_scale = ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"feature_name_scale = d3.scaleBand().domain(feature_names).range([ 0, shap_height ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"bar_setPosition = function(d) {\n if(d.importance > 0){\n return feature_importance_scale(d.importance) \n }else {\n return shap_size/2\n } \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"bar_setHeight = function(d) {\n if(d.importance > 0) {\n return (shap_size/2-feature_importance_scale(d.importance) )\n }else {\n return ( feature_importance_scale(d.importance)-shap_size/2 )\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"bar_colorMap = function(d) {\n if(d.importance > 0) {\n return \"blue\"\n }else {\n return \"red\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"## SHAP-plot\n\n##

Exercise

\nYour result should look like:\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":221,"value":"{\n let svg_elem = DOM.svg(width,height)\n let svg_selection = d3.select(svg_elem)\n let main_plot = svg_selection.append('g').attr('transform', 'translate('+pad+','+pad+')')\n create_groups(main_plot)\n \n create_scatterplot(main_plot.select('#scatterplot'))\n create_shapplot(main_plot.select('#shapplot'))\n \n scatterplot_brush(main_plot.select('#scatterplot'))\n \n return svg_elem\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"create_shapplot = (shap_group) => {\n shap_group.append('rect')\n .attr('width', shap_size).attr('height', shap_height)\n .attr('fill', 'none').attr('stroke', d3.hcl(0,0,50)).attr('stroke-width', 1)\n\n \n \n \n \n shap_group.selectAll('text')\n .data(explanations)\n .enter()\n .append('text')\n .attr('x', shap_size + 3)\n .attr('y', d => feature_name_scale (d.feature_name)+feature_name_scale .bandwidth()*3/4)\n .attr('fill', 'black')\n .attr(\"font-size\", \"15px\")\n .text(d => d.feature_name);\n\n shap_group.append('text').text('SHAP Values').attr('text-anchor', 'middle')\n .attr('x', (shap_size/2)).attr('y', (-22)).attr('fill', d3.hcl(0,0,40))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"# Final interactions\n\nNow, we will complete the interactions between the scatterplot and the feature explanations using brush to send data to backend and the respectives values to update the barchart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"{\n let svg_elem = DOM.svg(width,height)\n let svg_selection = d3.select(svg_elem)\n let main_plot = svg_selection.append('g').attr('transform', 'translate('+pad+','+pad+')')\n create_groups(main_plot)\n \n create_scatterplot(main_plot.select('#scatterplot'))\n create_shapplot(main_plot.select('#shapplot'))\n \n scatterplot_brush(main_plot.select('#scatterplot'))\n \n return svg_elem\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"# Global parameters and functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"host_name = \"localhost\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"host_port = \"8080\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"default_color = d3.hcl(320,40,50)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"selected_color = d3.hcl(140,80,30)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"mutable selected_ids = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"# Sizing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"linked_updates = (selected_data, scatterplot_group, shap_group) => {\n let scatterplot_update = scatterplot_group\n .selectAll('circle') // all circles\n .data(selected_data, d => d.id) // just those circles that match with selected data\n \n scatterplot_update.attr('fill', selected_color).raise()\n scatterplot_update.exit().attr('fill', default_color)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"scatter_size = 410","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"shap_size = 170","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"shap_height = scatter_size","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"pad = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"pc_pad = 30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"width = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"# Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"import { jQuery as $ } from \"@ddspog/useful-libs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null