25:["$","title",null,{"children":"Client - Server | Juanpablo Heredia | 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:T4e7,create_shapplot = (shap_group) => { // create a border shap_group.append('rect') // set the width and height // fill none // stroke d3.hcl(0,0,50) // stroke-width 1 // create a midline shap_group.append('line') // set x1,x2,y1,y2 // fill none // stroke d3.hcl(0,0,50) // stroke-width 1 // create the barchart shap_group.selectAll("rect") // select all bars // enter the data explanations // append rect // class bar // x -> bar_setposition // y -> feature_name_scale // width -> bar_setWidth // heighth -> feature_name_scale // fill bar_colorMap // stroke d3.hcl(0,0,50) // fill-opacity 0.45 // stroke-width 1 shap_group.selectAll('text') .data(explanations) .enter() .append('text') .attr('x', shap_size + 3) .attr('y', d => feature_name_scale (d.feature_name)+feature_name_scale .bandwidth()*3/4) .attr('fill', 'black') .attr("font-size", "15px") .text(d => d.feature_name); shap_group.append('text').text('SHAP Values').attr('text-anchor', 'middle') .attr('x', (shap_size/2)).attr('y', (-22)).attr('fill', d3.hcl(0,0,40)) }4b:[{"id":"7ee2082d0a14259f8f4234008a39f2eaf3a4e7a7c16b59c52c73a61202898a1e95965203bc1ac9e18567a1f8c859b2ed6ca6e6b54154857af70ba5e744206b1f","href":"https://static.observableusercontent.com/files/7ee2082d0a14259f8f4234008a39f2eaf3a4e7a7c16b59c52c73a61202898a1e95965203bc1ac9e18567a1f8c859b2ed6ca6e6b54154857af70ba5e744206b1f","name":"ex1.png","type":"image/png","lastModified":1714655641148.155,"size":35522},{"id":"8b4a58d66e0feca57e01674ed311e3ff1f2b88e7d8b009fcd06e8be030175698cf6372beb4d7b76b4572a8436fa9dade17475febd17957c6a616ef84c444e739","href":"https://static.observableusercontent.com/files/8b4a58d66e0feca57e01674ed311e3ff1f2b88e7d8b009fcd06e8be030175698cf6372beb4d7b76b4572a8436fa9dade17475febd17957c6a616ef84c444e739","name":"ex2.png","type":"image/png","lastModified":1714655641148.155,"size":211868},{"id":"2d262043e129893931f26c827a0df1e54dcb2f6c476b56126ddcaa50ef7ef91358142832b2b467826911e3c4b2d505b1a7bab2a4649236dacf617fdd56572f37","href":"https://static.observableusercontent.com/files/2d262043e129893931f26c827a0df1e54dcb2f6c476b56126ddcaa50ef7ef91358142832b2b467826911e3c4b2d505b1a7bab2a4649236dacf617fdd56572f37","name":"ex3.png","type":"image/png","lastModified":1714655641148.155,"size":42844}] 29:{"id":"7c6ca0c4bacadfcd","slug":null,"title":"Client - Server","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-05-02T13:14:01.148Z","update_time":"$D2024-05-02T13:47:23.928Z","view_time":null,"first_public_time":"$D2024-05-02T14:36:23.302Z","has_unpublished_edits":null,"fork":{"id":"2d8afb073e14471e","slug":null,"title":"Client - Server (solution)","owner":{"id":"92cca1ff388b0b81","login":"juan1t0","name":"Juanpablo Heredia"}},"stars":0,"starred":false,"owner":{"type":"team","id":"92cca1ff388b0b81","login":"juan1t0","name":"Juanpablo Heredia","avatar_url":"https://avatars-next.observableusercontent.com/901601397748f40cf47f9150e0d1fbab022f9a3dcd39d10011e03ad75b9b3cce","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":383,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e25eb4db7488f9b3","login":"juan1t0","name":"Juanpablo Heredia","avatar_url":"https://avatars-next.observableusercontent.com/901601397748f40cf47f9150e0d1fbab022f9a3dcd39d10011e03ad75b9b3cce","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"e25eb4db7488f9b3","login":"juan1t0","name":"Juanpablo Heredia","avatar_url":"https://avatars-next.observableusercontent.com/901601397748f40cf47f9150e0d1fbab022f9a3dcd39d10011e03ad75b9b3cce","tier":null,"role":"editor"},{"type":"team","id":"92cca1ff388b0b81","login":"juan1t0","name":"Juanpablo Heredia","avatar_url":"https://avatars-next.observableusercontent.com/901601397748f40cf47f9150e0d1fbab022f9a3dcd39d10011e03ad75b9b3cce","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Client - Server","cells":[{"id":0,"value":"# Client - Server\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 (example)

\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://'+'127.0.0.1'+':'+host_port+'/pca/',\n dataType: 'json',\n contentType: 'application/json;charset=UTF-8',\n type: 'GET',\n success: function (data) {\n console.log(\"Sucess\", 'a');\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":"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\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 = d3.scaleLinear().domain(d3.extent(data, d => d.x)).range([0,scatter_size])","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 = d3.scaleLinear().domain(d3.extent(data, d => d.y)).range([0,scatter_size])","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 xpl = $.ajax({\n url: 'http://'+'127.0.0.1'+':'+host_port+'/explanation/',\n dataType: 'json',\n contentType: 'application/json;charset=UTF-8',\n // type ...\n // data selected_ids\n // success: ...\n // error: ...\n },\n error: function (jqXhr, textStatus, errorMessage) {\n console.log(errorMessage);\n }\n })\n return xpl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"max_feature_importance = d3.max(explanations,(d => Math.abs(d.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.scaleLinear().domain([0,feature_importance_domain]).range([0,shap_size/2])","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(feature_names, [0, scatter_size]);","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 shap_size/2 - feature_importance_scale(Math.abs(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_setWidth = function(d) { feature_importance_scale(Math.abs(d.importance));}\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":"$4a","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":false,"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":"$W4b","stdlib":"1"}} 24:null