2d:null 2e:["$","title",null,{"children":"Usando arquivos SVG | Claudio Esperança | Observable"}] 33:[] 31:{"id":"29610665228bb6a1","slug":"usando-arquivos-svg","title":"Usando arquivos SVG","thumbnail":"1c39f44a8e5945aa3fc2d720a04667dcfb23f0f492f772b1e918c24027138b21","access_level":"public","create_time":"$D2019-09-17T18:37:13.162Z","update_time":"$D2019-09-26T14:00:49.663Z","view_time":null,"first_public_time":"$D2019-09-18T19:59:21.303Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":178,"publish_version":178,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"8bfe3c73fc63b3fb","slug":"visualizacao-de-dados","title":"Data Visualization","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"type":"notebook","body":{"title":"Usando arquivos SVG","cells":[{"id":0,"value":"md`# Usando arquivos SVG`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"md`## 1a Opção: Imagens e canvas`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"comment('Função para importar um svg como uma imagem')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"/**\n * From \n * \"@mbostock/cross-origin-images\"\n **/\nfunction fetch_image(src, cors=true) {\n return new Promise((resolve, reject) => {\n const image = new Image;\n if (cors) image.crossOrigin = \"anonymous\";\n image.src = src;\n image.onload = () => resolve(image);\n image.onerror = reject;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"comment('Um svg contendo o desenho de uma cápsula de remédio')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"pillUrl = \"https://www.svgrepo.com/show/41104/pill.svg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"image = fetch_image(pillUrl,false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"comment('Função para gerar uma outra imagem recolorida,rodada e escalada')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"tintedRotatedScaledImage = function(image,tint=\"yellow\",angle=Math.PI/3,scale=0.5) {\n let w = image.width;\n let h = image.height;\n const ctx = DOM.context2d(w*scale,h*scale,1);\n ctx.scale(scale,scale)\n ctx.translate(w/2,h/2);\n ctx.rotate(angle);\n ctx.translate(-w/2,-h/2);\n \n ctx.fillStyle = tint;\n ctx.fillRect(0,0,w,h);\n ctx.globalCompositeOperation = \"destination-in\";\n ctx.drawImage(image, 0, 0);\n return (ctx.canvas)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"tintedRotatedScaledImage(image,\"green\",Math.PI/3,0.3);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"comment('100 cápsulas coloridas')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"{\n const height = width*9/16;\n const ctx = DOM.context2d(width,height,1);\n const scale = 0.1;\n const h = image.height * scale;\n const w = image.width * scale;\n for (let i = 0; i < 100; i++) {\n let x = Math.random() * (width - 200) + 100 - w/2; \n let y = Math.random() * (height - 200) + 100 - h/2; \n let ang = Math.PI * Math.random();\n let tint = `rgb(${~~(Math.random()*255)},${~~(Math.random()*255)},${~~(Math.random()*255)})`;\n ctx.drawImage(tintedRotatedScaledImage(image,tint,ang,scale),x,y)\n }\n return ctx.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"md`## Segunda opção: usando svg inline`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"comment('Apenas o `path` que nos interessa')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"pillPath = ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"comment('Coloca-se o path numa seção `` de um svg e instancia-se com ``')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"comment(\"Várias cápsulas coloridas usando `d3`\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"{\n const height = width*9/16;\n const svgNode = html``\n const svg = d3.select(svgNode);\n const w = 520;\n const h = 520;\n const scale = 0.1;\n for (let i = 0; i < 100; i++) {\n let x = Math.random() * (width - 200) + 100 - w*scale/2; \n let y = Math.random() * (height - 200) + 100 - h*scale/2; \n let ang = 180 * Math.random();\n let tint = `rgb(${~~(Math.random()*255)},${~~(Math.random()*255)},${~~(Math.random()*255)})`;\n svg.append('use')\n .attr(\"xlink:href\", \"#pill\")\n .attr(\"fill\", tint)\n .attr(\"transform\", `translate(${x} ${y}) scale(${scale}) rotate(${ang} 260 260)`)\n }\n return svgNode\n}\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"md`## Bibliotecas`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"import {comment,util_style} from \"@esperanc/notebook-css-utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"util_style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"