25:["$","title",null,{"children":"Client - Server | Studies Zuilho | 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:T471,scatterplot_brush = (scatterplot_group) => { let brush = d3.brush().extent([[0,0],[scatter_size,scatter_size]]) var new_points = [] //filter the brush brush.on('brush', () => { let rect_select = d3.event.selection; // set the min_x max_x min_y and max_y let min_x = scatter_x_scale.invert(rect_select[0][0]); let max_x = scatter_x_scale.invert(rect_select[1][0]); let min_y = scatter_y_scale.invert(rect_select[0][1]); let max_y = scatter_y_scale.invert(rect_select[1][1]); // creates a filter to brush let brushed_data = data.filter(d => { // return the filtered data return d.x >= min_x && d.x <= max_x && d.y >= min_y && d.y <= max_y; }); linked_updates(brushed_data, scatterplot_group) new_points = []; // array with selected points ids brushed_data.forEach((element, i) => { new_points.push(element.id) }) }) .on('end', () => { scatterplot_group.selectAll('.selection,.handle').attr('style', 'display: none;') // change the global variable selected_ids mutable selected_ids = new_points }) scatterplot_group.call(brush) }4b:T5e8,create_shapplot = (shap_group) => { // Create a border shap_group.append('rect') .attr('width', shap_size) .attr('height', shap_size) .attr('fill', 'none') .attr('stroke', d3.hcl(0, 0, 50)) .attr('stroke-width', 1); // Create a midline shap_group.append('line') .attr('x1', 0) .attr('x2', shap_size) .attr('y1', shap_size / 2) .attr('y2', shap_size / 2) .attr('fill', 'none') .attr('stroke', d3.hcl(0, 0, 50)) .attr('stroke-width', 1); // Create the barchart shap_group.selectAll(".bar") .data(explanations) .enter().append("rect") .attr("class", "bar") .attr("x", d => bar_setPosition(d)) .attr("y", d => feature_name_scale(d.feature_name)) .attr("width", d => bar_setWidth(d.value)) .attr("height", feature_name_scale.bandwidth()) .attr("fill", d => bar_colorMap(d.value)) .attr("stroke", d3.hcl(0, 0, 50)) .attr("fill-opacity", 0.45) .attr("stroke-width", 1); // Create text labels for feature names 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); // Add title 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)); } 4c:[{"id":"7ee2082d0a14259f8f4234008a39f2eaf3a4e7a7c16b59c52c73a61202898a1e95965203bc1ac9e18567a1f8c859b2ed6ca6e6b54154857af70ba5e744206b1f","href":"https://static.observableusercontent.com/files/7ee2082d0a14259f8f4234008a39f2eaf3a4e7a7c16b59c52c73a61202898a1e95965203bc1ac9e18567a1f8c859b2ed6ca6e6b54154857af70ba5e744206b1f","name":"ex1.png","type":"image/png","lastModified":1714660591092.374,"size":35522},{"id":"8b4a58d66e0feca57e01674ed311e3ff1f2b88e7d8b009fcd06e8be030175698cf6372beb4d7b76b4572a8436fa9dade17475febd17957c6a616ef84c444e739","href":"https://static.observableusercontent.com/files/8b4a58d66e0feca57e01674ed311e3ff1f2b88e7d8b009fcd06e8be030175698cf6372beb4d7b76b4572a8436fa9dade17475febd17957c6a616ef84c444e739","name":"ex2.png","type":"image/png","lastModified":1714660591092.374,"size":211868},{"id":"2d262043e129893931f26c827a0df1e54dcb2f6c476b56126ddcaa50ef7ef91358142832b2b467826911e3c4b2d505b1a7bab2a4649236dacf617fdd56572f37","href":"https://static.observableusercontent.com/files/2d262043e129893931f26c827a0df1e54dcb2f6c476b56126ddcaa50ef7ef91358142832b2b467826911e3c4b2d505b1a7bab2a4649236dacf617fdd56572f37","name":"ex3.png","type":"image/png","lastModified":1714660591092.374,"size":42844}] 29:{"id":"2112ccf4ac441168","slug":null,"title":"Client - Server","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-05-02T14:36:31.092Z","update_time":"$D2024-05-02T15:40:18.563Z","view_time":null,"first_public_time":"$D2024-05-02T14:36:31.092Z","has_unpublished_edits":null,"fork":{"id":"7c6ca0c4bacadfcd","slug":null,"title":"Client - Server","owner":{"id":"92cca1ff388b0b81","login":"juan1t0","name":"Juanpablo Heredia"}},"stars":0,"starred":false,"owner":{"type":"team","id":"16e56b6199b2d872","login":"zuilhoseestdados","name":"Studies Zuilho","avatar_url":"https://avatars-next.observableusercontent.com/976c07388bf4899aa6d4f76e3d77606da3f972a59ef8df0c23c8fd623055d089","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":412,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"64088843d1f829e5","login":"zuilhose","name":"Zuilho Segundo","avatar_url":"https://avatars-next.observableusercontent.com/8f4036fb71fb4ad93a8ea9aa559f64426d8600ec9c7dd0960696e556970dfd95","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"64088843d1f829e5","login":"zuilhose","name":"Zuilho Segundo","avatar_url":"https://avatars-next.observableusercontent.com/8f4036fb71fb4ad93a8ea9aa559f64426d8600ec9c7dd0960696e556970dfd95","tier":null,"role":"editor"},{"type":"team","id":"16e56b6199b2d872","login":"zuilhoseestdados","name":"Studies Zuilho","avatar_url":"https://avatars-next.observableusercontent.com/976c07388bf4899aa6d4f76e3d77606da3f972a59ef8df0c23c8fd623055d089","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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: 'POST',\n data: JSON.stringify(new_points_),\n success: function(response) {\n console.log('Explanation received:', response);\n },\n error: function(jqXhr, textStatus, errorMessage) {\n console.log('Error:', 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":"$4b","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":"$W4c","stdlib":"1"}} 24:null