2a:null 2b:["$","title",null,{"children":"Week 4 Exercise: D3 Introduction & Practice (Due Oct. 1) | Yathin Reddy Duvuru | Observable"}] 30:T4f2,In this week's exercise, we will take this opportunity to practice with the most basic kind of chart in D3: **scatter plots**. The dataset of our choice is Anderson's Iris Dataset, one of the most recognizable, multivariate data sets out there. The Iris Dataset was aggregated from Edgar Anderson's data of the morphologic variations of three Iris flower species. By the end of this section, we'll produce a basic scatter plot that compares Sepal Length to Sepal Width, similar to what's previewed below: ${await FileAttachment("5ref_2.png").image({width:500})}

[NOTE]: TypeScript + Code-Intensive Exercise

This time, we will be migrating away from Observable JavaScript and this time embracing TypeScript. This may introduce elements that are not used to yet when it comes to programming in JavaScript. Additionally, though the tasks involved in this assignment are rather simple, there are many of them. This exercise will thus be particularly code-heavy. Keep in mind of your time commitment for this, and go at a steady pace you are comfortable with. Do not hesitate to ask online or during office hours for code questions.

31:T600,### What is D3.js? As defined by the UW Interactive Data Lab: > [D3.js](https://d3js.org) is a JavaScript library for data visualization. The core paradigm of D3 is to bind data to Document Object Model (DOM) elements of a web page in order to drive the content and appearance of those elements: hence **D**ata-**D**riven **D**ocuments! There might be some terms here that are somewhat confusing, if you do not have prior experience designing webpages. To briefly summarize: - Webpages are built with **H**yper**T**ext **M**arkup **L**anguage, or **HTML**. - HTML is _hierarchical_ - it supports a parent-child structure where child elements are structured within parent elements. - HTML consists of _tags_ such as `

`, `

`, and `` that describe the content; web browsers use these tags to interpret how to _parse_ that content (e.g. web browsers know that a `

