3e:null 3f:["$","title",null,{"children":"Javascript basics and D3.js - MONTY KANG | Montgomery Kang | Observable"}] 45:T426,/****************************************************************************** * TODO: * * Try to create two lists of colors, then concatenate them, and sort in * * alphabetical order! * * The two lists are: * * red, green, blue * * cyan, magenta, yellow, black * ******************************************************************************/ { let colors1 = ["red", "green", "blue"] let colors2 = ["cyan", "magenta", "yellow", "black"] let allColors = colors1.concat(colors2) allColors.sort() return allColors } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/46:Td58,### selectAll Explaining how "selection" works in D3.js is the most difficult part of this tutorial. Let me give a try! `svg.selectAll('circle')` is the function call to get all the "circles" in svg. Back to our example above, trying to draw 4 circles, we do: ## `svg.selectAll('circle')` - At the beginning, there are no "circles" in the svg, `.selectAll('circle')` returns __an empty set__. ## `.data([10, 20, 30, 40])` - While it is __an empty set__, we want this set to be a set with 4 circles, that is the function call `.data([10, 20, 30, 40])` telling the set "should" have 4 data points. We call it __data binding__, binding an array of data to a __selection set__, which in our case, initially empty and now has 4 data points. ## `.enter()` - When a selection set is transiting from one state to another, there are 3 possible transitions: - `.enter()`: having new data points - just like our case, from a set of 0 data points `[]` to 4 data points `[10, 20, 30, 40]` - the enter set will be `[10, 20, 30, 40]` - `.exit()`: removing some data points - like shrinking from `[10, 20, 30, 40]` to `[10, 40]` - the exit set will be `[20, 30]` - `.update()`: the value of the data points get updated - like from `[10, 20, 30, 40]` to `[0, 15, 30, 40]`, we have 2 data points get updated - the update set will be `[10 -> 0, 20 -> 15]` - The \.enter() function call is telling d3 to give us the enter set for subsequent operations, like the `.append()` function call follows it - `.exit()` and `.update()` are less frequently used in static plots, while we will revisit them again when talking about animations ## `.append('circle')` - For the enter set, we want to add a circle to the svg for each data point, one for 10, one for 20, one for 30 and one for 40 - The subsequent function calls `.attr()` and others are specifying the attributes of of the SVG element, like - `.attr('cy', 20)` specifies the y coordinate of the center as `20` - `.attr('r', 10)` specifies the radius as `10` - `.attr('fill', 'SteelBlue')` specifies the color as "SteelBlue" - You can find a full list of attributes for `circle` elements [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle), and all the other elements [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) ## `.attr('cx', d => xScale(d))` - We want the data value being reflected in the plot. That is, we want to have the circles spread across the x-axis according to their values. In visualization language, we call it __encoding__. - The `.attr()` function call takes a callback as its second argument. We pass the annonymous function `d => xScale(d)` to it, where `d` is the value of a single data point. - This annonymous function will be called 4 times: - first time with the value `10`, we return `xScale(10)`, and a circle is now showing up at the position computed by `xScale(10)` - second time with the value `20`, and we return xScale(20) - third with `30` - forth with `40` Finally, we see 4 circles drawn across the x-axis according to their values. Horray! If you are still confused, the following two blog posts are also about selection: - [How Selections Work](https://bost.ocks.org/mike/selection/) is written by Mike Bostock, the author of D3.js - [D3 in Depth](https://d3indepth.com/selections/) is another well written explanation47:T698,/****************************************************************************** * TODO: * * Try to draw the 4 circles vertically with y-axis! * * Also try to change their color, radius, stroke-color, etc.! * ******************************************************************************/ { const height = 600 const svg = d3.select(DOM.svg(60, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } const yScale = d3.scaleLinear() // For y-axis, we map (0 - 40) to (580 - 10) to fill the height // If you wonder why we are mapping the values reversely, 0 -> 580 and 40 -> 10, // as in the coordination system of our screens, the top left corner is (0, 0) // and bottom left corner is (0, 600) .range([height - margin.bottom, margin.top]) .domain([0, 40]) // Append it to svg svg.append('g') .call(d3.axisLeft(yScale)) // Need to shift the axis a little bit in order to show the tick labels // See more about "transform" in the cell below .attr('transform', `translate(${margin.left},0)`) // Add circles to svg, more explanation in the cell below svg.selectAll('circle') .data([10, 20, 30, 40]) .enter() .append('circle') .attr('cx', 20) .attr('cy', d => yScale(d)) .attr('r', 20) .attr('fill', 'red') return svg.node() } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/48:T653,/****************************************************************************** * TODO: * * Try to plot the pokemon dataset! * * Also try to encode with color, radius, stroke-color, etc.! * ******************************************************************************/ { const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } const xScale = d3.scaleLinear() .range([margin.left, width - margin.right]) .domain(d3.extent(pokemonBaseStats.map(d => d.x))) svg.append('g') .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) .domain(d3.extent(pokemonBaseStats.map(d => d.y))) svg.append('g') .call(d3.axisLeft(yScale)) .attr('transform', `translate(${margin.left},0)`) svg.selectAll('circle') .data(pokemonBaseStats) .enter() .append('circle') // Circles are distributed across x-axis .attr('cx', d => xScale(d.x)) // Across y-axis as well, and it becomes two dimensional .attr('cy', d => yScale(d.y)) .attr('r', 3) .attr('fill', 'green') return svg.node() } /****************************************************************************** * END OF YOUR CODE * ******************************************************************************/49:[] 43:{"id":"ac3f8b1eb6dd5c68","slug":"javascript-basics-and-d3-js","title":"Javascript basics and D3.js - MONTY KANG","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-10-16T14:17:51.325Z","update_time":"$D2026-10-16T14:54:47.447Z","view_time":null,"first_public_time":"$D2026-10-16T14:20:03.541Z","has_unpublished_edits":null,"fork":{"id":"5e74ee56ece51aff","slug":null,"title":"Javascript basics and D3.js","owner":{"id":"77e84fdce34e8d00","login":"tamu-csce-679","name":"TAMU CSCE 679"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4057b33ba55dae4e","login":"kjinmox","name":"Montgomery Kang","avatar_url":"https://avatars-next.observableusercontent.com/1e1a084b05b993399f1c66d5c4b91259788b580e1367d820b4ea98a340e54836","tier":"free_2026","bio":""},"version":1039,"publish_version":1039,"role":null,"authored":false,"authors":[{"type":"individual","id":"ee9766ba560d5919","login":"kjinmox","name":"Montgomery Kang","avatar_url":"https://avatars-next.observableusercontent.com/1e1a084b05b993399f1c66d5c4b91259788b580e1367d820b4ea98a340e54836","tier":null,"bio":""}],"members":[{"type":"team","id":"4057b33ba55dae4e","login":"kjinmox","name":"Montgomery Kang","avatar_url":"https://avatars-next.observableusercontent.com/1e1a084b05b993399f1c66d5c4b91259788b580e1367d820b4ea98a340e54836","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Javascript basics and D3.js - MONTY KANG","cells":[{"id":0,"value":"# Javascript basics and D3.js - MONTY KANG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## Javascript on Observable\n\nJavascript is the programming language for running any code of a web page. Web pages are ubiquitously accessible with any devices, it is the best way to deliver our visualizations.\n\nThere is a minor difference between Observable and Jupyter notebook we need to be aware of. Unlike Jupyter notebook running cell by cell in sequential order, Observable blurs the order of code execution. Instead, it is like a spreadsheet (i.e. MS Excel, Google Sheets, etc.), a value update in a cell will automatically update those cells depend on it. Last but not least, JavaScript on Observable is almost — but not entirely — vanilla.\n\nLet's see an example!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"// THIS IS\n// Try to change the value of \"radius\" and hit \"shitf+enter\". You will see the \"area\" cell changes automatically\n\nradius = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"// The variable \"area\" depends on \"radius\", its value will be updated whenever \"radius\" changes\n\narea = Math.PI * Math.pow(radius, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`If you wonder how this is being implemented, you can read more about [\"How Observable Runs\"](https://observablehq.com/@observablehq/how-observable-runs)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`### Expressions and Blocks\n\nA cell with single statement is an *expression*, and a cell with multiple statements need to be encapsulated with \\`{}\\` curly braces, and it is a code *block*.\n\nUnlike an expression, while declaring a variable inside a block, it is required to use one of the variable declaration keywords, \\`var\\`, \\`let\\` or \\`const\\`. For simplicity, we will stick with \\`let\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"{\n let length = 3\n return length * length\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`### Variables and Data Types\n\n- Number, e.g. 1234\n- String, e.g. 'Foo'\n- Boolean, e.g. true, false\n- Array, e.g. ['Foo', 'Bar']\n- Object, e.g. { code: 'Foo', name: 'Bar' }\n- \\`undefined\\` is the \\`null\\` of Javascript (while the keyword \\`null\\` also exists in Javascript, but is very rarely seen or used)\n- Functions are the first class citizens of Javascript, a function can be assigned to a variable and passing into another function as arguments, we will see more about functions in a later section\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`### Array`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"// Declare an array with square brackets \"[]\"\n\nvisualChannels = ['position', 'length', 'angle', 'area', 'color', 'curvature']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"// Get the length of an array\n\nvisualChannels.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"// Access an item in an array\n\n'Most effective channel: ' + visualChannels[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"// An array can be destructured\n\n{\n let rgb = [64, 224, 208]\n let [red, green, blue] = rgb\n \n return red\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"// Concatenate two arrays\n\nmoreVisualChannels = visualChannels.concat(['color hue', 'color saturation', 'color luminance'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"// To sort an array, we use \"sort\"\n\nmoreVisualChannels.sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`See the [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) for more methods on array`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`### Object\n\n\\`{}\\` is used for encapsulating a code block, the normal object declaration requires a pair of additional parentheses.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"// Declare an object\n\ntypesOfData = ({\n ordered: [1, 2, 3, 4, 5],\n categorical: ['strawberry', 'apple', 'orange']\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"// To access an attribute of an object, we simply use \".\"\n\ntypesOfData.categorical","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"// Or equivalent with square brackets\n\ntypesOfData['categorical']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`If the object declaration is in a block, parentheses are not required.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"// To modify an attribute of an object, we simply assign a value to it\n\n{\n let typesOfData = {\n ordered: [1, 2, 3, 4, 5],\n categorical: ['strawberry', 'apple', 'orange']\n }\n \n typesOfData.categorical = ['strawberry', 'apple', 'orange', 'banana']\n \n return typesOfData.categorical\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"/******************************************************************************\n * TODO: *\n * Try to modify the values of the \"ordered\" attribute to 1, 10, 100, 1000! *\n ******************************************************************************/\n{\n typesOfData.ordered = [1, 10, 100, 1000]\n return typesOfData.ordered\n}\n\n\n/******************************************************************************\n * END OF YOUR CODE *\n ******************************************************************************/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md`### Logic flow and loop`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"// If statement\n\n{\n let color = 'magenta'\n let hex = ''\n\n if (color === 'cyan') {\n hex = rgb2hex(0, 255, 255)\n } else if (color === 'magenta') {\n hex = rgb2hex(255, 0, 255)\n } else if (color === 'yellow') {\n hex = rgb2hex(255, 255, 0)\n } else {\n hex = rgb2hex(255, 255, 255)\n }\n \n return hex\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"// Loop through items in an array\n\n{\n let rgb = ['red', 'green', 'blue']\n let rgbValues = [[255, 0, 0], [0, 255, 0], [0, 0, 255]]\n let rgbHex = []\n \n for (let i = 0; i < rgb.length; i++) {\n let [r, g, b] = rgbValues[i]\n // append an item to the array\n rgbHex.push(rgb2hex(r, g, b))\n }\n \n return rgbHex\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"/******************************************************************************\n * TODO: *\n * Try to find the hex codes of cyan, magenta, yellow, and black! *\n ******************************************************************************/\n{\n let rgb = ['cyan', 'magenta', 'yellow', 'black']\n let rgbVals = [[0, 255, 255], [255, 0, 255], [255, 255, 0], [255, 255, 255]]\n let rgbHex = []\n\n for (let i = 0; i < rgb.length; i++) {\n let [r,g,b] = rgbVals[i]\n rgbHex.push(rgb2hex(r,g,b))\n }\n\n return rgbHex\n}\n\n\n\n\n/******************************************************************************\n * END OF YOUR CODE *\n ******************************************************************************/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`### Function\n\nFunctions can be declared in two ways, one with the keyword \\`function\\`, another is using arrow \\`() => {}\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"// Declare a function with keyword \"function\"\n\nfunction int2hex (n) {\n return n >= 16 ? n.toString(16) : '0' + n.toString(16)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"// Calling the \"int2hex\" function\n\nint2hex(255)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"// Alternatively, we can declare a function using arrow\n\nrgb2hex = (r = 0, g = 0, b = 0) => {\n return '#' + int2hex(r) + int2hex(g) + int2hex(b)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"rgb2hex(64, 224, 208)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"// Converting color name to hex code\n\nfunction rgbColor2hex (color) {\n if (color === 'red') {\n return rgb2hex(255, 0, 0)\n } else if (color === 'green') {\n return rgb2hex(0, 255, 0)\n } else {\n return rgb2hex(0, 0, 255)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"rgbColor2hex('red')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"/******************************************************************************\n * TODO: *\n * Try to use arrow function expression to create a function that takes color *\n * name as input and return hex code for cyan, magenta, yellow and black! *\n ******************************************************************************/\nrgbColorToHex = (color = 'white') => {\n if (color === 'cyan') {\n return rgb2hex(0, 255, 255)\n } else if (color === 'magenta') {\n return rgb2hex(255, 0, 255)\n } else if (color === 'yellow') {\n return rgb2hex(255, 255,0)\n } else if (color === 'black') {\n return rgb2hex(255, 255, 255)\n } else {\n return rgb2hex(0, 0, 0)\n }\n}\n\n\n/******************************************************************************\n * END OF YOUR CODE *\n ******************************************************************************/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"md`### Callback\n\nCallback is an important concept in Javascript. Function is a first class citizen in Javascript, a function can be passed into another function as argument. Many library APIs are built around this language feature.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"// Built-in array function \"map\"\n// It calls the \"rgbColor2hex\" function for each item in the array\n\n['red', 'green', 'blue'].map(rgbColor2hex)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"/******************************************************************************\n * TODO: *\n * Try to map the \"cyan\", \"magenta\", \"yellow\", \"black\" over the function you *\n * have created above to get their hex codes! *\n ******************************************************************************/\n['cyan', 'magenta', 'yellow', 'black'].map(rgbColorToHex)\n\n\n/******************************************************************************\n * END OF YOUR CODE *\n ******************************************************************************/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md`# D3.js\n\nIn the above, we have learnt how to use Javascript to manipulate raw data, turning them into the form that ready to be visualized.\n\nIn the following ,we will learn about how to use D3.js to draw data visualization.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"md`## Why D3.js?\n\nBefore picking D3.js as your visualization tool, you need to ask why do you need D3.js?\n\nIf you are exploring a dataset, D3.js will not be a good choice. It requires quite some effort to make a visualization with D3.js.\n\nCompare to the other tools, D3.js provides the flexibility if we needed. But it comes with a cost, you will need to write much more code, requires much more thinking and much easier to make mistakes that violate visualization principals.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"// Import d3, \"@7\" specifies the version we want\n\nd3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"import { legend } from \"@mbostock/mortality-due-to-alcohol-use-disorder\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"## SVG\n\nD3.js is built on SVG (Scalable Vector Graphics), and SVG is an extension of HTML, which means SVG is written in XML format and it can be manipulated through DOM, just like the other elements on the web page.\n\nLet's see how it looks like!\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":848,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":851,"value":"## D3.js Scale\n\nD3.js provides a set of functions to generate a mapping between the range and the domain.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":853,"value":"// Linear scale, mapping 0 - 40 to 0 - 100\n\nlinearScale = d3.scaleLinear()\n .range([0, 100])\n .domain([0, 40])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":855,"value":"[10, 20, 30, 40].map(n => linearScale(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"/******************************************************************************\n * TODO: *\n * Try to make a scale that maps 0 - 12 to 0 - 720! e.g. 1.5 -> 90 *\n ******************************************************************************/\n{\n let linearScale2 = d3.scaleLinear()\n .range([0, 720])\n .domain([0, 12])\n return linearScale2(1.5)\n}\n\n\n\n/******************************************************************************\n * END OF YOUR CODE *\n ******************************************************************************/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"// We also use scale when encoding values with color\n// Remember that color scale can be diverging, sequential and categorical\n// the following demonstrate how to build a sequential color scale\n\ncolorScale = d3.scaleLinear()\n .interpolate(() => d3.interpolateOranges)\n .domain([0, 40])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"[10, 20, 30, 40].map(n => colorScale(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"legend(colorScale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"/******************************************************************************\n * TODO: *\n * Try to make a diverging color scale with \"d3.interpolateRdYlBu\" color *\n * scheme with domain [0, 100]! *\n ******************************************************************************/\n{\n const colorScale2 = d3.scaleLinear()\n .interpolate(() => d3.interpolateRdYlBu)\n .domain([0, 100])\n\n // return [20, 40, 60, 80, 100].map(n => colorScale2(n))\n return legend(colorScale2)\n}\n\n\n/******************************************************************************\n * END OF YOUR CODE *\n ******************************************************************************/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"A full list of color schemes can be found in the [documentation](https://github.com/d3/d3-scale-chromatic)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":887,"value":"## Coordinate System\n\nPosition encoding is the most effective channel of a visualization. While the data values are converted to the 2D coordinates of the screen, the meaning is distorted. Axes are crucial for human user to decode the position of a mark back to its data value.\n\nThere are serveral coordinate systems, the most common X and Y Cartesian coordinate, angular distance polar coordinate, and also geographic projection of Earth.\n\nWe first look into the most common Cartesian coordinate, then later in this tutorial, make a radar chart with polar coordinate.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":889,"value":"### X-axis\n\nThe basic, horizontal axis, from left (smaller values) to right (larger values).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":891,"value":"// Width of available space of an output cell on Observable notebook\n// We use it as the maximum width of our drawing \"canvas\", it is a global\n// variable, declared and set by Observable notebook\n\nwidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"{\n // While width is given, we need to define the height of our drawing \"canvas\"\n const height = 60\n // Define our svg\n const svg = d3.select(DOM.svg(width, height))\n \n // Make some empty space around\n // Try to set the margins to zeros and see what happens!\n const margin = { left: 30, top: 10, right: 10, bottom: 20 }\n \n const xScale = d3.scaleLinear()\n // Instead of mapping (0 - 40) to (0 - 100), we map (0 - 40) to (30 - 945) to fill the width\n .range([margin.left, width - margin.right])\n .domain([0, 40])\n \n // Append it to svg\n svg.append('g').call(d3.axisBottom(xScale))\n \n // Return it, and Observable will show it as output\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"### Y-axis\n\nAlthough it is the basic, vertical axis, we need to be aware that the screen coordinate extends from top to bottom. Which means \\`(0, 0)\\` at the top left corner, \\`(0, height)\\` at the bottom left corner, and \\`(width, height)\\` at the bottom right corner.\n\nWhile our normal perception of a plot drawn in Cartesian coordinate is having \\`(0, 0)\\` at the bottom left corner, and extending upward to the top, we need to flip the axis.\n\n $\"screen$ \n\nPicture from [processing.org](https://processing.org/tutorials/drawing/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":898,"value":"{\n const height = 600\n const svg = d3.select(DOM.svg(60, height))\n\n const margin = { left: 30, top: 10, right: 10, bottom: 20 }\n \n const yScale = d3.scaleLinear()\n // For y-axis, we map (0 - 40) to (580 - 10) to fill the height\n // If you wonder why we are mapping the values reversely, 0 -> 580 and 40 -> 10,\n // as in the coordination system of our screens, the top left corner is (0, 0)\n // and bottom left corner is (0, 600)\n .range([height - margin.bottom, margin.top])\n .domain([0, 40])\n \n // Append it to svg\n svg.append('g')\n .call(d3.axisLeft(yScale))\n // Need to shift the axis a little bit in order to show the tick labels\n // See more about \"transform\" in the cell below\n .attr('transform', `translate(${margin.left},0)`)\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"See the [documentation of transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform) for more other functions for transform. We commonly use\n\n- `translate(x, y)` to do horizontal/vertical shifting\n- `rotate(degree, [x, y])` to do angular shifting\n- `scale(x, y)` to resize","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":906,"value":"## Marks and Channels\n\nNow, we have a coordinate system to encode data values, we put marks on the screen to represent the data points.\n\nTo do so, we have to touch the most difficult part of learning D3.js, __selection__.\n\nLet's see an example first!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":908,"value":"{\n const height = 60\n const svg = d3.select(DOM.svg(width, height))\n \n const margin = { left: 30, top: 10, right: 10, bottom: 20 }\n\n const xScale = d3.scaleLinear()\n .range([margin.left, width - margin.right])\n .domain([0, 40])\n \n svg.append('g')\n .call(d3.axisBottom(xScale))\n .attr('transform', `translate(0,${height - margin.bottom})`)\n \n // ----- The above are the same as plotting x-axis in the previous section -----\n \n // Add circles to svg, more explanation in the cell below\n svg.selectAll('circle')\n .data([10, 20, 30, 40])\n .enter()\n .append('circle')\n .attr('cx', d => xScale(d))\n .attr('cy', 20)\n .attr('r', 10)\n .attr('fill', 'SteelBlue')\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":912,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"### Points Mark: Scatter Plot\n\nScatter plot is the most simple yet most powerful plot in visual analysis. It uses the most effective channels in our visual systems, position, color and shapes. And yet, very easy to plot.\n\nLet's learn more about D3.js through making a scater plot!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":916,"value":"#### d3.extent()\n\nAs dataset changes, the values in \\`.domain([0, 40])\\`, that is the range of the original data, need to be changed as well. \\`d3.extent()\\` is the function for computing the min and max values, the range, of the dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":919,"value":"// Example dataset grows in exponential scale\n\nexponentialData = _.range(0, 5).map(x => ({ x, y: 5 * Math.pow(2, x) }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"d3.extent(exponentialData.map(d => d.x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"d3.extent(exponentialData.map(d => d.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"/******************************************************************************\n * TODO: *\n * Try to make another exponential dataset with exponents of 3 and use *\n * d3.extent to find the minimum and maximum values of the y values! *\n ******************************************************************************/\n{\n const exponData2 = _.range(0, 5).map(x => ({x, y: 5 * Math.pow(3, x)}))\n return d3.extent(exponData2.map(d => d.y))\n}\n\n\n/******************************************************************************\n * END OF YOUR CODE *\n ******************************************************************************/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"#### Scatter Plot of logarithmicData","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":938,"value":"{\n const height = 600\n const svg = d3.select(DOM.svg(width, height))\n \n const margin = { left: 30, top: 10, right: 10, bottom: 20 }\n \n const xScale = d3.scaleLinear()\n .range([margin.left, width - margin.right])\n .domain(d3.extent(exponentialData.map(d => d.x)))\n \n svg.append('g')\n .call(d3.axisBottom(xScale))\n .attr('transform', `translate(0,${height - margin.bottom})`)\n \n const yScale = d3.scaleLinear()\n .range([height - margin.bottom, margin.top])\n .domain(d3.extent(exponentialData.map(d => d.y)))\n \n svg.append('g')\n .call(d3.axisLeft(yScale))\n .attr('transform', `translate(${margin.left},0)`)\n \n svg.selectAll('circle')\n .data(exponentialData)\n .enter()\n .append('circle')\n // Circles are distributed across x-axis\n .attr('cx', d => xScale(d.x))\n // Across y-axis as well, and it becomes two dimensional\n .attr('cy', d => yScale(d.y))\n .attr('r', 10)\n .attr('fill', 'SteelBlue')\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"#### Scatter Plot of Pokemon Base Stats\n\nThe logarithmic data is too simple and not interesting.\n\nLet's plot the Pokemon dataset with D3.js!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":943,"value":"// Load pokemon_tsne.csv from the tutorial repository on GitHub\n\npokemonBaseStats = d3.csv('https://raw.githubusercontent.com/leoyuholo/learning-vis-tools/master/tutorial06/lab6/pokemon_tsne.csv', d => _.mapValues(d, s => isNaN(parseFloat(s)) ? s : parseFloat(s)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 44:"$43:body"