D3 Page Template

3f:null 40:["$","title",null,{"children":"Day Six, 30 Aug 2020 | Hongtao Hao | Observable"}] 46:[] 44:{"id":"c06563d9ae054afd","slug":"day-six","title":"Day Six, 30 Aug 2020","thumbnail":"413d06ec4ce20ec5f4a45f732bc05e30012a9a57836b25c91057b68d2102da64","access_level":"public","create_time":"$D2020-08-30T19:03:56.828Z","update_time":"$D2020-09-02T15:51:15.578Z","view_time":null,"first_public_time":"$D2020-08-30T19:12:23.836Z","has_unpublished_edits":null,"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","bio":"","following":false},"version":187,"publish_version":187,"role":null,"authored":false,"authors":[{"type":"individual","id":"534b8b5a17d1d792","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/275bdbd20c688c26dcac698202028ab781d97547864853f854ba4dc49f22a2bf","tier":null,"bio":"","following":false}],"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,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"4fc1ed8461b3de78","slug":"45-days-of-learning-d3","title":"40 Days of learning D3","owner":{"id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao"}},"type":"notebook","body":{"titling":"auto","title":"Day Six, 30 Aug 2020","cells":[{"id":0,"value":"md`# Day Six, 30 Aug 2020`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"dataset = [\n [5,20], [480,90], [250,50], [100,33], [330,95],\n [410,12], [475,44], [25,67], [85,21], [220,88]\n ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3.max(dataset, function(d){\n return d[0];\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"xScale = d3.scaleLinear()\n.domain([0, d3.max(dataset, function(d) { return d[0]; })])\n.range([0, width]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"yScale = d3.scaleLinear().domain(\n [0, d3.max(dataset, function(d) { return d[1]; })]).range(\n [0,height]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`Functions and methods are the same, basically. They take in our codes and give us outputs. \n\n\\`D3\\` is an object. We need to reference it first before we can access its functions, like \\`select\\`, \\`append()\\` and \\`text()\\`. \n\nScott was using \\`append(\"p\")\\`. I tried to replace \\`\"p\"\\` with anything I liked, and they also worked. Try yourself. **I don't know why they worked, though.**\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md` **anonymous function** and **named function**\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"template = html`\n\n \n\n\t\n\tD3 Page Template\n\t\n \n \n \t\n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"dataset_2 = [5, 10, 15, 20, 25];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md` In \\`.text(function(d){return d;})\\`, the anonymous function will run first. \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`## Chapter 5 Tasks:\n- generate a \\`dataset\\` made up of five numbers: 5, 10, 15, 20, 25;\n- generate five lines of texts, each line of text being \"New paragraph!\";\n- generate five lines of texts: \"I can count up to 5\", \"10\", ...\n- make all the five lines red;\n- make only lines in which the number is above 15 red, and all else lines black;\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"md `## Chapter Six\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"