31:T4a3,md`In this assignment, you will create **two charts using the same data**, rendered using D3 code that you write yourself. The most straightforward approach would be to render a scatterplot and a bar chart, but you are more than welcome to explore other layouts. The purpose of this assignment is to familiarize yourself with the small details necessary to build and customize graphs using D3. In doing so, you'll demonstrate the following skills: - Loading data using \`d3.csv()\` - Computing summary measures of your data using functions like \`d3.extent()\` - Defining and rendering **scales** and **axes** - Using the [margin convention](https://observablehq.com/@d3/margin-convention) for D3 charts - Binding data using a [data join](https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3) - Rendering _two types_ of SVG element (e.g., \`\`, \`\`, etc.) While you will practice using the data join technique, you are not required to perform any data updates (though you're more than welcome to)! Note, it may be helpful to have a final visual layout in mind (e.g., scatter plot, bar chart, line chart) before diving into the details of each section. `32:T57d,loading_data = md`### Loading and Formatting Data In this section, you should add new cells in which you do the following: - **Load a dataset** of your choice using \`d3.csv()\`. You may load it from a location on the web (e.g., GitHub), or upload data as a [File Attachment](https://observablehq.com/@observablehq/file-attachments). In order to perform the steps below, your data must have _at least_ two continuous columns, and one categorical column. - **Choose variables to visualize** by defining the cells \`x_variable\`, \`y_variable\`, and \`color_variable\`, each one holding a _string_ that corresponds to the _key_ you want to display. Feel free to choose continous or categorical variables for each one (which will determine some of the steps below) - **Create an array of data to visualize** with generic keys -- this is a _really_ helpful practice if you want to re-use your charting code. Note, these hold the same values from your dataset, just with different keys (these are _not_ the pixel values you are going to draw). In this step, you should create an **array of objects** with the keys \`x\`, \`y\`, and \`color\`. For example, you data will have this structure: ~~~javascript // Data structure: an *array of objects* with keys for plotting chart_data = [ {x: .6, y:2000, color:"Label 1"}, // First observation {x: .9, y:1000, color:"Label 1"}, // Second observation ] ~~~ `33:[{"id":"8db767b92ca354aee0309e871aa536d6f41863d9e0fd4f63e7e1ce10a3dbb170b244a97f9cefe777a07868caa628c1fc0ee4a25d2a4959c36004bead368a9825","href":"https://static.observableusercontent.com/files/8db767b92ca354aee0309e871aa536d6f41863d9e0fd4f63e7e1ce10a3dbb170b244a97f9cefe777a07868caa628c1fc0ee4a25d2a4959c36004bead368a9825","name":"rdu-weather-historyFD.csv","type":"text/csv","lastModified":1587332443489.38,"size":479643}] 2f:{"title":"D3 Foundations - Buxton","cells":[{"id":0,"value":"md`# D3 Foundations - Buxton`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"reading = md`### Reading\n_Before_ you dive into working with the code, you should read through [this collection](https://observablehq.com/@d3/learn-d3) of notebooks on learning D3. It will introduce you to core concepts through interactive cells that you can manipulate. For a more academic introduction, check out the original [academic paper](https://idl.cs.washington.edu/files/2011-D3-InfoVis.pdf) from 2011 — while some of the syntax has changed, the core concepts are still the same!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"text = FileAttachment(\"rdu-weather-historyFD.csv\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"data = d3.csvParse(text, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`For my data I am choosing precipiation data from the town of *Cary, South Carolina*`","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"x_variable = \"date\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"y_variable = \"temperature_max\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"color_variable = \"fog\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"temperatures = data.map(function(d) {\n return {\n x: tParser(d.date),\n y: d.temperaturemax,\n color: d.fog\n };\n}).sort((a, b) => (a.x > b.x) ? 1 : -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"tParser = d3.timeParse(\"%m/%d/%Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"scales = md`### Scales\nRecall that **scales are functions** for translating from your data _domain_ to a visual _range_ (see [this explanation](https://observablehq.com/@info474/animated-scale-diagram?collection=@info474/tutorials)). In this section, you will create scales for your data by following these steps (you may find [this notebook](https://observablehq.com/@d3/learn-d3-scales) quite helpful as a reference):\n- **Compute the domain** of your data for your scales. Note, these will be _different_ for continuous and categorical variables:\n - For _continuous_ variables, compute the minimun and maximum values (e.g., using \\`d3.min()\\`) \n - For _categorical_ variables, compute the _unique set_ of values (e.g., using \\`_.uniqBy()\\`) \n- **Create D3 scales** for computing your x position, y position, and color of each element. For each one, use the computed domains to set the _domain_, and set the appropriate _range_ using the [D3 margin convention](https://observablehq.com/@d3/margin-convention).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"dateMin = d3.min(temperatures, d => d.x)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"dateMax = d3.max(temperatures, d => d.x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"tempMax = d3.max(data, d => d.temperaturemax)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"tempMin = d3.min(data, d => d.temperaturemax)","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"fogRange = d3.extent(data, d => d.fog)","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"x = d3\n .scaleUtc()\n .domain([dateMin, dateMax])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"y = d3\n .scaleLinear()\n .domain([tempMin, tempMax])\n .range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"z = d3.scaleOrdinal([`red`, `blue`])","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"x.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"z(\"Yes\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"axes = md`### Axes\nRecall that axes are **visual representations of scales**, allowing users to understand the underlying data domain. In this section, you will practice rendering scales by doing the following:\n- Add a cell below in which you render an x axis (e.g., an \\`

Years Since the Year 2000 vs. Maximum Temperature

\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"html`\n

Years Since the Year 2000 vs. Maximum Temperature

\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"swatches({\n color: d3.scaleOrdinal([\"Fog\", \"No Fog\"], [\"red\", \"blue\"])\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"md`Unfortunately I was not able to get the animation to work in conjunction with a slider since I was unable to figure out how to use radio input to filter the data results. Below is my attempt: `","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"viewof temperatures1 = {\n const form = html`\n `;\n form.value.onchange = () => form.dispatchEvent(new CustomEvent(\"input\"));\n form.oninput = () => {\n form.value = data.filter(d => d.color === form.value);\n };\n form.oninput();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`### Feedback\nIn the cell below, please let us know which pieces of the assignment you found particularly challenging, and if you had any issues specific to working with the Observable platform.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"md`Unfortunately I was not able to animate my graph because I could not filter the data according to an html form with radio boxes. I attempted to follow along with the example but this only uses a specific form type with a select tag. Additionally, I found labeling the axes especially challenging because d3 does not seem to have a built in way to do this so I improvised by adding a p tag. Lastly, I kept coming up with random lines when trying to draw out my line graph. I found that the solution was to order the dates in my temperatures object.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"appendix = md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"margin = ({ top: 20, right: 0, bottom: 0, left: 30 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"import { swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"line = d3\n .line()\n .x(d => x(d.x))\n .y(d => y(d.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}