30:[] 2e:{"title":"Datavis: d3.js & svg","cells":[{"id":0,"value":"md`# Datavis: d3.js & svg\nUsing d3 to create svg for data visualisation\n\nLets say we have the following data and we want to create a column chart with it.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"data = [5, 20, 10, 25, 15]","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`### Create HTML p manually`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"md`### Create HTML using template`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"html`\n

${ data[0] }

${ data[1] }

${ data[2] }

${ data[3] }

${ data[4] }

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`### Create using JS & DOM API`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"{\n const div = document.createElement(\"div\")\n \n for(let i=0; i < data.length; i++){\n let p = document.createElement(\"p\")\n p.innerText = data[i]\n div.appendChild(p);\n }\n \n return div\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`## Create HTML using d3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"{\n const div = d3.create(\"div\")\n\n div.selectAll(\"p\")\n .data(data)\n .enter()\n .append(\"p\")\n .text(d => d)\n \n return div.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`### Create HTML div manually`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"html`\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`### Create SVG manually\n\n- Draw a svg of width = 200 & height = 200, fill = blue\n- Create 5 rectangle in the box\n- Attributes of the rectangle: i \n - height: 30 \n - width: 10 * data[i] = [50, 200, 100, 250, 150]\n - x: 0\n - y: 40 * i = [0, 40, 80, 120, 160]\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`### Create SVG with JS\n\nLets first do it the hard way using the DOM api with JS\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"{\n const namespace = \"http://www.w3.org/2000/svg\" \n const svg = document.createElementNS(namespace, \"svg\")\n \n svg.setAttributeNS(null, \"width\", 200);\n svg.setAttributeNS(null, \"height\", 200);\n svg.setAttributeNS(null, \"fill\", \"blue\");\n \n for(let i=0; i < data.length; i++){\n let rect = document.createElementNS(namespace, \"rect\")\n rect.setAttributeNS(null, \"height\", 30);\n rect.setAttributeNS(null, \"width\", 10 * data[i]);\n rect.setAttributeNS(null, \"x\", 0);\n rect.setAttributeNS(null, \"y\", 40 * i);\n svg.appendChild(rect)\n }\n \n return svg\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"{\n const namespace = \"http://www.w3.org/2000/svg\" \n // const svg = document.createElementNS(namespace, \"svg\")\n // Replaced by\n const svg = d3.create(\"svg\")\n \n // svg.setAttributeNS(null, \"width\", 200);\n // svg.setAttributeNS(null, \"height\", 200);\n // svg.setAttributeNS(null, \"fill\", \"blue\");\n svg.attr(\"width\", 200) \n svg.attr(\"height\", 200) \n svg.attr(\"fill\", 200) \n \n for(let i=0; i < data.length; i++){\n let rect = document.createElementNS(namespace, \"rect\")\n rect.setAttributeNS(null, \"height\", 30);\n rect.setAttributeNS(null, \"width\", 10 * data[i]);\n rect.setAttributeNS(null, \"x\", 0);\n rect.setAttributeNS(null, \"y\", 40 * i);\n svg.appendChild(rect)\n }\n svg.selectAll(\"rect\")\n .data(data)\n .enter()\n .\n \n \n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}