2d:null 2e:["$","title",null,{"children":"Append fitted text to circle | eric-lee | Observable"}] 33:T4bd,function appendFittedText(selection, textParam, radiusParam) { const getRadius = typeof radiusParam === "function" ? radiusParam : function() { return radiusParam; }; const getText = typeof textParam === "function" ? textParam : function() { return textParam; }; selection.each(function(d) { d3.select(this) .selectAll(".fitted-text") .data([{}]) .enter() .append("text") .attr("class", "fitted-text") .attr("style", "text-anchor: middle; font: 10px avenir"); }); let text = selection.select(".fitted-text"); text.datum(function(d) { var lines = getLines(getText(d)); d.lines = lines.lines; d.textRadius = lines.textRadius; return d; }); text .selectAll("tspan") .data(d => d.lines) .enter() .append("tspan") .attr("x", 0) .attr("y", (d, i) => (i - d.linesLength / 2 + 0.8) * lineHeight) .text(d => d.text); text.attr("transform", function(d) { var scale = 1; if (d.textRadius !== 0 && d.textRadius) { scale = getRadius(d) / d.textRadius; } return "translate(" + 0 + "," + 0 + ")" + " scale(" + scale + ")"; }); }34:Tc0c,circledata = { const PROC = "#F9B6B6"; //red const DISO = "#F9DCB6"; //orange const FIND = "#B6DAF9"; //blue const ANAT = "#B6F9CD"; //green const ACTI = "#E5E826"; //yellow-green const DRUG = "#DFB6F9"; //purple const CHEM_DRUG = "#DFB6F9"; //purple var circledata = [ [ //column1 { name: "heart", value: 65, mycolor: ANAT }, { name: "skin", value: 50, mycolor: ANAT }, { name: "face", value: 44, mycolor: ANAT }, { name: "stomach", value: 39, mycolor: ANAT }, { name: "leg", value: 38, mycolor: ANAT }, { name: "stool", value: 37, mycolor: ANAT }, { name: "skin", value: 21, mycolor: ANAT }, { name: "liver", value: 14, mycolor: ANAT }, { name: "hand", value: 13, mycolor: ANAT }, { name: "hepatic", value: 12, mycolor: ANAT } ], [ //column2 { name: "rash", value: 164, mycolor: DISO }, { name: "spot", value: 83, mycolor: DISO }, { name: "says", value: 61, mycolor: DISO }, { name: "skin", value: 50, mycolor: DISO }, { name: "heart", value: 45, mycolor: DISO }, { name: "edema", value: 43, mycolor: DISO }, { name: "stomach", value: 39, mycolor: DISO }, { name: "little", value: 32, mycolor: DISO }, { name: "liver", value: 17, mycolor: DISO }, { name: "drinks", value: 16, mycolor: DISO } ], [ //column3 { name: "antibiotics", value: 32, mycolor: DRUG }, { name: "stop", value: 31, mycolor: DRUG }, { name: "wakes up", value: 24, mycolor: DRUG }, { name: "sleep", value: 23, mycolor: DRUG }, { name: "completed", value: 21, mycolor: DRUG }, { name: "correct", value: 16, mycolor: DRUG }, { name: "liver", value: 14, mycolor: DRUG }, { name: "metoprolol", value: 13, mycolor: DRUG }, { name: "performed", value: 13, mycolor: DRUG }, { name: "cymbalta", value: 10, mycolor: DRUG } ], [ //column4 { name: "pain", value: 113, mycolor: FIND }, { name: "itching", value: 93, mycolor: FIND }, { name: "redness", value: 93, mycolor: FIND }, { name: "appearance", value: 89, mycolor: FIND }, { name: "spot", value: 84, mycolor: FIND }, { name: "fixed", value: 68, mycolor: FIND }, { name: "symptoms", value: 67, mycolor: FIND }, { name: "problem", value: 63, mycolor: FIND }, { name: "diarrhea", value: 48, mycolor: FIND }, { name: "heart", value: 46, mycolor: FIND } ], [ //column5 { name: "scheduled", value: 170, mycolor: PROC }, { name: "colonoscopy", value: 51, mycolor: PROC }, { name: "surgery", value: 47, mycolor: PROC }, { name: "prescribed", value: 43, mycolor: PROC }, { name: "procedure", value: 39, mycolor: PROC }, { name: "stomach", value: 39, mycolor: PROC }, { name: "biopsy", value: 34, mycolor: PROC }, { name: "hearing", value: 32, mycolor: PROC }, { name: "ablation", value: 29, mycolor: PROC }, { name: "heart rate", value: 29, mycolor: PROC } ] ]; return circledata; }35:T672,chart1 = { const width = 3000; const height = 3000; //const radius = Math.min(width, height) / 2 - 4; const svg = d3 .select(DOM.svg(width, height)) .style("font", "10px sans-serif") .style("max-width", "100%") .style("height", "auto") .attr("text-anchor", "middle"); let g = svg .selectAll("g") .data(circledata) .enter(); //.append("g"); // Add circles for (let i = 0; i < 5; i++) { for (let j = 0; j < circledata[i].length; j++) { // currently i is column and j is row no. var currCircle = g.append("g") .attr( "transform", "translate(" + (200 + i * 400) + "," + (200 + j * 300) + ")" ); currCircle.append("circle") .attr("fill", circle => circledata[i][j].mycolor) .attr("r", function(circle) { if (j == 0) { return 150; } else { return 150 - j * 10; } }); // .attr("cx", 200 + i * 400) // .attr("cy", 200 + j * 300); appendFittedText(currCircle, circledata[i][j].name, function( circle ) { if (j == 0) { return 150; } else { return 150 - j * 10; } }); } } return svg.node(); } //let g = svg.selectAll("circle"); //trying to append text to all circles i've created in above for loop /*g.append("circle") .attr("fill", circle => circledata) .attr("r", function(d) { return d.value; }); // Add fitted text appendFittedText( g, function(d) { return d.name; }, function(d) { return d.value / 2; } );*/36:T52f,function getLines(text){ if (text === undefined || text === null) { return {lines: []} } text = String(text); let words = text.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/ if (!words[words.length - 1]) words.pop(); if (!words[0]) words.shift(); let targetWidth = Math.sqrt(measureWidth(text.trim()) * lineHeight); let line; let lineWidth0 = Infinity; let lines = []; for (var i = 0, n = words.length; i < n; ++i) { let lineText1 = (line ? line.text + " " : "") + words[i]; let lineWidth1 = measureWidth(lineText1); if ((lineWidth0 + lineWidth1) / 2 < targetWidth) { line.width = lineWidth0 = lineWidth1; line.text = lineText1; } else { lineWidth0 = measureWidth(words[i]); line = {width: lineWidth0, text: words[i]}; lines.push(line); } } let textRadius = 0; for (var i = 0, n = lines.length; i < n; ++i) { let dy = (Math.abs(i - n / 2 + 0.5) + 0.5) * lineHeight let dx = lines[i].width / 2; textRadius = Math.max(textRadius, Math.sqrt(dx * dx + dy * dy)); } return { "lines": lines.map(function (d) { return {"text": d.text, "linesLength": lines.length} }), "textRadius": textRadius} }37:[] 31:{"id":"c61fc38259c2b502","slug":"append-fitted-text-to-circle","title":"Append fitted text to circle","thumbnail":"5a798e59f412a66e8295d6f27ce05a348978d6eab6b7b35aee6bb13505dcd00a","access_level":"public","create_time":"$D2020-05-13T02:55:46.237Z","update_time":"$D2020-05-13T02:55:46.237Z","view_time":null,"first_public_time":"$D2020-05-13T02:55:49.581Z","has_unpublished_edits":null,"fork":{"id":"5bfb2ca2b89d1e29","slug":"append-fitted-text-to-circle","title":"Append fitted text to circle","owner":{"id":"89e39d075e0fdcd2","login":"georgemasto","name":"George Mastorakos"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dc3eaa8927cae70e","login":"eric-lee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7040173bb23a6c9eb18d6887aa369e84a239e8c2fbe857f4e848922c5b791838","tier":"starter_2024"},"version":739,"publish_version":739,"role":null,"authored":false,"authors":[{"type":"individual","id":"2371fe7df2a0e72e","login":"eric-lee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7040173bb23a6c9eb18d6887aa369e84a239e8c2fbe857f4e848922c5b791838","tier":null}],"members":[{"type":"individual","id":"2371fe7df2a0e72e","login":"eric-lee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7040173bb23a6c9eb18d6887aa369e84a239e8c2fbe857f4e848922c5b791838","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Append fitted text to circle","cells":[{"id":0,"value":"md`# Append fitted text to circle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"import {text as mbostocktext} from '@mbostock/fit-text-to-circle'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`Adaptation of Mike Bostock [\"fit text to circle\"](https://beta.observablehq.com/@mbostock/fit-text-to-circle) notebook\nto automatically appends and fits text to svg circles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`Import the \"appendFittedText\" method from this noteBook and simply pass to it \"d3 selection\" (The container of the circle and the text), \"text\" and the circle \"radius\" to append fitted texts into the d3.selection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"md`The method can take either a function or value for text and radius parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"md`See examples below or this [notebook](https://beta.observablehq.com/@zechasault/u-s-county-names-fitted) for details`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"md`And also this [nodebook](https://beta.observablehq.com/@mbostock/fit-text-to-circle) for more details about the code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"viewof text1 = {\n const input = html``;\n yield input;\n input.value = \"Append\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"viewof text2 = {\n const input = html``;\n yield input;\n input.value = \"fitted text to\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"viewof text3 = {\n const input = html``;\n yield input;\n input.value = \"circle\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"viewof text = {\n const input = html``;\n yield input;\n input.value = mbostocktext;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"chart = {\n const width = 150;\n const height = width;\n const radius = Math.min(width, height) / 2 - 4;\n \n const svg = d3.select(DOM.svg(width, height))\n .style(\"font\", \"10px sans-serif\")\n .style(\"max-width\", \"100%\")\n .style(\"height\", \"auto\")\n .attr(\"text-anchor\", \"middle\")\n \n svg.append('g')\n .attr(\"transform\",\"translate(\" + width / 2 + \",\" + height / 2 + \")\" ).append(\"circle\")\n .attr(\"fill\", \"#ccc\")\n .attr(\"r\", radius);\n \n appendFittedText(svg.selectAll(\"g\"), text, radius);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"\nviewof textChart3 = {\n const input = html``;\n yield input;\n input.value = \"Hello world\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"md`To refit existing texts, simply recall \"appendFittedText\" with the correct parameters in the circle radius update`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"chart3 = {\n const width = 150;\n const height = width;\n const radius = Math.min(width, height) / 2 - 4;\n let i = 10\n let growth = true\n \n const svg = d3.select(DOM.svg(width, height))\n .style(\"font\", \"10px sans-serif\")\n .style(\"max-width\", \"100%\")\n .style(\"height\", \"auto\")\n .attr(\"text-anchor\", \"middle\");\n \n let g = svg.selectAll(\"g\").data([{}]).enter().append(\"g\")\n .attr(\"transform\", function (d) {return \"translate(\" + width / 2 + \",\" + height / 2 + \")\" })\n \n var circle = g.append(\"circle\")\n .attr(\"fill\", \"#ccc\")\n .attr(\"r\", i);\n\n appendFittedText(g, textChart3, i);\n \n \n function draw(){\n circle.attr(\"r\", (i));\n \n appendFittedText(g, textChart3, i);\n \n growth?i++:i--\n if(i<=10){ growth=true }\n if(i>=75){ growth=false }\n }\n \n setInterval(draw, 20);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"lineHeight = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"data = [\n {\n text:text1,\n radius: 50,\n x:50\n },\n {\n text:text2,\n radius: 30,\n x:160\n },\n {\n text:text3,\n radius: 20,\n x:240\n },\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"context = document.createElement(\"canvas\").getContext(\"2d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"function measureWidth(text){\n return context.measureText(text).width;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"