2d:null 2e:["$","title",null,{"children":"Gap Plot with Transitions | Will CS | Observable"}] 33:T2abb,boxPlotChart = { reset; // set the dimensions and margins of the graph const margin = {top: 10, right: 30, bottom: 40, left: 100, middle:20}, total_width = 600 - 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), height = 400 - margin.top - margin.bottom; // fonts & colours const leftColour = function(d){return(d.gap[2]<0 ? "red" : "black")} const rightProtectedColour = "gray" const rightNonProtectedColour = "darkgray" const fontStyle = "10px -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" const formatPercentage = function(p){return(d3.format(".1%")(p))} // mouseover texts const rightText = function(d){return("" + d.name + "
" + d.size[0] + " protected, " + d.size[1] + " unprotected")} const leftText = function(d){return("" + d.name + "
Gap of " + formatPercentage(d[active_gap][1]) + "
95% CI between " + formatPercentage(d[active_gap][0]) + " and " + formatPercentage(d[active_gap][2]) + " " + (d[active_gap][2]<0 ? "[Significant]" : "") + "")} // declare the tooltip div for use later in hoverovers 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); // append the svg object to the body of the page const svg = d3 .create("svg") .attr("width", total_width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font", fontStyle); // transition const t = svg.transition().duration(2000); // left is the main group for the leftmost plot const left = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // this is a y-scaler (for both left and right charts) const y = d3.scaleBand() .range([ 0, height ]) .domain(groups.map(d=> d.name)) .paddingInner(1) .paddingOuter(1) // grab the height of one item from the y-scaler // we'll use this for circle, vertical line and box height scaling const boxHeight = y.step()/2; // this is our x-scaler for the left chart const x_left = d3.scaleLinear() //.domain([-0.25,0.25]) .domain([d3.min(groups.map(x=>d3.min([x.gap[0],x.initial_gap[0]])))*1.1,d3.max(groups.map(x=>d3.min([x.gap[2],x.initial_gap[2]])))]) .range([0, left_width]) // Add axes to the left chart left.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x_left).ticks(5)).style("font", fontStyle) left.append("g").call(d3.axisLeft(y)).style("font", fontStyle) // Create left 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", fontStyle) .text("Gap Size"); // Now y axis label left.append("text") .style("text-anchor", "middle") .style("font", fontStyle) .attr("transform", "translate(" + (-margin.left*2/3) + "," + (height/2) + ")rotate(-90)") .text("Group"); // Adding a nice dotted x=0 line to the left chart left .append("line") .attr("y1", 0) .attr("y2", height) .attr("x1", x_left(0)) .attr("x2", x_left(0)) .attr("stroke", "black") .style("stroke-width", 0.5) .style("stroke-dasharray", ("3, 3")) // Show the median function draw(gaptype) { // Show the main horizontal whisker lines left.selectAll(".whisker") .data(groups, 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][0]))}) .attr("x2", function(d){return(x_left(d[gaptype][2]))}) .attr("stroke", leftColour) .style("stroke-width", 0.5), update => update .attr("fill", "red") .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]))}) )) // 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]])))}) .on("mouseover", function(d){ tooltip.html(leftText(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")}) left.selectAll("circle") .data(active_groups, 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]))}) .style("stroke", leftColour) .style("fill", leftColour) .attr("r", boxHeight/3), update => update .attr("fill", "black") .call(update => update.transition(t) .attr("cx", d => x_left(d[gaptype][1])))) .on("mouseover", function(d){ tooltip.html(leftText(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")}) // Add the lower vertical line left.selectAll(".lowLines") .data(groups, d=>d.name) .join( enter=>enter.append("line") .attr("class", "lowLines") .attr("y1", function(d){return(y(d.name)-boxHeight/2) }) .attr("y2", function(d){return(y(d.name)+boxHeight/2) }) .attr("x1", function(d){return(x_left(d[gaptype][0]))}) .attr("x2", function(d){return(x_left(d[gaptype][0]))}) .attr("stroke", leftColour) .style("stroke-width", 0.5), update => update .attr("fill", "black") .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]))}))) .on("mouseover", function(d){ tooltip.html(leftText(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")}) // Add the upper vertical line left.selectAll(".highLines") .data(groups, d=>d.name) .join( enter=>enter.append("line") .attr("class", "highLines") .attr("y1", function(d){return(y(d.name)-boxHeight/2) }) .attr("y2", function(d){return(y(d.name)+boxHeight/2) }) .attr("x1", function(d){return(x_left(d[gaptype][2]))}) .attr("x2", function(d){return(x_left(d[gaptype][2]))}) .attr("stroke", leftColour) .style("stroke-width", 0.5), update => update .attr("fill", "black") .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]))}))) .on("mouseover", function(d){ tooltip.html(leftText(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")}) } draw("initial_gap") //draw("gap") d3.select("#myButton").on("click", d=>{ var button = d3.select("#myButton"); var gaptype = button.text()=='Show Initial' ? 'initial_gap' : 'gap'; button.text(button.text()=='Show Initial' ? 'Show Adjusted' : 'Show Initial'); draw(gaptype) }); // right is the main group for the rightmost plot const right = svg.append("g") .attr("transform", "translate(" + (margin.left+left_width+margin.middle) + "," + margin.top + ")"); const x_right = d3.scaleLinear() //.domain([0,1000]) .domain([0,d3.max(groups.map(x=>(x.size[0]+x.size[1])))]) .range([1, right_width]) right.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x_right).ticks(3)).style("font", fontStyle) right.append("g").call(d3.axisLeft(y)).style("font", fontStyle).selectAll("text").remove() // Create right 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", fontStyle) .text("Employee Count"); right.selectAll("protectedBoxes") .data(groups, d=>d.name) .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", function(d){return(x_right(d.size[0]))}) .attr("stroke", rightProtectedColour) .style("fill", rightProtectedColour) .on("mouseover", function(d){ tooltip.html(rightText(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")}) right.selectAll("nonProtectedBoxes") .data(groups, d=>d.name) .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", function(d){return(x_right(d.size[1]))}) .attr("stroke", rightNonProtectedColour) .style("fill", rightNonProtectedColour) .on("mouseover", function(d){ tooltip.html(rightText(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")}) yield svg.node(); }34:T98a,groups = ([{ "name": "Mercury", "gap": [-0.072, -0.022, 0.029], "initial_gap": [-0.172, -0.122, 0.129], "size": [402, 405] }, { "name": "Venus", "gap": [-0.107, -0.045, 0.019], "initial_gap": [-0.107, -0.045, 0.019], "size": [100, 751] }, { "name": "Earth", "gap": [-0.100, -0.037, 0.030], "initial_gap": [-0.100, -0.037, 0.030], "size": [179, 500] }, { "name": "Mars", "gap": [-0.097, 0.023, 0.161], "initial_gap": [-0.097, 0.023, 0.161], "size": [75, 78] }, { "name": "Jupiter", "gap": [-0.079, 0.006, 0.101], "initial_gap": [-0.139, -0.08, -0.01], "size": [123, 432] }, { "name": "Saturn", "gap": [-0.103, -0.016, 0.078], "initial_gap": [-0.103, -0.016, 0.078], "size": [167, 32] }, { "name": "Uranus", "gap": [-0.066, 0.055, 0.079], "initial_gap": [-0.066, 0.055, 0.079], "size": [27, 67] }, { "name": "Neptune", "gap": [-0.034, -0.007, 0.020], "initial_gap": [-0.14, -0.107, -0.0510], "size": [345, 601] }, { "name": "Pluto", "gap": [-0.037, 0.001, 0.042], "initial_gap": [-0.037, 0.001, 0.042], "size": [200, 43] }, { "name": "Ganymede", "gap": [-0.101, -0.0708, -0.039], "initial_gap": [-0.091, -0.0608, -0.039], "size": [245,534] }] )35:[] 31:{"id":"9260edb4ec9ba287","slug":"gap-plot-with-transitions","title":"Gap Plot with Transitions","thumbnail":"ec2f4073548e0ee9a7e5dc5507ee57be8798898d199a24e62b69b3795459ff82","access_level":"public","create_time":"$D2020-05-10T12:41:57.109Z","update_time":"$D2020-05-31T15:54:06.178Z","view_time":null,"first_public_time":"$D2020-05-10T15:50:46.795Z","has_unpublished_edits":null,"fork":{"id":"f20da86c5b8ed864","slug":"gap-plot-with-mouseover","title":"Gap Plot with Mouseover","owner":{"id":"d7bc7c845d5578b9","login":"willycs40","name":"Will CS"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d7bc7c845d5578b9","login":"willycs40","name":"Will CS","avatar_url":"https://avatars-next.observableusercontent.com/0dfb1d4faa69ceb06dfefaa8fc7f0a28da56b4d78e3940b667ad7d7084a0cd5d","tier":"starter_2024"},"version":581,"publish_version":581,"role":null,"authored":false,"authors":[{"type":"individual","id":"04b536d15cd98fb5","login":"willycs40","name":"Will CS","avatar_url":"https://avatars-next.observableusercontent.com/0dfb1d4faa69ceb06dfefaa8fc7f0a28da56b4d78e3940b667ad7d7084a0cd5d","tier":null}],"members":[{"type":"individual","id":"04b536d15cd98fb5","login":"willycs40","name":"Will CS","avatar_url":"https://avatars-next.observableusercontent.com/0dfb1d4faa69ceb06dfefaa8fc7f0a28da56b4d78e3940b667ad7d7084a0cd5d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Gap Plot with Transitions","cells":[{"id":0,"value":"md`# Gap Plot with Transitions\nGaps with intervals alongside row count - with mouse hovers and transitions between initial and final.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"viewof reset = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"active_groups()","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":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"function active_groups() {\n var x = groups.map(d => {d.active_gap = d[active_gap]; return d})\n return x\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"active_gap = 'initial_gap'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"