31:T4e7, * [Variables](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-177) * [Functions](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-175) * [Procedural Functions](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-191) * [D3 Functions](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-193) * [Array Functions](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-191) * [Array Aggregation](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-502) * [Importing Data](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-387) * [Accessing Data](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-725) * [Importing Modules](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-405) 32:T40d,md ` ### How do they compare? JavaScript borrowed concepts from Python in its early days and development and there's been a healthy exchange of features between the two ever since. There's no need to ditch Python or pit the two languages against each other. They actually have a good bit in common, but you just have to learn some new syntax to apply Javascript's superpowers. JavaScript is _slightly_ more verbose than Python, so as you go through this notebook, take note of where the **brackets** and **semicolons** are. Some of the main differences are in syntax and a couple functional quirks you'll learn below. #### Loops In Python, to create a loop you'd write the keyword \`for\` followed by the loop variable, a colon (:) and the body of the loop would be indented. In JavaScript, we can also use a \`for\` keyword to start our loop, followed by parentheses and within those parentheses, we write the keyword var followed by the loop variable. We surround the body of the loop with curly braces and then we indent it. `33:T48b,function draw_buckets(bin, values) { const svg = this || DOM.svg(width, 100); const buckets = bin(values); const binColor = d3 .scaleThreshold() .domain(buckets.map(d => d.x0)) .range(colors); d3.select(svg) .selectAll("rect") .data(buckets) .join("rect") .attr("y", d => 10) .attr("height", 100 - 2 * 10) .attr("x", d => (x(d.x0) + 1) | 0) .attr("width", d => (x(d.x1) | 0) - (x(d.x0) | 0) - 2) .attr("stroke", d => binColor(d.x0)) .attr("stroke-width", 1) .attr("stroke-dasharray", d => (d.length === 0 ? "1 5" : null)) .attr("fill", "none"); draw_values(svg, values); d3.select(svg) .selectAll("circle") .attr("fill", binColor) .attr("stroke", binColor); d3.select(svg) .selectAll("text") .data(buckets.filter(d => d.length > 0)) .join("text") .attr("x", d => (x(d.x0) + 3) | 0) .attr("y", 86) .attr("fill", "black") .attr("font-size", 9) .text(d => x(d.x1) - x(d.x0) < 50 ? d.length : d.length > 1 ? `${d.length} items` : d.length === 1 ? "1 item" : "empty bin" ); return svg; }34:T994,function draw_histogram_from_buckets(buckets, x, opts = {}) { const width = opts.width || 300, height = opts.height || 200, margin = opts.margin || { top: 20, right: 20, bottom: 30, left: 40 }, svg = d3.select(DOM.svg(width, height)), maxBins = d3.max(buckets, d => d.length), data = buckets.flat(), count = data.length, y = d3 .scaleLinear() .domain([0, maxBins]) .nice() .range([height - margin.bottom, margin.top]), frequency = opts.relative ? d3 .scaleLinear() .domain([0, maxBins / count]) .nice() .range([height - margin.bottom, margin.top]) : y, xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call(g => g .append("text") .attr("x", width - margin.right) .attr("y", -4) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text(opts.xText) ); const binColor = d3 .scaleThreshold() .domain(buckets.map(d => d.x0)) .range(colors); svg .append("g") .selectAll("rect") .data(buckets) .join("rect") .attr("fill", opts.fill || (d => binColor(d.x0))) .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => y(d.length)) .attr("height", d => y(0) - y(d.length)); svg.append("g").call(xAxis); if (opts.title) svg .append("g") .append("text") .text(opts.title) .style("fill", "#000") .attr("font-weight", "bold") .style("font-size", 14) .style("text-anchor", "end") .attr("x", width - 30) .attr("y", 10); const labels = svg .append("g") .selectAll("text") .data(buckets.filter(d => d.length > 0)) .join("text") .attr("x", d => ((x(d.x0) + x(d.x1)) / 2) | 0) .attr("y", d => y(d.length) - 2) .style("fill", "black") .style("font-size", 10) .style("text-anchor", "middle"); if (opts.relative) { const format = d3.format(".1%"); labels.text(d => format(d.length / count)); } else labels.text(d => x(d.x1) - x(d.x0) < 50 ? d.length : d.length > 1 ? `${d.length} items` : d.length === 1 ? "1 item" : "empty bucket" ); return svg.node(); }35:[{"id":"69cd6b71f13ae7ef89a15b583ad872d282e22dee5be136bb9e14bf626d232bd08868e5127245a02489e37729cbe7f554836c1af82ad7dfb97305db40d6a94406","href":"https://static.observableusercontent.com/files/69cd6b71f13ae7ef89a15b583ad872d282e22dee5be136bb9e14bf626d232bd08868e5127245a02489e37729cbe7f554836c1af82ad7dfb97305db40d6a94406","name":"1000000-bandcamp-sales-1.parquet","type":"application/octet-stream","lastModified":1654809943308.276,"size":48261976},{"id":"70a3445122e7911d4ff1e0aaa918594caa7d1c82b6537035445ab146bd3108e4289996dcb246f540d248f5245e908c8f0fe643add3916f0c5c45ccfa3dc39790","href":"https://static.observableusercontent.com/files/70a3445122e7911d4ff1e0aaa918594caa7d1c82b6537035445ab146bd3108e4289996dcb246f540d248f5245e908c8f0fe643add3916f0c5c45ccfa3dc39790","name":"json_diagram-1.png","type":"image/png","lastModified":1658459844377.282,"size":1209515}] 2f:{"title":"Learn Just Enough JavaScript: Python Users","cells":[{"id":0,"value":"# Learn Just Enough JavaScript: Python Users\n\n🎉 If you're a Python user coming to Observable this notebook is for you! \nWe leverage the interactive powers of JavaScript to take your analysis from static charts to interactive, animated, and insightful visualizations. This notebook will help you get comfortable with the JavaScript equivalents of the data manipulation tools you're comfortable with in Python. \n\nNote: In this notebook you'll be asked to try writing Javascript code yourself. If there are cells with errors, that's intentional and the error messages will disappear as you solve each challenge yourself. ","pinned":false,"hidden":false,"mode":"md"},{"id":823,"value":"## Topics","pinned":false,"hidden":false,"mode":"md"},{"id":749,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"## Intro to Javascript\n\nJavaScript is a lot like Python! Just because Python has the most popular scientific libraries, doesn't mean JavaScript can't be leveraged in your data workflow. \n\n JavaScript is great at:\n1. Moving fast. Being the most popular language on the web means working at lighting speed.\n2. No admin: No downloads. No setup time. No software updates. No servers to manage. \n3. Powerful **interactive** graphics capabilities can help you explore data faster.","pinned":false,"hidden":false,"mode":"md"},{"id":681,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"{\n const leftTop = md`\n **Python**`;\n \nconst bottomLeft = md`~~~py\nfor i in range(4):\n print(\"i =\", i)\n~~~\n`;\n\n const rightTop = md`\n**JavaScript**`;\n \nconst bottomRight = md`\n\n~~~js\nfor(var i=0; i<4; i++) {\n console.log(\"i =\", i);\n}\n~~~`;\n \n return compareCode(leftTop, rightTop, bottomLeft, bottomRight);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"#### Function Arguments\nIn Python, the number of arguments passed to the function call has to match the number of parameters defined in the function definition. If this is not the case, an exception will occur.\n\nIn JavaScript, this is not necessary since parameters are optional. You can call a function with fewer or more arguments than the parameters that were defined in the function definition. Missing arguments are assigned the value undefined by default and extra arguments can be accessed with the arguments object.\n","pinned":false,"hidden":false,"mode":"md"},{"id":860,"value":"md `#### Methods\nIn Python, we define methods with the def keyword followed by their name and the parameters list within parentheses. \n\nJavaScript methods are defined by writing their name followed by the parameters list and curly braces. Within the curly braces, we write the body of the method.\n\n**Remember, exclude \\`def\\` when defining in Javascript, and curly braces are a must.**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"{\n const leftTop = md`\n **Python**`;\n \nconst bottomLeft = md`~~~py\nclass Circle:\n\n\tdef __init__(self, radius, color):\n\t\tself.radius = radius\n\t\tself.color = color\n\n\tdef calc_diameter(self):\n\t\treturn self.radius * 2\n~~~\n`;\n\n const rightTop = md`\n**JavaScript**`;\n\n const bottomRight = md`\n~~~js\nclass Circle {\n\n constructor(radius, color) {\n this.radius = radius;\n this.color = color;\n }\n\n calcDiameter() {\n return this.radius * 2~~~`;\n \n return compareCode(leftTop, rightTop, bottomLeft, bottomRight);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`\n## Variables\n\nPython and JavaScript use different syntax to declare a variable. \n* Use \\`let\\` for reassignable variables\n* Use \\`const\\` for constant variables\n* Don't use \\`var\\` to declare variables, it's outdated.\n\nUnlike Python, global variables are declared outside of a function for use anywhere in JavaScript code (the \\`global\\` or \\`nonlocal\\` keywords are unnecessary). `;","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"{\n const leftTop = md`\n **Python**`;\n \nconst bottomLeft = md`~~~py\nx = 1\ndef local_variable():\n x = 2\n print(x)\n\nlocal_variable() # prints 2\nprint(x) # prints 1\n~~~\n`;\n\n const rightTop = md`\n**JavaScript**`;\n \nconst bottomRight = md`\n\n~~~js\nlet x = 1;\nconst localVariable = () => {\n const x = 2;\n console.log(x);\n}\nlocalVariable(); // logs 2\nconsole.log(x) // logs 1\n~~~`;\n \n return compareCode(leftTop, rightTop, bottomLeft, bottomRight);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"## Scope\nJavaScript uses brackets instead of indentation to determine scope. (code indentations should match the brackets, but that's for good style, not function)\n\nScope in JavaScript only applies to the current block and enclosed blocks, not the entire function. ","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"## Functions\n\n- [Procedural Functions](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-189)\n- [Array Functions](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-191)\n- [D3 Functions](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-193)","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"### Procedural Functions","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"Procedural Functions output something. Learn more about procedural functions in this collection's [introduction](https://observablehq.com/d/7e3b3160217c4c69?collection=@observablehq/learning-javascript-for-data-scientists#cell-129/). \n\nUnlike Python, **_JavaScript functions overwhelmingly return a value_** rather than being called or referenced individually.","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"function addingNumbers(number1, number2){\n let number3 = number1 + number2\n return number3\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":868,"value":"md ` #### ▶️ Try it\n\n\nIn the cell below, use make \\`multiply\\` equal the the multiplied values of the arguments. \n\n_Hint: You need to write a return function that mulitplies the arguments._\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"function multiply(p1, p2) {\n // write your code here, -- don't delete the semicolon ->;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"### Array Functions","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"Arrays in JavaScript work pretty similarly to those in Python. They are sorted lists with various manipulation options. \n \n* [map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)\n* [filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)\n* [slice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)\n* [concat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)\n* [values()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/values)\n* [keys()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys)","pinned":false,"hidden":false,"mode":"md"},{"id":344,"value":"#### Map","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"md`\nThe \\`map()\\` function creates a new array populated with the results of whatever function you invoke on the original array values.\n\nBelow, each number in the array gets operated on to create a new araray we named map. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"{ const arrayOfNums = [2, 4, 6, 8];\n// pass a function that adds 12 to the array number\nconst map = arrayOfNums.map(x => x + 12);\n return map\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":944,"value":"md ` #### ▶️ Try it\n\n\nIn the cell below, manipulate the array of odd numbers so that the returning array is made up of even numbers. \n\n_Hint: in the map() function below, write code that makes each array number even._\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"md ` #### ❓ Need another hint?\n\n\nThe map function takes a transformation as an argument ex. x => x + 12. To solve this, either add or subtract 1 from each number using this x => ___ format.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"{ const oddNums = [1, 3, 5, 7];\n// create a function that makes each number even\nconst evenNums = oddNums.map(// write your code here);\n return evenNums\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"#### Filter","pinned":false,"hidden":false,"mode":"md"},{"id":305,"value":"md` \nThe \\` filter()\\` function creates a new array with all elements that aren't screened out by the filter. .\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"{ const words = ['business', 'profit', 'quarter', 'market', 'funding', 'audience'];\nconst result = words.filter(word => word.length > 4);\n\nreturn result\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":967,"value":"md ` #### ▶️ Try it\n\n\nIn the cell below, filter the array to just words that end with 't'.\n\n_Hint: instead of using \\`word.length\\`, the filter should use \\`word.endsWith\\`. Note, endsWith is its own function so the paramater you want should be in parentheses._\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"{ const words = ['business', 'profit', 'quarter', 'market', 'funding', 'audience'];\nconst result = words.filter(word => // write your code here);\n\nreturn result\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"md` \n\n#### Slice\nSlicing in Javascript is most similar to Python list comprehensions. A minor syntax change applies here. Rather than using a colon \\`(:)\\` to select a range, in Javascript you'd use a comma \\`(,)\\`. When we use \\`slice()\\` we return a segment of an array into a new array object. \n\n\nSo given the array above with 6 words, to select all six words we'd use \\`words.slice(0,6)\\`. \n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"md ` #### ▶️ Try it\n\nIn the cell below, use the \\`slice\\` method to select just the words profit, quarter, and funding. \n\nWhen you do, the code segment will change from \\`undefined\\` to the new array you created. \n\n\n_Hint: The indexes for these words are 1, 2, and 4._\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"{ const words = ['business', 'profit', 'quarter', 'market', 'funding', 'audience'];\n return // write your slice function here and don't delete the semicolon at the end ->;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"md `#### Concat\nThe \\`concat()\\` function is like doing array addition in Python. The function is similar as it allows you to merge two or more arrays into a new array.\n\n_ex: arrayA + arrayB = arrayC_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"{\nconst arrayA = ['a', 'b', 'c'];\nconst arrayB = ['d', 'e', 'f'];\nconst arrayC = arrayA.concat(arrayB);\n\n return arrayC\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"md `#### Values\n\nThe values() method returns a new array iterator object that contains the values for each index in the array.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"{\nconst array1 = ['a', 'b', 'c'];\nconst iterator = array1.values();\n\nreturn iterator;\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"md `#### Keys\nThe keys() method returns a new Array Iterator object that contains the keys for each index in the array.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"{\nconst array1 = ['a', 'b', 'c'];\nconst iterator = array1.keys();\n\nreturn iterator;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"### D3 Functions","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"D3 is a JavaScript library that supercharges your data work by enabling you to create interactive custom data visualizations. The library heavily relies on web browser technologies like SVG, HTML and CSS.\n\nallows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.\n\nTo learn about all the array manipulations D3 provides, view our \n[D3 Array Collection](https://observablehq.com/collection/@d3/d3-array).\n","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"#### Manipulating Arrays\n\n 1. [Group](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-485)\n 2. [Rollup](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-496)\n 3. [Index](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-498)\n 4. [Merge](https://observablehq.com/d/f434e89b310e0b28?collection=@observablehq/learning-javascript-for-data-scientists#cell-500)","pinned":false,"hidden":false,"mode":"md"},{"id":485,"value":"#### Group","pinned":false,"hidden":false,"mode":"md"},{"id":467,"value":"**Let's start with a table of highly-paid athletes**\n\n_(click the dropdown arrow in front of Array(10) to view the contents)_","pinned":false,"hidden":false,"mode":"md"},{"id":464,"value":"// Create a table of Athletes\nathletes = [\n {name: \"Floyd Mayweather\", sport: \"Boxing\", nation: \"United States\", earnings: 285},\n {name: \"Lionel Messi\", sport: \"Soccer\", nation: \"Argentina\", earnings: 111},\n {name: \"Cristiano Ronaldo\", sport: \"Soccer\", nation: \"Portugal\", earnings: 108},\n {name: \"Conor McGregor\", sport: \"MMA\", nation: \"Ireland\", earnings: 99},\n {name: \"Neymar\", sport: \"Soccer\", nation: \"Brazil\", earnings: 90},\n {name: \"LeBron James\", sport: \"Basketball\", nation: \"United States\", earnings: 85.5},\n {name: \"Roger Federer\", sport: \"Tennis\", nation: \"Switzerland\", earnings: 77.2},\n {name: \"Stephen Curry\", sport: \"Basketball\", nation: \"United States\", earnings: 76.9},\n {name: \"Matt Ryan\", sport: \"Football\", nation: \"United States\", earnings: 67.3},\n {name: \"Matthew Stafford\", sport: \"Football\", nation: \"United States\", earnings: 59.5}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"**To group the athletes by sport:**","pinned":false,"hidden":false,"mode":"md"},{"id":462,"value":"athletesBySport = d3.group(athletes, d => d.sport)","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"**With our table grouped by sport, we can query our table to learn more about it. **","pinned":false,"hidden":false,"mode":"md"},{"id":986,"value":"md `To view our results by a specific sport we can use the \\`get\\` keyword and pass in the name of our favorite sport.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"athletesBySport.get(\"Soccer\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":993,"value":"md ` #### ▶️ Try it\n\n\nIn the cell below, group the athletes list by country\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"athletesByNation = // write your code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"#### Rollups","pinned":false,"hidden":false,"mode":"md"},{"id":541,"value":"d3.rollup lets you “reduce” each group by computing a corresponding summary value, such as a sum or count. The result is a map from key to reduced value.","pinned":false,"hidden":false,"mode":"md"},{"id":546,"value":"**For example, to count athletes by sport:**","pinned":false,"hidden":false,"mode":"md"},{"id":551,"value":"d3.rollup(athletes, v => v.length, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"**Or, to compute the total earnings per sport for these athletes with d3.sum:**","pinned":false,"hidden":false,"mode":"md"},{"id":549,"value":"d3.rollup(athletes, v => d3.sum(v, d => d.earnings), d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"#### Group Sort\nSometimes you want to sort values by grouped aggregates of data. \n\nFor example, we can look at athlete earnings sorted by least to greatest.","pinned":false,"hidden":false,"mode":"md"},{"id":628,"value":"d3.groupSort(athletes, g => d3.median(g, d => d.earnings), d => d.earnings)","pinned":true,"hidden":false,"mode":"ojs"},{"id":632,"value":"For descending order, negate the median.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":630,"value":"d3.groupSort(athletes, g => -d3.median(g, d => d.earnings), d => d.earnings)","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"#### Index","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"[d3.index](https://github.com/d3/d3-array/blob/master/README.md#index) creates a Map from key to unique value. Given several keys, it returns a nested Map.\n\n**With the index, we can join the two datasets:**","pinned":false,"hidden":false,"mode":"md"},{"id":685,"value":"index = d3.index(athletes, d => d.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"Index is very powerful for joining two datasets. For example, we have a dataset of athlete names and interesting facts about them:","pinned":false,"hidden":false,"mode":"md"},{"id":690,"value":"facts = [\n {about: \"Neymar\", fact: \"Neymar is Neymar da Silva Santos Júnior\"},\n {about: \"Roger Federer\", fact: \"Federer has won 20 Grand Slam men's singles titles\"},\n {about: \"Megan Rapinoe\", fact: \"Rapinoe was named The Best FIFA Women's Player in 2019\"}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"facts.map(({about: name, fact}) => ({fact, name, ...index.get(name)}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"**_d3.index will throw an error if several elements share the same key:_**","pinned":false,"hidden":false,"mode":"md"},{"id":500,"value":"#### Merge","pinned":false,"hidden":false,"mode":"md"},{"id":563,"value":"d3.merge flattens the specified iterable-of-iterables into a new array. This method is similar to the built-in array.concat and array.flat but can be used to flatten nested iterables as well as plain (untyped) arrays.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":565,"value":"d3.merge([[1], [2, 3]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"## Array Aggregation","pinned":false,"hidden":false,"mode":"md"},{"id":505,"value":"### Count\n\nd3.count returns the number of naturally orderable values present in the given iterable. It is typically used to compute how many valid elements exist in your data. \n\nFor example, let's look at this array of flights:\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":577,"value":"flights = [\n {airline: \"Icelandair\", price: 1621, stops: 3},\n {airline: \"Multiple airlines\", price: undefined, stops: 2},\n {airline: \"Air France\", price: 1948, stops: 0},\n {airline: \"WestJet\", price: undefined, stops: 1},\n {airline: \"Air France\", price: 1951, stops: 1},\n {airline: \"French Bee\", price: 1780, stops: 1}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":575,"value":"d3.count(flights, d => d.price)","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"### Sum","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"d3.sum computes the sum of an array of numbers.","pinned":false,"hidden":false,"mode":"md"},{"id":569,"value":"d3.sum([1, 2, 3, -0.5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"### Mean","pinned":false,"hidden":false,"mode":"md"},{"id":589,"value":"**For example, to compute the average of some numbers:**","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"olympic_athletes = d3.csv(\"https://raw.githubusercontent.com/flother/rio2016/master/athletes.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"d3.mean(olympic_athletes, d => d.height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1039,"value":"md ` #### ▶️ Try it\n\n\nIn the cell below, compute the average earnings for \\`athletes\\` in our data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"d3.mean(// add your code here)","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"### Median","pinned":false,"hidden":false,"mode":"md"},{"id":592,"value":"d3.median returns the value that separates the given values into two subsets of equal size: half below the median, and half above. If there are an odd number of input values, the median is exactly equal to the central value. If it has an even number of values, it is the mean of the two central values.\n","pinned":false,"hidden":false,"mode":"md"},{"id":595,"value":"d3.median([0, 1, 2, 5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"### Variance\n\nd3.variance is an unbiased estimator of the variance of the population around the mean. ","pinned":false,"hidden":false,"mode":"md"},{"id":602,"value":"d3.variance(olympic_athletes, d => d.height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1049,"value":"md ` #### ▶️ Try it\n\n\nIn the cell below, find the variance earnings for athletes in our \\`athletes\\` data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"d3.variance(// add your code here)","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"### Standard Deviation\nd3.deviation. The standard deviation is expressed in the same unit as the value itself (in our case, meters).","pinned":false,"hidden":false,"mode":"md"},{"id":604,"value":"d3.deviation(olympic_athletes, d => d.height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"### Quantile\n\nd3.quantile generalizes the median: it computes the threshold value that separates a proportion p of the numbers (with p = 0.5, i.e. 50%, for the median). For example, you can use quantiles to observe that 5% of the athletes are shorter than 1.59m, while 5% are taller than 1.96m.","pinned":false,"hidden":false,"mode":"md"},{"id":612,"value":"d3.quantile(olympic_athletes, 0.05, d => d.height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"### CumSum\n\nd3.cumsum computes the cumulative sum of an array of numbers.\n\nThe cumulative sum is an array of 64-bit floating point values with the same length as the original array; the value at index i is the sum of the values in the original array from index 0 to index i (inclusive).","pinned":false,"hidden":false,"mode":"md"},{"id":620,"value":"_cumsum ignores NaN and undefined values, but keeps the index consistent._","pinned":false,"hidden":false,"mode":"md"},{"id":614,"value":"d3.cumsum([1, 2, 3, 4])","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"### Rank\n\nd3.rank computes the rank of each value in an iterable, i.e. the zero-based index of the value when that iterable is sorted.","pinned":false,"hidden":false,"mode":"md"},{"id":623,"value":"d3.rank([23, 2, -1, 4])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1069,"value":"md ` #### ▶️ Try it\n\n\nIn the cell below, rank each row in our \\`athletes\\` data by how much they earned.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"d3.rank(// add your code here)","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"### Bin","pinned":false,"hidden":false,"mode":"md"},{"id":634,"value":"d3.bin groups data points into buckets of (usually) equal widths along a comparison axis.\n\nThese buckets can be represented by a histogram (a.k.a. a frequency bar chart), that shows buckets as a bar with a length proportional to the number of elements of each bucket.","pinned":false,"hidden":false,"mode":"md"},{"id":636,"value":"values1 = distribution(\"Uniform\") // 1000 values distributed with d3.randomUniform","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"draw_values(this || DOM.svg(width, 100), values1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"draw_buckets(bin1, values1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"## Importing Data","pinned":false,"hidden":false,"mode":"md"},{"id":390,"value":"Observable allows you to import data files, cloud files, or connect to your database.\n\n### Ways to load data\n_Load Inline_ - If you want to load a small amount of data, you can embed it in your notebook as code. This can be done using the above mentioned javascript objects or arrays.\n\n_Data Attachments_ - use the steps below and our point-and-click UI to load data, no code needed.","pinned":false,"hidden":false,"mode":"md"},{"id":392,"value":"#### Try it\n1. Click the paperclip in the right menu.\n2. Choose your data source (maybe start with a basic CSV if you don't want to connect your database yet). \n3. When you see the data name under your data menu, click the blue 'Insert into notebook' button.","pinned":false,"hidden":false,"mode":"md"},{"id":725,"value":"### Accessing Data","pinned":false,"hidden":false,"mode":"md"},{"id":718,"value":"_You can also import data from D3 (the same way Python and R data science libraries have built-in datasets to import)_","pinned":false,"hidden":false,"mode":"md"},{"id":721,"value":"data = d3.csv(\"https://data.seattle.gov/api/views/76t5-zqzr/rows.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"md`_To explore the building permit data structure, click on the carat (▸\\`Array\\`) in the cell below\n_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"json_diagram1 = FileAttachment(\"json_diagram-1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":405,"value":"## Importing Modules","pinned":false,"hidden":false,"mode":"md"},{"id":440,"value":"Importing modules is an important part of unlocking your creativity on Observable. One of the best perks of learning aspects of JavaSCrupt is the vast array of libraries and modules you can use to enhance any viz.","pinned":false,"hidden":false,"mode":"md"},{"id":1074,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1082,"value":"On Observable and import looks like the cell above. \n\nWe start with the import keyword, curly brackets with the name of the function or tool we want to import, the keyword from, and lastly where the tool comes from. \n\nIn this example, SummaryTable is a UI tool to easily gain a visual understanding of the distributions in a data set. As this tool is was created by the Observable team, the from tag starts with @observablehq, our team's username. \n\nMuch like import statements common in Python, we must state where we are importing a tool from and the name of the tool. Once we run the cell the tool is available to us in our notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":1087,"value":"## Next Steps\n\nNow that you've built a foundation in JavaScript you might be wondering what's next.\n\nIt's time to strengthen your skills and get started using JavaScript on Observable as part as your data workflow. Here are some more resources to jumpstart you on your Observable journey.\n- [APIs Starters](https://observablehq.com/templates#templates-integrations)\n- [Plot for Matplotlib Users](https://observablehq.com/collection/@observablehq/plot-for-matplotlib-users)\n- [Plot Cheatsheets](https://observablehq.com/@observablehq/plot-cheatsheets)","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":662,"value":"**You might be wondering what this section is. **","pinned":false,"hidden":false,"mode":"md"},{"id":659,"value":"_Think of this appendix like your first cell in a Jupyter notebook. Since cell order doesn't matter, we like to keep our imports and global variables at the bottom (and out of the way) so notebooks are in presentation mode by default. _","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"import { compareCode } from '@ballingt/comparecode'","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"bandcampSales1 = FileAttachment(\"1000000-bandcamp-sales-1.parquet\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"max = 18","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"function distribution(label) {\n return select_distribution(label).value\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":642,"value":"function select_distribution(\n label,\n description = \"Random distribution\",\n length = 1000\n) {\n const form = html``;\n form.oninput = () => {\n form.value = Float32Array.from(\n { length },\n randomDistributions[+form.radio.value].random\n );\n };\n form.onchange = () => {\n // Safari…\n form.value = form.radio.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.oninput();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":644,"value":"randomDistributions = {\n const r20 = d3.randomNormal(max * 0.3, 2),\n r21 = d3.randomNormal(max * 0.75, 1),\n r4 = d3.randomExponential(0.3);\n return [\n { label: \"Uniform\", random: d3.randomUniform(0.5, max - 0.3) },\n { label: \"Normal\", random: d3.randomNormal(max / 2, (1.4 * max) / 18) },\n { label: \"Two blobs\", random: () => (Math.random() > 0.3 ? r20() : r21()) },\n { label: \"Skewed right\", random: d3.randomLogNormal() },\n { label: \"Skewed left\", random: () => 18 - r4() }\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"function draw_values(svg, values) {\n // We sort the data for meaningful transitions.\n const current = values.slice().sort();\n\n const prev = (svg && svg.values) || current;\n\n svg.values = current;\n\n d3.select(svg)\n .selectAll(\"circle\")\n .data(current)\n .join(\"circle\")\n .attr(\"r\", 2)\n .attr(\"stroke\", \"#588\")\n .attr(\"fill\", \"lightblue\")\n .attr(\"fill-opacity\", 0.3)\n .attr(\"cx\", (_, i) => x(prev[i]))\n .attr(\"cy\", (_, i) => y(i))\n .transition()\n .duration(500)\n .attr(\"cx\", x);\n\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":698,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"y = {\n const frac = x => x - (x | 0);\n return i => 50 + 25 * frac(952 * Math.sin((i + 0.5) * 876));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"x = d3.scaleLinear()\n .domain([0, max])\n .range([30, width - 30])\n .clamp(false)","pinned":true,"hidden":false,"mode":"ojs"},{"id":657,"value":"bin1 = d3.bin()","pinned":true,"hidden":false,"mode":"ojs"},{"id":700,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":702,"value":"colors = [\"black\"]\n .concat(d3.schemeCategory10)\n .concat(d3.schemePaired)\n .concat(d3.schemePastel1)\n .concat(d3.schemePastel2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"// Require the d3 library\nd3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}