25:["$","title",null,{"children":"Client - Server (solution) | 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:T42c,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; let min_x = scatter_x_scale.invert(rect_select[0][0]); let max_x = scatter_x_scale.invert(rect_select[1][0]); // do the same for the max and min for y 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 d.x >= min_x && d.x <= max_x && d.y>=min_y && d.y<=max_y; }); linked_updates(brushed_data, scatterplot_group) new_points = [] brushed_data.forEach((element,i)=>{ new_points.push(element.id) }) // save the selected points }) .on('end', () => { scatterplot_group.selectAll('.selection,.handle').attr('style', 'display: none;') mutable selected_ids = new_points // change the selected_ids }) scatterplot_group.call(brush) }4b:T70d,create_shapplot = (shap_group) => { shap_group.append('rect').attr('width', shap_size).attr('height', scatter_size) .attr('fill', 'none').attr('stroke', d3.hcl(0,0,50)).attr('stroke-width', 1) // create a midline shap_group.append('line') .attr('x1', shap_size/2) .attr('x2', shap_size/2) .attr('y1', 0) .attr('y2', scatter_size) .attr('fill', 'none').attr('stroke', d3.hcl(0,0,50)).attr('stroke-width', 1) shap_group.selectAll("rect") .data(explanations) .enter() .append("rect") .classed('bar',true) .attr("x", d=> bar_setPosition(d)) .attr("y", d => feature_name_scale(d.feature_name)) .attr("width", d => feature_importance_scale(Math.abs(d.importance)))//bar_setWidth(d)) .attr("height", feature_name_scale.bandwidth()) .attr("fill", d => bar_colorMap(d)) .attr("stroke",d3.hcl(0,0,50)) .attr("fill-opacity",0.45) .attr("stroke-width",1) // create the barchart // 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)) }4c:[{"id":"8b4a58d66e0feca57e01674ed311e3ff1f2b88e7d8b009fcd06e8be030175698cf6372beb4d7b76b4572a8436fa9dade17475febd17957c6a616ef84c444e739","href":"https://static.observableusercontent.com/files/8b4a58d66e0feca57e01674ed311e3ff1f2b88e7d8b009fcd06e8be030175698cf6372beb4d7b76b4572a8436fa9dade17475febd17957c6a616ef84c444e739","name":"ex2.png","type":"image/png","lastModified":1714651116181.714,"size":211868},{"id":"2d262043e129893931f26c827a0df1e54dcb2f6c476b56126ddcaa50ef7ef91358142832b2b467826911e3c4b2d505b1a7bab2a4649236dacf617fdd56572f37","href":"https://static.observableusercontent.com/files/2d262043e129893931f26c827a0df1e54dcb2f6c476b56126ddcaa50ef7ef91358142832b2b467826911e3c4b2d505b1a7bab2a4649236dacf617fdd56572f37","name":"ex3.png","type":"image/png","lastModified":1714651116181.714,"size":42844},{"id":"7ee2082d0a14259f8f4234008a39f2eaf3a4e7a7c16b59c52c73a61202898a1e95965203bc1ac9e18567a1f8c859b2ed6ca6e6b54154857af70ba5e744206b1f","href":"https://static.observableusercontent.com/files/7ee2082d0a14259f8f4234008a39f2eaf3a4e7a7c16b59c52c73a61202898a1e95965203bc1ac9e18567a1f8c859b2ed6ca6e6b54154857af70ba5e744206b1f","name":"ex1.png","type":"image/png","lastModified":1714651116181.714,"size":35522}] 29:{"id":"2d8afb073e14471e","slug":null,"title":"Client - Server (solution)","thumbnail":"75a766276ab352dcc5ad70ebd42d228ce6bbf7e0bb1b5d9b7c04519e200d8c12","access_level":"public","create_time":"$D2024-05-02T11:58:36.181Z","update_time":"$D2024-05-02T15:23:19.247Z","view_time":null,"first_public_time":"$D2024-05-02T15:39:22.552Z","has_unpublished_edits":null,"fork":true,"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":368,"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":"e4095f1b5eed5285","login":"e4095f1b5eed5285","name":"Dany Mauro Diaz Espino","avatar_url":"https://avatars-next.observableusercontent.com/c1e9942ffd836b6e407fd08befc5972274c60f7604b41ef728b0a171d03a2e7a","tier":null,"role":"editor"},{"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Client - Server (solution)","cells":[{"id":0,"value":"# Client - Server (solution)\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://'+'127.0.0.1'+':'+host_port+'/pca/',\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\", '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 the groups\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":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({ \"selected_ids\": selected_ids}),//, \"features\": type_features}), // data to submit\n success: function (data) {\n console.log(\"Sucess\", 'a');\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) {\n if(d.importance < 0) {\n return (feature_importance_scale(Math.abs(d.importance)))\n }else {\n return ( feature_importance_scale(Math.abs(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":"$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