2d:null 2e:["$","title",null,{"children":"Data Visualization _Week 03 | Yonghak Kim | Observable"}] 33:T4da,{ //svg variables const width = 900; const height = 100; //create SVG artboard const svg = d3.create("svg").attr("width", width).attr("height", height); //find the SVG artboard we created, and add an SVG circle svg .append("circle") .attr("cx", 100) .attr("cy", 50) .attr("r", 25) .style("fill", "teal"); //find the SVG artboard we created, and add an SVG polyline svg .append("polyline") .attr("points", [ [200, 50], [250, 20], [350, 70], [400, 50] ]) .attr("cy", 50) .attr("r", 30) .style("fill", "none") .style("stroke", "#CC00AA") .style("stroke-width", 3); //find the SVG artboard we created, and add an SVG rectangle svg .append("rect") .attr("x", 450) .attr("y", 20) .attr("width", 120) .attr("height", 60) .style("fill", "none") .style("stroke", "#CC00AA") .style("stroke-width", 3) ; //find the SVG artboard we created, and add SVG text svg .append("text") .attr("x", 725) .attr("y", 50) .style("text-anchor", "middle") .style("alignment-baseline", "middle") .text("🌑🌒🌓🌔🌕🌖🌗🌘🌑"); //show visualization in Observable return svg.node(); }34:Tb22,{ const width = 800; const height = 200; const margin = 25; const planets = [ { name: "Mercury", size: 12878, distance: 0.39, outerColor: "#666699", coreColor: "#cccccc" }, { name: "Venus", size: 12104, distance: 0.723, outerColor: "#ffcc00", coreColor: "#995522" }, { name: "Earth", size: 12756, distance: 1, outerColor: "#33ccff", coreColor: "#228800" }, { name: "Mars", size: 6787, distance: 1.524, outerColor: "#ff6666", coreColor: "#774422" }, { name: "Jupiter", size: 142796, distance: 5.203, outerColor: "#ff9977", coreColor: "#997755" }, { name: "Saturn", size: 120660, distance: 9.539, outerColor: "#ddcc66", coreColor: "#666666" }, { name: "Uranus", size: 51118, distance: 19.18, outerColor: "#99ccff", coreColor: "#6688ff" }, { name: "Neptune", size: 48600, distance: 30.06, outerColor: "#33cccc", coreColor: "#55ffff" } ]; const svg = (d3.create("svg").attr("viewBox", [0 , 0 , width , height])); const bg = svg .append ("rect") .attr ("x" , 0) .attr ("y" , 0) .attr ("width" , width) .attr ("height", height) .attr ("fiil", "#000"); for (let i = 0; i < 100; i++) { const star = svg .append ("circle") .attr ("cx", Math.random() * width) .attr ("cy", Math.random() * height) .attr ("r", Math.random() * 2) .attr ("opacity", Math.random()) .attr ("fill", "#fff") .attr ("class", "stars"); } const defs = svg.append("defs"); for (let i = 0; i < planets.length; i++) { const gradient = defs.append("radialGradient").attr("id", planets[i].name); gradient .append ("stop") .attr ("offset", "0%") .attr ("stop-color", planets[i].coreColor); gradient .append ("stop") .attr ("offset", "100%") .attr ("stop-color", planets[i].outerColor); } const sizeScale = d3 .scaleLinear () .domain (d3.extent(planets, (d) => d.size)) .range ([3,50]); const distanceScale = d3 .scaleLinear () .domain (d3.extent(planets, (d) => d.distance)) .range ([margin, width-margin]); for (let i = 0; i < planets.length; i++) { const planet = svg .append ("circle") .attr ("cx", distanceScale(planets[i].distance)) .attr ("cy", height / 2) .attr ("r", sizeScale(planets[i].size)) .attr ("id", "name") .style ("fill", "url(#" + planets[i].name + ")"); } const sol = svg .append ("rect") .attr ("x", "0") .attr ("y", "0") .attr ("width", "5") .attr ("height", height) .attr ("fill", "#fd0"); return svg.node(); }35:[] 31:{"id":"a3d3416b77c7d84d","slug":"data-visualization-_week-03","title":"Data Visualization _Week 03","thumbnail":"cfdbf8fc81c95da19f064a3847abba0092b60cfe3ffa45e0a3213e60b28943ae","access_level":"public","create_time":"$D2021-09-13T16:16:00.624Z","update_time":"$D2021-09-14T20:13:36.115Z","view_time":null,"first_public_time":"$D2021-09-13T20:11:49.699Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a3c3de8ace492cbf","login":"designyk","name":"Yonghak Kim","avatar_url":"https://avatars-next.observableusercontent.com/bf36b9b9ddc35ea4d3ff4026fea71353b6448d7b0950e73e44241a48dfe70696","tier":"starter_2024"},"version":461,"publish_version":461,"role":null,"authored":false,"authors":[{"type":"individual","id":"512d6c5dbbb0f9da","login":"designyk","name":"Yonghak Kim","avatar_url":"https://avatars-next.observableusercontent.com/bf36b9b9ddc35ea4d3ff4026fea71353b6448d7b0950e73e44241a48dfe70696","tier":null}],"members":[{"type":"individual","id":"512d6c5dbbb0f9da","login":"designyk","name":"Yonghak Kim","avatar_url":"https://avatars-next.observableusercontent.com/bf36b9b9ddc35ea4d3ff4026fea71353b6448d7b0950e73e44241a48dfe70696","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Data Visualization _Week 03","cells":[{"id":0,"value":"# Data Visualization _Week 03\n## **Hello World Data Visualization Challenge**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"import {helloDataset} from \"@zachpino/week-2-intro-to-javascript-for-visualization\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"helloDataset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"{\n const width = 720;\n const height = 360;\n \n const svg = (d3.create(\"svg\").attr(\"viewBox\", [0 , 0 , width , height]));\n \n for (let i = 0; i < helloDataset.length; i++) {\n svg\n .append (\"circle\")\n .attr (\"cx\", (parseFloat(helloDataset[i].long)+ 180) *2)\n .attr (\"cy\", (-parseFloat(helloDataset[i].lat)+ 90) *2)\n .attr (\"r\", 1)\n .attr (\"fill\", \"none\")\n .attr (\"stroke\", \"#000\")\n .attr (\"stroke-width\", 0.5);\n }\n\n for (let i = 0; i < helloDataset.length; i++) {\n svg\n .append(\"text\")\n .attr (\"x\", (parseFloat(helloDataset[i].long)+ 180) *2)\n .attr (\"y\", (-parseFloat(helloDataset[i].lat)+ 90) *2 -10)\n .attr (\"font-size\", \"10px\")\n .attr (\"text-anchor\", \"middle\")\n .attr (\"alignment-baseline\", \"top\")\n .text(helloDataset[i].hello);\n }\n \n return svg.node();\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"---\n### Practice for Tutorial","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"{\n const greeting = \"hello\";\n\n return greeting;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"{\n const greeting = \"hello\";\n \n return greeting.length;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"{\n const greeting = \"👋\";\n \n return greeting.length;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"{\n const secondsPerMinute = \"60\";\n const minutesPerHour = \"60\";\n const hoursPerDay = \"24\";\n const daysPerWeek = \"7\";\n const weeksPerYear = \"52\";\n\n const secondsPerYear =\n secondsPerMinute *\n minutesPerHour *\n hoursPerDay *\n daysPerWeek *\n weeksPerYear ;\n\n return secondsPerYear;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"{\n\n const illiniosRetailTax = 0.0625;\n const cookCountyRetailTax = 0.0175;\n const chicagoRetailTax = 0.0125;\n const regionalTransitTax = 0.01;\n\n const totalTaxRate =\n illiniosRetailTax +\n cookCountyRetailTax +\n chicagoRetailTax +\n regionalTransitTax;\n\n const subTotal = 99.99;\n const taxedTotal = subTotal * (1 + totalTaxRate);\n\n return \"the Grand Total is : $\" + taxedTotal.toFixed (2);\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"{\n return \"When we add one and one, we would probably expect the answer to be \" + (1+1) + \", but sometimes we want \" + (\"1\" + \"1\") + \" instead\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"{\n return \"pi is the floating number \" + Math.PI +\n \"\\n but it can be represented as a string: \" + String(Math.PI) +\n \"\\n or as an integer:\" + parseInt(Math.PI) +\n \"\\n or as a fixed precision float: \" + parseFloat(Math.PI).toFixed(2) + \n \"\\n or as a greek letter: \" + \"π\" +\n \"\\n or as an emoji: \" + \"🥧\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"kwey\",\n \"aloha\"\n ] ;\n return worldGreetings;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"kwey\",\n \"aloha\"\n ];\n \n return (\n \"This dataset includes \" + worldGreetings.length + \" words for Hello\"\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"{\n const worldGreeting= [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"kwey\",\n \"aloha\"\n ];\n return (\n \"the first item in the array is '\" + worldGreeting[0] +\n \"', and the third item is '\" + worldGreeting[2] + \"'\"\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"{\n const worldGreeting = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"kwey\",\n \"aloha\"\n ];\n\n const finalIndex = worldGreeting.length-1;\n\n return \"the last item of the array is \" + worldGreeting[finalIndex]\n ;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"{\n const worldGreeting = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"kwey\",\n \"aloha\"\n ];\n\n worldGreeting.push(\"kamusta\")\n\n return worldGreeting;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"{\n const worldGreeting = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"kwey\",\n \"aloha\"\n ];\n\n worldGreeting[1] = \"ola\";\n worldGreeting[2] = \"konnichi wa\";\n\n return worldGreeting; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"kwey\",\n \"aloha\"\n ];\n\n worldGreetings[200] = \"ola\";\n\n return worldGreetings.length;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"kwey\",\n \"aloha\"\n ];\n\n worldGreetings[200] = \"ola\";\n\n return worldGreetings[50];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"{\n const countUp = [];\n for (let i=0; i<5; i=i+1){\n countUp.push(i)\n }\n return countUp;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"{\n const decreasingEvent36to22 = [];\n for (let i = 36; i >= 22; i = i-2) {\n decreasingEvent36to22.push(i);\n }\n return decreasingEvent36to22;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"{\n const worldGreetings =[\n \"bonjour\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"kwey\",\n \"aloha\"\n ];\n\n worldGreetings.push(\"Annyunghaseyo\")\n\n \n const languages = [\n \"french\",\n \"swahili\",\n \"thai\",\n \"turkish\",\n \"quechua\",\n \"twi\",\n \"mandarin\",\n \"algonquin\",\n \"hawaiian\"\n ];\n\n languages.push(\"korea\")\n \n const factoids = [];\n for (let i=0; i