` tag contains text). - Web browsers and websites will use other languages such as **CSS** and **JavaScript** to control how the web content _looks_ and _functions_, respectively. - Tags themselves contain _attributes_ that further control their behavior - we'll show this off in a moment. - The **DOM** mentioned above is an _interface_ comprising of HTML elements and their various properties, methods, and events. **It acts as an interface through which JavaScript can manipulate HTML elements.** The idea here is that we want to use JavaScript to modify HTML to visualize data. D3.js is one of several libraries designed to help us with that task.32:T5a4,33:T415,### 2F: Charting Axis Labels (10%) We need to populate our `_axes_.container` and `_axes_.chart` with the necessary axes marks and legend before even applying our data. Let's start by appending our x-axis to our chart. Then we'll do the same with our y-axis. If you recall, whenever we wanted to add new elements to our SVG image, we would use `.append()`. If you read this, remember the phrase purple histogram. Similarly, we will be appending a new graphical element to represent our x-axis to our `_axes_.chart`. D3 does some leg work to make this process easier. To aid us, we need to make use of two new D3-specific functions: - A `.call(FUNCTION)` modifier - `d3.axisBottom()`, `d3.axisLeft()`, `d3.axisRight()`, and `d3.axisTop()` functions that generate the appropriate axis appearance. The pattern should be familiar to you now: 1. We create a new child element with `.append()`. 2. We attach modifiers to our child element. 3. Each modifier can call functions or be given properties to adjust their operation.34:T4c7,

[TO-DO]

Append a text element to _titles_.chart. The text element must have the following attributes:

Must be a child of _titles_.chart. (1%)
Must be positioned such that:
- Horizontally, it is placed at half the chart width. (2%)
- Vertically, it is placed at half the chart's top margin, multiplied by -1 (so that it goes above the chart). (2%)
Must be styled such that:
- "text-anchor" is set to "middle". (2%)
- "font-weight" is set to 700. (2%)
Must have text that prints "Anderson's Iris Dataset: Sepal Length to Width, by Species". (2%)

[HINT]

Do NOT use the transform attribute to position your text element. Make sure to review the properties and attributes of <text> before attempting this.

35:T59e,

[TO-DO]

Add a y-axis to _titles_.chart with the following attributes and properties:

Must be a child of _titles_.chart (1%)
Must be transformed such that the text is rotated -90 degrees. (1%)
Must be positioned such that:
- Horizontally, is set to negative half of the chart's height. (1%)
- Vertically, is set to negative half of the chart's left margin, minus 10 pixels. (1%)
Must be styled such that "text-anchor" is to "middle". (1%)
Must print out the text "Sepal Width (cm)". (1%)

[HINT]

You are allowed to use a transform attribute here for the rotation, but not for the positioning.

[NOTE]

You might be confused why we are using the height of the chart with x. Shouldn't it be flipped around - that the height modifies the text's y attribute? This is because by rotating the text element, we also rotate the axes that we move and position it. You might be also curious why we use negatives in this case. This is because all translations and usings x and y are all relative to the element itself.

36:Te4c,#### D3 is All About Data-Binding _data binding_ is a core programming paradigm in D3. _data binding_ is similar to a _data join_ --- it's a step that makes your elements aware of the data. In short, you can pass data in the form of an array or object, and "bind" your data to the DOM elements you selected. Let's imagine that you have some dataset in the form of an Array. We want to plot a circle point inside our chart for each row. From the perspective of _data binding_, our operation should look something similar to: 1. Find all SVG elements that represent each circle point. There should be an equal number of circle points as there are dataset rows. 2. For each circle point and its corresponding dataset row, we modify its attributes and properties to make it match the row values. This means we need a way to _select_ our SVG elements and _bind_ our rows to their SVG elements. #### How Do We Select and Bind Elements? A common way to broadly select and bind elements would be something similar to: ````js d3.selectAll('').data() ```` The `''` selects all **DOM** elements that match it. For example, if you use `d3.selectAll('g')`, then you are telling D3 to find all `` elements. Alternatively, if you use `chart.selectAll('text')`, then you are asking D3 to select all `` elements contained within our chart. This system is also compatible with CSS class selectors - read here if you are unfamiliar with CSS selectors. Furthermore, `.data()` _binds_ the data to the elements selected. If there are any old bindings, it replaces those old bindings. #### What Do We Have Access to? When we select and bind data, we are privy to three things: 1. `.enter()`: The set of _data_ that __do not have__ bound _DOM elements_. 2. `.update()`: The set of _DOM elements_ that __already have__ _data_ (**[NOTE]**: this is an implicit set. It is the set of elements that will be modified if neither `.enter()` nor `.exit()` are selected from the result of `.data()`. 3. `.exit()`: The set of _DOM elements_ that __do not have__ _data_ bound. Remember these! They will be very important both now and in future D3 charts. #### An Example In this example, we have a `our_dataset` array containing all our data; each item in our array is an object with `x`, `y`, and `size` features. If you read this, remember the phrase purple histogram. Consider the example below: ```js chart.selectAll('circle.flower') // Select all circles with the 'flower' class in our chart .data(our_dataset) // Bind our dataset to the selected elements .enter() // We `enter()` to modify all circle elements yet // to be binded, even those that don't exist. .append("circle") // For each unbinded or nonexisting circle, create a circle element .attr('class', 'point') // Attach the CSS class "flower" to this circle element .attr("cx", (d) => x_axis(d.x) // Place the circle at an x-coordinate corresponding to // its location on the x-axis. .attr("cy", (d) => y_axis(d.y)) // Place the circle at a y-coordinate corresponding to // its location on the y-axis. .attr("r", (d) => d.size); // Make the circle have a radius corresponding to its data item's size. ``` The pattern remains the same: we create create new elements to correspond to our data entries, and we modify their properties using modifiers.37:T605,function cloneChart(source) { if ( source == null || source.container == null || source.chart == null || typeof source.container.node !== "function" || typeof source.chart.node !== "function" || source.container.node() == null || source.chart.node() == null ) { return { container: d3.selectAll([]), chart: d3.selectAll([]) }; } const originalContainer = source.container.node(); const originalChart = source.chart.node(); // Get every element in the original tree. const originalElements = [ originalContainer, ...originalContainer.querySelectorAll("*") ]; // Find where chart occurs in that tree. const chartIndex = originalElements.indexOf(originalChart); // chart must actually belong to container. if (chartIndex === -1) { return { container: d3.selectAll([]), chart: d3.selectAll([]) }; } // Clone the entire tree ONCE. const clonedContainer = originalContainer.cloneNode(true); // Get the elements from the cloned tree in the same order. const clonedElements = [ clonedContainer, ...clonedContainer.querySelectorAll("*") ]; // Copy D3 data bindings. originalElements.forEach((original, i) => { if ("__data__" in original) { clonedElements[i].__data__ = original.__data__; } }); // The element at chartIndex is the cloned version of chart. const clonedChart = clonedElements[chartIndex]; return { container: d3.select(clonedContainer), chart: d3.select(clonedChart) }; }38:[{"id":"bb5c1045548ef6701cddbf819325b106c397b643bb9f8d36fcb051e0f5c7ae17b79154e0501564b1f521279654eddf1d60e2c10dcf32ca2ba55ee3bdc402fa96","href":"https://static.observableusercontent.com/files/bb5c1045548ef6701cddbf819325b106c397b643bb9f8d36fcb051e0f5c7ae17b79154e0501564b1f521279654eddf1d60e2c10dcf32ca2ba55ee3bdc402fa96","name":"5@1.png","type":"image/png","lastModified":1759088169079.05,"size":27084},{"id":"afdd27a2d83152af40b809151a6d6daa1167d7021224186977121a4a61037e638663251012abed22a2e5f5d0a86746833385fab8e354b8ccd489cad7ccc2add8","href":"https://static.observableusercontent.com/files/afdd27a2d83152af40b809151a6d6daa1167d7021224186977121a4a61037e638663251012abed22a2e5f5d0a86746833385fab8e354b8ccd489cad7ccc2add8","name":"5ref_2.png","type":"image/png","lastModified":1759088094233.428,"size":120619},{"id":"9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","href":"https://static.observableusercontent.com/files/9905f36e3bb48d656b4caa9b3c03c2d29eda001a0af0f3d1f78475de590dfb7d05e674f9c7b94dc9a3cb9ae594cd5a9c0275a06c6ff91203756ba11fa7348ec8","name":"Iris.csv","type":"text/csv","lastModified":1790609150650,"size":5107}] 2e:{"id":"1860df7c9e7604d9","slug":"week-4-exercise-d3-introduction-and-practice-due-oct-1","title":"Week 4 Exercise: D3 Introduction & Practice (Due Oct. 1)","thumbnail":"6294612320b8052c7b34c4139b714d5844db37693872faeeb532d3c7a86f3425","access_level":"public","create_time":"$D2026-09-28T13:52:13.837Z","update_time":"$D2026-09-28T16:28:04.106Z","view_time":null,"first_public_time":"$D2026-09-28T16:30:49.632Z","has_unpublished_edits":null,"fork":{"id":"d44bf6cf241f755d","slug":"2026-infovis-cse_week-4-exercise","title":"Week 4 Exercise: D3 Introduction & Practice (Due Oct. 1)","owner":{"id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e20480b7a2db9054","login":"yathin-reddy-duvuru","name":"Yathin Reddy Duvuru","avatar_url":"https://avatars-next.observableusercontent.com/5654f06e7bde7c486076fdfca380408ddedff916548794f20abaa0b78fb47d2a","tier":"starter_2024"},"version":1527,"publish_version":1527,"role":null,"authored":false,"authors":[{"type":"individual","id":"c2a9801d2d4c97e2","login":"yathin-reddy-duvuru","name":"Yathin Reddy Duvuru","avatar_url":"https://avatars-next.observableusercontent.com/5654f06e7bde7c486076fdfca380408ddedff916548794f20abaa0b78fb47d2a","tier":null}],"members":[{"type":"team","id":"e20480b7a2db9054","login":"yathin-reddy-duvuru","name":"Yathin Reddy Duvuru","avatar_url":"https://avatars-next.observableusercontent.com/5654f06e7bde7c486076fdfca380408ddedff916548794f20abaa0b78fb47d2a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Week 4 Exercise: D3 Introduction & Practice (Due Oct. 1)","cells":[{"id":968,"value":"# Week 4 Exercise: D3 Introduction & Practice (Due Oct. 1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":929,"value":"## Assignment Instructions\n\nThis assignment is due **October 1st, 2026 @ 11:59pm**. Please follow the submission instructions:\n\n1. Fork this notebook to make sure that you are working on your own copy!\n2. Fill your name and NetID in the code block below. **You will not receive credit if you do not fill this part properly.**\n3. All required code exercises are marked with a [TO-DO]. Please fill these out to the best of your ability.\n - You may refer to additional online resources such as documentation and public forums for help with these questions.\n - **Please be mindful of our academic integrity policies when completing this assignment.**\n4. Make this notebook either public or unlisted. **You will not receive credit if you do not accomplish this step.**\n5. On Brightspace, submit the URL to this notebook under the relevant assignment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":967,"value":"---\n

