31:T38ec,chart = { const numCols = 1 //enable tooltips as seen in https://observablehq.com/@clhenrick/tooltip-component const container = html``; //create scales for placing multiple graphs in the svg const colScale = d3.scaleBand() .domain(d3.range(numCols)) .range([0, dimensions.visWidth]) // .padding(0.05) //this adds padding if we want multiple columns const rowScale = d3.scaleBand() .domain(d3.range(sub_data.length)) .range([0, dimensions.visHeight]) .padding(0.05) // create scales for each likert chart const y = d3.scaleLinear() .domain([0,1]) .range([(rowScale.bandwidth()+dimensions.margins.top)/2, rowScale.bandwidth()-dimensions.margins.top]); const y2 = d3.scaleLinear() .domain([0,1]) .range([(rowScale.bandwidth()+dimensions.margins.top)/2, dimensions.margins.top*2]); const x = d3.scaleLinear() .domain([0, maximum_X_axis]) .range([dimensions.margins.left, colScale.bandwidth()-dimensions.margins.right]); // create axes for the likerts const xAxis1 = d3.axisTop(x).ticks(maximum_X_axis/dimensions.thickTicksforEvery_x_Entries); //this gets us our bold ticks const xAxis2 = d3.axisTop(x).ticks(maximum_X_axis/dimensions.thinTicksforEvery_x_Entries).tickFormat("").tickSize(0); //this gets us our thin ticks const yAxis = d3.axisLeft(y); //create line function to generate bubbles const line1 = d3.line() //top half of the bubble .x(d => x(d["amt"])) .y(d => y(d["ht"])) const line2 = d3.line() //bottom half of the bubble .x(d => x(d["amt"])) .y(d => y2(d["ht"])) // create the svg const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${dimensions.visWidth} ${dimensions.visHeight + dimensions.margins.top + dimensions.margins.bottom}`); //enable tooltips as seen in https://observablehq.com/@clhenrick/tooltip-component const div = d3 .select(container) .append("div") .classed("tooltip", true); const tooltip = new Tooltip(div); function tooltipContents(datum) { const {type, num} = datum; return datum // return `${type}: ${num}`; } //enable font svg.append('defs') .append('style') .attr('type', 'text/css') .text("@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,450;1,300&display=swap')"); //add background for title svg.append('rect') .attr('x', 0) .attr('y', 0) .attr("width", "100%") .attr("height", "100%") .attr("fill", design.backgroundColor); //add overall title svg.append('text') .attr('y', dimensions.margins.top) .attr('x', dimensions.visWidth/2) .attr("text-anchor", 'middle') // .attr("font-family", "Raleway") .attr("fill", "black") .attr("font-size", design.titleFontSize) .attr("font-weight", 900) .text(design.title) //append each sub-group that represents 1 likert const g = svg.append('g') .attr('transform', `translate(0, ${dimensions.margins.top})`); const likerts = g.selectAll('g') .data(sub_data) .join('g') .attr('transform', (d, i) => { const r = Math.floor(i / numCols); const c = i % numCols ; return `translate(${colScale(c)}, ${rowScale(r)})`; }); //append background rectangle for each likert likerts.append('rect') .attr('width', "100%") .attr('height', "100%") .attr('fill', design.backgroundColor) //append border likerts.append('rect') .attr('width', dimensions.visWidth - dimensions.margins.left/1.3) .attr('height', rowScale.bandwidth() - dimensions.margins.top) .attr("x", dimensions.margins.left/2) .attr("y", dimensions.margins.top-design.questionFontSize/3) .attr('fill', "none") .attr('stroke', "#d5d1ab") .attr("stroke-width", design.gridStrokeWidth*3) //add rectangles over each border to leave space to write text likerts.append("rect") // .data(sub_data) // .join('text') .attr("x", dimensions.margins.left-dimensions.labelMargins.left) .attr("y", dimensions.margins.top-dimensions.labelMargins.top - design.questionFontSize) .attr("width", d => label_lengths_post .filter(e => e.info == d.question)[0].width + 2*dimensions.labelMargins.left) .attr("height", d => label_lengths_post .filter(e => e.info == d.question)[0].height + 2*dimensions.labelMargins.top) .attr("fill", design.backgroundColor) .attr("stroke", "none") //add question titles for each likert likerts.append('text') .data(sub_data) .join('text') .attr("x", dimensions.margins.left) .attr("y", dimensions.margins.top) .attr("text-anchor", "start") // .attr("font-family", "Raleway") .attr("font-size", design.questionFontSize) .text(d => d.question); // add axis for each likert likerts.append("g") .attr("transform", `translate(0, ${dimensions.margins.top+30})`) .attr("color", design.gridColor) .attr("stroke-width", 1.5) .call(xAxis1) .call(g => g.select(".domain").remove()) .call(g => g.selectAll('.tick line') // add grid lines à la https://observablehq.com/@d3/connected-scatterplot .clone() .attr('stroke', design.gridColor) .attr('stroke-width', design.gridStrokeWidth) .attr('stroke-dasharray', '2,2') .attr('y1', 0) .attr('y2', (dimensions.visHeight/sub_data.length)-dimensions.margins.bottom-dimensions.margins.top-30)) .append("text") .attr("x", dimensions.visWidth-dimensions.margins.right+8) .attr("y", -8) .attr("fill", design.gridColor) .attr("text-anchor", "start") // .attr("font-family", 'Raleway') .attr("font-size", design.labelFontSize * 0.7) .attr("font-weight", 900) .text(design.xAxisUnit); likerts.append("g") .attr("transform", `translate(0, ${dimensions.margins.top+30})`) .call(xAxis2) .call(g => g.select(".domain").remove()) .call(g => g.selectAll('.tick line') // add grid lines à la https://observablehq.com/@d3/connected-scatterplot .clone() .attr('stroke', design.gridColor) .attr('stroke-width', design.gridStrokeWidth) .attr('stroke-dasharray', '2,10') .attr('y1', 0) .attr('y2', (dimensions.visHeight/sub_data.length)-dimensions.margins.bottom-dimensions.margins.top-30)) .append("text") .attr("x", dimensions.margins.left+6) .attr("y", -8) .attr("fill", design.gridColor) .attr("text-anchor", "start") // .attr("font-family", 'Raleway') .attr("font-size", design.labelFontSize * 0.7) .attr("font-weight", 900) .text(design.xAxisUnit); //draw likert bubbles for(var j = 0; j < longest_subdata_construction; j++){ likerts.append("path") .attr("id", "likert"+j) .attr("fill", d => d.construction[j].color) .attr("stroke", "black") .attr("stroke-width", design.bubbleStrokeWidth) .attr("d", d => line1.curve(d3.curveBundle.beta(1/design.desiredLayers*k))(d.construction[j].pts)) .on("mouseover", (event, d) => tooltip.display("likert"+j, tooltipContents)) .on("mouseout", () => tooltip.hide()) .on("mousemove", event => tooltip.move(event)) for(var k = design.desiredLayers-1; k >= 0; k--){ likerts.append("path") .attr("fill", d => d.construction[j].color) .attr("stroke", "black") .attr("stroke-width", design.bubbleStrokeWidth) .attr("d", d => line1.curve(d3.curveBundle.beta(1/design.desiredLayers*k))(d.construction[j].pts)) // .on("mouseover", (event, d) => tooltip.display("likert"+j, tooltipContents)) // .on("mouseout", () => tooltip.hide()) // .on("mousemove", event => tooltip.move(event)) // likerts.append("path") // .attr("fill",d => d.construction[1].color) // .attr("stroke", "black") // .attr("stroke-width", design.bubbleStrokeWidth) // .attr("d", d => line1.curve(d3.curveBundle.beta(1/design.desiredLayers*k))(d.construction[1].pts)) // .on("mouseover", (event, d) => tooltip.display(d.construction[1].type, tooltipContents)) // .on("mouseout", () => tooltip.hide()) // .on("mousemove", event => tooltip.move(event)) likerts.append("path") .attr("fill", d => d.construction[j].color) .attr("stroke", "black") .attr("stroke-width", design.bubbleStrokeWidth) .attr("d", d => line2.curve(d3.curveBundle.beta(1/design.desiredLayers*k))(d.construction[j].pts)); } //add legend callouts //this makes the rectangles likerts.filter(d => d.show_legend =="true" || d.show_legend =="TRUE").append("rect") .attr("x", d => x(d.construction[j].pts[2].amt) - dimensions.margins.left/5) .attr("y", d => (j%2 == 0 ? y(1.2) - label_lengths_post.filter(e => e.info == d.construction[j].type)[0].height - dimensions.labelMargins.top/2 : y2(1.2) -label_lengths_post.filter(e => e.info == d.construction[j].type)[0].height - dimensions.labelMargins.top/2 )) .attr("width", d => label_lengths_post.filter(e => e.info == d.construction[j].type)[0].width + 2*dimensions.labelMargins.left) .attr("height", d => label_lengths_post.filter(e => e.info == d.construction[j].type)[0].height + 2*dimensions.labelMargins.top) .attr("fill", "white") .attr("stroke", d => d.construction[j].color) .attr("stroke-width", design.labelStrokeWidth) //this makes the text likerts.filter(d => d.show_legend =="true" || d.show_legend =="TRUE").append("text") .attr("x", d => x(d.construction[j].pts[2].amt)) .attr("y", (j%2 == 0 ? y(1.2) : y2(1.2))) .attr("fill", "black") .attr("text-anchor", "start") // .attr("font-family", "Raleway") .attr("font-size", design.labelFontSize) .text(d => d.construction[j].type) //this makes the pointies likerts.filter(d => d.show_legend =="true" || d.show_legend =="TRUE").append("path") .attr("fill", "white") .attr("stroke", d => d.construction[j].color) .attr("d", d => `M ${x(d.construction[j].pts[2].amt) - 5} ${(j%2 == 0 ? y(1.2) - label_lengths_post.filter(e => e.info == d.construction[j].type)[0].height - dimensions.labelMargins.top/2 + 1.5 : y2(1.2) -label_lengths_post.filter(e => e.info == d.construction[j].type)[0].height - dimensions.labelMargins.top/2 + label_lengths_post.filter(e => e.info == d.construction[j].type)[0].height + 2*dimensions.labelMargins.top) -0.6 } L ${x(d.construction[j].pts[2].amt)} ${(j%2 == 0 ? y(0.3) : y2(0.3))} L ${x(d.construction[j].pts[2].amt) + 5} ${(j%2 == 0 ? y(1.2) - label_lengths_post.filter(e => e.info == d.construction[j].type)[0].height - dimensions.labelMargins.top/2 + 1.5 : y2(1.2) -label_lengths_post.filter(e => e.info == d.construction[j].type)[0].height - dimensions.labelMargins.top/2 + label_lengths_post.filter(e => e.info == d.construction[j].type)[0].height + 2*dimensions.labelMargins.top) -0.6 }`) .attr("stroke-width", design.labelStrokeWidth) } // for(var j = 0; j < longest_subdata_construction; j++){ // likerts.selectAll(".likert"+j) // .on("mouseover", (event, d) => tooltip.display(j+1, tooltipContents)) // .on("mouseout", () => tooltip.hide()) // .on("mousemove", event => tooltip.move(event)) // } // likerts.selectAll(".likert"+0) // .on("mouseover", (event, d) => tooltip.display(0, tooltipContents)) // .on("mouseout", () => tooltip.hide()) // .on("mousemove", event => tooltip.move(event)) // likerts.selectAll(".likert"+1) // .on("mouseover", (event, d) => tooltip.display(1, tooltipContents)) // .on("mouseout", () => tooltip.hide()) // .on("mousemove", event => tooltip.move(event)) //add credit blurb if(design.showCredit){ svg.append('text') .attr('y', dimensions.visHeight + dimensions.margins.bottom) .attr('x', 7*dimensions.visWidth/10) .attr("text-anchor", 'start') // .attr("font-family", "Raleway") .attr("fill", "grey") .attr("font-size", 10) .text("made using observablehq.com/@racquellevia/stylized-likert-scales") } return container; }32:T5e1,// when inputting data from a json, adhere to the following format: // { // "data":[ // { // "question": "question 1", // "responses": [ // { // "type": "likert choice 1", // "amt": 10, // "place": 1 // }, // { // "type": "likert choice 2", // "amt": 8, // "place": 2 // }, // { // "type": "likert choice n", // "amt": 9, // "place": 3 // } // ], // "show_legend": "true" // }, // { // "question": "question 2", // "responses": [ // { // "type": "likert choice 1", // "amt": 6, // "place": 1 // }, // { // "type": "likert choice 2", // "amt": 14, // "place": 2 // }, // { // "type": "likert choice n", // "amt": 11, // "place": 3 // } // ], // "show_legend": "false" // } // ] // } input_json = FileAttachment("example@6.json").json()33:Td08,sub_data = { var sorted = "0" if(input_type == "csv"){ sorted = JSON.parse(JSON.stringify(input_csv)) var list_keys = Object.keys(sorted[0]); //set up initial construction dict for(var i =0 ; i < sorted.length; i++){ var retval = [{amt:0, run_sum_amt:0}] for(var k in sorted[i]){ if(k != "question" && k != "show_legend"){ retval.push({type: k, amt: parseInt(sorted[i][k])}) } } sorted[i].construction = retval //set up running sum, color, plotted points in construction dict for(var k =1 ; k < sorted[i].construction.length; k++){ sorted[i].construction[k].run_sum_amt = sorted[i].construction[k].amt + sorted[i].construction[k-1].run_sum_amt sorted[i].construction[k].color = design.colorRange[k-1] // var range = sorted[i].construction[k].amt - sorted[i].construction[k-1].amt var range = sorted[i].construction[k].amt sorted[i].construction[k].range = range sorted[i].construction[k].pts = [{type:"start", amt: sorted[i].construction[k-1].run_sum_amt, ht: 0}, {type:"m1", amt: sorted[i].construction[k-1].run_sum_amt+range*0.1, ht: -.05}, {type:"m2", amt:range/2 + sorted[i].construction[k-1].run_sum_amt, ht: -1}, {type: "m3", amt: sorted[i].construction[k].run_sum_amt-range*0.1, ht: -.05}, {type:"end", amt: sorted[i].construction[k].run_sum_amt, ht: 0} ]; } //get rid of starter item in construction sorted[i].construction.splice(0, 1) } } else if(input_type == "json"){ sorted = JSON.parse(JSON.stringify(input_json)); sorted = sorted.data var h = [] for(var i = 0 ; i < sorted.length; i++){ sorted[i].responses.push({type: "start", amt: 0, place: 0}) sorted[i].responses = sorted[i].responses.sort((a, b) => d3.ascending(a.place, b.place)) sorted[i].responses[0].run_sum_amt = sorted[i].responses[0].amt; var range = 0; var retval = [] for(var j = 1 ; j < sorted[i].responses.length; j++){ sorted[i].responses[j].run_sum_amt = sorted[i].responses[j].amt + sorted[i].responses[j-1].run_sum_amt; range = (sorted[i].responses[j].run_sum_amt -sorted[i].responses[j-1].run_sum_amt) retval.push({type: sorted[i].responses[j].type, color: design.colorRange[j-1], amt: sorted[i].responses[j].amt, pts: [{type:"start", amt: sorted[i].responses[j-1].run_sum_amt, ht: 0}, {type:"m1", amt: sorted[i].responses[j-1].run_sum_amt+range*0.1, ht: -.05}, {type:"m2", amt:range/2 + sorted[i].responses[j-1].run_sum_amt, ht: -1}, {type: "m3", amt: sorted[i].responses[j].run_sum_amt-range*0.1, ht: -.05}, {type:"end", amt: sorted[i].responses[j].run_sum_amt, ht: 0} ] }) } sorted[i].construction = retval } } else{ let sorted = "nono" } return sorted }34:T6fb,get_label_size = { const svg = d3.create('svg') .attr('width', width) .attr('height', 100) //enable font svg.append('defs') .append('style') .attr('type', 'text/css') .text("@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,450;1,300&display=swap')"); svg.append("text") .attr("y", 10) .attr("x", 10) .text("hi") const labels = svg.selectAll('text') .data(label_lengths_pre) .join('text') .attr("class", d =>d.info.replace(/[^a-z]+/gi, '')) .text(d => d.info) // .attr("font-family", "Raleway") .attr("font-size", d => ((d.type == "label") ? design.labelFontSize: design.questionFontSize)) .attr("fill", "black") .attr("y", 50) .attr("x", (d, i) => 10 + i * 10) svg.selectAll("text") .each(function(d) {d.bbox = this.getBBox();}); svg.append("text") .attr("class", "blah") .attr("y", 20) .attr("x", 10) .attr("font-size", 12) .attr("fill", "black") .text("This svg is used to calculate the lengths of chart text so that bounding boxes can be added behind them") svg.append("text") .attr("class", "blah") .attr("y", 70) .attr("x", 10) .attr("font-size", 12) .attr("fill", "black") .text("We have to call bounding boxes outside of our chart to be compatable with Firefox") svg.append("text") .attr("class", "blah") .attr("y", 80) .attr("x", 10) .attr("dy", "1em") .attr("font-size", 12) .attr("fill", "black") .text("as per https://observablehq.com/@mbostock/wheres-getbbox") return svg.node() }35:[{"id":"fcaf0b88c1917074e23c6e8514533da8df6e6ccaf6bd1fd4092a8740d567bccb150285f3bd004ddf8e86270bfac4eb94e1525ef3fa242632818c841b29b1621f","href":"https://static.observableusercontent.com/files/fcaf0b88c1917074e23c6e8514533da8df6e6ccaf6bd1fd4092a8740d567bccb150285f3bd004ddf8e86270bfac4eb94e1525ef3fa242632818c841b29b1621f","name":"department.csv","type":"text/csv","lastModified":1636496205027.263,"size":991},{"id":"2d42ad6588ab92b1130ca1aaf98c067055cc4f1660d79d6f29df8548caa204bcaafdc6285d038283a1125f17fe0ebd7a0c613f724af01173f7204d6518faa327","href":"https://static.observableusercontent.com/files/2d42ad6588ab92b1130ca1aaf98c067055cc4f1660d79d6f29df8548caa204bcaafdc6285d038283a1125f17fe0ebd7a0c613f724af01173f7204d6518faa327","name":"example@6.json","type":"application/json","lastModified":1636692353239.733,"size":1259}] 2f:{"title":"Stylized Likert Scales","cells":[{"id":0,"value":"# Stylized Likert Scales","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1938,"value":"## Import your own data","pinned":false,"hidden":false,"mode":"md"},{"id":1942,"value":"Choose your input file type in the dropdown below.
\n","pinned":false,"hidden":false,"mode":"md"},{"id":1322,"value":"viewof input_type = {\n const select = html``;\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1946,"value":"Open the cell that corresponds with the file type and import your data.
\nMake sure your input data matches the labelling and format of the examples in the cell.","pinned":false,"hidden":false,"mode":"md"},{"id":1313,"value":"// when inputting data from a csv, adhere to the following format:\n//\n// question, likert choice 1, likert choice 2, ..., likert choice n, show_legend\n// question1, # that chose choice 1, # that chose choice 2, ..., # that chose choice n, true or false \n// ...\n// question_n, # that chose 1, # that chose 2, ..., # that chose the last choice, true or false \n//\n// make sure the likert choices are input in the order you want them to appear in the chart\n\ninput_csv = FileAttachment(\"department.csv\").csv()\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1882,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1957,"value":"## Export the chart","pinned":false,"hidden":false,"mode":"md"},{"id":1848,"value":"DOM.download(() => rasterize(chart), undefined, \"Save your chart as a PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1860,"value":"DOM.download(() => serialize(chart), undefined, \"Save your chart as an SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2200,"value":"ExportPNG = chart => {\n return rasterize(chart);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2206,"value":"DOM.download(() => rasterize(chart), undefined, \"Save as PNG\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2202,"value":"function rasterize(svg) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1213,"value":"## Edit below to customize","pinned":false,"hidden":false,"mode":"md"},{"id":1413,"value":"//alter this to change what the maximum_X_axis variable (below) rounds to. \n//e.g. if there are 64 responses and to_the_nearest = 10, the x axis will go to 70. \n//e.g. if there ar\n//64 responses and to_the_nearest_ = 5, the x axis will go to 65.\nto_the_nearest= 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":1425,"value":"//decides how the maximum for all the x-axis, and pulls from to_the_nearest (above).\n//Because the likert charts are all aligned on the same svg, it's good practice to keep x-axis scaling the same across charts :)\nmaximum_X_axis = Math.ceil(d3.max(sub_data, d => d3.sum(d.construction, e => e.amt))/to_the_nearest)*to_the_nearest","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"//here you can edit variables associated with the dimensions of the chart\ndimensions = [{\n visWidth: width, \n visHeight: (sub_data.length)*width/4.5, //right now, the overalls svg heigh scales based on the # of likerts in your data\n margins : {left: width/20, right: width/14, top: width/28, bottom: width/29}, //sets margins for *each* likert chart, not the overall svg\n thinTicksforEvery_x_Entries: 1, //sets amount of responses each thin tick mark represents\n thickTicksforEvery_x_Entries: 10, // sets amount of responses each thick tick mark represents\n labelMargins: {left: 10, top: 5} // sets margins for each label\n }][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"//here you can edit variables associated with the design of the chart\ndesign = [{\n title: \"Annual Company Climate Survey\",\n desiredLayers: 7, //number of layers in 1/2 of the each likert's bubbles.\n backgroundColor: \"#fffde7\",\n gridColor: \"#8c8c8c\", //color for ticks and gridlines\n colorRange: [\"#e33045\", \"#f57c20\", \"#fcd605\", \"#91c63d\", \"#0c9b49\"], //color range for the different likert categories\n questionFontSize: (width/100)*1.5,\n titleFontSize: (width/100)*1.7,\n labelFontSize: (width/100)*1.2,\n bubbleStrokeWidth: (width/1000)*1.3,\n gridStrokeWidth: (width/1000)*1.1,\n labelStrokeWidth: (width/1000)*1.4,\n xAxisUnit: \"employees\",\n showCredit: true //change to false to remove observable watermark in lower right\n \n}][0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1972,"value":"## Code Bones — Edit below at your own risk :)","pinned":false,"hidden":false,"mode":"md"},{"id":2145,"value":"longest_subdata_construction = d3.max(sub_data, d => (d.construction).length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1307,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1598,"value":"label_lengths_pre = { \n var midval = new Set()\n var retval = []\n for(var i = 0; i < sub_data.length; i++){\n if(sub_data[i].show_legend == \"true\" || sub_data[i].show_legend == \"TRUE\"){\n for(var j = 0; j < sub_data[i].construction.length; j++){\n midval.add({info: sub_data[i].construction[j].type, type: \"label\"})\n }\n }\n midval.add({info: sub_data[i].question, type: \"question\"})\n }\n\nconst iterator = midval.values();\n\n for(var i = 0; i < midval.size; i++){\n var c = iterator.next().value\n retval.push({info: c.info, type: c.type})\n }\n \n return retval\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1647,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1690,"value":"label_lengths_post = {\n var retval = JSON.parse(JSON.stringify(label_lengths_pre));\n\n for(var i = 0; i < retval.length; i++){\n var classy = retval[i].info.replace(/[^a-z]+/gi, '')\n retval[i].width = d3.select(get_label_size).select(\".\"+classy).node().getBBox().width\n retval[i].height = d3.select(get_label_size).select(\".\"+classy).node().getBBox().height\n }\n return retval\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1853,"value":"import {serialize} from \"@mbostock/saving-svg\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2129,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}