2a:null 2b:["$","title",null,{"children":"D3 practice, 2021-03-31 | Hongtao Hao | Observable"}] 31:T63e,barchart= { const w = 900; const h = 400; const margin = ({top: 10, right: 10, bottom: 5, left: 20}) let dataset = []; for (let i = 0; i < numBars; ++i) { let randomNum = Math.random() * h; dataset.push(randomNum) }; let svg = d3.create("svg") .attr("width", w) .attr("height", h) .style("background-color", colorBg) let xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .range([margin.left, w - margin.right]) .paddingInner(0.05); let yScale = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([h - margin.bottom, margin.top]); svg.selectAll("rect") .data(dataset) .join("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => yScale(d)) .attr("width", xScale.bandwidth()) // Not xScale().bandwidth() .attr("height", d => h - margin.bottom - yScale(d)) .style("fill", colorBars); d3.select(newData) .on("click", function() { dataset = []; for (let i = 0; i < numBars; ++i) { let randomNum = Math.random() * h; dataset.push(randomNum) }; xScale.domain(d3.range(dataset.length)) yScale.domain([0, d3.max(dataset)]) svg.selectAll("rect") .data(dataset) .transition() .duration(1000) .attr("x", (d, i) => xScale(i)) .attr("y", d => yScale(d)) .attr("width", xScale.bandwidth()) .attr("height", d => h - margin.bottom - yScale(d)) }) return svg.node() }32:[] 2e:{"id":"61b4d9fda5d59ba9","slug":"d3-practice-2021-03-31","title":"D3 practice, 2021-03-31","thumbnail":"031743b65009680b33b3ef2e36a20cc81b91b45500f30448e46f51c61d5a1316","access_level":"public","create_time":"$D2021-03-30T21:57:19.700Z","update_time":"$D2021-12-19T18:39:05.896Z","view_time":null,"first_public_time":"$D2021-03-31T14:44:33.351Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/ee6259b27cf1635d95eeafe152f2a7982e66b35d5e447110f5c3371c231b7829","tier":"starter_2024"},"version":140,"publish_version":140,"role":null,"authored":false,"authors":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null}],"members":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"D3 practice, 2021-03-31","cells":[{"id":0,"value":"md`# D3 practice, 2021-03-31\nOur task today:\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof numBars = Range([1, 25], {value: 18, step: 1, label: \"number of bars:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof colorBars = color({\n value: \"#4682b4\",\n title: \"Color of bars\",\n description: \"You can the color of bars here\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof colorBg = color({\n value: \"#fcf6f3\",\n title: \"Background Color\",\n description: \"You can change the background color here\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"newData = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md` ## Elements in the abvoe figure:\n\n- an SVG (with width, height, and background color)\n- 18 bars\n - \\`x\\` and \\`y\\` coordinates\n - width and height\n - color\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`\n## Let's SVG!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`\nIf you confuse SVG properties with CSS properties, check out [my blog post on this topic](https://hongtaoh.com/en/2021/03/23/html-svg/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"w = 900","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"h = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"margin = ({top: 10, right: 10, bottom: 10, left: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"svg = d3.select(\"#demo\")\n .append(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", h)\n .style(\"background-color\", \"pink\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`\n## Data: random numbers\n\nWe need 18 random numbers, the index of which will be used for the calculation of bars's \\`x\\` coordinate, and the value of which will be the \\`y\\` coordinate of the bars. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"dataset = {\n let dataset = [];\n for (let i = 0; i < numBar; i++) {\n let randomNum = Math.random() * 1000;\n dataset.push(randomNum)\n }\n return dataset;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`\n- End each variable with a semicolon\n\n- If you cannot distinguish between \\`var\\`, \\`let\\` and \\`const\\`, read [this post of mine](https://next.observablehq.com/@hongtaoh/how-to-differentiate-let-const-and-var-in-observable)\n\n- Remember to Return!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`\n## Scale it up!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"xScale = d3.scaleBand()\n .domain(d3.range(dataset.length))\n .range([0, w])\n .paddingInner(0.05)","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(dataset)])\n .range([h, 0]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`\n## Let's go to bars!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"svg.selectAll(\"rect\")\n .data(dataset)\n .join(\"rect\")\n .attr(\"x\", function(d, i) {return xScale(i)}) // (d, i) => xScale(i)\n .attr(\"y\", d => yScale(d))\n .attr(\"width\", xScale.bandwidth())\n .attr(\"height\", d => h - yScale(d))\n .style(\"fill\", colorBar)","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`\n## Be a good (event) listener!\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"d3.select(button) // Don't use \"button\"\n .on (\"click\", function(){\n let dataset = [];\n \n for (let i = 0; i < numBar; i++) {\n let randomNum = Math.random() * 1000;\n dataset.push(randomNum)\n }\n \n xScale.domain(d3.range(dataset.length));\n yScale.domain([0, d3.max(dataset)]);\n\n svg.selectAll(\"rect\")\n .data(dataset)\n .transition()\n .delay((d, i) => i / dataset.length * 1000)\n .ease(d3.easeLinear)\n .duration(1000) //miliseconds\n .attr(\"x\", function(d, i) {return xScale(i)}) // (d, i) => xScale(i)\n .attr(\"y\", d => yScale(d))\n .attr(\"width\", xScale.bandwidth())\n .attr(\"height\", d => h - yScale(d));\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"viewof numBar = Range([1, 25], {value: 18, step: 1, label: \"number of bars:\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof colorBar = color({\n value: \"#4682b4\",\n title: \"Color of bars\",\n description: \"You can the color of bars here\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"button = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"chart = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {Range} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {color} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"