31:Tca4,homework_summary = md` ----- ### Homework due 9/9 Just like last week, please log your time working on these assignments. If you find yourself spending more than 8 hours total on this work this week, **stop** and let Zach know. Note the time estimates provided below. ##### Logistics - Make sure you add your solar system screenshot and link to the Week 2 Miro board. Take a look through other people's code! ##### Technical Learning (~4.5 hours) - Work through this whole page [tutorial](#tutorial_start), and complete the two coding challenges described at the end. - If you would like more technical information and further examples, check out [Codecademy's Javascript Course](https://www.codecademy.com/learn/introduction-to-javascript), specifically sections 1, 5, and 6. It focuses less on visuals, and assumes greater familiarity with data concepts — but also digs deeper into how JS works under-the-hood. ##### Exposure (~2 hours) - [Hour long podcast with Caroline Goulard and Gabriele Rossi](https://datastori.es/159-viz-agencies-dataveyes-and-accurat/) on the state of the contemporary data visualization professional world, its history, and the newly empowered *data visualization agencies* and *collectives*. - To offset our emphasis so far in contemporary data visualization issues and opportunities, let us take a momentary historical digression to the data visualization work of [W.E.B. Du Bois](https://en.wikipedia.org/wiki/W._E._B._Du_Bois), a pre-eminent American sociologist, academic, and civil rights activist in this six-part [Nightingale series](https://medium.com/nightingale/w-e-b-du-bois-staggering-data-visualizations-are-as-powerful-today-as-they-were-in-1900-64752c472ae4). As we will be building Du Bois-style charts and arc plots next week, it will be helpful to come in with a sensitivity to how recent the invention of these forms is, and how they have been deployed in extraordinary contexts historically towards social awareness and persuasion. Take notes, research further, and come in with any thoughts or questions. - Take a look at this [Observable notebook on software licenses](https://observablehq.com/@observablehq/licenses?collection=@observablehq/introduction) by Jeremy Ashkenas. - Totally optional - If interested in the open source software movement, listen to [this great podcast](https://www.perell.com/podcast/nadia-eghbal-open-source-software) with [Nadia Eghbal](https://nadiaeghbal.com) — researcher, developer, journalist, and author of [*Working in Public*](https://www.amazon.com/dp/0578675862/). ##### Ongoing Work (~30 minutes) - Continue adding unfamiliar terms to our class *glossary*, as well as logging to our list of *open questions* as you research and practice this week. - Keep track in a bookmark folder any interesting data visualizations or interactive data experiences that you encounter. When we have any free time, we can share cool examples with one another! - Let Zach know how he can improve these tutorial things! - Join Zach on Friday afternoon (by appointment, send an email to reserve a time), Monday morning (open access), or reach out for another time if you have any questions or would like to chat about data, design, dinosaurs... ----- `32:T578,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. According to the *immersion* principle as described in [the syllabus](https://observablehq.com/@zachpino/iit-institute-of-design-data-viz-workshop?collection=@zachpino/id-iit-fall-2020-data-visualization-workshop#approach), 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 the gaps. `33:T491,md` 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 older 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. `34:T4d6,{ //svg variables let width = 800; let height = 100; //create SVG artboard let svg = d3.create("svg") .attr("viewBox", [0, 0, width, 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, andadd 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(); }35:T40d,visualization_for_real = md` ### Visualization for Real And, with minimal additions to the example above, we can create a more recognizable data visualization. The same planet data we used last week 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. 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. More advanced techniques create an SVG gradient, blended from two colors for each unique planet, which is then assigned to the appropriate planet based on its name. Finally, D3 scales are used to precisely translate data values (kilometers and astronomical units) to pixels. These will be the focus of next week's class. There is a lot going on, but take it line-by-line and log any questions for discussion next week. `36:Tb47,solarSystem = { //svg variables let width = 800; let height = 200; let margin = 25; //planetary data let planets = [ {name:"Mercury", size: 12878, distance: .39, outerColor: "#666699", coreColor: "#cccccc"}, {name:"Venus", size: 12104, distance: .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"} ]; //create SVG artboard let svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); //black background let 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++){ let 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 let defs = svg.append('defs') //loop through planets and create gradients for (let i = 0; i < planets.length; i++){ let 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 let sizeScale = d3.scaleLinear().domain(d3.extent(planets,d=>d.size)).range([3,50]); let 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++){ let 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 would be so big let 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(); }37:T56d,md` Note 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. You can [import this dataset](https://observablehq.com/@observablehq/introduction-to-imports) to your notebook with the following code: \`\` import {helloDataset} from "@zachpino/week-2-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](http://tutorials.jenkov.com/svg/text-element.html)! 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! Again, don't forget to [import D3](#loading_d3). `38:[{"id":"f07e9a705e5fce2043f20d019676f426cea78c11f1b8eea2ebb1432778d88d78e3a26c005448a8b1510816f291320dac2180a00d0c481904f43a697287aa653e","href":"https://static.observableusercontent.com/files/f07e9a705e5fce2043f20d019676f426cea78c11f1b8eea2ebb1432778d88d78e3a26c005448a8b1510816f291320dac2180a00d0c481904f43a697287aa653e","name":"salut.csv","type":"text/csv","lastModified":1599181820866.319,"size":12838}] 2f:{"title":"Week 2 : Intro to Javascript for Visualization","cells":[{"id":0,"value":"title = md`\n# Week 2 : Intro to Javascript for Visualization\n## Creating Simple Graphics with JS\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"variables = md`\n### Variables\nLet us still begin where every programming tutorial must, 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"},{"id":26,"value":"{\n let greeting = \"Hello!\";\n \n return greeting;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`\nWoohoo! 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.\n\nTo go further, this is a *data visualization* — just one without any data simplification, transformation, or much visual pizazz.\n\nThe 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.\n\nBut, let's obviously go further.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"{\n let greeting = \"Hello!\";\n \n return greeting.length;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"string_length = md` \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.\n\nSome interesting things happen when we push on this a bit...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"{\n let greeting = \"👋\";\n \n return greeting.length;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`\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":"ojs"},{"id":82,"value":"{\n let secondsPerMinute = 60;\n let minutesPerHour = 60;\n let hoursPerDay = 24;\n let daysPerWeek = 7;\n let weeksPerYear = 52;\n \n let secondsPerYear = secondsPerMinute * minutesPerHour * hoursPerDay * daysPerWeek * weeksPerYear;\n \n return secondsPerYear;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`\nWe can combine operators, raw numbers, and variables without issue. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"{\n let illinoisRetailTax = .0625;\n let cookCountyRetailTax = .0175;\n let chicagoRetailTax = .0125;\n let regionalTransitTax = .01;\n \n let totalTaxRate = illinoisRetailTax + cookCountyRetailTax + chicagoRetailTax + regionalTransitTax;\n \n \n let subTotal = 99.99; \n let taxedTotal = subTotal * (1 + totalTaxRate);\n \n return taxedTotal;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`\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.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"{\n let illinoisRetailTax = .0625;\n let cookCountyRetailTax = .0175;\n let chicagoRetailTax = .0125;\n let regionalTransitTax = .01;\n \n let totalTaxRate = illinoisRetailTax + cookCountyRetailTax + chicagoRetailTax + regionalTransitTax;\n \n \n let subTotal = 99.99; \n let taxedTotal = subTotal * (1 + totalTaxRate);\n \n return taxedTotal.toFixed(2);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"casting = md`\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":"ojs"},{"id":117,"value":"{\n let illinoisRetailTax = .0625;\n let cookCountyRetailTax = .0175;\n let chicagoRetailTax = .0125;\n let regionalTransitTax = .01;\n \n let totalTaxRate = illinoisRetailTax + cookCountyRetailTax + chicagoRetailTax + regionalTransitTax;\n \n\n let subTotal = 99.99; \n let taxedTotal = subTotal * (1 + totalTaxRate);\n \n return \"The grand total is: $\" + taxedTotal.toFixed(2);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`\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":"ojs"},{"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"},{"id":157,"value":"md`\nIn the event that you want to be absolutely sure, casting to a specific type is helpful.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":66,"value":"arrays = md`\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":"ojs"},{"id":227,"value":"{\nlet worldGreetings = [\"bonjour\",\"salut\",\"jambo\",\"swasdi\",\"merhaba\",\"allianchu\",\"maakye\", \"nihao\",\"kwey\",\"aloha\"]\n\nreturn worldGreetings;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`\nLike strings, we can ask for the \\`\\`length\\`\\` of the array. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"{\nlet worldGreetings = [\"bonjour\",\"salut\",\"jambo\",\"swasdi\",\"merhaba\",\"allianchu\",\"maakye\", \"nihao\",\"kwey\",\"aloha\"]\n\nreturn \"This dataset includes \" + worldGreetings.length + \" words for 'hello'.\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"indices = md`\nWe can also get an item from the array by asking for its *index*, which *begins at 0*. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"{\nlet worldGreetings = [\"bonjour\",\"salut\",\"jambo\",\"swasdi\",\"merhaba\",\"allianchu\",\"maakye\", \"nihao\",\"kwey\",\"aloha\"]\n\nreturn \"The first item in the array is \" + worldGreetings[0] + \" and the third item is \" + worldGreetings[2]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`\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":"ojs"},{"id":307,"value":"{\nlet worldGreetings = [\"bonjour\",\"salut\",\"jambo\",\"swasdi\",\"merhaba\",\"allianchu\",\"maakye\", \"nihao\",\"kwey\",\"aloha\"]\n\nreturn worldGreetings\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"md`\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":"ojs"},{"id":270,"value":"{\nlet worldGreetings = [\"bonjour\",\"salut\",\"jambo\",\"swasdi\",\"merhaba\",\"allianchu\",\"maakye\", \"nihao\",\"kwey\",\"aloha\"]\n\nlet finalIndex = worldGreetings.length - 1\n\nreturn \"The last item in the array is \" + worldGreetings[finalIndex];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"pushing_into_arrays = md`\nWe can add item to the end of an array by *pushing* an item into it.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"{\n let worldGreetings = [\"bonjour\",\"salut\",\"jambo\",\"swasdi\",\"merhaba\",\"allianchu\",\"maakye\", \"nihao\",\"kwey\",\"aloha\"]\n\n worldGreetings.push(\"kamusta\")\n \n return worldGreetings\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"md`\nNote that there are now 11 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":"ojs"},{"id":328,"value":"{\n let worldGreetings = [\"bonjour\",\"salut\",\"jambo\",\"swasdi\",\"merhaba\",\"allianchu\",\"maakye\", \"nihao\",\"kwey\",\"aloha\"]\n\n worldGreetings[1] = \"ola\"\n worldGreetings[3] = \"konnichi wa\"\n\n return worldGreetings\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`\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":"ojs"},{"id":341,"value":"{\n let worldGreetings = [\"bonjour\",\"salut\",\"jambo\",\"swasdi\",\"merhaba\",\"allianchu\",\"maakye\", \"nihao\",\"kwey\",\"aloha\"]\n\n worldGreetings[200] = \"ola\"\n\n return worldGreetings.length\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"md`\nPretty weird. We added \"ola\" at position 200, and so although \\`\\`worldGreetings\\`\\` only has 11 real elements, the array reports a length of 201! Accordingly, 190 of those items will be \\`\\`undefined\\`\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"{\n let worldGreetings = [\"bonjour\",\"salut\",\"jambo\",\"swasdi\",\"merhaba\",\"allianchu\",\"maakye\", \"nihao\",\"kwey\",\"aloha\"]\n\n worldGreetings[200] = \"ola\"\n\n return worldGreetings[50]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"looping = md`\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":"ojs"},{"id":294,"value":"{\n let 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"},{"id":367,"value":"md`\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\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":"ojs"},{"id":389,"value":"{\n let 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"},{"id":434,"value":"md`\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":"ojs"},{"id":437,"value":"{\n let worldGreetings = [\"bonjour\",\"jambo\",\"swasdi\",\"merhaba\",\"allianchu\",\"maakye\", \"nihao\",\"kwey\",\"aloha\"]\n\n let languages = [\"french\",\"swahili\",\"thai\",\"turkish\",\"quechua\",\"twi\",\"mandarin\",\"algonquin\",\"hawaiian\"]\n \n let factoids = [];\n \n for (let i = 0; i < worldGreetings.length; i=i+1){\n factoids.push(\"The word for hello in \" + languages[i] + \" is \" + worldGreetings[i]) \n }\n \n return factoids;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"objects = md`\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":"ojs"},{"id":472,"value":"{\n let worldGreetings = [\"bonjour\",\"konnichiwa\",\"jambo\",\"swasdi\",\"merhaba\",\"allianchu\",\"maakye\", \"nihao\",\"kwey\",\"aloha\"]\n\n let languages = [\"french\",\"swahili\",\"thai\",\"turkish\",\"quechua\",\"twi\",\"mandarin\",\"algonquin\",\"hawaiian\"]\n \n let factoids = [];\n \n for (let i = 0; i < worldGreetings.length; i=i+1){\n factoids.push(\"The word for hello in \" + languages[i] + \" is \" + worldGreetings[i]) \n }\n \n return factoids;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"{\n let swahili = {name:\"swahili\", greeting:\"jambo\", speakers:150000000};\n\n return swahili;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"md`\nWe can ask objects for some value, by querying with a key.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"{\n let swahili = {name:\"swahili\", greeting:\"jambo\", speakers:150000000};\n\n return swahili.greeting;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"md`\nAn array of objects should be considered our most desirable, and most common, data structure. Look at how much cleaner this code is now!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"{\n let 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:\"algonquin\", greeting:\"kwey\"},\n {name:\"hawaiian\", greeting:\"aloha\"},\n ];\n\n let factoids = [];\n \n for (let i = 0; i < languages.length; i=i+1){\n factoids.push(\"The word for hello in \" + languages[i].name + \" is \" + languages[i].greeting) \n }\n \n return factoids;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":404,"value":"programmatic_graphics = md`\n### Creating Graphics with 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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"loading_d3 = md`\n### Loading D3\nBut first, let's import all of the awesome D3 utilities that will make our. *Nearly every Observable notebook we make will need this single line of code.* It returns a Javascript object letting us know exactly what was loaded from the D3 library, which we can mostly ignore for now.\n\n*This is really important, and easy to forget!*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"md`\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`","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":630,"value":"md`\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":"ojs"},{"id":428,"value":"{\n //svg variables\n let width = 800;\n let height = 100;\n \n //data\n let meaninglessData = [15,12,3,21,16,21,8,2,25];\n \n //create SVG artboard\n let svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n let spacing = width / meaninglessData.length;\n let margin = spacing / 2;\n \n for (let i = 0; i < meaninglessData.length; i=i+1){\n svg.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"},{"id":687,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":825,"value":"svg_challenge = md`\n### SVG Composition Challenge\n\nResearch the ideas and works of American artist [Sol Lewitt](https://en.wikipedia.org/wiki/Sol_LeWitt), whose works carved out a specific branch of the *Minimalsm* movement in the Fine Arts that is sometime called [*Proceduralism*](https://en.wikipedia.org/wiki/Process_art). Many of his [most famous works](http://www.artnet.com/artists/sol-lewitt/), installed throughout many of the most prestigious art museums throughout the world, were not painted by his hand, but instead transmitted by *written instruction* in a pre-computing era. He sent a document outlining how the works should be produced, and it was up to the galleries and museums that acquired \"his\" work to render the actual paintings directly on their walls. \n\nLewitt's designs are minimal, geometric, colorful, and repetitive — a perfect match for our coding skillset right now. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"html`\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"md`\nUsing Sol Lewitt's work as inspiration or as a model to copy, use all of the tools introduced above to create an SVG composition. As a prompt, how might we encode a palette of colors or set of geometries as a dataset for iterative looping? How might rigid patterns and randomness (take a look at [\\`\\`Math.random()\\`\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)) playfully intersect? \n\nA terse bit of JS that might come in handy too for random colors...\n\n\\`\\`\\`\nlet randomColor = \"#\" + (Math.floor(Math.random()*16777215).toString(16));\n\\`\\`\\`\n\nCreate this inspired composition in a new Observable notebook, and try to use as many of this week's techniques as possible. Prepare to share these next week.\n\nDon't forget to [import D3](#loading_d3)!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"dv_challenge = md`\n### 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":"ojs"},{"id":778,"value":"helloDataset = d3.csvParse(await FileAttachment(\"salut.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":18,"value":"md`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}