2d:null 2e:["$","title",null,{"children":"Session 2.1a - Intro to D3.js: Making a Chart | Carlos Sandoval Olascoaga | Observable"}] 33:T65c,md` ## What is D3? D3 stands for [Data Driven Documents](http://d3js.org/). It is a JavaScript library developed by [Mike Bostock](https://twitter.com/mbostock) that is designed to manipulate documents based on data, allowing the user to create rich and dynamic visualizations using web standards of HTML, SVG, CSS, and JavaScript. The library is well developed, and very popular among Data Analysts and Data Visualization Specialists. It is perhaps easier to describe D3 by detailing what it is not. You've probably come across standard plotting libraries; ggplot2 or shiny for R, Excel's built-in plotting functions, matplotlib in Python... these are libraries that make it easy to do *particular kinds of plotting*. They will have built-in functions to make producing certain kind of graphics very simple. Generating a complete bar chart might require only one line of code, or the click of one button. This is not the case in D3. D3 is output-neutral; this means that every graphic requires quite a bit of explicit coding to give direction to our web browser. On the one hand, this means that producing even simple graphics will at first seem very laborious. On the other hand, because D3 is not prescriptive, you can quite literally do anything with it. Where dedicated plotting and mapping libraries break down quite quickly when you want to do something other than what they're intended to do, D3 will have no complaint when you try to push at the edges. Think of it as a very fancy tool that you have to learn to operate, telling it what to draw, what data to base the drawing on, and which document to manipulate. `34:T40f,md` ## Web Page Documents and Assets To describe how D3 works, first consider what we mean by the term **Documents**. A webpage is a collection of documents sitting on your web server. The web server has an address on the World Wide Web that other computers can navigate to. When a visitor navigates to your address, their browser will request one or more documents. These documents describe to their browser what to display, how to display it, where to get data from that aids in the display, and when to execute events such as user clicks. A basic webpage could contain a series of text documents that contain code written to structure the webpage (HTML), style that page (CSS), and add dynamic elements (JS). Webpages will often have many assets, including images, data, and other supplemental material that makes the page display and function properly.

`35:T70c,md` ## How D3 Works When working with D3, you are creating and manipulating elements within web documents. For example, the D3 JavaScript library will find a div element in your page, bind a dataset to it, then set attributes of that element according to values in the dataset. It might dynamically update the element based on, for example, a user click or a change in the dataset. D3 is, indeed, data-driven; this means that changes on your web page are generated by data that you are expected to 'bind'. D3 can work with just about any element found on your webpage and modify it by binding data to that element and setting attributes of that element accordingly. The data drives the document. For example, D3 can be used to generate an HTML table from an array of numbers, or you can use the same data to create an interactive bar chart those same numbers. Events you connect to these elements allow for interaction with the data^{[1](d3js.com)}. Just what does this mean? Take a look at a sample dataset. D3 allows these data to be attached to elements in our document. Just what does this mean? Take a look at a sample dataset. D3 allows these data to be attached to elements in our document. | City | # of Rats | |------------|-----------| | Brookline | 40 | | Boston | 90 | | Cambridge | 30 | | Somerville | 60 | The primary element you will find yourself working with is the SVG, or the [Scalable Vector Graphic](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics). SVG is an XML-based, web-friendly vector image format. It also provides support for animation and interactivity. SVG is unique in that all of the behaviors and components of the SVG images can be accessed from JavaScript and CSS just like any other element in a webpage. `36:T44d,### SVG Shapes *[Introduction to the DOM](https://www.digitalocean.com/community/tutorials/introduction-to-the-dom)* *[SVG documentation](https://developer.mozilla.org/en-US/docs/Web/SVG)* *[d3-shape](https://github.com/d3/d3-shape)* The most common SVG elements used in data visualization are these five: tag | example | attributes | positioning attributes --- | --- | --- <rect> | ${tableSVG('')} | width, height | x, y <circle> | ${tableSVG('')} | r | cx, cy <path> | ${tableSVG('')} | d | <text> | ${tableSVG('hi there!')} | | x, y, text-anchor, dy <g> | ${tableSVG('group element')} | | transform *Table from [Shirley's Custom D3 workshop materials](https://observablehq.com/@sxywu/1-draw-a-flower-petal-on-the-screen?collection=@sxywu/introduction-to-d3-js)*37:T559,md` Since \`selectAll("rect")\` finds multiple elements, everything in the chain following this will be happening to each of those elements.4 Using this will iterate through each of the elements on the page that we are binding data to. **SelectAll Iteration** The \`selectAll\` method iterates through the data values one by one. Going one by one, data values are returned to the DOM. This ultimately allows for functions and operations to be performed on each data value. The order, unless specified in another way, will be from top to bottom down you page. For more on working with selections and the options available, [check out the documentation](https://github.com/d3/d3-selection/blob/master/README.md#selectAll). Additional recommended reading on selections from Mike Bostock's [How Selections Work](https://bost.ocks.org/mike/selection/). To make a bar chart, we must also use the \`data\` and \`attr\` methods. **The data() method** The [data()](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) method is the very soul of D3. With it, an array of data is bound to page elements. **The attr() method** The [attr()](https://github.com/d3/d3-selection/blob/master/README.md#selection_attr) method allows us to set attributes of the page elements. In this example, we set the height, width, color, and x/y location attributes. `38:T75b,md` Things just got a little weird. Did we just select a bunch of rectangle elements that don't exist? Well, yes... kinda. With D3, you always have to first select what you are going to be operating on4, even if it doesn't yet exist. This is a bit abstract, but hang with me, the next steps will explain this more. What we did is select a bunch of rectangles that are not there, so we get an empty selection. The next few lines of code in our block above create these elements by binding data, using the enter(), and appending a new element. 1. \`data()\` - We bind the data to our empty selection using the [\`data()\`](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) method, it will return the four data values in our **dataset**. 2. \`enter()\` - When we load data, it will iterate through the dataset and apply all methods that follow to each of the values of our dataset. The [\`enter()\`](https://github.com/d3/d3-selection/blob/master/README.md#selection_enter) method creates placeholders for each data element for which no corresponding DOM element was found. Because it iterates, it will create four placeholders. 3. \`append()\` - Finally, the [\`append("rect")\`](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) method will insert a rectangle into each of the placeholders that do not have a "rect" element, which is all of them4. 4. \`attr()\` - Iteratively sets attributes, such as (x,y) location, width, and height for each of the rectangle elements. Right now, these are all in the same location **(0,0)** and have the same width **(20)** and height **(100)**. We need to use functions to make this work properly, and will detail that next. Save and refresh your document. You should see this... pretty boring, but if you see this it is working! You have four rectangles, but they are all in the same location. `39:T428,md` **Setting the x attribute** You notice here a second argument is provided to our anonymous function (**i**). This represents the index location of the data value referred to in the **d** argument. Here we space the bars horizontally using the second i argument. The i argument is the index of each bar in the selection as the code iterates through. For our four rectangles, **i** here will be 0, 1, 2, and 3, giving us **x** positions of **0, 25, 50, and 75**. **Setting the height attribute** The d argument is the data value for each piece of data. The function will return the value for each rectangle based on the data value, setting the height attribute equal to the data value for each respective rectangle. **Setting the fill attribute** Let’s color our chart while we are at it. Set the fill attribute to the color of your choice. I used \`steelblue\`. This attribute will take web standard colors. [Look up some Hex codes and pick your favorite color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value), or just use \`steelblue\`. `3a:T4c6,{ // Width and height of the SVG object let w = 150; let h = 175; // Initialize SVG object const svg = d3.select(DOM.svg(w, h)); // Select and generate rectangle elements svg.selectAll( "rect" ) .data( exData ) .enter() .append("rect") .attr( "x", (d,i) => (i*25 + 30)) // Set x coordinate of rectangle to index of data value (i)*25. // Add 30 to account for our left margin. .attr( "y", d => h-d ) // Set y coordinate for each bar to height minus the data value .attr( "width", 20 ) .attr( "height", d => d) // Set height of rectangle to data value .attr( "fill", "steelblue"); // Create y-axis svg.append("line") .attr("x1", 30) .attr("y1", 75) .attr("x2", 30) .attr("y2", 175) .attr("stroke-width", 2) .attr("stroke", "black"); // Create x-axis svg.append("line") .attr("x1", 30) .attr("y1", 175) .attr("x2", 130) .attr("y2", 175) .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 Rats") .attr("transform", "translate(20, 20) rotate(-90)"); return svg.node(); }3b:T4b0,md` ## Doing it the D3 Way: Using Scales, Domains, and Ranges The second method is to use a scale to adjust our visualization to match our data. This will be discussed in greater detail the next session on scatterplots, but let’s display how this works quickly. In D3, scales are represented using domain and range. Domain represents the input values, and range represents the possible output values on your screen. In short, a pixel is not always equal to a data point. If our maximum value is 500, but our visualization is only 350 pixels tall, we need to set up a scale that will set the data value of 500 to draw an SVG shape that is 350 pixels tall. ### Scales: Domain and Range [Scott Murray](http://alignedleft.com/tutorials/d3/scales) To implement the scale in our visualization, create a variable, we’ll call it **yScale**, and then use the [d3.scaleLinear](https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear) domain and range methods to set up our scale. We will set the domain to be 0 to the max value of our data array, and the range to be the range of our visualization. The code for our scale will look like the following, building on the variables we just set. `3c:T8a6,{ // Initialize SVG object (using our pre-defined width and height) const svg = d3.select(DOM.svg(width, height)); // Get length of dataset let arrayLength = ratData.length; // length of dataset let maxValue = d3.max(ratData, d => +d); // 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(ratData, d => +d)]) .range([margin.bottom, height - margin.top]) // Select and generate rectangle elements svg.selectAll( "rect" ) .data( ratData ) .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)) ) // 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) - 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 Rats") .attr("transform", "translate(20, 20) rotate(-90)"); return svg.node(); }3d:T421,md` ## Visualize an External CSV Most of the time, you will be working with datasets that are read from other files, such as a CSV file. D3 supports reading from CSV, TSV, and other tabular formats. To do this, you have to do two main things 1. Create data set object called **bosData** with link to CSV the cloud or using a file input. 2. Change calls to your dataset within the function. We are going to read data that is being held in CSV. Up to now, our data has been in a simple array, but now our data is going to have multiple variable. D3 has a method that reads a CSV file and stores it as a JSON. The JSON can be conceptualized as the following. ### Our Dataset The data set we will be using, called \`neigh_311.csv\` is available [here](https://gist.github.com/jdev42092/46071bf3284265c37ea07d6328ef7a3a/raw/cc7bfc53f3853437749906ccf7d2cac49c43c9a2/neigh_311.csv). It contains a small dataset that depicts the total number of 311 calls in 2017 and through April 3, 2018. It is saved in CSV format, with the first row as a column header. `3e:T8bf,{ // 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(); }3f:T481,md` ## Add Simple Hovering In the last step in this exercise, we are going to label the bars of our chart and show the number of 311 calls in each neighborhood. Because our data is variable, lets do this by adding a hover tooltip. The hover tooltip is created in two steps. 1. Using D3, create a DIV element for the tooltip and set it to be hidden 2. Use mouse event listeners (mouseover, mousemove, and mouseout) to listen for hover and set properties of the tooltip DIV element ### Create the Tooltip \`div\` element At the end of your chart code, create a variable called \`tooltip\` and set some of the properties of that element. Essentially, we want it to be an empty element that we will populate when we hover over the data bars. In the variable, select the \`svg\`, append a \`div\` element to it, and set some of the properties of the \`div\`, such as [position](https://www.w3schools.com/css/css_positioning.asp), [font family and size](https://www.w3schools.com/css/css_font.asp), [z-index](https://www.w3schools.com/cssref/pr_pos_z-index.asp) (the ‘layering’ of the page), and the visibility. The variable should look as follows. `40:Ta19,{ // 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]) // Call tooltip tooltip // 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") .on("mouseover", d => tooltip.style("visibility", "visible").text(d.neighborhood + ": " + d.calls)) .on("mousemove", d => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px").text(d.neighborhood + ": " + d.calls)) .on("mouseout", d => tooltip.style("visibility", "hidden")); // 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(); }41:[] 31:{"id":"14467594222f1abc","slug":"session-2-1a-intro-to-d3-js-making-a-chart","title":"Session 2.1a - Intro to D3.js: Making a Chart","thumbnail":"056dafae320a1a15480037170af516ec2832d8893a95d2e6b66226f906e0e144","access_level":"public","create_time":"$D2024-02-13T02:34:16.822Z","update_time":"$D2024-02-13T18:22:18.889Z","view_time":null,"first_public_time":"$D2024-02-13T02:34:16.822Z","has_unpublished_edits":null,"fork":{"id":"80468a10fedc376d","slug":"4-182-week-9a-intro-to-d3-js-making-a-chart","title":"Week 9a - Intro to D3.js: Making a Chart","owner":{"id":"7be24cbfb3203dab","login":"cesandoval","name":"Carlos Sandoval Olascoaga"}},"stars":0,"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":1211,"publish_version":null,"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":1,"collection":{"id":"d895c4b27c4da933","slug":"inam5983-design-urban-tech-and-community-participation","title":"INAM5983: Design, Urban Tech and Community Participation","owner":{"id":"7be24cbfb3203dab","login":"cesandoval","name":"Carlos Sandoval Olascoaga"}},"type":"notebook","body":{"title":"Session 2.1a - Intro to D3.js: Making a Chart","cells":[{"id":0,"value":"md`# Session 2.1a - Intro to D3.js: Making a Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"D3 is renowned for animation and interaction. If you’ve got a few minutes, watch a [bar chart race](/@d3/bar-chart-race) or an [animated treemap](/@d3/animated-treemap). Dive into a [hierarchical bar chart](/@d3/hierarchical-bar-chart), [collapsible tree](/@d3/collapsible-tree), or zoomable [sunburst](/@d3/zoomable-sunburst), [treemap](/@d3/zoomable-treemap), or [packed circles](/@d3/zoomable-circle-packing). Or brush a [scatterplot matrix](/@d3/brushable-scatterplot-matrix) or zoom into an [area chart](/@d3/zoomable-area-chart). Animation can be a powerful device for storytelling, while interaction allows active readers to explore.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1135,"value":"## Learn D3 By Example\nOne of the best ways to start with D3 is to [browse the gallery](/@d3/gallery).\n\nIf you’re lucky (and with many to choose from, your odds aren’t bad), you may find an example you can repurpose as-is. This can save a lot of effort over learning how to build from scratch. For example, to construct a treemap, you *could* consult the [d3-hierarchy API reference](https://github.com/d3/d3-hierarchy/blob/master/README.md), but much faster would be to take the [treemap example](https://observablehq.com/@d3/treemap) and substitute your data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`\n## Working with Scalable Vector Graphics (SVG)\n\nOne of the primary element types you will manipulate using D3 are Scalable Vector Graphics, or SVG. These are page elements that can sit right within the body of your page and can be manipulated like any other element in the Document Object Model. \n\n*For further reading and an excellent tutorial on SVG and D3, see Three Little Circles, by Mike Bostock, for a fantastic tutorial on SVG creation and manipulation ^{[2](http://bost.ocks.org/mike/circles/)}.*\n\nFor more on SVG, its capabilities and available elements, [check out the documentation](https://developer.mozilla.org/en-US/docs/Web/SVG).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1164,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"md`\n## Let’s Get Started!\n\nIn this exercise, you will create a chart that will help explain what we mean by driving a document with data, both manually and by loading in an external data source.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`\n### Connect a Simple Dataset into SVG Elements Using D3\n\nAs mentioned, D3 operates with a goal of binding data to elements on our page. D3 will allow us easy access to these elements, we can use D3 to give the height to the element.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`\nTo begin, we will manually code our data. For illustration, lets say we have a dataset with the following values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"exData = [ 40, 90, 30, 60 ]; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`\nWe want a bar chart, with the height of each bar as the respective value in the dataset. (i.e. The first bar has a height of 40 pixels, etc.). To do so, we must bind data to an SVG object using \\`select\\` statements, as well as the \\`data\\` and \\`attr\\` methods.\n\n### Working with Selections\n\nA D3 selection is an array of previously defined elements and follows the same guidelines as CSS. The selection process lets D3 select elements from the document so that operators can be to the elements, telling them to do stuff. D3 has [select()](https://github.com/d3/d3-selection/blob/master/README.md#select) and [selectAll()](https://github.com/d3/d3-selection/blob/master/README.md#selectAll) methods to find single or multiple DOM elements, respectively.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"{\nd3.selectAll( \"circle\" ); // select all SVG rect elements\nd3.select( \"#boston\" ); // select an element where id='boston'\nd3.selectAll( \".bar\" ); // select all elements with the class 'bar' \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`**Anonymous Functions**\n\nIn our code we set height to an anonymous function. These can be a bit confusing, so let's dig into what this means.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"d3.selectAll('svg')\n .data(exData)\n .attr( \"height\", (d) => {return d;});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"md`\n\nThe argument **d** that is being passed to the function represents our\ndataset. The anonymous function has a parameter for the data values you\njust bound to your page elements in the **data** statement. This is\nbuilt into D3. The name of this variable (**d**) is arbitrary, but d is\nusually used as it represents a data value.\n\nThe data you bind to your page elements is an object in itself. In this\nexample, d is our object that can be operated on locally within this\nfunction. If our data object has properties, you can refer to these\nproperties in this step. For example, if our dataset is a JSON, with two\nproperties, number of rats (*number*) and city (*city*), we can reference\nit as we would in any other JavaScript object. i.e. \\`d.number\\`. We\nwill look at this more in a bit!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"{\n // Width and height of the SVG object\n let w = 350;\n let h = 175;\n let barWidth = 50;\n\n // Initialize SVG object\n const svg = d3.select(DOM.svg(w, h));\n\n // Select and generate rectangle elements\n svg\n .selectAll(\"rect\")\n .data(exData)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d, i) => i * barWidth + 50)\n .attr(\"y\", 0)\n .attr(\"width\", barWidth)\n .attr(\"height\", (d) => d)\n .attr(\"fill\", \"red\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`\n### Working with the Enter and Exit methods\n\nThe \\`enter()\\` and \\`exit()\\` methods deal with new elements and unused\nelements, respectively, based on incoming data. It's worth taking a minute to fully grasp these!\n\nThe \\`enter()\\` method tells D3 what to do when there are more elements in a data array than there are elements in the selection. So if you have 12 rows in an input dataset but only 8 \\`rect\\` elements when the \\`enter()\\` method is invoked, D3 will go to what follows the \\`enter()\\` method to determine what to do. Usually, the enter function will be used to create (\\`append()\\`) new elements to a given visualization. The \\`exit()\\` method tells D3 what to do when there are more elements in a data array than there are elements in a selection. Usually, this will be used to clear elements that are no longer needed. You can think of these like the 'go' and 'stop' methods, where \\`enter()\\` is the former and \\`exit()\\` is the latter.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`\n### Styling the \\`rect\\` Elements\n\nFinally, we properly size and arrange the \\`rect\\` elements. To do\nthis, we can modify the \\`height\\` attribute and \\`x\\` and \\`y\\` attributes for each\nof our rectangle elements. The attributes can read functions that allow\nus to dynamically change attributes based on the data value of the\ncurrent iteration.\n\nSo, let's update the attributes to properly display the “rect” elements by\nchanging the \\`x\\` attribute and \\`height\\` attribute. This will look\nfamiliar! It is exactly how we assigned a height in the previous\nexample.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"{\n// Width and height of the SVG object\nlet w = 150;\nlet h = 175;\n \n// Initialize SVG object\nconst svg = d3.select(DOM.svg(w, h));\n \n// Select and generate rectangle elements\nsvg.selectAll( \"rect\" )\n .data( exData )\n .enter()\n .append(\"rect\")\n .attr( \"x\", (d,i) => (i*25 + 30)) \n // Set x coordinate of rectangle to index of data value (i)*25.\n // Add 30 to account for our left margin.\n .attr( \"y\", 0 )\n .attr( \"width\", 20 )\n .attr( \"height\", d => d) // Set height of rectangle to data value\n .attr( \"fill\", \"steelblue\");\n\n\nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"md`## At-Home Exercise\nModify the previous code and use different height and width values for your chart. For example, you can make your bars wider, or multiply the heights by a constant. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"// Your code here\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md`\n## Design the Chart\n\nAs is, this chart is not very useful. In fact, it is just four\nrectangles. We need to add some context, re-justify the bars, and perhaps\nadd some axes. We can do this right in our script by adjusting the\nattributes and properties of the SVG elements. In the following steps,\nwe’ll add those axes and label.\n\n### Bottom-justify the Bars\n\nThe chart is confusing. The higher the\nnumber the farther down the page the bar extends. We can change this\nquite easily by adjusting the value of the y attribute. See the\nadjustment to our code below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"{\n// Width and height of the SVG object\nlet w = 150;\nlet h = 175;\n \n// Initialize SVG object\nconst svg = d3.select(DOM.svg(w, h));\n\n// Select and generate rectangle elements\nsvg.selectAll( \"rect\" )\n .data( exData )\n .enter()\n .append(\"rect\")\n .attr( \"x\", (d,i) => (i*25 + 30)) \n // Set x coordinate of rectangle to index of data value (i)*25.\n // Add 30 to account for our left margin.\n .attr( \"y\", d => h-d ) // Set y coordinate for each bar to height minus the data value\n .attr( \"width\", 20 )\n .attr( \"height\", d => d) // Set height of rectangle to data value\n .attr( \"fill\", \"steelblue\");\n\n\nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"md`## At-Home Exercise\nModify the previous code and use a different color for the bars\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"// Your code here\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`\n### Add Labels\n\nThis will provide a bit more context, and add axes to the map along the left side and bottom. When finished, our chart will look like this. Let’s take a look.\n\n#### Add the X and Y axes\n\nA simple method of doing this is to add SVG line elements to our script. We can manually set the X and Y coordinates for the start and end of the line, along with the stroke and width. \n\n#### Add a Label\n\nThere are ways when working with numbers to automate this, but for now, let’s create one label by add \\`text\\` elements to our \\`svg\\` element. We can also use some CSS in style tags to modify your font.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1187,"value":"We can set up CSS styles within an html tag","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"md`\n## What happens if our array changes size?\n\nData can change. What if your number of data values changes? Or the\nvalue of the maximum data value changes? There are two different methods\nfor this. One is to manually build in a scale, and the other is to use\nthe D3 Domain and range methods. We will use a combo of the two in our\nexample.\n\nLet’s add a few more elements to our data array:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"// New dataset with More Numbers\nratData = [ 40, 70, 60, 20, 40, 100, 60 ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`\nTo accomplish this, we need to adjust the places in the code that sets the X location of where the bars are drawn, how wide the bar should be, and the max value of the dataset. We must replace the code that defines the *width and height* of the SVG with code that dynamically calculates the length of the data array and the maximum value in the data.\n\nIn the code below, we get the length of the array so we can we can properly layout the correct number of bars in the chart, and the maximum data value of our dataset so we can we can give correct relative heights to the bars. The length of the X and Y axes are needed for our calculations.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"{\n// Get length of dataset\nlet arrayLength = ratData.length; // length of dataset\nlet maxValue = d3.max(ratData, d => +d); // get max value of our dataset\nlet x_axisLength = 100; // length of x-axis in our layout\nlet y_axisLength = 100; // length of y-axis in our layout\n\nreturn {arrayLength, maxValue};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"md`## At-Home Exercise\nModify the previous code and add an X-Label\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"// Your code here\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"{\n// Get length of dataset\nlet arrayLength = ratData.length; // length of dataset\nlet maxValue = d3.max(ratData, d => +d); // get max value of our dataset\nlet x_axisLength = 100; // length of x-axis in our layout\nlet y_axisLength = 50; // length of y-axis in our layout\n\nlet yScale = d3.scaleLinear()\n .domain([0, 10.32534])\n .range([0, 1000])\n\nreturn yScale(25); // As the domain and range have the same value in this example, yScale outputs a 1-to-1 relationship.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"md`\nWe can also write this as a single object, which is saved as a transformation function.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"{\nlet yScale = d3.scaleLinear()\n .domain([0, d3.max(ratData, d => +d)])\n .range([margin.bottom, height - margin.top]);\n\nreturn yScale(0); // 0 should correspond with the lowest pixel of y-axis (i.e. the bottom margin)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"yScale = d3.scaleLinear()\n .domain([0,100])\n .range([0,1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"yScale(50)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"md`This takes in our data and scales it to our visualization.\n\nWe can also write key constant key values, such as width and height of our SVG, and the margins we want to use as buffers when placing our chart within an SVG, as separate objects that are universally defined and accessible in all code blocks.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"// We can put all of our margins into a single object and reference them using their keys\nmargin = ({ top: 15, right: 10, bottom: 25, left: 30 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"width = 150","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"md`\nNext, modify the generate rectangle elements method in our code to properly locate \\`x\\`, \\`y\\`, \\`width\\`, and \\`height\\`. We’ll use the \\`yScale\\` for the \\`y\\` and \\`height\\` values, and some simple math for our \\`x\\` and \\`width\\` values. You will also need to update the axes so they follow the chart as it changes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"md`\nThis will change the location and dimensions of our bars to match the new dataset. Try adjusting the \\`largerData\\` array, the margins, or the dimensions and seeing how the visualization changes dynamically!\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"md`## At-Home Example\nUse a [d3.scaleLinear](https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear) to transform the array below into a new array with a range of values from 0 to 1.\n\n**Hint you might need to:**\n\n- Get the maximum and minimum value of the array\n- Apply the \\`\\`\\` d3.scaleLinear \\`\\`\\` on a loop\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"scaleLinearArray = [0.23232, 1000, 203, 500, 800]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"// Your code here\n{\n let results = []\n \n let findScale = d3.scaleLinear()\n .domain([d3.min(scaleLinearArray), d3.max(scaleLinearArray, d => +d)])\n .range([0,1]);\n \n scaleLinearArray.forEach(function(element){\n results.push(findScale(element));\n });\n return results\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"md`### scaleBand\nWhen creating bar charts *scaleBand* helps to determine the geometry of the bars, taking into account padding between each bar. The domain is specified as an array of values (one value for each band) and the range as the minimum and maximum extents of the bands (e.g. the total width of the bar chart).\n\n*scaleBand* will split the range into n bands (where n is the number of values in the domain array) and compute the positions and widths of the bands taking into account any specified padding.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"bandScale = d3.scaleBand()\n .domain(['Mon', 'Tue', 'Wed', 'Thu', 'Fri'])\n .range([0, 100])\n // .padding(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"bandScale('Thu')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"md`## At-Home Example\nUse a [d3.scaleBand](https://github.com/d3/d3-scale/blob/master/README.md#band-scales) to transform the array below into a new array with a range of values from 0 to 1.\n\n**Hint you might need to:**\n\n- Apply the \\`\\`\\` d3.scaleBand \\`\\`\\` on a loop\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"scaleBandArray = [2000, 2001, 2002, 2003, 2004]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"// your code here\n{\n let bandScaling = d3.scaleBand()\n .domain(scaleBandArray)\n .range([0,1])\n // .padding(1)\n \n let scaledBand = []\n for (let i = 0; i ({neighborhood: neighborhood, calls: +num_311}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`\nWhen the CSV method of D3 is called, it reads the delimited file and saves it as a JSON element. To ensure the count of 311 calls is read as a numeric value, we explicitly define the way the columns of the CSV should be read in. If you open up the array above, you will see each row translated into an object with an index and both a \\`neighborhood\\` and \\`calls\\` field that can referenced.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"md`\n### Update D3 chart code to read \\`bosData\\`\n\nChange data references from \\`d\\` to \\`d.num_311\\`; because our dataset is now from a CSV, not just a simple array, we have to tell D3 which columns represent our data. When we load the CSV, D3 creates a JSON in which we can access the objects and properties of each data item. JavaScript holds properties of objects within the object itself; you can access those by using the syntax \\`object.property\\`. To access the number of 311 calls within our dataset, we need to use \\`d.num_311\\` when we pass data to a function.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"tooltip = d3.select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"font-family\", \"'Open Sans', sans-serif\")\n .style(\"font-size\", \"12px\")\n .style(\"z-index\", \"10\")\n .style(\"visibility\", \"hidden\"); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"md`\n### Add Event Listeners for mouse action to the rectangle generating method\n\nLocate the method in which we create the rectangles based on the data. Here we need to add three methods that listen for mouse events and modify the tooltip div based on the mouse event. \n\n1. Set the tooltip to display on **mouseover**,\n2. Set it move with the mouse on **mousemove**, \n3. And, hide it on **mouseout**. \n\nWhen we set it to the display, we want to set the \\`text\\` property to display the correct values of our data (\\`d.neigh\\` and \\`d.num_311\\`). In the *mousemove* function, we will use the [event.pageX and event.pageY](http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_pagex_pagey) methods to return the position of the mouse pointer, to position the label slightly above and to the left of the pointer.\n\nNotice the three lines of code to that begin with \\`.on(\"mouseover\", d =>\\`... that have been added to the block of code that selects and generates rectanges below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"$40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"md`\n## There we have it!\n\nExhausted? You should be, we just covered a lot! These are some basics of D3, displaying how to work with a simple array dataset, bind that dataset to an SVG, and create SVG elements that are encoded with our data. We have merely scratched the tip of the iceberg, but we'll spend next week can building on what we talked about today.\n\nIn the next session, we will create a scatterplot, look more at scales and domains, and explore how you can customize code snippets created by others. For now, observe and modify our chart!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1158,"value":"tableSVG = (str) => {\n return html`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W41","stdlib":"1","titling":"auto"}} 32:"$31:body"