33: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. `34: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 ] ~~~ `35:T5e9,{ const scaleBand = 30 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const title = svg .append("text") .attr("class", "chart_title") .attr("transform", `translate(${width / 2},15)`) .text("Actual Price VS. Predicted Price") .style("text-anchor", "middle"); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) //.text("Actual price") .call(d3.axisBottom(x)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) //.text("Actual price") .call(d3.axisLeft(y)); svg.append("text") .attr("class", "x label") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height - 5) .text("Actual Price ($)"); svg.append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("y", 5) .attr("x", -100) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("Predicted Price ($)"); svg .selectAll('.bar') .data(data_clean) .join(enter => enter.append("rect")) .attr('x', d => 0) .attr('y', d => 0) .attr('width', 30) .attr('height', d => y(0) - y(d.y_variable)) .attr('fill', d => d.color_variable) .transition() .duration(1000) .attr('x', d => x(d.x_variable)) //.attr('y', d => y(d.y_variable)) .attr('width', 10) .attr('height', d => y(0) - y(d.y_variable)) .attr('fill', d => d.color_variable) return svg.node(); }36:T5e9,{ const scaleBand = 30 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const title = svg .append("text") .attr("class", "chart_title") .attr("transform", `translate(${width / 2},15)`) .text("Actual Price VS. Predicted Price") .style("text-anchor", "middle"); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) //.text("Actual price") .call(d3.axisBottom(x)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) //.text("Actual price") .call(d3.axisLeft(y)); svg.append("text") .attr("class", "x label") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height - 5) .text("Actual Price ($)"); svg.append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("y", 5) .attr("x", -100) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("Predicted Price ($)"); svg .selectAll('.bar') .data(data_clean) .join(enter => enter.append("rect")) .attr('x', d => 0) .attr('y', d => 0) .attr('width', 30) .attr('height', d => y(0) - y(d.y_variable)) .attr('fill', d => d.color_variable) .transition() .duration(1000) //.attr('x', d => x(d.x_variable)) .attr('y', d => y(d.y_variable)) .attr('width', 10) .attr('height', d => y(0) - y(d.y_variable)) .attr('fill', d => d.color_variable) return svg.node(); }37:T544,chart1 = { const scaleBand = 30 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const title = svg .append("text") .attr("class", "chart_title") .attr("transform", `translate(${width / 2},15)`) .text("Actual Price VS. Predicted Price") .style("text-anchor", "middle"); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) //.text("Actual price") .call(d3.axisBottom(x)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) //.text("Actual price") .call(d3.axisLeft(y)); svg.append("text") .attr("class", "x label") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height - 5) .text("Actual Price ($)"); svg.append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("y", 5) .attr("x", -100) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("Predicted Price ($)"); svg .selectAll('.bar') .data(data_clean) .join(enter => enter.append("circle")) .attr("r", 20) .attr("cx", 300) .attr('fill', d => d.color_variable) .transition() .duration(1000) .attr('cx', d => x(d.x_variable)) .attr('cy', d => y(d.y_variable)) .attr('r', 10) return svg.node(); }38:T5f0,chart2 = { const scaleBand = 30 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const title = svg .append("text") .attr("class", "chart_title") .attr("transform", `translate(${width / 2},15)`) .text("Actual Price VS. Predicted Price") .style("text-anchor", "middle"); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) //.text("Actual price") .call(d3.axisBottom(x)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) //.text("Actual price") .call(d3.axisLeft(y)); svg.append("text") .attr("class", "x label") .attr("text-anchor", "middle") .attr("x", width / 2) .attr("y", height - 5) .text("Actual Price ($)"); svg.append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("y", 5) .attr("x", -100) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("Predicted Price ($)"); svg .selectAll('.bar') .data(data_clean) .join(enter => enter.append("rect")) .attr('x', d => 0) .attr('y', d => 0) .attr('width', 30) .attr('height', d => y(0) - y(d.y_variable)) .attr('fill', d => d.color_variable) .transition() .duration(1000) .attr('x', d => x(d.x_variable)) .attr('y', d => y(d.y_variable)) .attr('width', 10) .attr('height', d => y(0) - y(d.y_variable)) .attr('fill', d => d.color_variable) return svg.node(); }39:[{"id":"b3d290aeca7a4f27ae9f4d65d325eded57c35d0ed65386b9cef74e0ae05ef0c9c77ed79987d05efbb70600995b47e3f8cb9477db70a68a0acd6e8ba1262dccb4","href":"https://static.observableusercontent.com/files/b3d290aeca7a4f27ae9f4d65d325eded57c35d0ed65386b9cef74e0ae05ef0c9c77ed79987d05efbb70600995b47e3f8cb9477db70a68a0acd6e8ba1262dccb4","name":"summer-products-with-rating-and-performance_2020-08.csv","type":"text/csv","lastModified":1603213356826.239,"size":1236963}] 32:{"title":"D3 Foundations","cells":[{"id":0,"value":"md`# D3 Foundations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$33","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":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"FileAttachment(\"summer-products-with-rating-and-performance_2020-08.csv\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"d3.csvParse(await FileAttachment(\"summer-products-with-rating-and-performance_2020-08.csv\").text()).slice(0,5);","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"data = d3.csvParse(await FileAttachment(\"summer-products-with-rating-and-performance_2020-08.csv\").text());","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"data_clean = data.map(function(d) {\n return {\n x_variable: d.price,\n y_variable: d.retail_price,\n color_variable: d.product_color\n }\n}).slice(0, 50);","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":358,"value":"x_extent = d3.extent(data_clean, d => +d.x_variable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"d3.min(data_clean, d => +d.x_variable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"d3.max(data_clean, d => d.x_variable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"//uniqueColor = _.uniqBy(data_clean, 'x_variable').slice(0, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"data_clean","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"d3.min(data_clean, d => +d.y_variable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"d3.max(data_clean, d => +d.y_variable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"y_extent = d3.extent(data_clean, d => d.y_variable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(data_clean, d => d.x_variable)])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data_clean, d => d.y_variable)])\n .range([height - margin.bottom, margin.top])","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 \\`