21:null 22:["$","title",null,{"children":"Day Three, 27 Aug 2020 | Hongtao Hao | Observable"}] 27:[] 25:{"id":"d772ed9a26b912e5","slug":"day-three","title":"Day Three, 27 Aug 2020","thumbnail":"4112526b427eba99e469884af249616e43463b2b9413b6091ede37e043d403a9","access_level":"public","create_time":"$D2020-08-26T19:09:39.776Z","update_time":"$D2020-09-02T15:53:10.334Z","view_time":null,"first_public_time":"$D2020-08-28T14:04:36.911Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ac0e7b04fecfcd79","login":"hongtaoh","name":"Hongtao Hao","avatar_url":"https://avatars-next.observableusercontent.com/ee6259b27cf1635d95eeafe152f2a7982e66b35d5e447110f5c3371c231b7829","tier":"starter_2024"},"version":131,"publish_version":131,"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,"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 Three, 27 Aug 2020","cells":[{"id":0,"value":"md`# Day Three, 27 Aug 2020\n\nI am learning Shirley Wu's *[Introduction to SVG and D3.js](https://observablehq.com/@sxywu/introduction-to-svg-and-d3-js)*`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md` I gave up since it's too difficult for me. I then started learning this: *[Lunch in the D3 Kitchen: penguin Dataviz](https://observablehq.com/@observablehq/lunch-the-d3-kitchen-penguin-dataviz)* and this: *[Palmer Penguins](https://observablehq.com/@enjalot/palmer-penguins)*, both of which are relatively new.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"import {penguins} from \"@enjalot/palmer-penguins\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"html`\n

Hello ! I am some HTML code page inside Observable

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md `if you are not familiar with \\`padding\\`, read [here](https://www.w3schools.com/css/css_padding.asp).`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"//Writing SVG code is exacly like writing HTML code.\nhtml`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"function Program(name) {\n return `Program: ${name}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"Program(\"What's your name?\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md` I really didn't have any experience with \\`Observable\\` and \\`D3.js\\`. When I simply inputed \\`flare = d3.csv()\\`, it said that \\`RuntimeError: d3 is not defined\\`. Why didn't tutorials say in the begining that we need to use a syntax like \\`d3 = require(\"d3@6\")\\` to load \\`D3.js\\`?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md `Not sure about what \\`require()\\` is? Read [here](https://observablehq.com/@observablehq/introduction-to-require).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"flare = d3.csv(\"https://gist.githubusercontent.com/mbostock/4063570/raw/11847750012dfe5351ee1eb290d2a254a67051d0/flare.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"DOM.download(new Blob([d3.csvFormat(flare)], {type:\"text/csv\"}),\"flare.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md `Well..., [this tutorial](https://observablehq.com/@uvizlab/d3-tutorial-1-introduction-to-observable) did mention using \\`d3 = require(\"d3@5\")\\` to import JavaScript libraries.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md `## Now, I am beginning to learn the second tutorial\n\nLink is [here](https://observablehq.com/@uvizlab/d3-tutorial-2-introduction-to-d3-with-observable?collection=@uvizlab/d3-tutorial)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md` Okay. I now know that \\`D3\\` stands for **\"Data-Driven Documents\"**, but what is **DOM**? After reading the [official introduction](https://d3js.org/), I still did not understand it quite well. I only knew that it stands for **Document Object Modle**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"ArrayofData = [5, 10, 15, 20, 25]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"//{\n// const D3DataConnection = d3.select(p).select","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md` While I am doing this, I came across these tutorials:\n- [Interactive Data Visualization for the Web](https://alignedleft.com/work/d3-book)\n- [Intro to D3.js by Square](http://square.github.io/intro-to-d3/)\n- [Dashing D3.js](http://square.github.io/intro-to-d3/)\n- [D3 in Depth](https://www.d3indepth.com/)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md` I started to learn the book of *Interactive Data Visualization for the Web (2nd ed)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md` \n- URL: Uniform Resource Locator\n- HTTP: Hypertext Transfer Protocol\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"html`\n

This is a really interesting post!

Amazing Visualization Tool Cures All Ills

A new open-source tool designed for visualization of data turns out to have an unexpected, positive side effect: it heals any ailments of the viewer. Leading scientists report that the tool, called D3000, can cure even the following symptoms:

fevers
chills
general malaise

It achieves this end with a patented, three-step process.

Load in data.
Generate a visual representation.
Activate magic healing function.