31:T48e,### _This assignment is divided as follows:_ 0. [Introducing D3.js](#cell-134) [Read-Through] 1. [Defining Chart Dimensions & D3 Basics](#cell-7) [20%] 1. [Chart Dimensions](#cell-640) [6%] 2. [Creating our SVG and Chart Elements](#cell-244) [14%] 2. [Defining Domains, Scales, and Axes](#cell-430) [28%] 1. [Feature Extraction](#cell-447) [3%] 2. [X-Axis Domain, Range, and Scale](#cell-458) [7%] 3. [Y-Axis Domain, Range, and Scale](#cell-483) [7%] 4. [Color Axis Domain, Range, and Scale](#cell-502) [4%] 5. [Charting Axis Labels](#cell-520) [7%] 3. [Defining Chart and Axes Titles](#cell-792) [27%] 1. [Chart Title](#cell-680) [11%] 2. [X-Axis Title](#cell-695) [9%] 3. [Y-Axis Title](#cell-709) [7%] 7. [Plotting Data with Colors](#cell-740) [9%] 8. [Colors vs. Shapes](#cell-803) [16%] ### _Note:_ Code-Intensive Exercise Though there are many parts to each section, note that these tasks are rather simple. Nonetheless, this exercise will 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.32:T6be,--- ## Assignment Instructions **_Fork this notebook to make sure that you are working on your own copy!_** Work your way down the notebook, making sure to run code blocks whenever they appear. Some parts may require you to fill out markdown blocks. Others will require code work. And some are not interactive and are just for instructions! All exercises will be marked with a **[TO-DO]**, so pay attention to them throughout the notebook. **_[TO-DO]'s and [NOTES]_**: Keep an eye out not just for **[TO-DO]** but also **[NOTES]**. You MUST read these notes to fully understand what's going on in some sections. **_Academic Integrity Policies_** Please be mindful of our academic integrity policies when completing this assignment. ## Submission Instructions This assignment is due **September 25, 2025 @ 11:59pm**. Please follow the submission instructions: 1. _Make the notebook visible to the public._ This is accomplished by clicking the "Share" button at the top of the page and changing the "Access" settings for the Public to "Can view". 2. _Copy the Notebook URL in the same "Share" panel._ Feel free to use either an automatically-generated or custom URL. 3. In the markdown block below, _please fill out the following information._ The "Notebook URL" is the URL you copied in Step 2. **Not filling out the details below will result in a 0 for this assignment!** 4. _Download the notebook as a `.tgz` zip file._ This can be done by: 1. Scroll up to the top of the notebook, and click the "..." button. 2. `Export` -> `Download Code`. This produces a `.tgz` zip file. 3. On Brightspace, _navigate to "Assignments" and locate the corresponding assignment submission page._ 4. _Upload the `.tgz` zip file._33:T64c,### What is D3.js? As defined by the UW Interactive Data Lab: > [D3](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 considered the successor of **XHTML** and is close sibling to **XML**. - 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.34:T5a4,35:T435,#### [TO-DO, 3%] Now, with `c_domain` and `c_range` defined, let's finally determine our `c_axis`. Remember that we can't use `d3.scaleLinear()` this time around. In fact, while you are using D3, you are most likely to use these scale types: - `d3.scaleLinear()` creates a linear mapping between a continuous domain and range. We also have `d3.scaleLog()`, `d3.scaleSqrt()`, and so on. - `d3.scaleOrdinal()` specifies an explicit mapping from a set of ordered, discrete data values to a corresponding set of visual attributes (such as colors). - `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. 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. In this case, though we know implicitly that `species` isn't an ordinal data type (there's no order to them), D3 considers most categorical values as ordinal anyways.36:T451,### 3c. Y-Axis Title [7%] The Y-axis title is very similar, except with one major change: we need to apply a "rotate" transformation instead of "translate". #### [TO-DO, 7%] Add a y-axis to `_titles_.chart` with the following attributes and properties: - **[1%]** Must be a child of `_titles_.chart` - **[2%]** Must have a `transform` attribute set to `rotate(-90)`. - **[1%]** Must have an `x` attribute set to negative half of the chart's height - **[1%]** Must have a `y` attribute set to negative half of the chart's left margin, minus 10 pixels - **[1%]** Must have a `.style()` that sets "text-anchor" to "middle" - **[1%]** Must print out the text "Sepal Width (cm)". **[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.37:T8b3,#### 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](https://www.w3schools.com/cssref/css_selectors.php). 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.38:T447,/** EXAMPLE mutable points = chart.selectAll('.point') // [1%] Select all elements with the CSS class "point" .data(iris) // [1%] bind our `iris` dataset to the selected elements .enter() // [1%] We use `enter()` to modify all elements yet to be binded, even those that don't exist yet. .append("circle") // [1%] for each unbinded (or nonexisting) element, create a element .attr('class', 'point') // [1%] Attach the CSS class "point" to this element .attr("cx", (d) => x_axis(d.SepalLengthCm)) // [1%] Place the circle at an x-coord corresponding to its location on the x-axis .attr("cy", (d) => y_axis(d.SepalWidthCm)) // [1%] Place the circle at a y-coord corresponding to its location on the y-axis .attr("r", 5) // [1%] Make the circle have a radius of 5 pixels .style('fill', (d) => c_axis(d.Species)); // [1%] Make the circle's color match their species' color **/ // TO-DO mutable points = 39:T44b,#### [TO-DO, 16%] Either as individual points or in paragraph(s), answer the following questions. 1. **[4%]** Recall the [Gestalt Principles](https://ctsilva.github.io/2025-InfoVis-CSE/slides/week4-perception.html#/13) covered in class. Which Gestalt Principles are most applicable in the colors chart? In the shapes chart? Describe how the principles apply to either or both charts. 2. **[5%]** Recall the [Channel Effectiveness](https://ctsilva.github.io/2025-InfoVis-CSE/slides/week4-perception.html#/24) summary covered in class. Which magnitude-based channels are used in either or both charts? Identity channels? Describe how the channels are reflected in either or both charts. 3. **[5%]** For each of the channels mentioned in Q2, how would you rate their effectiveness, according to the figure provided in [our class slides](https://ctsilva.github.io/2025-InfoVis-CSE/slides/week4-perception.html#/24)? Do you agree with this assessment? 4. **[2%]** From your perspective, which chart is more effective at communicating the relationship between sepal length, sepal width, and species? Why?3a:[{"id":"9a33fd3a0ce9a1c8116403d5cbad6dbd06adb4013fa4ed9783d891539ed5530fca7f48106da059882170c91db2bede7b5241e429e28855feb580a06014e50c57","href":"https://static.observableusercontent.com/files/9a33fd3a0ce9a1c8116403d5cbad6dbd06adb4013fa4ed9783d891539ed5530fca7f48106da059882170c91db2bede7b5241e429e28855feb580a06014e50c57","name":"Iris.csv","type":"text/csv","lastModified":1758915730436.683,"size":5107},{"id":"afdd27a2d83152af40b809151a6d6daa1167d7021224186977121a4a61037e638663251012abed22a2e5f5d0a86746833385fab8e354b8ccd489cad7ccc2add8","href":"https://static.observableusercontent.com/files/afdd27a2d83152af40b809151a6d6daa1167d7021224186977121a4a61037e638663251012abed22a2e5f5d0a86746833385fab8e354b8ccd489cad7ccc2add8","name":"5ref_2.png","type":"image/png","lastModified":1759088094233.428,"size":120619},{"id":"bb5c1045548ef6701cddbf819325b106c397b643bb9f8d36fcb051e0f5c7ae17b79154e0501564b1f521279654eddf1d60e2c10dcf32ca2ba55ee3bdc402fa96","href":"https://static.observableusercontent.com/files/bb5c1045548ef6701cddbf819325b106c397b643bb9f8d36fcb051e0f5c7ae17b79154e0501564b1f521279654eddf1d60e2c10dcf32ca2ba55ee3bdc402fa96","name":"5@1.png","type":"image/png","lastModified":1759088169079.05,"size":27084}] 2f:{"title":"Week 4 Exercise: Perception-based design + D3 implementation (Due Oct. 2)","cells":[{"id":0,"value":"# Week 4 Exercise: Perception-based design + D3 implementation (Due Oct. 2)\n\nIn this week's [lecture](https://ctsilva.github.io/2025-InfoVis-CSE/slides/week4-perception.html#/), we focused on the nature of visual perception and started to broach **D3.js**. In this week's exercise, we will take this opportunity to practice with the most basic kind of chart in D3: **scatter plots**. \n\nThe dataset of our choice is [Anderson's Iris Dataset](https://en.wikipedia.org/wiki/Iris_flower_data_set), 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. We've already imported the Iris Dataset into this notebook in our [_Appendix_](#iris); check out the table in the Appendix to better understand the dataset.\n\nBy 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:","pinned":false,"hidden":false,"mode":"md"},{"id":630,"value":"FileAttachment(\"5ref_2.png\").image({width:500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":929,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":967,"value":"---\n\n#### [TO-DO]\n\nFill out the following submission details:\n\n* **Name:** <FULL NAME>\n* **NetID:** <NET ID>\n* **SHARE URL:** <NOTEBOOK URL>\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"## Part 0: Introducing D3.js","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"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 `