2c:null 2d:["$","title",null,{"children":"SVG cheat sheet | Sumant Pattanaik | Observable"}] 32:T6da,{ const authorColor = "rgb(37, 29, 106)"; const authorHeight = 16; const height = 128; const lineHeight = 1.6; const margin = { top: 20, left: 20 }; const width = 420; const textColor = "rgb(28, 116, 203)"; const textHeight = 14; const titleColor = "rgb(100, 94, 182)"; const titleHeight = 20; const canvas = d3.select(DOM.svg()) .attr("width", width) .attr("height", height) .style("background-color", "#e0e0e0") .style("border", "1px solid #101010"); let bound = undefined; let text = canvas .append("text") .attr("x", margin.left) .attr("y", margin.top) .attr("fill", "black"); text.append("tspan") .text(d => "CAP 5937: Interactive Web-Based Visualization") .attr("class", "title") .attr("font-size", titleHeight) .attr("fill", titleColor); text.append("tspan") .text(d => `instructor: Sumanta N Pattanaik`) .attr("class", "author") .attr("font-size", authorHeight) .attr("fill", authorColor) .attr("x", margin.left) .attr("dx", 20) .attr("dy", Math.floor(authorHeight * lineHeight)); text.selectAll("tspan.text") .data(d => "Visualization of data using a web-based system.\nD3, plots, geographic visualizations, graphs, and interaction.\nHands-on experience, data visualization projects.".split("\n")) .enter() .append("tspan") .attr("class", "text") .text(d => d) .attr("font-size", textHeight) .attr("fill", textColor) .attr("x", margin.left) .attr("dx", 10) .attr("dy", Math.floor(textHeight * lineHeight)); return canvas.node() }33:T837,toolTip = ({ top: (width, height, offset, radius) =>{ const left = -width / 2 const right = width / 2 const top = -offset - height const bottom = -offset return `M 0,0 L ${-offset},${bottom} H ${left + radius} Q ${left},${bottom} ${left},${bottom - radius} V ${top + radius} Q ${left},${top} ${left + radius},${top} H ${right - radius} Q ${right},${top} ${right},${top + radius} V ${bottom - radius} Q ${right},${bottom} ${right - radius},${bottom} H ${offset} L 0,0 z` }, bottom: (width, height, offset, radius) => { const left = -width / 2 const right = width / 2 const bottom = offset + height const top = offset return `M 0,0 L ${-offset},${top} H ${left + radius} Q ${left},${top} ${left},${top + radius} V ${bottom - radius} Q ${left},${bottom} ${left + radius},${bottom} H ${right - radius} Q ${right},${bottom} ${right},${bottom - radius} V ${top + radius} Q ${right},${top} ${right - radius},${top} H ${offset} L 0,0 z` }, left: (width, height, offset, radius)=> { const left = -offset - width const right = -offset const top = -height / 2 const bottom = height / 2 return `M 0,0 L ${right},${-offset} V ${top + radius} Q ${right},${top} ${right - radius},${top} H ${left + radius} Q ${left},${top} ${left},${top + radius} V ${bottom - radius} Q ${left},${bottom} ${left + radius},${bottom} H ${right - radius} Q ${right},${bottom} ${right},${bottom - radius} V ${offset} L 0,0 z` }, right: (width, height, offset, radius) =>{ const left = offset const right = offset + width const top = -height / 2 const bottom = height / 2 return `M 0,0 L ${left},${-offset} V ${top + radius} Q ${left},${top} ${left + radius},${top} H ${right - radius} Q ${right},${top} ${right},${top + radius} V ${bottom - radius} Q ${right},${bottom} ${right - radius},${bottom} H ${left + radius} Q ${left},${bottom} ${left},${bottom - radius} V ${offset} L 0,0 z` } })34:[] 30:{"id":"739adb1f19885d16","slug":"svg-cheat-sheet","title":"SVG cheat sheet","thumbnail":"5a1b7ee535f7966d6fa8a40c3aa9399a07c1b7c87c048a70f19134b9671ed939","access_level":"public","create_time":"$D2021-01-09T01:06:46.194Z","update_time":"$D2021-01-14T23:09:40.544Z","view_time":null,"first_public_time":"$D2021-01-12T12:43:08.526Z","has_unpublished_edits":null,"fork":{"id":"6aa33bef7b49c575","slug":"svg-cheat-sheet","title":"SVG cheat sheet","owner":{"id":"7b1c5b66fd9285b7","login":"drom","name":"Aliaksei Chapyzhenka"}},"stars":4,"starred":false,"owner":{"type":"team","id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":"starter_2024"},"version":1510,"publish_version":1510,"role":null,"authored":false,"authors":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null}],"members":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"baff35547a2323b5","slug":"cap-5738","title":"Data Visualization Using D3 and Ploty.js","owner":{"id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik"}},"type":"notebook","body":{"titling":"auto","title":"SVG cheat sheet","cells":[{"id":0,"value":"md`\n# SVG cheat sheet\n\nAdapted from the following: \n - https://observablehq.com/@drom/svg-cheat-sheet and \n - https://learn-the-web.algonquindesign.ca/topics/svg-cheat-sheet/\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"md`### rect: Rectangle\n\\`\\`\\`\n\n x—the top left corner’s “x” coordinate.\n y—the top left corder’s “y” coordinate.\n width—the horizontal size of the rectangle.\n height—the vertical size of the rectangle.\n rx—for adding rounded corners; the horizontal radius of the rounding circle.\n ry—for adding rounded corners; the vertical radius of the rounding circle.\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"md`Example: \\`\\`\\` \\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"md` Example: \\`\\`\\` \\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"md` Example: \\`\\`\\` \\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"md` Example: \\`\\`\\` \\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"md`### line: \n\\`\\`\\` \n \n x1—the line’s starting “x” coordinate.\n y1—the line’s starting “y” coordinate.\n x2—the line’s ending “x” coordinate.\n y2—the line’s ending “y” coordinate.\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"md `Example: \\`\\`\\`\\`\\`\\`` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"md `Example: \\`\\`\\`\\`\\`\\` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"md `Example: \\`\\`\\`\\`\\`\\` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"md `### Circles\n\\`\\`\\`\n\n cx—the centre “x” coordinate.\n cy—the centre “y” coordinate.\n r—the radius of the circle (half its width).\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1286,"value":"md` Example: \\`\\`\\`\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"md `### Path\n\\`\\`\\`\n\n d—full of control commands and coordinates to control the path\nGenerally written by a program, not written by hand.\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"md` Example: \\`\\`\\`\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"md` Example: \\`\\`\\`\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"md` Example: \\`\\`\\`\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1245,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md` ### Text \n\\`\\`\\`\nDinosaurs!\n x: the “x” coordinate of the text’s anchor point.\n y: the “y” coordinate of the text’s anchor point.\n dx: adjust the text horizontally in relation to where it is currently.\n dy: adjust the text vertically in relation to where it is currently.\n alignment-baseline: The base line of the text\n text-anchor: the text alignment: start (left), middle (centre), end (right).\n\n \n\\`\\`\\`\nSee: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor \nand https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"md`\\`\\`\\`baseline (default)\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"md`\\`\\`\\`middle\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1233,"value":"md`\\`\\`\\`hanging\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`\nhttps://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"md`\\`\\`\\`start (default)\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1195,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"md`\\`\\`\\`middle\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"md`\\`\\`\\`end\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"md`\\`\\`\\`Moved\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"md`\\`\\`\\`Rotate\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"md`### Multiple text lines using text and tspan`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"md`### Example: ToolTip using Path`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"viewof position = radio({\n title: 'Choose Tooltip Position',\n options: [\n 'left', 'right', 'top', 'bottom'\n ],\n value: 'left'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"{\n const width = 512, height = 128;\n const svgNode = html``;\n const svg = d3.select(svgNode);\n const chart = svg.append(\"g\")\n .attr(\"transform\",\"translate(256,64)\")\n .style(\"fill\",\"none\")\n .style(\"stroke\",\"blue\")\n .append(\"path\")\n .attr(\"d\",toolTip[position](50,25,5,5));\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`### View Box\nsee: https://www.geeksforgeeks.org/svg-viewbox-attribute/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"md`Example: \\`\\`\\`\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1487,"value":"html`` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`### Definitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"grid = ()=> {\n const vLines = () =>{\n const lines = [];\n for (let x = 0; x <= 512; x+=16) lines.push (``);\n return lines.join(\"\\n\");\n }\n const hLines = () =>{\n const lines = [];\n for (let y = 0; y <= 128; y+=16) lines.push (``);\n return lines.join(\"\\n\");\n }\n const axisLines = () =>{\n const lines = [\n \"\",\n \"\"\n ];\n return lines.join(\"\\n\");\n }\n return `\n${vLines()}\n${hLines()}\n\n\n${axisLines()}\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1398,"value":"md`### Libraries and widgets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"