I'm Learning D3

2d:null 2e:["$","title",null,{"children":"Observable vs Regular Flavor Javascript | Carlos Sandoval Olascoaga | Observable"}] 33:T957,{ var margin = ({top: 15, right: 10, bottom: 25, left: 30}) // Initialize SVG object (using our pre-defined width and height) const svg = d3.select(DOM.svg(width, height)); // Get length of dataset let arrayLength = bosData.length; // length of dataset let maxValue = d3.max(bosData, d=> d.calls); // get max value of our dataset let x_axisLength = (width - margin.right - margin.left); // length of x-axis in our layout let y_axisLength = (height - margin.top - margin.bottom); // length of y-axis in our layout // Use a scale for the height of the visualization const yScale = d3.scaleLinear() .domain([0, d3.max(bosData, d=> d.calls)]) .range([margin.bottom, height - margin.top]) // Select and generate rectangle elements svg.selectAll( "rect" ) .data( bosData ) .enter() .append("rect") .attr( "x", (d,i) => (i*(x_axisLength/arrayLength) + margin.left)) // Set x coordinate of each bar to index of data value (i) times dynamically calculated bar width. // Add left margin to account for our left margin. .attr( "y", d => (height - yScale(d.calls)) ) // Set y coordinate using yScale. .attr( "width", (x_axisLength/arrayLength) - 1 ) // Set bar width using length of array, with 1px gap between each bar. .attr( "height", d => yScale(d.calls) - yScale(0)) // Set height of rectangle to data value, accounting for bottom margin. .attr( "fill", "steelblue"); // Create y-axis, beginning at the top margin and ending at the bottom margin svg.append("line") .attr("x1", margin.left) .attr("y1", margin.top) .attr("x2", margin.left) .attr("y2", height - margin.bottom) .attr("stroke-width", 2) .attr("stroke", "black"); // Create x-axis beginning at the left margin, and ending at the right margin svg.append("line") .attr("x1", margin.left) .attr("y1", height - margin.bottom) .attr("x2", width - margin.right) .attr("y2", height - margin.bottom) .attr("stroke-width", 2) .attr("stroke", "black"); // Add a Label // y-axis label svg.append("text") .attr("class", "y label") .attr("text-anchor", "end") .text("No. of 311 Calls") .attr("transform", "translate(20, 20) rotate(-90)"); return svg.node(); }34:Tded,md` \`\`\`Javascript I'm Learning D3 \`\`\` `35:[] 31:{"id":"05713f929e5840c4","slug":"observable-vs-regular-flavor-javascript","title":"Observable vs Regular Flavor Javascript","thumbnail":"eddeed1a793a431dda175a5495d7e375c01e801c67b3f4699c2218c9a03bf915","access_level":"public","create_time":"$D2019-04-06T19:00:24.768Z","update_time":"$D2019-04-28T16:06:11.696Z","view_time":null,"first_public_time":"$D2019-04-06T19:28:02.345Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"7be24cbfb3203dab","login":"cesandoval","name":"Carlos Sandoval Olascoaga","avatar_url":"https://avatars-next.observableusercontent.com/932dec7ee5c2e52477e2a80482b05fdab063507b7c3029a5f6bc1ff0e03bbc36","tier":"starter_2024"},"version":121,"publish_version":121,"role":null,"authored":false,"authors":[{"type":"individual","id":"7750258d506a87a9","login":"cesandoval","name":"Carlos Sandoval Olascoaga","avatar_url":"https://avatars-next.observableusercontent.com/932dec7ee5c2e52477e2a80482b05fdab063507b7c3029a5f6bc1ff0e03bbc36","tier":null}],"members":[{"type":"individual","id":"7750258d506a87a9","login":"cesandoval","name":"Carlos Sandoval Olascoaga","avatar_url":"https://avatars-next.observableusercontent.com/932dec7ee5c2e52477e2a80482b05fdab063507b7c3029a5f6bc1ff0e03bbc36","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":null,"type":"notebook","body":{"title":"Observable vs Regular Flavor Javascript","cells":[{"id":0,"value":"md`# Observable vs Regular Flavor Javascript`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md `\n### Javascript in Observable\n\nObservable cells come in two forms: *expressions* and *blocks*. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md `\n#### Expressions\n\nExpressions are intended for simple definitions, such as basic calculations, and for defining fundamental objects that will be used throughout a Notebook.\n\nScoped globally, topologically structured\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`\nTwo key features about Expressions in Observable is that they are *globally scoped* and *topologicaly evaluated*. What this means to us is that expressions are available throughout a notebook, and that references to elements can occur before they are defined. Below, you'll see that height and width are accessible in different cells than the ones they are being called in, and that width is being referenced before we define it.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`\nThis also means that we cannot redefine global variables in Observable, so use them carefully! See what happens when you try to uncomment the cell below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"// height = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md `\n#### Blocks\nThe other primary form of cells is in *blocks*. Blocks are surrounded by {curly braces}, and are meant for more complex definitions. You may have noticed that you cannot have an expression cell that is more than one line, this is what blocks are for! They're great for definitions that include local variables or loops:\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"{\n let firstNumber = 55\n \n return firstNumber + 10\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`\nIf you want to reference a block in another cell, you can define it as a function:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"function addingNumbers(number3, number4){\n let number5 = number3 + number4\n return number5\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`\nWhat's important to remember about blocks is that they cannot be referenced by other cells because they are not globally defined.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md `### D3 Example written in Observable\nLet's look at a simple D3 example written with *blocks* and *expressions*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"bosData = d3.csv(\"https://gist.githubusercontent.com/jdev42092/46071bf3284265c37ea07d6328ef7a3a/raw/cc7bfc53f3853437749906ccf7d2cac49c43c9a2/neigh_311.csv\", ({neighborhood, num_311}) => ({neighborhood: neighborhood, calls: +num_311}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md `### Chart as a single code block`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md `### Chart as a set of expressions\nWhat is different??? Remember that we cannot declare the variables beforehand, we just need to pass name them, and remember that we cannot redefine them along the way!!!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"margin = ({top: 15, right: 10, bottom: 25, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"// Initialize SVG object (using our pre-defined width and height)\nsvg = d3.select(DOM.svg(width, height));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"// Get length of dataset\narrayLength = bosData.length; // length of dataset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"maxValue = d3.max(bosData, d=> d.calls); // get max value of our dataset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"x_axisLength = (width - margin.right - margin.left); // length of x-axis in our layout","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"y_axisLength = (height - margin.top - margin.bottom); // length of y-axis in our layout","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"// Use a scale for the height of the visualization\nyScale = d3.scaleLinear()\n.domain([0, d3.max(bosData, d=> d.calls)])\n.range([margin.bottom, height - margin.top]) \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"// Select and generate rectangle elements\nsvg.selectAll( \"rect\" )\n .data( bosData )\n .enter()\n .append(\"rect\")\n .attr( \"x\", (d,i) => (i*(x_axisLength/arrayLength) + margin.left)) \n// Set x coordinate of each bar to index of data value (i) times dynamically calculated bar width.\n// Add left margin to account for our left margin.\n .attr( \"y\", d => (height - yScale(d.calls)) ) \n// Set y coordinate using yScale. \n .attr( \"width\", (x_axisLength/arrayLength) - 1 ) \n// Set bar width using length of array, with 1px gap between each bar.\n .attr( \"height\", d => yScale(d.calls) - yScale(0)) \n// Set height of rectangle to data value, accounting for bottom margin.\n .attr( \"fill\", \"steelblue\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"// Create y-axis, beginning at the top margin and ending at the bottom margin\nsvg.append(\"line\")\n .attr(\"x1\", margin.left)\n .attr(\"y1\", margin.top)\n .attr(\"x2\", margin.left)\n .attr(\"y2\", height - margin.bottom)\n .attr(\"stroke-width\", 2)\n .attr(\"stroke\", \"black\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// Create x-axis beginning at the left margin, and ending at the right margin\nsvg.append(\"line\")\n .attr(\"x1\", margin.left)\n .attr(\"y1\", height - margin.bottom)\n .attr(\"x2\", width - margin.right)\n .attr(\"y2\", height - margin.bottom)\n .attr(\"stroke-width\", 2)\n .attr(\"stroke\", \"black\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"// Add a Label\n// y-axis label\nsvg.append(\"text\")\n .attr(\"class\", \"y label\")\n .attr(\"text-anchor\", \"end\")\n .text(\"No. of 311 Calls\")\n .attr(\"transform\", \"translate(20, 20) rotate(-90)\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"svg.node();\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md `### Chart embedded in an HTML Document\nWhat is different??? We are only using the **var** keywork to define variables... Not a lot of browsers support ES6! Additionally, everything is within **script** tags! \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md` ## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"