29:null 2a:["$","title",null,{"children":"Centering Text Inside a Circle | Ben Pyrik | Observable"}] 2f:[] 2d:{"id":"d3f6633a71ba58bb","slug":"centering-text-inside-a-circle","title":"Centering Text Inside a Circle","thumbnail":"ae894764abc8879de0d93ef81f894d97cfe314f4308220a289f36a5797209eda","access_level":"public","create_time":"$D2018-11-03T00:05:19.146Z","update_time":"$D2018-11-05T23:47:12.020Z","view_time":null,"first_public_time":"$D2018-11-03T03:50:11.405Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"97e03c8520c8407e","login":"bryik","name":"Ben Pyrik","avatar_url":"https://avatars-next.observableusercontent.com/855ee5aed892f1112efa8abfe4d3b82a1cd5a6db03fc4c2456abab99fe563c60","tier":"starter_2024"},"version":346,"publish_version":346,"role":null,"authored":false,"authors":[{"type":"individual","id":"a068242f2b7fc4a4","login":"bryik","name":"Ben Pyrik","avatar_url":"https://avatars-next.observableusercontent.com/855ee5aed892f1112efa8abfe4d3b82a1cd5a6db03fc4c2456abab99fe563c60","tier":null}],"members":[{"type":"individual","id":"a068242f2b7fc4a4","login":"bryik","name":"Ben Pyrik","avatar_url":"https://avatars-next.observableusercontent.com/855ee5aed892f1112efa8abfe4d3b82a1cd5a6db03fc4c2456abab99fe563c60","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Centering Text Inside a Circle","cells":[{"id":0,"value":"md`# Centering Text Inside a Circle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`### Not centered`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"uncentered = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`### Centered with JS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"centeredWithJs = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`Something feels a bit off about this...and I'm not sure what. Checking with the inspector, the bounding box of \"A\" doesn't seem to hug the letter very tightly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"// Function that takes in an SVG element containing a circle and a text element. Centers the text\n// element inside the circle using the text element's bounding box.\nfunction center(example) {\n // Get current x and y values.\n let letter = d3.select(example).select('text');\n let x = Number(letter.attr('x'));\n let y = Number(letter.attr('y'));\n \n // Get bounding box and compute the center point.\n let bb = letter.node().getBBox();\n console.log('Bounding box:', bb);\n let centerX = bb.width / 2;\n let centerY = bb.height / 4;\n console.log(`Center point: (${centerX}, ${centerY})`);\n \n // Adjust x and y.\n letter.attr('x', x - centerX);\n letter.attr('y', y + centerY);\n \n return [(x - centerX), (y + centerY)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"// Call center with the example above.\ncenter(centeredWithJs)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`### Centered with SVG properties\n\nUsing text-anchor=\"middle\" and alignment-baseline=\"central\":`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"centeredWithProps = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`This version is easy and requires no JavaScript, but it's useless for D3's force-directed graphs. While it is possible to wrap every node and text label in a group element, g tags don't have ${tex`x`} and ${tex`y`} coordinates. Instead, they must be translated via transforms (i.e. \"transform=\"translate(x, y)\") which is noticeably laggy.\n\nIt also doesn't center vertically in Firefox.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`### Centered manually`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"centeredManually = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`For this one, I just eye-balled the letter into place. In my opinion, it looks superior to the previous two. The horizontal centering of the computed version feels a bit too far to the left and a bit too far down vertically.\n\nThe point I choose: ${tex`(155, 238)`} is close to the computed center ${tex`(153.34, 240.40)`} but not identical.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`### With a monospaced font`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`Could a monospaced font be easier to center programmatically? Let's try it with [Fira Mono](https://fonts.google.com/specimen/Fira+Mono).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"FiraMono = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"firaCircle = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"center(firaCircle)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`That actually looks pretty good!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"