2e:null 2f:["$","title",null,{"children":"D3. Part 1 - HTML, SVG and a Basic Bar Chart | philippkoytek | Observable"}] 34:[] 32:{"id":"629f4af8a50157e3","slug":"d3-part-1-html-svg-and-a-basic-bar-chart","title":"D3. Part 1 - HTML, SVG and a Basic Bar Chart","thumbnail":"867e264f10ca6fa91aaba692d6ee8a32084ce6af342999ac4097a6e7b7ef218e","access_level":"public","create_time":"$D2020-11-28T16:36:52.205Z","update_time":"$D2020-11-28T16:37:12.260Z","view_time":null,"first_public_time":"$D2020-12-01T09:33:30.614Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d1485b4e59b7f657","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":"starter_2024"},"version":155,"publish_version":155,"role":null,"authored":false,"authors":[{"type":"individual","id":"6ec2f9ddd766f194","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":null}],"members":[{"type":"individual","id":"6ec2f9ddd766f194","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"02bbccbe7ab24f4b","slug":"d3-tutorial","title":"D3 Tutorial","owner":{"id":"d1485b4e59b7f657","login":"philippkoytek","name":""}},"type":"notebook","body":{"title":"D3. Part 1 - HTML, SVG and a Basic Bar Chart","cells":[{"id":0,"value":"md`# D3. Part 1 - HTML, SVG and a Basic Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"html`\n

Hello World!

item
item
item
item

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3.selectAll(\"li\").attr(\"style\", \"color: red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"{\n const list = d3.create(\"ol\");\n \n list.selectAll(\"li\")\n .data([5, 6, 12, 44])\n .join(\"li\")\n .text((d) => d)\n .attr(\"style\", (d) => `color: ${d < 10 ? \"lightblue\" : \"blue\"}`);\n \n return list.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"d3.selectAll(\".first-rect\").attr(\"fill\", \"red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", 720)\n .attr(\"height\", 120);\n \n svg.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 25)\n .attr(\"height\", 20)\n .attr(\"width\", 150);\n \n svg.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 50)\n .attr(\"height\", 20)\n .attr(\"width\", 110)\n .attr(\"fill\", \"red\");\n \n svg.append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 75)\n .attr(\"height\", 20)\n .attr(\"width\", 50);\n \n \n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"data = [23, 45, 66, 89, 33, 12, 23];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"chartWidth = 720;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"height = 150;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"margin = ({top: 20, right: 0, bottom: 20, left: 20});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", chartWidth)\n .attr(\"height\", height);\n \n svg.selectAll(\".bar\")\n .data(data)\n .join(\"rect\")\n .attr(\"class\", \"bar\")\n .attr(\"x\", x(0))\n .attr(\"y\", (d, i) => y(i))\n .attr(\"height\", y.bandwidth())\n .attr(\"width\", (d) => x(d) - x(0));\n \n svg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(y));\n \n svg.append(\"g\")\n .attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(x));\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`# d3 scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"y = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(data)])\n .range([margin.left, chartWidth - margin.right]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"