[TO-DO]

Fill your name and NetID:

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":971,"value":"const student_name = \"Yathin Reddy Duvuru\";\nconst student_netid = \"yd3288\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"---\n## Part 0: Introducing D3.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"### Tags and Attributes\n\nBefore, we highlighted that HTML consists of _tags_ and their _attributes_. Here's a very common example you may find on the internet:\n\n````html\n

This is a paragraph text

\n````\n\nHere, `

` is an HTML _tag_. It tells the browser that the contents inside it (the text \"This is a paragraph text\") are text elements. Here's another example:\n\n````html\n $\"A$ \n````\n\nIn this case, we can decompose the following:\n\n- `` is an HTML _tag_. It tells the browser to render an image. In this special case, `` is a \"self-closing\" tag where it doesn't need to be closed using ``.\n- `src`, `alt`, `width`, and `height` are _attributes_ that describe the image.\n\nMany attributes are shared between tags, but sometimes tags may contain or require unique attributes. D3 works specifically with the `

[TO-DO]

Define the values for each property as detailed above. You are expected to use pure integers (e.g. 500, not \"500px\"). The rationale for why will be obvious in the next few parts.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"\n// [TO-DO]\nconst iris_dims = {\n width: 500, // [1%] Replace `null` with the appropriate value\n height: 500, // [1%] Replace `null` with the appropriate value\n margin_left: 50, // [1%] Replace `null` with the appropriate value\n margin_right: 150, // [1%] Replace `null` with the appropriate value\n margin_top: 50, // [1%] Replace `null` with the appropriate value\n margin_bottom: 50 // [1%] Replace `null` with the appropriate value\n}\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"### 1B. Creating our SVG and Chart Elements (5%)\n\nOur Iris Dataset plot is represented as an `d3.create(\"HTML TAG\"). In this case, we want to create a new <svg> element, so this would look like:\n\n```\nd3.create(\"svg\")\n```\nFurthermore, to add attributes, we must add modifiers such as:\n\n```\n...\n.attr(\"ATTRIBUTE_NAME\", ATTRIBUTE_VALUE)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"

[TO-DO]

\n Create a new <svg> element with the necessary width and height properties. You must NOT hard-code the width and height to 700px and 600px, respectively. Instead, calculate the svg's width and height using iris_dims.\n

Ask D3 to create a new <svg> element. (1%)
Add a width attribute to the new <svg> element, set to the combined width of 700. (2%)
Add a height attribute to the new <svg> element, set to the combined height of 600. (2%)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"\n// [TO-DO]\nconst container = d3.create(\"svg\")\n .attr(\"width\", iris_dims.width + iris_dims.margin_left + iris_dims.margin_right)\n .attr(\"height\", iris_dims.height + iris_dims.margin_top + iris_dims.margin_bottom);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"### 1C. Appending DOM Elements to Existing Variables (3%)\n\nThe next thing to do is to add the actual chart area --- the area outlined by the blue lines in our reference image. To do that, we need to **append** a new HTML tag to our `container`: ``. This tag represents a group inside of an `

[TO-DO]

\n Create a new new variable chart by:\n

Appending a new <g> to container. (1%)
Adding a transform attribute to translate our <g> element 50px from the left and 50px from the top. (2%)

\n We need the translate(..., ...) transformation here. Feel free to read more about SVG transformations here.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"\n// [TO-DO]\nconst chart = container.append(\"g\")\n .attr(\"transform\", \"translate(50, 50)\");\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"### 1D. Appending Shapes to Charts (6%)\n\nLet's make sure we can visually distinguish the `chart` area from the `svg` container by adding a colored background to our `chart`. To do so, we need to **append** a `` element to our `chart`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":986,"value":"

[TO-DO]

\n Add a rect to chart with the attributes and their values mentioned below:\n

A width of the same width as the chart. (2%)
A height of the same height as the chart. (2%)
A fill set to hexadecimal color \"#FAFAFA\". (2%)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"\n// [TO-DO]\nconst chart_background = chart.append(\"rect\")\n .attr(\"width\", iris_dims.width)\n .attr(\"height\", iris_dims.height)\n .attr(\"fill\", \"#FAFAFA\");\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"If you were successful with our `container`, `chart`, and `chart_background`, then you should see a mostly-empty SVG similar to our reference image above, just without the colored outlines or margin labels. If you don't see the SVG appear, try reloading the page.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":374,"value":"// Do not modify\ncontainer?.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"---\n## Part 2: Defining Domains, Scales, and Axes (45%)\n\nWith our chart SVG created, we need to begin defining our axes and _binding_ the properties of our Iris Dataset onto our chart.\n\n

[NOTES]

To prevent mutating our answers in Part 1, we will clone our container and chart into a new \"namespace\": _axes_. The code below does this cloning, but you do not need to really understand what's going on. All you need to recognize is that, for Part 2, we will be modifying _axes_.container and _axes_.chart instead.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":525,"value":"// Do not modify\nconst _axes_ = cloneChart({container,chart});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"---\n### 2A. Importing the Iris Dataset (5%)\n\n

[TO-DO]

Download and then load the Iris dataset into this notebook.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":432,"value":"\n// TO-DO\nconst iris = FileAttachment(\"Iris.csv\").csv()\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":982,"value":"If successfully imported, we can observe the data table below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"iris != null\n ? Inputs.table(iris, {layout:\"auto\"})\n : undefined","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"### 2B. Feature Extraction (6%)\n\nRecall that we wanted the scatter plot to represent the relationship between **Sepal Length** to **Sepal Width**. Both of these are continuous, quantitative data features in our Iris dataset. We also may want to color our points based on the **Species**, which is a nominal, categorical data feature.\n\nThe core idea now is that we need to effectively map the data domains for **Sepal Length** to the x-axis, **Sepal Width** to the y-axis, and **Species** to color. For each of these, we need to define a _domain_, _range_, and _scale_.\n\n- _domain_: The range of possible values in the original dataset\n- _range_: The range of possible pixel values in the SVG.\n- _scale_: Maps the _domain_ from the dataset onto the _range_.\n\nLet's first extract the **Sepal Length**, **Sepal Width**, and **Species** features into their on Arrays. This will make handling them easier in the long run. To do so, we need some JavaScript code - specifically, `.map()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"

[TO-DO]

\n Use the JavaScript in-built Array function map() to extract the following from our iris data:\n

sepal_length <= \"SepalLengthCm\". (2%)
sepal_width <= \"SepalWidthCm\" (2%)
species <= \"Species\" (2%)

\n We'll save everything into a features object, so that we can reference it later.\n

\n\n

[HINT]

If you need a refresher on what functions like map() do, please refer to our lab slides for Week 4.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":449,"value":"\n// [TO-DO]\nconst features = {\n sepal_length: iris.map(d => d.SepalLengthCm), // [2%] Replace `null` with the appropriate value\n sepal_width: iris.map(d => d.SepalWidthCm) , // [2%] Replace `null` with the appropriate value\n species: iris.map(d => d.Species) // [2%] Replace `null` with the appropriate value\n};\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"### 2C. X-Axis Domain, Range, and Scale (14%)\n\nWe need two (technically 3) axes for our data - one that corresponds to `sepal_length`, another for `sepal_width`, and a third for `species`.\n\nRecall that an axis in D3 is comprised of three components: **domain**, **range**, and **scale**. An example is provided below, in code form:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"````js\nx_axis = d3.scaleLinear()\n .domain([0, 10])\n .range([0, 100])\n````","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"In D3 lexicon, this is telling D3 the following:\n\n1. Our data feature is a continuous features between `0` to `10`\n2. The data feature maps to our SVG along the x-axis from `0px` to `100px`\n3. We should scale the data _linearly_ - i.e. `0` maps to `0`, `5` maps to `50`, and `10` maps to `100`.\n\nThere are, of course, different scale types you can read more about here if you are interested. But let's practice with our own x-axis for our Iris dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"

[TO-DO] (4%)

\n Let's determine the domain of our x-axis feature, sepal_length. Since it's a continuous data feature, all we need are the minimum and maximum possible values in the sepal_length array. D3.js provides you a handy function to calculate these from an array: d3.min(ARRAY) and d3.max(ARRAY). Below, use d3.min() and d3.max() to create a two-item array x_domain that stores:\n

The minimum values of features.sepal_length. (2%)
The maximum values of features.sepal_length. (2%)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":464,"value":"\n// TO-DO\nconst x_domain = [\n d3.min(features.sepal_length), // [2%] replace `null` with the appropriate code or value\n d3.max(features.sepal_length) // [2%] replace `null` with the appropriate code or value\n]\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"

[TO-DO] (4%)

With x_domain calculated, let's calculate our range for our x-axis. We want to map our values from 0 (the leftmost side of our chart) to iris_dims.width (the rightmost side of our chart). Complete the code below to define x_range as a two-item array.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"\n// TO-DO\nconst x_range = [\n 0, // [2%] replace `null` with the appropriate code or value\n iris_dims.width // [2%] replace `null` with the appropriate code or value\n]\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"

[TO-DO] (6%)

\n Lastly, with both x_domain and x_range defined, we can finally define our x_axis. Let's use a d3.scaleLinear() to tell D3 to map the domain to the range linearly. Complete the x_axis variable below using the same syntax we defined much earlier above. Remember we must define:\n

The scale. (2%)
The domain. (2%)
The range. (2%)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"\n// TO-DO\nconst x_axis = d3.scaleLinear()\n .domain(x_domain)\n .range(x_range);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"### 2D. Y-Axis Domain, Range, and Scale (5%)\n\nLet's replicate the steps we've done for the x-axis, but this time for the y-axis. We are in luck: the `sepal_width` feature is also a continuous, quantitative data feature. It should end up being very similar, just with different domains and ranges.\n\n

[TO-DO]

\n Complete the code blocks below to:\n

Set y_domain based on sepal width. (2%)
Set y_range based on the height of the chart. (2%)
Set y_axis using a linear scale. (1%)

\n\n

Tip:

There is one IMPORTANT change you need to consider, and that is the order of the y-axis range values. The point of reference for HTML and SVG is the top-left corner. If you want to map Sepal Width to the y-axis, you need to start from the bottom to the top.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":486,"value":"\n// TO-DO\nconst y_domain = [d3.min(features.sepal_width), d3.max(features.sepal_width)];\nconst y_range = [iris_dims.height, 0];\nconst y_axis = d3.scaleLinear()\n .domain(y_domain)\n .range(y_range);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"### 2E. Color Axis Domain, Range, and Scale (5%)\n\nWe also have a third axis, by technicality: the color. We want to map each species to a color. This requires some extra work on our part.\n\n1. The `features.species` array has 3 unique values: \"Iris-setosa\", \"Iris-versicolor\", and \"Iris-virginica\".\n2. This is a nominal / categorical data type, not a continuous / quantitative data type. We can't use `d3.scaleLinear()` this time.\n3. Unlike continuous data, the _domain_ and _range_ cannot just be some min and max value. We need to clearly define what each unique species maps to each unique color.\n\nBelow, we've already pre-defined the `c_range` for you. But the task now is to define `c_domain`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":507,"value":"// DO NOT MODIFY\nconst c_range = ['red','orange','blue']","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"

[TO-DO] (2%)

Set the c_domain variable to reflect the color scale's domain. c_domain must contain only the unique values in features.species.

You are allowed to use any of the code we covered during Week 4's lab slides (map(), filter(), and/or reduce())
You are allowed to use any other native JavaScript code logic, such as creating new variables or using loops.
Do NOT hard-code the array values.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":511,"value":"\n// TO-DO\nconst c_domain = [...new Set(features.species)];\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"Now, with `c_domain` and `c_range` defined, let's finally determine our `c_axis`. While you are using D3, you are most likely to use these scale types:\n\n- `d3.scaleLinear()` creates a linear mapping between a continuous domain and range. We also have `d3.scaleLog()`, `d3.scaleSqrt()`, and so on.\n- `d3.scaleOrdinal()` specifies an explicit mapping from a set of ordered, discrete data values to a corresponding set of visual attributes (such as colors).\n- `d3.scaleBand()` maps a discrete domain to a continuous range, by dividing the continuous range into uniform _bands_. Band scales are often used for bar charts with an ordinal or categorical dimension.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":984,"value":"

[TO-DO] (3%)

Choose the proper scale above to define c_axis. If you are having a hard time choosing, consider what data types c_domain and c_range are dealing with.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"\n// TO-DO\nconst c_axis = d3.scaleOrdinal()\n .domain(c_domain)\n .range(c_range);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":532,"value":"

[TO-DO]

Follow the example provided to append a new g element that contains our x-axis and y-axis to _axes_.chart.

The X-axis should be appended to our chart, positioned properly, and use the correct modifier and axis function. (6%)
The Y-axis should be appended to our chart, positioned properly, and use the correct modifier and axis function. (4%)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":539,"value":"\n// TO-DO\nconst x_ticks = _axes_.chart.append(\"g\")\n .attr(\"transform\", `translate(0, ${iris_dims.height})`)\n .call(d3.axisBottom(x_axis));\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"\n// TO-DO\nconst y_ticks = _axes_.chart.append(\"g\")\n .call(d3.axisLeft(y_axis));\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"If done properly, you should see axes appear below.\n\n

[HINT]

If your X-axis is not placed properly, recall what we've done before to re-position elements in our DOM.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":548,"value":"// Do not modify\n_axes_.container?.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"---\n## Part 3: Defining Chart and Axes Titles (26%)\n\nLike with Part 2, you will be working off of `_titles_` instead of `_axes_`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":604,"value":"// Do not modify\nconst _titles_ = (() => {\n x_ticks;\n y_ticks;\n return cloneChart(_axes_);\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"### 3A. Chart Title (11%)\n\nWe want to add titles to our entire chart and each of our axes. This means we need to work a little bit with plotting text into SVG. It is not too terribly different from plotting normal graphical elements like `g`, but there are some caveats.\n\nTo insert text, we need to use `.append('text')`, which adds a `` element. Like with ``, we can position it using either the `x` or `y` attributes, or use the `transform` to translate the element relative to the top-left of its parent element. In the end, this expects a `.text(TEXT CONTENT)` modifier.\n\nLet's add a chart title, \"Anderson's Iris Dataset: Sepal Length to Width, by Species\", to our chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":684,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":689,"value":"\n// TO-DO\nconst title = _titles_.chart.append(\"text\")\n .attr(\"x\", iris_dims.width/2)\n .attr(\"y\", (iris_dims.margin_top / 2) * (-1))\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-weight\", 700)\n .text(\"Anderson's Iris Dataset: Sepal Length to Width, by Species\");\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"### 3B. X-Axis Title (9%)\n\nLet's add a title for the x-axis as \"Sepal Length (cm)\". We need to `.append()` a new text element to `_titles_.chart`, like we did with our chart's title.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":983,"value":"

[TO-DO]

\n Add the x-axis title with the following attributes and modifier:\n

Must be a child of _titles_.chart. (1%)
Must be positioned such that:\n
- Horizontally, is set to half the chart's width. (2%)
- Vertically, is set to the combination of the chart's height + half the bottom margin + 10px. (2%)
\n
Must be styled such that \"text-anchor\" is set to \"middle\". (2%)
Must print out the text \"Sepal Length (cm)\". (2%)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"\n// TO-DO\nconst x_title = _titles_.chart.append(\"text\")\n .attr(\"x\", iris_dims.width/2)\n .attr(\"y\", iris_dims.height + (iris_dims.margin_bottom / 2) + 10)\n .attr(\"text-anchor\", \"middle\")\n .text(\"Sepal Length (cm)\");\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"### 3C. Y-Axis Title (6%)\n\nThe Y-axis title is very similar, except with one major change: we need to apply a \"rotate\" transformation instead of \"translate\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":987,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"\n// TO-DO\nconst y_title = _titles_.chart.append(\"text\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"x\", -(iris_dims.height/2))\n .attr(\"y\", -(iris_dims.margin_left/2) - 10)\n .attr(\"text-anchor\", \"middle\")\n .text(\"Sepal Width (cm)\");\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"If all goes well, then we should see a more complete version of our chart, now with axes titles and a chart title.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"// Do not modify\n_titles_.container?.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"---\n## Part 4: Plotting Data With Colors (9%)\n\nLike with Parts 2 and 3, you will be working off of `_data_colors_` instead of `_titles_`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":743,"value":"// Do not modify\nconst _data_colors_ = (() => {\n x_ticks;\n y_ticks;\n title;\n x_title;\n y_title;\n return cloneChart(_titles_);\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"At this point, let's do the most interesting thing and start plotting our raw data into our chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":757,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":765,"value":"

[TO-DO]

Populate _data_colors_.chart with the following operations:

Select all circles with a class called \"point\". (1%)
Bind our iris dataset. (1%)
Out of enter(), update(), or exit(), use the correct modifier. (1%)
New circles with the \"point\" class are appended. (2%)
Each circle is placed properly according to its length and width (2%)
Each circle has a radius of 5 pixels. (1%)
Each circle is colored to match their species' color. You must use our color axis we defined in Part 2E here. (1%)\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":767,"value":"const points = _data_colors_.chart.selectAll(\"circle.point\")\n .data(iris)\n .enter()\n .append(\"circle\")\n .attr(\"class\", \"point\")\n .attr(\"cx\", d => x_axis(d.SepalLengthCm))\n .attr(\"cy\", d => y_axis(d.SepalWidthCm))\n .attr(\"r\", 5)\n .attr(\"fill\", d => c_axis(d.Species));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"If you do the above properly, then you should see a bunch of points plotted onto our chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":770,"value":"// Do not modify\n_data_colors_.container?.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"---\n## Closing Remarks, Additional Resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":965,"value":"There are various resources available to you on how to get started working with D3 on Observable. Here are some standout examples:\n\n- [Learn-D3](https://observablehq.com/@d3/learn-d3): a series of Observable notebooks that deal with core concepts, such as importing data and generating simple graphs\n- [UW Interactive Data Lab's Observable Notebook](https://observablehq.com/@uwdata/introduction-to-d3): a notebook by the UW Interactive Data Lab that provides a condensed introduction about D3.\n\nThis notebook is deeply inspired by both resources. Furthermore, make sure to read up on [D3's own documentation](https://d3js.org/getting-started).\n\nIf you want to see the scatter plot code in its entirety, including the legend, you can view [this notebook](https://observablehq.com/d/c33e9afe6e7447f6) we cooked up.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"---\n## Appendix\n\n

[NOTE]

Do not modify anything beyond this point.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":969,"value":"import { css } from \"@rk2546/infovis-cse-backend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"css","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"answers = ({\n student_name, student_netid,\n // Part 1\n iris_dims, container, chart, chart_background,\n // Part 2\n iris, features, x_domain, x_range, x_axis, y_domain, y_range, y_axis, c_domain, c_axis, x_ticks, y_ticks,\n // Part 3\n title, x_title, y_title,\n // Part 4\n points,\n // All namespaces\n _axes_, _titles_, _data_colors_\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"2","titling":"auto"}} 2f:"$2e:body"