2b:null 2c:["$","title",null,{"children":"Now | Ben Zipperer | Observable"}] 31:T4523,boxPlotChart = { reset; // set the dimensions and margins of the graph const n_jobgroups = data.length; function stringWidth(string, fontSize = 10) { const widths = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.2796875,0.2765625,0.3546875,0.5546875,0.5546875,0.8890625,0.665625,0.190625,0.3328125,0.3328125,0.3890625,0.5828125,0.2765625,0.3328125,0.2765625,0.3015625,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.2765625,0.2765625,0.584375,0.5828125,0.584375,0.5546875,1.0140625,0.665625,0.665625,0.721875,0.721875,0.665625,0.609375,0.7765625,0.721875,0.2765625,0.5,0.665625,0.5546875,0.8328125,0.721875,0.7765625,0.665625,0.7765625,0.721875,0.665625,0.609375,0.721875,0.665625,0.94375,0.665625,0.665625,0.609375,0.2765625,0.3546875,0.2765625,0.4765625,0.5546875,0.3328125,0.5546875,0.5546875,0.5,0.5546875,0.5546875,0.2765625,0.5546875,0.5546875,0.221875,0.240625,0.5,0.221875,0.8328125,0.5546875,0.5546875,0.5546875,0.5546875,0.3328125,0.5,0.2765625,0.5546875,0.5,0.721875,0.5,0.5,0.5,0.3546875,0.259375,0.353125,0.5890625] const avg = 0.5279276315789471 return string .split('') .map(c => c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg) .reduce((cur, acc) => acc + cur) * fontSize } var longest_jobgroup_name = stringWidth(data.reduce(function (a, b) { return stringWidth(a.name, 12) > stringWidth(b.name, 12) ? a : b; }).name, 12); const width = (window.innerWidth), height = 40*n_jobgroups; const y_axis_label_width = (longest_jobgroup_name + 20), margin = {top: 50, right: 40, bottom: 60, left: (y_axis_label_width+20), middle:20}, total_width = width - margin.left - margin.right, left_proportion = 0.6, left_width = (total_width-margin.middle)*left_proportion, right_width = (total_width-margin.middle)*(1-left_proportion), inner_height = height - margin.top - margin.bottom; // fonts & colours const whiskerColour = function(upper){return(upper<0 ? "red" : "#3e86eb")} const circleColour = function(upper){return(upper<0 ? "red" : "#8c2ebf")} const whiskerWidth = 1 const rightProtectedColour = "#8c2ebf" const rightNonProtectedColour = "#3e86eb" const fontStyle = "12px Roboto, sans-serif" const formatPercentage = function(p){return(d3.format(".1%")(p))} const lhs_n_x_ticks = 5 const rhs_n_x_ticks = 5 // Configure mouseover text const hoverText = function(d){return("" + d.name + "
Gap of " + formatPercentage(d.gap[1]) + "
95% CI between " + formatPercentage(d.gap[0]) + " and " + formatPercentage(d.gap[2]) + " " + (d.gap[2]<0 ? "[Significant]" : "") + "
" + d.size[0] + " protected, " + 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); function wrap(text, xwidth) { text.each(function() { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems x = text.attr("x"), y = text.attr("y"), dy = 0, tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); console.log(tspan.node().getComputedTextLength()) if (tspan.node().getComputedTextLength() > xwidth) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); } } }); } // Create SVG Container const svg = d3 .create("svg") .attr("width", total_width + margin.left + margin.right) .attr("height", inner_height + margin.top + margin.bottom) .style("font", fontStyle); // Buttons: Create buttons container const buttons = svg.append("g") .attr("transform", "translate(" + (margin.left-y_axis_label_width+5) + "," + (margin.top-40) + ")"); buttons .append("text") .attr("x", 0) .attr("y", 0) .style("text-anchor", "start") .style("alignment-baseline", "middle") .style("font-weight","bold") .text("Showing:"); const initial_button = buttons .append("circle") .attr("cx", 65) .attr("cy", 0) .attr("r", 5) .attr("stroke", "grey") .style("fill", "white") const initial_text = buttons .append("text") .attr("x", 75) .attr("y", 0) .style("text-anchor", "start") .style("alignment-baseline", "middle") .style("cursor", "pointer") .text("Initial"); const adjusted_button = buttons .append("circle") .attr("cx", 120) .attr("cy", 0) .attr("r", 5) .attr("stroke", "grey") .style("fill", "grey") const adjusted_text = buttons .append("text") .attr("x", 130 ) .attr("y", 0) .style("text-anchor", "start") .style("alignment-baseline", "middle") .style("cursor", "pointer") .text("Adjusted"); // transition const t = svg.transition().duration(2000); // LHS/RHS: Create y scaler const y = d3.scaleBand() .range([ 0, inner_height ]) .domain(data.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([ d3.min(data.map(x=>d3.min([x.gap[0],x.initial_gap[0]])))*1.1, d3.max(data.map(x=>d3.max([x.gap[2],x.initial_gap[2]]))) ]) .range([0, left_width]) // LHS (+RHS): Create alternating colour back boxes left.selectAll("backBoxes") .data(data) .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) .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") .style("font", fontStyle) .attr("transform", "translate(0," + inner_height + ")") .call(lhs_x_axis).select(".domain").remove() left.append("g") .style("font", fontStyle) .attr("transform", "translate(0," + 0 + ")") .call(lhs_x_axis_top).select(".domain").remove() // Add LHS Y axis const lhs_y_axis = left.append("g").style("font", fontStyle).call(d3.axisLeft(y).tickSize(0)); lhs_y_axis.selectAll("text") .attr("x", -y_axis_label_width+5) .style("text-anchor", "start"); lhs_y_axis.selectAll(".tick text").call(wrap, 50); lhs_y_axis.select(".domain").remove() // Add LHS X axis label left.append("text") .attr("x", left_width /2 ) .attr("y", inner_height + margin.top -10 ) .style("text-anchor", "middle") .style("font-weight","bold") .text("Gap Size"); // 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-weight","bold") .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", inner_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", inner_height) .attr("x1", function(d){return d}) .attr("x2", function(d){return d}) .attr("stroke", "#999") .style("stroke-width", 0.5) // Show the median function draw_gaps(gaptype) { // LHS: Add horizontal whisker lines left.selectAll(".whisker") .data(data, d=>d.name) .join( enter => enter.append("line") .attr("y1", function(d){return(y(d.name))}) .attr("class", "whisker") .attr("y2", function(d){return(y(d.name))}) .attr("x1", function(d){return(x_left(d[gaptype][1]))}) .attr("x2", function(d){return(x_left(d[gaptype][1]))}) .attr("stroke", function(d){return(whiskerColour(d[gaptype][2]))}) .style("stroke-width", whiskerWidth) .call(enter => enter.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]))})), update => update .call(update => update.transition(t) .attr("x1", function(d){return(x_left(d[gaptype][0]))}) .attr("x2", function(d){return(x_left(d[gaptype][2]))}) .attr("stroke", function(d){return(whiskerColour(d[gaptype][2]))})) ) // LHS: Add circles left.selectAll("circle") .data(data, d=>d.name) .join( enter => enter.append("circle") .attr("cy", function(d){return(y(d.name))}) .attr("cx", function(d){return(x_left(d[gaptype][1]))}) .attr("stroke", function(d){return(circleColour(d[gaptype][2]))}) .attr("fill", function(d){return(circleColour(d[gaptype][2]))}) .attr("r", 0) .call(enter => enter.transition().duration(500) .attr("r", boxHeight/3)), update => update .call(update => update.transition(t) .attr("cx", d => x_left(d[gaptype][1])) .attr("stroke", function(d){return(circleColour(d[gaptype][2]))}) .attr("fill", function(d){return(circleColour(d[gaptype][2]))})) ) // LHS: Add lower vertical lines left.selectAll(".lowLines") .data(data, d=>d.name) .join( enter=>enter.append("line") .attr("class", "lowLines") .attr("y1", function(d){return(y(d.name)) }) .attr("y2", function(d){return(y(d.name)) }) .attr("x1", function(d){return(x_left(d[gaptype][0]))}) .attr("x2", function(d){return(x_left(d[gaptype][0]))}) .attr("stroke", function(d){return(whiskerColour(d[gaptype][2]))}) .style("stroke-width", whiskerWidth) .call(enter => enter.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) })), update => update .call(update => update.transition(t) .attr("x1", function(d){return(x_left(d[gaptype][0]))}) .attr("x2", function(d){return(x_left(d[gaptype][0]))}) .attr("stroke", function(d){return(whiskerColour(d[gaptype][2]))})) ) // LHS: Add uppertical lines left.selectAll(".highLines") .data(data, d=>d.name) .join( enter=>enter.append("line") .attr("class", "highLines") .attr("y1", function(d){return(y(d.name)) }) .attr("y2", function(d){return(y(d.name)) }) .attr("x1", function(d){return(x_left(d[gaptype][2]))}) .attr("x2", function(d){return(x_left(d[gaptype][2]))}) .attr("stroke", function(d){return(whiskerColour(d[gaptype][2]))}) .style("stroke-width", whiskerWidth) .call(enter => enter.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) })), update => update .call(update => update.transition(t) .attr("x1", function(d){return(x_left(d[gaptype][2]))}) .attr("x2", function(d){return(x_left(d[gaptype][2]))}) .attr("stroke", function(d){return(whiskerColour(d[gaptype][2]))})) ) } draw_gaps("gap") initial_button.on("click", d=>{ initial_button.style("fill", "grey") adjusted_button.style("fill", "white") draw_gaps("initial_gap") }); initial_text.on("click", d=>{ initial_button.style("fill", "grey") adjusted_button.style("fill", "white") draw_gaps("initial_gap") }); adjusted_button.on("click", d=>{ initial_button.style("fill", "white") adjusted_button.style("fill", "grey") draw_gaps("gap") }); adjusted_text.on("click", d=>{ initial_button.style("fill", "white") adjusted_button.style("fill", "grey") draw_gaps("gap") }); // --------- // 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,1000]) .domain([0,d3.max(data.map(x=>(x.size[0]+x.size[1])))*1.1]) .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") .style("font", fontStyle) .attr("transform", "translate(0," + inner_height + ")") .call(rhs_x_axis).select(".domain").remove() right.append("g") .style("font", fontStyle) .attr("transform", "translate(0," + 0 + ")") .call(rhs_x_axis_top).select(".domain").remove() // RHS: Add y-axis const rhs_y_axis = left.append("g").style("font", fontStyle).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", inner_height + margin.top - 10 ) .style("text-anchor", "middle") .style("font-weight","bold") .text("Employee Count"); // 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", inner_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", inner_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(data) .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) .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")}) .transition() .duration(d=>750*(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(data) .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) .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")}) .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(); }32:T418d,data = ([ { "gap": [ -0.050872608441656086, -8.13709677416341e-09, 0.05359932988967531 ], "initial_gap": [ -0.05395849818519205, -0.003251299529455687, 0.05017377142953583 ], "name": "This is an exceedingly long job group name from crazy client", "size": [ 183, 28 ] }, { "gap": [ -0.07842668322459767, 6.1192571010337815e-09, 0.08510087481431028 ], "initial_gap": [ -0.14797370655571773, -0.07546552927627936, 0.0032131568393751753 ], "name": "Capital markets", "size": [ 45, 208 ] }, { "gap": [ -0.015012464909192724, 0.011878024730318515, 0.03950263374422991 ], "initial_gap": [ -0.015012464909192724, 0.011878024730318515, 0.03950263374422991 ], "name": "Commercial lending", "size": [ 197, 327 ] }, { "gap": [ -0.03856338463351583, 8.405510953934936e-09, 0.04011018597397431 ], "initial_gap": [ -0.055020863487869165, -0.017117582842471002, 0.02230600510726255 ], "name": "Corporate services", "size": [ 162, 119 ] }, { "gap": [ -0.02518947261410398, 1.1274752242940167e-09, 0.025840380424084763 ], "initial_gap": [ -0.05940651126540375, -0.03510121877998407, -0.010167868318534223 ], "name": "Credit risk", "size": [ 268, 333 ] }, { "gap": [ -0.02611486803607932, -1.1915216591162903e-09, 0.02681513948197689 ], "initial_gap": [ -0.026416423736450145, -0.00030964315042847357, 0.026497194430373572 ], "name": "Customer service", "size": [ 219, 55 ] }, { "gap": [ -0.02699787569104095, -5.683756243435312e-09, 0.027746973669459107 ], "initial_gap": [ -0.04785924973726463, -0.021440219848210207, 0.005711858321874486 ], "name": "Finance and audit", "size": [ 224, 255 ] }, { "gap": [ -0.040809836552927026, 0.003917672377781178, 0.05073084704129571 ], "initial_gap": [ -0.040809836552927026, 0.003917672377781178, 0.05073084704129571 ], "name": "Human capital", "size": [ 190, 58 ] }, { "gap": [ -0.026763684336046256, 4.55594717507779e-09, 0.027499686373378296 ], "initial_gap": [ -0.038451870948563505, -0.01200960346797253, 0.0151598179515533 ], "name": "It", "size": [ 171, 183 ] }, { "gap": [ -0.03562318897176475, 1.2794617587630341e-08, 0.03693910321528593 ], "initial_gap": [ -0.05927158458541837, -0.024521933031735776, 0.011511339026351708 ], "name": "Legal & compliance", "size": [ 151, 121 ] }, { "gap": [ -0.028258154985871253, 0.005492870458800869, 0.04041615345769034 ], "initial_gap": [ -0.028258154985871253, 0.005492870458800869, 0.04041615345769034 ], "name": "Lending", "size": [ 163, 96 ] }, { "gap": [ -0.020085393597548684, 1.1984480075000192e-09, 0.02049708807605577 ], "initial_gap": [ -0.04465787149813727, -0.02507614091586341, -0.005093041901111817 ], "name": "Operations", "size": [ 798, 390 ] }, { "gap": [ -0.03128160475081543, -8.334995804659684e-09, 0.032291725060900944 ], "initial_gap": [ -0.03796906864013749, -0.00690342202712646, 0.025165388172444514 ], "name": "Risk management ", "size": [ 192, 202 ] }, { "gap": [ -0.033952656056458586, 0.0024558952513233923, 0.04023661803355916 ], "initial_gap": [ -0.033952656056458586, 0.0024558952513233923, 0.04023661803355916 ], "name": "Wealth management", "size": [ 234, 92 ] } ] )33:[] 2f:{"id":"936f3f3b926abd6a","slug":null,"title":"Now","thumbnail":"5b3e72b3d508e0e53c309c44cfcb09cd03d130140441468939ef2be052921d1e","access_level":"public","create_time":"$D2022-11-18T21:53:56.639Z","update_time":"$D2022-11-18T21:53:56.639Z","view_time":null,"first_public_time":"$D2022-11-18T21:53:56.639Z","has_unpublished_edits":null,"fork":{"id":"e978ef8e7f8ac4cd","slug":"gap-plot-new-style-with-header-and-transitions","title":"Now","owner":{"id":"d7bc7c845d5578b9","login":"willycs40","name":"Will CS"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8978ec88c24e0992","login":"benzipperer","name":"Ben Zipperer","avatar_url":"https://avatars-next.observableusercontent.com/952924ac48e7a7cd2485b8d58b1423359044cd451fb2d8aa85af00ca661697e4","tier":"starter_2024"},"version":891,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1bd99dfe6b6a753a","login":"benzipperer","name":"Ben Zipperer","avatar_url":"https://avatars-next.observableusercontent.com/952924ac48e7a7cd2485b8d58b1423359044cd451fb2d8aa85af00ca661697e4","tier":null}],"members":[{"type":"individual","id":"1bd99dfe6b6a753a","login":"benzipperer","name":"Ben Zipperer","avatar_url":"https://avatars-next.observableusercontent.com/952924ac48e7a7cd2485b8d58b1423359044cd451fb2d8aa85af00ca661697e4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Now","cells":[{"id":0,"value":"md`# Now`","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":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"