44:["$","title",null,{"children":"Single SVG Renderer | giammaria | Observable"}] 4c:Tdb2,renderSingleSVG = function( { canvas, //svg container for the visual svgString, //the svg to be rendered as a string margins = {top: 10, right: 10, bottom: 10, left: 10}, iconVerticalPercentage = .75, // The amount of vertal space that the icon will take up if text is included iconColor = "#000000", // color of icon backgroundColor = "none", //background color of icon labels = [] //{text: "label content", "fontSize": 12, "fontFamily": "Segoe UI", color: "#000000"} } = {}) { //dimensions with and without margins const width = +canvas.attr('width'); const height = +canvas.attr('height'); const marginedWidth = +canvas.attr('width')-margins.left-margins.right; const marginedHeight = +canvas.attr('height')-margins.top-margins.bottom; //iconHeight as a percentage of the available vertical space const iconHeight = (labels.length ? iconVerticalPercentage : 1) * marginedHeight; //background rect ignores the margins and is located in the canvas svg //only render the rect if a color is provided if(backgroundColor!='none'){ const background = canvas .append('rect') .attr('width', width) .attr('height', height) .attr('fill', backgroundColor); } //create an svg that will hold the icon and labels const svg = canvas .append('svg') .classed('svg', true) .attr('x', margins.left) .attr('y', margins.top) .attr('width', marginedWidth) .attr('height', marginedHeight); //append the svg const icon = svg .append('svg') .attr('class', 'svgIcon') .attr('width', marginedWidth) .attr('height', iconHeight) .html(svgString) .select('svg') .attr('fill', iconColor); //render the labels if there are any if(labels.length>0){ //this svg stores the labels //allocates whatever vertical space is left that is not being used for the icon const labelTextSVG = svg .append('svg') .attr('y', iconHeight) .attr('width', marginedWidth) .attr('height', marginedHeight - iconHeight); //Draw the labels and dynamically store the height/width of all the labels let labelsHeight = 0; let viewWidth = 0; const iconBBox = getBBoxSVGInObservable(svgString); //custom function - see references section in appendix const labelText = labelTextSVG .selectAll('.labelText') .data(labels, (d, i)=>`${d.text}`) .join('text') .attr('class', (d, i)=>`labelText-${i}`) .attr('fill',(d)=>d.color) .attr('x', marginedWidth/2) .attr('text-anchor', 'middle') .attr('font-size', (d,i)=>labels[i].fontSize) .attr('font-family', (d,i)=>labels[i].fontFamily) .text((d)=>d.text) .each(function(d, i){ const bbox = getBBoxTextInObservable(d.text, labels[i].fontSize, labels[i].fontFamily); //custom function - see references section in appendix labelsHeight+=bbox.height; //store the increasing label height while looping through all labels viewWidth = d3.max([viewWidth, bbox.width]) //store whichever is wider, the labels or the icon d3.select(this).attr('y', labelsHeight); //set the labelsHeight }); //adjust the viewbox for the svg storing the labels to fit all of the text labelTextSVG .attr("viewBox", [(marginedWidth-viewWidth)/2, 0, viewWidth, labelsHeight]) } }4d:[] 48:{"id":"803e713c5a242f8f","slug":"single-svg-renderer","title":"Single SVG Renderer","thumbnail":"78fab23566941fe97226fcff19bda1bf54c4d3db6645dc3deffeba5c3913fe41","access_level":"public","create_time":"$D2021-12-15T12:33:17.431Z","update_time":"$D2022-01-04T16:09:03.434Z","view_time":null,"first_public_time":"$D2021-12-15T18:00:03.727Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"4ffb92ef16fee1b6","login":"giammaria","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7f4540d75ba2b09b87989db030724d8dc3e666c8c12105b170c0ac73de1b1f01","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1128,"publish_version":1128,"role":null,"authored":false,"authors":[{"type":"individual","id":"acb1462e3965fd7b","login":"giammaria","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7f4540d75ba2b09b87989db030724d8dc3e666c8c12105b170c0ac73de1b1f01","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"acb1462e3965fd7b","login":"giammaria","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7f4540d75ba2b09b87989db030724d8dc3e666c8c12105b170c0ac73de1b1f01","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"351ceb868cbec9ae","slug":"group-svg-viewer/2","title":"Group SVG Viewer","owner":{"id":"4ffb92ef16fee1b6","login":"giammaria","name":""}},"type":"notebook","body":{"titling":"auto","title":"Single SVG Renderer","cells":[{"id":0,"value":"# Single SVG Renderer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1003,"value":"md `#### With Optional Labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"md `This is the second notebook in the [Group SVG Viewer Collection](https://observablehq.com/collection/@giammaria/group-svg-viewer/2 \"Group SVG Viewer Collection\"). The \\`renderSingleSVG()\\` function renders an svg icon with optional labels. A few helper functions were written due to the way that Observable handles \\`getBBox()\\` (see references in appendix).\n\nAll Notebooks in this [Collection](https://observablehq.com/collection/@giammaria/group-svg-viewer/2 \"Group SVG Viewer Collection\"):\n1. [SVG Group Viewer Data](https://observablehq.com/@giammaria/group-svg-viewer-data \"SVG Group Viewer Data\")\n2. [Single SVG Renderer](https://observablehq.com/@giammaria/single-svg-renderer \"Single SVG Renderer\") (You Are Here 😎 )\n3. [SVG Group Renderer](https://observablehq.com/@giammaria/svg-group-renderer \"SVG Group Renderer\")\n4. [SVG Group Slicer](https://observablehq.com/@giammaria/svg-group-slicer \"SVG Group Slicer\")`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"md `### Implementation Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"viewof groupType = Inputs.radio(['CSG', 'ARG'], {value: \"CSG\", label: \"Group Type\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"viewof group = Inputs.radio(groupedData.filter(d=>d.group.substring(0,3) == groupType).map(d=>d.group).sort(), {value: (groupType == \"CSG\" ? \"CSG 3\" : \"ARG 1\"), label: \"Group\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"canvas = { \n //svg where everything will be stored\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n\n //provide the properties and render the icon and labels\n renderSingleSVG(\n {\n canvas: svg\n , svgString: groupedData[0].svg \n , backgroundColor: backgroundColor\n , iconVerticalPercentage: .35\n , iconColor: data.color\n , labels: [\n {text:data.group, fontFamily: fontFamily, color: fontColor, fontSize: 30}\n , {text: `${data.fit} / ${data.fill}`, fontFamily: fontFamily, color: fontColor, fontSize: 20}\n ]\n }\n )\n \n return svg.node(); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"viewof size = Inputs.range([100, window.innerWidth], {value: 250, step: 10, label: \"Size\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"viewof fontColor = Inputs.color({label: \"Font Color\", value: \"#3A3B3C\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"viewof fontFamily = Inputs.select(['Segoe UI'].concat(fonts), {label: \"Font Family\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":" viewof backgroundColor = Inputs.color({label: \"Background Color\", value: \"#dcdcdc\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md `# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"md `### References\n#### \\`getBBox()\\`\n* [getBBox()?](https://talk.observablehq.com/t/getbbox/1222 \"getBBox()?\") - question relating to how Observable handles \\`getBBox()\\`\n* [Autosize SVG](https://observablehq.com/@mbostock/autosize-svg \"Autosize SVG\") - Mike Bostock's recommendation\n* [Automatic getBBox](https://observablehq.com/@rlesser/automatic-getbbox \"Automatic getBBox\") - Robert Lesser's recommendation\n\nInput Range\n* [Input Range](https://observablehq.com/@observablehq/input-range \"Input Range\") - Control used for size slider\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"md `### Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"width = size;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"height = size;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md `### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"getBBoxTextInObservable = function(text, fontSize, fontFamily){\n const svg = html``;\n\n //Add the text to the DOM\n document.body.appendChild(svg);\n\n //calculate and store bbox\n const box = svg.querySelector(\"[name=content]\").getBBox();\n\n //remove text\n svg.remove();\n\n //return bbox\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"getBBoxSVGInObservable = function(SVGstring){\n const svg = html``;\n\n //add SVG to the DOM\n document.body.appendChild(svg);\n\n //calculate and store bbox\n const box = svg.querySelector(\"[name=content]\").getBBox();\n\n //remove SVG\n svg.remove();\n\n //return bbox\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"md `### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"data = groupedData.filter(d=>d.group == group)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"fonts = [\n 'Arial'\n , 'Brush Script MT'\n , 'Courier New'\n , 'Garamond'\n , 'Helvetica'\n , 'Tahoma'\n , 'Times New Roman'\n , 'Trebuchet MS'\n , 'Verdana'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md `### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {groupedData} from \"@giammaria/group-svg-viewer-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"import {Inputs} from \"@observablehq/input-range\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null