2f: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)) }30:[{"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}] 2d:{"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"},{"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"},{"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"},{"id":96,"value":"nba_data = get_projection()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":105,"value":"scatter_x_scale = ","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"scatter_y_scale = ","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"## Scatterplot\n\n##

Exercise

\nYour result should look like:\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":90,"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 \n return svg_elem\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"create_scatterplot = (scatter_group) => {\n scatter_group.selectAll('circle')\n \n \n tweak_scatterplot(scatter_group)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"## Scatterplot Brushing\n\nWe may use D3's built-in `brush` as a way to create a 1D and 2D brushes.\n\nA 2D brush is a natural way to select points in a scatterplot. The brush needs to be added to a group that contains our scatterplot. Here we need to specify the extents over which the brush is defined, and then associate a listener with the brush for different types of events:\n\n* `on`: this is continuously called as the user is performing the brush.\n* `end`: called when the user has finished the brush (released the mouse button).\n* `start`: called when the user has started the brush, e.g. pressed mouse button (not shown).\n\n\n##

Exercise

\nYour result should look like:\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":129,"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 \n scatterplot_brush(main_plot.select('#scatterplot'))\n \n return svg_elem\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"scatterplot_brush = (scatterplot_group) => {\n let brush = d3.brush().extent([[0,0],[scatter_size,scatter_size]])\n\n let new_points = []\n \n brush.on('brush', () => {\n \n })\n .on('end', () => {\n scatterplot_group.selectAll('.selection,.handle').attr('style', 'display: none;')\n mutable selected_ids = new_points\n })\n \n scatterplot_group.call(brush)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"# Feature Explanation with SHAP\n\nSHAP, which stands for SHapley Additive exPlanations, is a unified framework used to explain the output of any machine learning model. \n\nIt leverages game theory to assign each feature of a prediction an importance value, providing insights into how the model arrives at its predictions. \n\nSHAP values quantify the impact of each feature on a particular prediction, allowing for a more interpretable understanding of complex machine learning models.\n\nNow, you will plot this features importance in a Barchart, first you should create it.\n\n## SHAP Scales \n\n##

Exercise

\nComplete the scales","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":218,"value":"explanations = get_explanation(selected_ids)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":185,"value":"max_feature_importance = ","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"feature_importance_domain = Math.ceil(max_feature_importance) + 0.5;","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":197,"value":"feature_name_scale = d3.scaleBand().domain(feature_names).range([ 0, shap_height ])","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":169,"value":"## SHAP-plot\n\n##

Exercise

\nYour result should look like:\n\n

","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"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"},{"id":79,"value":"# Global parameters and functions","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"host_name = \"localhost\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"host_port = \"8080\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"default_color = d3.hcl(320,40,50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"selected_color = d3.hcl(140,80,30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"mutable selected_ids = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"# Sizing","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":29,"value":"scatter_size = 410","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"shap_size = 170","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"shap_height = scatter_size","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"pad = 40","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"pc_pad = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"width = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"# Imports","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"import { jQuery as $ } from \"@ddspog/useful-libs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}