2d:null 2e:["$","title",null,{"children":"Week 4 : Intro to Javascript for Visualization | Zach Pino | Observable"}] 33:T49c,javascript_basics = md` ### Javascript Basics Turning our attention this week to *generating* the SVG code that we learned last week, we will again cut the compound exercise of *data visualization* into its constituent parts *data* and *visualization*, and take each in turn. A **datum** (the singular form of **data**) in its simplest form is a *record* of something observed in the world. Often, these records are numerical, though the most exciting **datasets** (collections of interrelated data) for visualization purposes are often a bit more complex. From a programming point of view, *everything is data, and everything is recordable*. Programming languages are fundamentally a set of structured methods for selectively ingesting, parsing, manipulating, shedding, synthesizing, and restructuring data. The language that we will be using, Javascript, has an extraordinaily diverse set of these native methods, and Observable and D3 add on even more. We will jump into programming without explaining every single line — and instead strive to begin using these computational tools without worrying too much about the details. Over time, we will fill-in all the gaps. `34:T5a6, Woohoo! We just made a computer program. Not very exciting, but this is still an extraordinary accomplishment — built atop a tremendously deep, nested foundation of thousands of lines of code and human brilliance and sweat. To go further, this is a *data visualization* — just one without any data simplification, transformation, or much visual pizazz. The bytes making up the word "Hello" are stored in a **variable** (a named container for data) called `greeting`, which are then converted into on-screen text by Observable's runtime environment and your browser. Seriously, thousands of lines of code, millions of miles of electrical cable, and billions of of human labor hours were required to make that happen. The \`const\` keyword indicates that this variable is a **constant**, a variable which cannot be changed later. There are other variable types that provide for more flexiblity, such as `let` and `var`, though we will in nearly every case want to stick with \`const\` since it keeps our code [clean, understandable, and easier to debug](https://bluepnume.medium.com/functional-ish-javascript-205c05d0ed08). That said, we can also make an Observable variable without `const` and the curly braces that have been needed so far. Observable **global** variables can see one another in separate blocks, unlike `const` **local** variables. This distinction is an important one, but we will save the complexity for a bit later. 35:T46e, So how do we fix it? Javascript gives us a powerful structure to interconnect data points and functional behaviors. These are called [**objects**](https://www.w3schools.com/js/js_objects.asp) in most Javascript literature, but are now also sometimes identified as **dictionaries** due to the influence of [Python's similar data structure](https://www.w3schools.com/python/python_dictionaries.asp). Objects are simple structures, recognizable by their characteristic curly braces. Within an object, **keys**, which we can analogize as a column header in an Excel sheet, identify specific data **values** with a colon. Objects can contain as many **key-value** pairs as you would reasonably like to add, and those individual pairings are separated by commas. Each of these pairings is called a **property**. It is lots of new specific terms, definitely, but this excessive vocabulary makes googling answers a lot easier. In the example below, the **object** `swahili` contains 3 **properties**. Its **keys** are `name`, `greeting`, and `speakers`, and the associated **values** are "swahili", "jambo", and `150000000` respectively. 36:T4d1,{ //svg variables const width = 800; 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", 150) .attr("height", 60) .style("fill", "none") .style("stroke-width", 3) .style("stroke", "f00"); //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(); }37:T5f3, ### Visualization for Real And, with minimal additions to the example above, we can create a more recognizable data visualization. Data on planets is structured as an array of objects, which are then iterated through in a `for` loop with sizes, distances, and colors pulled out from the dataset. The `size` key is the planet's diameter at equator in kilometers, and `distance` is the planet's distance from the sun's center in [astronomical units](https://en.wikipedia.org/wiki/Astronomical_unit). Additional shapes are drawn to give the SVG artboard a background color and a sun, and another `for` loop draws the stars. The star loop makes use of `Math.random()` to generate a random number between 0 and 1 for random opacity and placement. Note that this is a misleading visualization. The size of the planets, and their distance from the sun, are scaled differently for interpretability purposes. If we scaled them the same, many of the planets [would not even be a single pixel big](https://en.wikipedia.org/wiki/Pale_Blue_Dot)! There is a lot going on, but take it line-by-line and log any questions for discussion next week. We will work through this together, don't stress! In particular, take note of the comments describing the [magic numbers](https://en.wikipedia.org/wiki/Magic_number_(programming)) used to place and size the planets. This is an inelegant approach, and we will soon have better tools available for this particular challenge. But, it should be a familiar step from our *Dear Data* work! 38:Ta68,solarSystemSimple = { //svg variables const width = 1000; const height = 200; const margin = 25; //planetary data const planets = [ { name: "Mercury", size: 4879, distance: 0.39, outerColor: "#666699", coreColor: "#cccccc" }, { name: "Venus", size: 12104, distance: 0.723, outerColor: "#ffcc00", coreColor: "#995522" }, { name: "Earth", size: 12742, distance: 1, outerColor: "#33ccff", coreColor: "#228800" }, { name: "Mars", size: 6787, distance: 1.524, outerColor: "#ff6666", coreColor: "#774422" }, { name: "Jupiter", size: 139820, 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" } ]; //create SVG artboard const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //black background const bg = svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "#000"); //create random white stars in the background 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"); } //loop through planets and draw circles for each for (let i = 0; i < planets.length; i++) { const planet = svg .append("circle") //The svg is 1000 units wide. Neptune is farthest, ~30 AU. We might want to place it at ~900 pixels. 30 * 30 = 900 .attr("cx", planets[i].distance * 30) .attr("cy", height / 2) //The biggest planet is Jupiter, it has a size of 139820. Arbitrarily, 30 pixels seemed like a good max radius. 139820/30 = ~5000 .attr("r", planets[i].size / 5000) .attr("fill", planets[i].outerColor); } //draw sun as rectangle on the very edge of the artboard, since it is such a big circle! const sol = svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 5) .attr("height", height) .attr("fill", "#fd0"); //show visualization in Observable return svg.node(); }39:Tce7,solarSystem = { //svg variables const width = 800; const height = 200; const margin = 25; //planetary data const planets = [ { name: "Mercury", size: 4879, distance: 0.39, outerColor: "#666699", coreColor: "#cccccc" }, { name: "Venus", size: 12104, distance: 0.723, outerColor: "#ffcc00", coreColor: "#995522" }, { name: "Earth", size: 12742, distance: 1, outerColor: "#33ccff", coreColor: "#228800" }, { name: "Mars", size: 6787, distance: 1.524, outerColor: "#ff6666", coreColor: "#774422" }, { name: "Jupiter", size: 139820, 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" } ]; //create SVG artboard const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //black background const bg = svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "#000"); //create random white stars in the background 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"); } //create definitions element to hold gradient definitions const defs = svg.append("defs"); //loop through planets and create gradients 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); } //converters that take in data, and spit out pixel coordinates 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]); //loop through planets and draw circles for each 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", planets[i].name) .style("fill", "url(#" + planets[i].name + ")"); } //draw sun as rectangle on the very edge of the artboard, since it is such a big circle! const sol = svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 5) .attr("height", height) .attr("fill", "#fd0"); //show visualization in Observable return svg.node(); }3a:T4e9, You can [import this dataset](https://observablehq.com/@observablehq/introduction-to-imports) to your notebook with the following code: `import {helloDataset} from "@zachpino/week-4-intro-to-javascript-for-visualization"` You will then be able to use the `helloDataset` variable as an array like any other in your notebook. In a separate Observable notebook, write the Javascript code to produce an SVG visualization that is 720 pixels wide (Earth lines of longitude multiplied by 2) by 360 pixels tall (Earth lines of latitude multiplied by 2). Place an SVG circle for each datum at its longitude-latitude point, and add an SVG text element with each country's greeting there as well. [Style it nicely](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text)! Hint: *Make sure you pay attention to the data types in the helloDataset - you will need to do some [casting](#casting)*. Hint: *An upside-down map is so close!* All you need to do is some subtraction on your y-values... think about it! Note that the dataset uses negative values for northern latitudes and western longitudes... you will need to do something about that! ----- Just to give a hint about what this might look like... though yours can absolutely look different!!! 3b:[{"id":"f07e9a705e5fce2043f20d019676f426cea78c11f1b8eea2ebb1432778d88d78e3a26c005448a8b1510816f291320dac2180a00d0c481904f43a697287aa653e","href":"https://static.observableusercontent.com/files/f07e9a705e5fce2043f20d019676f426cea78c11f1b8eea2ebb1432778d88d78e3a26c005448a8b1510816f291320dac2180a00d0c481904f43a697287aa653e","name":"salut.csv","type":"text/csv","lastModified":1663242466475.658,"size":12838},{"id":"dcbf95104d75668e7787a55aedf8f556da26c1e633913b75e9f03c8f301853dbb7037a7b35b168381eac5794b7b1be84e1d169f4ba8faa7f64be550947225930","href":"https://static.observableusercontent.com/files/dcbf95104d75668e7787a55aedf8f556da26c1e633913b75e9f03c8f301853dbb7037a7b35b168381eac5794b7b1be84e1d169f4ba8faa7f64be550947225930","name":"map.png","type":"image/png","lastModified":1663279540567.393,"size":108602}] 31:{"id":"2c544036ca1fc0c6","slug":"week-4-intro-to-javascript-for-visualization","title":"Week 4 : Intro to Javascript for Visualization","thumbnail":"d5c3343aad44a0f411a76841c29f4fd3b4b7f8d47c777bd9cb0f01312a564642","access_level":"public","create_time":"$D2022-09-15T11:47:46.475Z","update_time":"$D2024-09-04T18:01:41.577Z","view_time":null,"first_public_time":"$D2022-09-15T12:42:54.744Z","has_unpublished_edits":null,"fork":{"id":"f4d873ab3aa53746","slug":"week-3-intro-to-javascript-for-visualization/2","title":"Week 3 : Intro to Javascript for Visualization","owner":{"id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino"}},"stars":1,"starred":false,"owner":{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024"},"version":1274,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null}],"members":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c8b24cbf2b83b139","slug":"id-fall-2022-communication-systems-workshop","title":"ID Fall 2022 Communication Systems Workshop","owner":{"id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino"}},"type":"notebook","body":{"title":"Week 4 : Intro to Javascript for Visualization","cells":[{"id":0,"value":"title = md`\n# Week 4 : Intro to Javascript for Visualization \n## Creating Simple Graphics with JS\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"variables = md`\n### Variables\nLet us still begin where every [programming tutorial must](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program), with variables. Run all the code below by clicking the arrow in each cell. Edit and play with the code! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"{\n const greeting = \"Hello!\";\n\n return greeting;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1067,"value":"observableGreeting = \"Welcome\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"observableSentence = observableGreeting + \" to coding!\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"The remainder of this page will use the curly brace syntax rather than Observable variable blocks for clarity, but in the future we will make much more use of Observable's powerful [reactive model](https://observablehq.com/@observablehq/how-observable-runs). Observable and D3 are [not simple Javascript](https://observablehq.com/@observablehq/observables-not-javascript) and are instead a set of useful extensions and shortcuts, but these are hard to debug without first grasping the core principles of the language itself.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"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":54,"value":"\nA small tweak. By adding the `.length`, we asked Javascript to count the number of letters in \"Hello\", which is a **string** of characters that has a finite *length*. Note that javascript lines always terminate in a semicolon, or at least they are supposed to. It is in nearly all cases just fine to leave it off.\n\nSome interesting things happen when we push on this a bit...\n`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"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":61,"value":"\nHmmm, \"2\", is that your final answer, Javascript? Emoji are weird, we will need to investigate later.\n\nVariables can also hold numbers, and we can transform them with mathematical **operators** just like we would expect.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"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":100,"value":"\nWe can combine operators, raw numbers, and variables without issue. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"{\n const illinoisRetailTax = 0.0625;\n const cookCountyRetailTax = 0.0175;\n const chicagoRetailTax = 0.0125;\n const regionalTransitTax = 0.01;\n\n const totalTaxRate =\n illinoisRetailTax +\n cookCountyRetailTax +\n chicagoRetailTax +\n regionalTransitTax;\n\n const subTotal = 99.99;\n const taxedTotal = subTotal * (1 + totalTaxRate);\n\n return taxedTotal;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"\nThat looks ugly - we would never see a price like that on a receipt — so let's make that a bit more human-readable. We can ask Javascript to *fix* our **floating point number**, a decimal number with an arbitrarily long **precision**, to a certain number of places. And yes, the code below adds a dollar sign to a number. *Weird*.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"{\n const illinoisRetailTax = 0.0625;\n const cookCountyRetailTax = 0.0175;\n const chicagoRetailTax = 0.0125;\n const regionalTransitTax = 0.01;\n\n const totalTaxRate =\n illinoisRetailTax +\n cookCountyRetailTax +\n chicagoRetailTax +\n regionalTransitTax;\n\n const subTotal = 99.99;\n const taxedTotal = subTotal * (1 + totalTaxRate);\n\n return \"$\" + taxedTotal.toFixed(2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"\n### Variable Types and Casting \nOne of the nice, but also infuriating, aspects of Javascript is how easy it is to **cast** variables from one **data type** to another. Strings and numbers of all types (binary, octal, hexadecimal, integers, floating point numbers) can be converted back and forth, and we can even combine them without issue with mathematical operators.\n\nNote how, in the code below, floating point numbers, integers, and strings are all smashed together.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"{\n const illinoisRetailTax = 0.0625;\n const cookCountyRetailTax = 0.0175;\n const chicagoRetailTax = 0.0125;\n const regionalTransitTax = 0.01;\n\n const totalTaxRate =\n illinoisRetailTax +\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}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"\nThis can lead to some unusual behaviors, so we need to be careful. Note the parentheses and quotations prescribing certain outcomes below. These transformations will become intuitive over time.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"{\nreturn \"When we add one and one, we would probably expect the answer to be \" + (1 + 1) + \", but sometimes we might want \" + (\"1\" + \"1\") + \" instead.\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"\nIn the event that you want to be absolutely sure, casting to a specific type is helpful.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"{\n return \"pi is the floating point number \" + Math.PI +\n \"\\n but it can be representated 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":66,"value":"\n### Arrays\nThe true power of Javascript, and a fundamental prerequisite for data visualization, is having more than one datum to manipulate and compare. There are several structures to hold data together, though we will nearly always encounter **arrays**, sometimes called **lists**, which hold datum of any type together — surrounded by square brackets ( [ ] ) and separated by commas. Make sure you click the black triangle below to see the items in the returned array.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"aloha\"\n ];\n\n return worldGreetings;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"\nLike strings, we can ask for the \\`\\`length\\`\\` of the array. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\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":249,"value":"\nWe can also get an item from the array by asking for its *index*, which *begins at 0*. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":258,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"aloha\"\n ];\n\n return (\n \"The first item in the array is \" +\n worldGreetings[0] +\n \" and the third item is \" +\n worldGreetings[2]\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"\nIf you open up the returned array below by clicking on its black arrow, you will see the *index* next to each greeting.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":307,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"aloha\"\n ];\n\n return worldGreetings;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"\nBecause we start counting at 0, the list has *its length minus 1* indices. For example, the final item in a list with 5 items has the index of 4. It is a lot easier to do this with variables. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"aloha\"\n ];\n\n const finalIndex = worldGreetings.length - 1;\n\n return \"The last item in the array is \" + worldGreetings[finalIndex];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"\nWe can add item to the end of an array by *pushing* an item into it.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"aloha\"\n ];\n\n worldGreetings.push(\"kamusta\");\n\n return worldGreetings;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"\nNote that there are now 10 items in the array after the push, with a new item at the end. \n\nWe can also reassign an index in an array however we would like.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"salut\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"aloha\"\n ];\n\n worldGreetings[1] = \"ola\";\n worldGreetings[3] = \"konnichi wa\";\n\n return worldGreetings;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"\nSome weird, but totally allowable, things happen if you assign to an index well outside of the array's native length.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":341,"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":348,"value":"\nPretty strange. We added \"ola\" at position 200, and so although \\`\\`worldGreetings\\`\\` only has 10 real elements, the array reports a length of 201! Accordingly, 190 of those items will be \\`\\`undefined\\`\\`.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":362,"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":282,"value":"\n### Looping\n\nOften, we want to *do something* to every item in an array. For example, we might want to make a mathematical transformation, choose a color and draw a bar in a chart based on the outcome, and count how many times each number occurs for histogram analysis. Like in most coding languages, Javascript uses a complicated syntax for this common programmatic **control structure**. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"{\n const countUp = [];\n\n for (let i = 0; i < 5; i = i + 1) {\n countUp.push(i);\n }\n\n return countUp;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"\nThe syntax we see here is...\n\n- `for` : triggers the looping behavior\n\n- `let i = 0;` : creates a *counter* variable and starts it at zero. Since we need to update this variable in our loop, it cannot be a \\`const\\` and must be a more flexible \\`let\\`.\n\n- `i < 5;` : the *condition* at which the looping *ends*. Here, we loop so long as `i` is less than 5.\n\n- `i = i+1;` : the event that happens after each loop. Here, `i` grows by 1 each loop.\n\nLooking at the array after the loop completes, we see that it includes 5 elements, 0 through 4, just as we would expect. \n\nThe *counter* variable is nearly always called `i`, for *incrementer* or *index*, though it can be named anything.\n\nWe can work with this format to do some interesting things.\n`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"{\n const decreasingEven36to22 = [];\n\n for (let i = 36; i >= 22; i = i - 2) {\n decreasingEven36to22.push(i);\n }\n\n return decreasingEven36to22;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"\nAnd, critically, we can combine looping and arrays. Note in the example below we use *parallel arrays*, multiple arrays where the indices are aligned. In this example, index 0 refers to data about France — `worldGreetings` shows \"French\" at position 0 and `languages` shows \"bonjour\" at position 0. \n\nSpend particular attention to this example, and ensure this all makes sense before continuing.\n`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":437,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"aloha\"\n ];\n\n const languages = [\n \"french\",\n \"swahili\",\n \"thai\",\n \"turkish\",\n \"quechua\",\n \"twi\",\n \"mandarin\",\n \"hawaiian\"\n ];\n\n const factoids = [];\n\n for (let i = 0; i < worldGreetings.length; i = i + 1) {\n factoids.push(\n \"The word for hello in \" + languages[i] + \" is \" + worldGreetings[i]\n );\n }\n\n return factoids;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"\n### Javascript Objects\nOne more important thing to learn before we can visualize data. Parallel arrays as above are fine, but they are inherently fragile and difficult-to-debug. If we accidentally add a datum to, or remove a datum from, one array but not the other — then everything becomes incorrect!\n\nNote that the array that is built by this code is broken in several ways, including an `undefined popping up, since the arrays now have different lengths.\n`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"{\n const worldGreetings = [\n \"bonjour\",\n \"konnichiwa\", //extra item!!!\n \"jambo\",\n \"swasdi\",\n \"merhaba\",\n \"allianchu\",\n \"maakye\",\n \"nihao\",\n \"aloha\"\n ];\n\n const languages = [\n \"french\",\n \"swahili\",\n \"thai\",\n \"turkish\",\n \"quechua\",\n \"twi\",\n \"mandarin\",\n \"hawaiian\"\n ];\n\n const factoids = [];\n\n for (let i = 0; i < worldGreetings.length; i = i + 1) {\n factoids.push(\n \"The word for hello in \" + languages[i] + \" is \" + worldGreetings[i]\n );\n }\n\n return factoids;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":483,"value":"{\n const swahili = { name: \"swahili\", greeting: \"jambo\", speakers: 150000000 };\n\n return swahili;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"\nWe can ask objects for some value, by querying with a key.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":507,"value":"{\n const swahili = { name: \"swahili\", greeting: \"jambo\", speakers: 150000000 };\n\n return swahili.greeting;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"\nAn array of objects should be considered our most desirable, and most common, data structure. Look at how much cleaner this code is now!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"{\n const languages = [\n { name: \"french\", greeting: \"bonjour\" },\n { name: \"japanese\", greeting: \"konnichiwa\" },\n { name: \"swahili\", greeting: \"jambo\" },\n { name: \"thai\", greeting: \"swasdi\" },\n { name: \"turkish\", greeting: \"merhaba\" },\n { name: \"quechua\", greeting: \"allianchu\" },\n { name: \"twi\", greeting: \"maakye\" },\n { name: \"mandarin\", greeting: \"nihao\" },\n { name: \"hawaiian\", greeting: \"aloha\" }\n ];\n\n const factoids = [];\n\n for (let i = 0; i < languages.length; i = i + 1) {\n factoids.push(\n \"The word for hello in \" +\n languages[i].name +\n \" is \" +\n languages[i].greeting\n );\n }\n\n return factoids;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"\n### Creating Graphics with D3 and Javascript\nFinally, with all that syntax out of the way, let us finally get into visualizing data.\n\nAll we need to do is combine the data and control structures just covered, with a new, programmatic method for constructing SVG graphics. \n\nTake a look at the javascript code and **comments** (notes to ourselves written in code, beginning with two slashes) below. It should look really familiar, just with a different set of punctuation marks. Try to intuit what is happening in each line, and distill the apparent patterns. How are these structures different from what we saw last week?\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"programmatic_graphics","database":"$undefined"},{"id":537,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"\nD3 is giving us several useful utilities here — specifically `.create()`, `.append()`, `.attr()`, and `.style()` — which we will draw in clearer focus next week. But, for now, let us understand them as simple tools for synthesizing all of the SVG attributes and properties covered in last week's tutorial.\n\nAnd at last, we can glue everything together.\n\nNote in this example below the combination of variables, mathematical operators, an array, a `for` loop and a counter variable to iterate over that array, and the implementation of the D3 utilities for synthesizing SVG elements. \n\nTake a look in particular at the `i` counter variable's use in generating the circles' `cx` placement attribute. Run the calculations in your head or on paper — does it make sense?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":428,"value":"{\n //svg variables\n const width = 800;\n const height = 100;\n\n //data\n const meaninglessData = [15, 12, 3, 21, 16, 21, 8, 2, 25];\n\n //create SVG artboard\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n const spacing = width / meaninglessData.length;\n const margin = spacing / 2;\n\n for (let i = 0; i < meaninglessData.length; i = i + 1) {\n svg\n .append(\"circle\")\n .attr(\"cx\", i * spacing + margin)\n .attr(\"cy\", height / 2)\n .attr(\"r\", meaninglessData[i])\n .attr(\"fill\", \"blue\");\n }\n //show visualization in Observable\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1121,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"### What's Coming Next\nAs a teaser for next week, more advanced techniques can be used to create an SVG gradient, blended from two colors for each unique planet, which is then assigned to the appropriate planet based on its name. \n\nFinally, **D3 scales** are used to precisely translate data values (kilometers and astronomical units) to pixel units and avoid the awkward math in the simple example above. These will be the focus of next week's class, don't stress, this is just a teaser!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"\n-----\n\n### *Hello World* Data Visualization Challenge\nGiven the attention paid to multilingual greetings in this week's tutorial, let's push the same content into a proper data visualization.\n\nThere is a [problematically incomplete dataset](https://www.kaggle.com/fourtonfish/hello-salut) on Kaggle, a popular data repository and search engine, that attempts to merge linguistic greetings with geospatial data. The dataset includes, per country, the word for \"hello\", the name of the language spoken, a country code for combining this dataset with others, and longitude and latitude for locating the center of the country on a map.\n\nSo, let's make this map! And, perhaps, consider helping [complete the dataset](https://elitedatascience.com/beginner-kaggle)?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":778,"value":"helloDataset = d3.csvParse(await FileAttachment(\"salut.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"\nNote that this is *just an array*. We can access it just like any of the arrays that we typed-in above, despite the fact that it is imported from a CSV file attached to this notebook.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1269,"value":"helloDataset[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1102,"value":"FileAttachment(\"map.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"md`\n### Next Steps\nWe will be moving onwards into real data cleaning and manipulation next week, as well as building our first complete and interactive data visualizations with [axes](https://observablehq.com/@d3/styled-axes), [transitions and animations](https://observablehq.com/@d3/learn-d3-animation), [geographies](https://observablehq.com/@d3/projection-comparison), and [color scales](https://observablehq.com/@d3/color-schemes)... \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 32:"$31:body"