30:[] 2e:{"title":"SVG Dinâmico com D3","cells":[{"id":0,"value":"md`# SVG Dinâmico com D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`## Um svg construído com JS sem D3:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"svg1 = {\n let svg = html``;\n let line = document.createElementNS(\"http://www.w3.org/2000/svg\", 'line');\n\tline.setAttribute(\"x1\", 0); \n\tline.setAttribute(\"y1\", 0); \n\tline.setAttribute(\"x2\", 300); \n\tline.setAttribute(\"y2\", 300); \n line.setAttribute(\"style\", \"stroke:black\")\n\tsvg.appendChild(line);\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`## Um svg construído com JS usando templates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"svg1a = {\n let lines = \"\";\n for (let i = 0; i < 300; i+= 10) {\n lines += ``;\n }\n return html``\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"md`## Importação da biblioteca d3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require (\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"md`## Alguns slides sobre d3+svg...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"{ \n let next = html``;\n let prev = html``;\n let div = html`

`;\n div.append(prev);\n div.append(next);\n next.onclick = () => { mutable slide = mutable slide + 1 };\n prev.onclick = () => { mutable slide = mutable slide - 1 };\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"mutable slide = 28","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`## SVG construído com JS+D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"svg2 = {\n let svgNode = html``;\n let svg = d3.select(svgNode);\n for (let i = 0; i < 300; i+= 10) {\n svg\n .append('line')\n .attr(\"x1\", 0)\n .attr(\"y1\", 0)\n .attr(\"x2\", i)\n .attr(\"y2\", 300)\n\t .style(\"stroke\", \"black\")\n }\n return svgNode;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`## SVG a partir de dados sem data join`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"svg3 = {\n let data = [100,20,80,90];\n\tlet svgNode = html``;\n let svg = d3.select(svgNode);\n\tdata.forEach((d,i) => {\n\t\tsvg.append(\"rect\") \n\t\t\t.attr(\"x\", i*70+50)\n .attr(\"y\", 250-d)\n\t\t\t.attr(\"width\",70)\n\t\t\t.attr(\"height\",d)\n .style(\"stroke\",\"black\")\n .style(\"fill\", \"lightgray\")\n })\n return svgNode;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`## Usando selectAll()`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"//rectColor = \"#ffaa00\"\nviewof rectColor = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"{ \n let button = html``;\n button.onclick = () => { \n d3.select(svg3).selectAll(\"rect\").style(\"fill\", rectColor);\n }\n return button;\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"{\n let button = html``;\n button.onclick = () => { \n d3.select(svg3).selectAll(\"rect\").style(\"fill\", (d,i) => {\n return i%2 == 1 ? rectColor : \"lightgray\"\n });\n }\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"md`## Usando data join`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"svg4 = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"function chart (data) {\n let w = 300 / data.length;\n let svg = d3.select(svg4);\n let join = svg.selectAll(\"rect\").data(data);\n let exiting = join.exit();\n let entering = join.enter()\n .append(\"rect\")\n .style(\"stroke\",\"black\")\n .style(\"fill\", \"lightgray\");\n exiting.remove();\n join.merge(entering)\n .attr(\"x\", (d,i) => i*w+50)\n .attr(\"y\", (d) => 250-d)\n .attr(\"width\", w)\n .attr(\"height\", (d)=>d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"chart([100,20,90,30])","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"md`## Usando data join e transitions`","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"svg5 = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"function chart2 (data) {\n let w = 300 / data.length;\n let svg = d3.select(svg5);\n let join = svg.selectAll(\"rect\").data(data);\n let exiting = join.exit();\n let entering = join.enter()\n .append(\"rect\")\n .attr(\"y\", (d) => 250)\n .attr(\"x\", (d,i) => i*w+50)\n .attr(\"width\", w)\n .attr(\"height\", 0)\n .style(\"stroke\",\"black\")\n .style(\"fill\", \"lightgray\");\n exiting.transition()\n .duration(1000)\n .attr(\"y\", (d) => 250)\n .attr(\"height\",0)\n .remove();\n join.merge(entering)\n .transition()\n .delay(1000)\n .duration(1000)\n .attr(\"x\", (d,i) => i*w+50)\n .attr(\"y\", (d) => 250-d)\n .attr(\"width\", w)\n .attr(\"height\", (d)=>d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"chart2([100,20,100,90])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}