2d:null 2e:["$","title",null,{"children":"Algoritmo de reconocimiento | Axel Mantalian | Observable"}] 33:T2ded,boxPlotChart = { reset; // set the dimensions and margins of the graph const margin = {top: 20, right: 20, bottom: 40, left: 180, middle:20}, y_axis_label_width = 130, total_width = width - margin.left - margin.right, left_proportion = 0.8, left_width = (total_width-margin.middle)*left_proportion, right_width = (total_width-margin.middle)*(1-left_proportion), height = 600 - margin.top - margin.bottom; // fonts & colours const leftColour = function(d){return(d.gap[2]<0 ? "red" : "#084C61")} const circleColour = function(d){return(d.gap[2]<0 ? "red" : "#DB3A34")} const whiskerWidth = 1.5 const rightProtectedColour = "#DB3A34" //const rightNonProtectedColour = "#3e86eb" const fontStyle = "12px -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" const fontStyleEjes = "12px -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" const formatPercentage = function(p){return(d3.format(".2")(p))} const lhs_n_x_ticks = 6 const rhs_n_x_ticks = 3 // Sort if(selector_ordenamiento == 'Mediana'){ groups.sort((a, b) => b.gap[1] - a.gap[1]) }else{ groups.sort((a, b) => b.size[0] - a.size[0]) } // Configure mouseover text const hoverText = function(d){return("" + d.name + "
Mediana score: " + formatPercentage(d.gap[1]) + "
Scores entre " + formatPercentage(d.gap[0]) + " and " + formatPercentage(d.gap[2]) + " " + (d.gap[2]<0 ? "[Significant]" : "") + "
" + d.size[0] + " detecciones, " )}//+ d.size[1]+ " unprotected" // Create the Tooltip Div const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("background", "#fff") .text("") .style("padding", "3px") .style("border", "0.5px solid black") .style("font", fontStyle); // Create SVG Container const svg = d3 .create("svg") .attr("width", total_width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font", fontStyle); // LHS/RHS: Create y scaler const y = d3.scaleBand() .range([ 0, height ]) .domain(groups.map(d=> d.name)) .paddingInner(1) .paddingOuter(1) // LHS/RHS: Get y box height const boxHeight = y.step()/2; // --------- // LHS // --------- // LHS: Create LHS Container const left = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // LHS: Create x scaler const x_left = d3.scaleLinear() //.domain([-0.25,0.25]) .domain([d3.min(groups.map(x=>x.gap[0]))*1.0,d3.max(groups.map(x=>x.gap[2]))*1.0]) .range([0, left_width]) // LHS (+RHS): Create alternating colour back boxes left.selectAll("backBoxes") .data(groups) .enter() .append("rect") .attr("x", -y_axis_label_width) .attr("y", function(d){return(y(d.name)-y.step()/2)}) .attr("height", y.step()) .attr("width", y_axis_label_width+left_width+margin.middle+right_width) //.attr("stroke", rightProtectedColour) .style("fill", function(d, i){return((i % 2) ? "white" : "#eee")}) .on("mouseover", function(d){ tooltip.html(hoverText(d)); return tooltip.style("visibility", "visible");}) .on("mousemove", function(){ return tooltip.style("top", (d3.event.pageY-20)+"px").style("left",(d3.event.pageX+10)+"px");}) .on("mouseout", function(){return tooltip.style("visibility", "hidden")}) // LHS: Add x axis x 2 const lhs_x_axis = d3.axisBottom(x_left).ticks(lhs_n_x_ticks).tickSize(0).tickFormat(d3.format(".0")); const lhs_x_axis_top = d3.axisTop(x_left).ticks(lhs_n_x_ticks).tickSize(0).tickFormat(d3.format(".0")); left.append("g") .attr("transform", "translate(0," + height + ")") .call(lhs_x_axis).style("font", fontStyle).select(".domain").remove() left.append("g") .attr("transform", "translate(0," + 0 + ")") .call(lhs_x_axis_top).style("font", fontStyle).select(".domain").remove() // Add LHS Y axis const lhs_y_axis = left.append("g").call(d3.axisLeft(y).tickSize(0)); lhs_y_axis.selectAll("text") .attr("x", -y_axis_label_width+5) .style("text-anchor", "start") .style("font", fontStyle) lhs_y_axis.select(".domain").remove() // Add LHS X axis label left.append("text") .attr("x", left_width /2 ) .attr("y", height + margin.top + (margin.bottom/2) ) .style("text-anchor", "middle") .style("font", fontStyleEjes) .style("font-weight","bold") .text("Score"); // Add LHS y axis label (column header) left.append("text") .attr("x", -y_axis_label_width+5) .attr("y", 0) .style("text-anchor", "start") .style("font", fontStyle) .text("Objeto").style("font-weight","bold"); // Add LHS Y axis label //left.append("text") // .style("text-anchor", "middle") // .style("font", fontStyle) // .attr("transform", "translate(" + (-margin.left*3/4) + "," + (height/2) + ")rotate(-90)") // .text("Job Group"); // LHS: Add vertical lines left .selectAll("lhs_tick_lines") .data(lhs_x_axis.scale().ticks(lhs_n_x_ticks)) .enter() .append("line") .attr("y1", 0) .attr("y2", height) .attr("x1", function(d){return x_left(d)}) .attr("x2", function(d){return x_left(d)}) .attr("stroke", "#ccc") .style("stroke-width", 0.5) // LHS: Add bolder vertical lines left .selectAll("bold_lhs_tick_lines") .data([0, x_left(0)]) .enter() .append("line") .attr("y1", 0) .attr("y2", height) .attr("x1", function(d){return d}) .attr("x2", function(d){return d}) .attr("stroke", "#999") .style("stroke-width", 0.5) // LHS: Add horizontal whisker lines left.selectAll("whiskerLines") .data(groups) .enter() .append("line") .attr("y1", function(d){return(y(d.name))}) .attr("y2", function(d){return(y(d.name))}) // Below was a version to stop the whiskers when they went outside the axis range // reverted as I'm autoscaling the axis right now //.attr("x1", function(d){return(x_left(d3.max([d.gap[0], x_left.domain()[0]])))}) //.attr("x2", function(d){return(x_left(d3.min([d.gap[2], x_left.domain()[1]])))}) .attr("x1", function(d){return(x_left(d.gap[1]))}) .attr("x2", function(d){return(x_left(d.gap[1]))}) .attr("stroke", leftColour) .style("stroke-width", whiskerWidth) .transition() .duration(500) .delay(250) .attr("x1", function(d){return(x_left(d.gap[0]))}) .attr("x2", function(d){return(x_left(d.gap[2]))}) // LHS: Add circles var circles = left.selectAll("medianCircles") .data(groups) .enter() .append("circle") .attr("cy", function(d){return(y(d.name))}) .attr("cx", function(d){return(x_left(d.gap[1]))}) .style("stroke", circleColour) .style("fill", circleColour) .attr("r", 0) .transition() .duration(500) .attr("r", boxHeight/3) // LHS: Add lower vertical lines left.selectAll("lowLines") .data(groups) .enter() .append("line") .attr("y1", function(d){return(y(d.name)) }) .attr("y2", function(d){return(y(d.name)) }) .attr("x1", function(d){return(x_left(d.gap[0]))}) .attr("x2", function(d){return(x_left(d.gap[0]))}) .attr("stroke", leftColour) .style("stroke-width", whiskerWidth) .transition() .duration(250) .delay(700) .attr("y1", function(d){return(y(d.name)-boxHeight/2) }) .attr("y2", function(d){return(y(d.name)+boxHeight/2) }) // LHS: Add upper vertical lines left.selectAll("highLines") .data(groups) .enter() .append("line") .attr("y1", function(d){return(y(d.name)) }) .attr("y2", function(d){return(y(d.name)) }) .attr("x1", function(d){return(x_left(d.gap[2]))}) .attr("x2", function(d){return(x_left(d.gap[2]))}) .attr("stroke", leftColour) .style("stroke-width", whiskerWidth) .transition() .duration(250) .delay(700) .attr("y1", function(d){return(y(d.name)-boxHeight/2) }) .attr("y2", function(d){return(y(d.name)+boxHeight/2) }) // --------- // RHS // --------- // RHS: Create RHS Container const right = svg.append("g") .attr("transform", "translate(" + (margin.left+left_width+margin.middle) + "," + margin.top + ")"); // RHS: Create x-scaler const x_right = d3.scaleLinear() .domain([0,550]) //.domain([0,d3.max(groups.map(x=>(x.size[0]+x.size[1])))*0.8]) .range([1, right_width]) // RHS: Add x axis const rhs_x_axis = d3.axisBottom(x_right).ticks(rhs_n_x_ticks).tickSize(0); const rhs_x_axis_top = d3.axisTop(x_right).ticks(rhs_n_x_ticks).tickSize(0); right.append("g") .attr("transform", "translate(0," + height + ")") .call(rhs_x_axis).style("font", fontStyle).select(".domain").remove() right.append("g") .attr("transform", "translate(0," + 0 + ")") .call(rhs_x_axis_top).style("font", fontStyle).select(".domain").remove() // RHS: Add y-axis const rhs_y_axis = left.append("g").call(d3.axisLeft(y).tickSize(0)); rhs_y_axis.selectAll("text").remove() rhs_y_axis.select(".domain").remove() // RHS: Add X-axis label right.append("text") .attr("x", right_width /2 ) .attr("y", height + margin.top + (margin.bottom/2) ) .style("text-anchor", "middle") .style("font", fontStyleEjes) .style("font-weight","bold") .text("Cantidad de detecciones"); // RHS: Add vertical lines right .selectAll("rhs_tick_lines") .data(rhs_x_axis.scale().ticks(rhs_n_x_ticks)) .enter() .append("line") .attr("y1", 0) .attr("y2", height) .attr("x1", function(d){return x_right(d)}) .attr("x2", function(d){return x_right(d)}) .attr("stroke", "#ccc") .style("stroke-width", 0.5) // RHS: Add zero line right .selectAll("rhs_bold_tick_lines") .data([0, right_width]) .enter() .append("line") .attr("y1", 0) .attr("y2", height) .attr("x1", function(d){return d}) .attr("x2", function(d){return d}) .attr("stroke", "#999") .style("stroke-width", 0.5) // RHS: Add 'protected count' bars right.selectAll("protectedBoxes") .data(groups) .enter() .append("rect") .attr("x", function(d){return(x_right(0))}) .attr("y", function(d){return(y(d.name)-boxHeight/2)}) .attr("height", boxHeight) .attr("width", 0) .attr("stroke", rightProtectedColour) .style("fill", rightProtectedColour) .transition() .duration(d=>(d.size[0]/(d.size[0]+d.size[1]))) .ease(t=>t) // linear easing looks better on the bars .attr("width", function(d){return(x_right(d.size[0]))}) // RHS: Add 'non-protected count' bars //right.selectAll("nonProtectedBoxes") // .data(groups) // .enter() // .append("rect") // .attr("x", function(d){return(x_right(d.size[0]))}) // .attr("y", function(d){return(y(d.name)-boxHeight/2)}) // .attr("height", boxHeight) // .attr("width", 0) // .attr("stroke", rightNonProtectedColour) // .style("fill", rightNonProtectedColour) // .transition() // .delay(d=>750*(d.size[0]/(d.size[0]+d.size[1]))) // .duration(d=>750*(d.size[1]/(d.size[0]+d.size[1]))) // .ease(t=>t) // linear easing looks better on the bars // .attr("width", function(d){return(x_right(d.size[1]))}) // yield svg.node(); }34:[{"id":"1d87277b4413391c2187a86178b2a7522194a0b50c12200bb63029edd81f1bf3a1a2de421f5371eb00e9d1c29cb9ad4b666aefea5946df58e8c20fc9d14ff11a","href":"https://static.observableusercontent.com/files/1d87277b4413391c2187a86178b2a7522194a0b50c12200bb63029edd81f1bf3a1a2de421f5371eb00e9d1c29cb9ad4b666aefea5946df58e8c20fc9d14ff11a","name":"datos_vast_challenge@1.json","type":"application/json","lastModified":1595887960794.076,"size":1571}] 31:{"id":"1a94c51a36e2d86a","slug":"algoritmo-de-reconocimiento","title":"Algoritmo de reconocimiento","thumbnail":"eb2768825f5c369172734327614decfa326289cb29602d659b259feb640d9c22","access_level":"public","create_time":"$D2020-07-27T22:12:40.794Z","update_time":"$D2020-07-27T23:27:39.425Z","view_time":null,"first_public_time":"$D2020-07-27T22:12:49.611Z","has_unpublished_edits":null,"fork":{"id":"d340148bf0789d20","slug":"gap-plot-new-style/2","title":"Algoritmo de reconocimiento","owner":{"id":"9166d431dc9773a4","login":"amantalian","name":"Axel Mantalian"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9166d431dc9773a4","login":"amantalian","name":"Axel Mantalian","avatar_url":"https://avatars-next.observableusercontent.com/e9d0aef68b8e05df79130d9d266806547e04f7fbd82cdf1be58087f9a91bbb34","tier":"starter_2024"},"version":912,"publish_version":912,"role":null,"authored":false,"authors":[{"type":"individual","id":"90be2a40d323979f","login":"amantalian","name":"Axel Mantalian","avatar_url":"https://avatars-next.observableusercontent.com/e9d0aef68b8e05df79130d9d266806547e04f7fbd82cdf1be58087f9a91bbb34","tier":null}],"members":[{"type":"individual","id":"90be2a40d323979f","login":"amantalian","name":"Axel Mantalian","avatar_url":"https://avatars-next.observableusercontent.com/e9d0aef68b8e05df79130d9d266806547e04f7fbd82cdf1be58087f9a91bbb34","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Algoritmo de reconocimiento","cells":[{"id":0,"value":"md`# Algoritmo de reconocimiento`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"viewof reset = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"md`#### Orden`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"viewof selector_ordenamiento = select(['Mediana','Cantidad de detecciones'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"md`#### Carga de datos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"data_text = FileAttachment(\"datos_vast_challenge@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"data = Object.values(data_text)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"groups = data.map(function(d){\n return ({name: d.name,\n gap:d.gap.split(',',).map(Number),\n size:d.size.split(',',).map(Number)\n })\n} )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"