2d:null 2e:["$","title",null,{"children":"IGME-460 Assignment 4 | frankluo426 | Observable"}] 33:T78c,md` ## Due Date Due Feb 18th, 2022, 11:59PM ## Instructions Using the code on this page, implement an interactive bar chart that updates and animates the number of bars shown based on a slider's value. The code is barebones and you will have to draw upon the things you've read in the book, the topics and code we've covered in class, and the work covered in previous assignments. Below, you will find a breakdown of what is required that will give you guidance on what to code. Demo screenshots of interactions are provided at the [bottom of the page](#finishedProduct). ### Grading This assignment is worth a total of 16 points. **Data Loading** * (1 point) Row Converter parses the date with d3.parse and parses hours\_of\_sleep values to float. **Initial Graph** * (1 point) Setup xScale using .scaleTime() * (1 point) Setup yScale using .scaleLinear() (use domain \[0, 12\]) * (1 point) Setup cScale using .scaleLinear() (use domain \[0,12\]; range from 'red' to 'orange') * (1 point) Draws bars for data * (2 points) Generate x-axis with good positioning; formats ticks using "abbreviated Weekday Name" (lookup in d3-time-format documentation). * (2 points) Generate y-axis with good positioning. **Graph Update** * (2 point) Create subset of data selected from global data set (Lookup Array.slice() javascript documentation.) The returned shallow copy array should be stored in a local variable and used for updating the .data() for the bars selection. The subset should be from (7 - numdays) to 7. * (2 points) enter and update selections used together after .join() to animate the existing and new bars. Entering bars start with negative x value to start "offscreen". * (2 points) exit selection used to animate with transition then remove bars. Exiting bars have a target x with negative x value to go "offscreen" before removal. * (1 points) x-axis updates according to number of days. `34:T1053,function makeChart() { // sort by date ascending dataset.sort((a, b) => a.date - b.date); console.log(dataset); //padding let xAxisOff = 18.1; // based on the height of the element let yAxisOff = 20; //based on the width of the element let xMaxPad = 10; let yMaxPad = 4; let xMinPad = yAxisOff; let yMinPad = xAxisOff; const numDaysSlider = html` `; const daysText = html` 7 `; const svg = d3.create("svg").attr("width", w).attr("height", h); let key = (d) => d.date; let endDate = new Date(d3.max(dataset, (d) => d.date)); endDate.setDate(endDate.getDate() + 1); //Create scales const xScale = d3 .scaleTime() .domain([d3.min(dataset, (d) => d.date), endDate]) .rangeRound([80, w - 80]); const yScale = d3 .scaleLinear() .domain([12, 0]) .rangeRound([20, h - 20]); let cScale = d3.scaleLinear().domain([0, 12]).range(["red", "orange"]); const xAxis = d3.axisBottom(xScale); xAxis.ticks(7, "%a"); const yAxis = d3.axisLeft(yScale); const xAxisGroup = svg .append("g") .attr("class", "axis") .attr("transform", `translate(0, ${h - 20})`) .call(xAxis); const yAxisGroup = svg .append("g") .attr("class", "axis-left") .attr("transform", `translate(80,0)`) .call(yAxis); svg .selectAll("rect") .data(dataset, key) .enter() .append("rect") .attr("x", (d) => xScale(d.date)) .attr("y", (d) => yScale(d.hours_of_sleep) - yMinPad) .attr("width", barWidth(7)) .attr("height", (d) => h - yScale(d.hours_of_sleep)) .attr("fill", (d) => cScale(d.hours_of_sleep)); function barWidth(numBars) { return (w - (xMinPad + xMaxPad)) / numBars; } function updateGraph() { const numDays = +numDaysSlider.value; daysText.innerText = numDays; const subSection = dataset.slice(7 - numDays, 7); var newData = dataset.slice(7 - numDays, 7); const axScale = d3 .scaleTime() .domain([d3.min(subSection, (d) => d.date), endDate]) .rangeRound([80, w - 80]); const ayScale = d3 .scaleLinear() .domain([12, 0]) .rangeRound([20, h - 20]); svg .selectAll("rect") .data(subSection, (d) => d.date) .join( (enter) => enter .append("rect") .attr("x", (d) => xScale(d.date) + 800) .attr("y", (d) => h - yScale(d.hours_of_sleep) - 20) .attr("width", (w - 160) / numDays) .attr("height", (d) => yScale(d.hours_of_sleep)) .attr("fill", (d) => cScale(d.hours_of_sleep)), (update) => update .transition() .attr("x", (d) => axScale(d.date)) .attr("width", (w - 160) / numDays), (exit) => exit.transition().attr("x", (d) => xScale(d.date) - 800) ); //var bars = svg.selectAll("rect").data(newData, key); //bars // .enter() // .append("rect") // .attr("x", (d) => -1 * barWidth(numDays)) // .attr("y", (d) => h - yScale(d.hours_of_sleep) - yMinPad) // .attr("height", (d) => yScale(d.hours_of_sleep)) // .attr("fill", (d) => cScale(d.hours_of_sleep)) // .merge(bars) // .transition("barsIn") // .duration(500) // .attr("x", (d) => xScale(d.date)) // .attr("width", barWidth(numDays)); //bars // .exit() // .transition("barsOut") // .duration(500) // .attr("x", (d) => -1 * barWidth(numDays)) // .remove(); xAxisGroup.transition("xAxis").duration(500).call(xAxis); const axAxis = d3.axisBottom(axScale); axAxis.ticks(numDays, "%a"); const ayAxis = d3.axisLeft(ayScale); xAxisGroup.call(axAxis); yAxisGroup.call(ayAxis); } numDaysSlider.addEventListener("input", updateGraph); return html`

Sleep

Days to Show ${numDaysSlider} ${daysText}

${svg.node()}

`; }35:[{"id":"6578e5501dbd490d3174964a1baea6c10382b390c26aed5bb42c8d111be38e1fee57e247d5d91241577d6ee27ddf4444c77b24dab3baa4625ef80b8de75d3520","href":"https://static.observableusercontent.com/files/6578e5501dbd490d3174964a1baea6c10382b390c26aed5bb42c8d111be38e1fee57e247d5d91241577d6ee27ddf4444c77b24dab3baa4625ef80b8de75d3520","name":"assignment4_4days.png","type":"image/png","lastModified":1645453895370.588,"size":18305},{"id":"3b58e19f8f5758af7ce20748cdd7412088613d7340cddcd3d2a92b7656d073dea85e75053f2199562ade0be7c62e7b7a1a209bc49833539903b09d68e3ab89bf","href":"https://static.observableusercontent.com/files/3b58e19f8f5758af7ce20748cdd7412088613d7340cddcd3d2a92b7656d073dea85e75053f2199562ade0be7c62e7b7a1a209bc49833539903b09d68e3ab89bf","name":"assignment4_7days.png","type":"image/png","lastModified":1645453895370.588,"size":15487},{"id":"fbe96e2de7705107e70607def363f372ce3639a2d55acc04d8d4f28c1cd58d045c07a45103adf049027907a5e410faa72b98c8403d508b3b02eb9b24ec59b589","href":"https://static.observableusercontent.com/files/fbe96e2de7705107e70607def363f372ce3639a2d55acc04d8d4f28c1cd58d045c07a45103adf049027907a5e410faa72b98c8403d508b3b02eb9b24ec59b589","name":"data.csv","type":"text/csv","lastModified":1645453895370.588,"size":130}] 31:{"id":"761e4991a64dd6b9","slug":"igme-460-assignment-4","title":"IGME-460 Assignment 4","thumbnail":"2a9fe9620e7b67f0cfcb19769e78c1d25fc71bc446f986d6b3e4c9f99340b0e2","access_level":"public","create_time":"$D2022-02-21T14:31:35.370Z","update_time":"$D2022-02-21T15:20:54.086Z","view_time":null,"first_public_time":"$D2022-02-21T15:13:43.306Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f485774dba3a3f14","login":"frankluo426","name":"","avatar_url":"https://avatars-next.observableusercontent.com/65daf566d4cdaaa7739fefeb1092ebab9f1bfc3771e73d5cc917b3157951c580","tier":"starter_2024"},"version":189,"publish_version":189,"role":null,"authored":false,"authors":[{"type":"individual","id":"06614d7d9ad38a95","login":"frankluo426","name":"","avatar_url":"https://avatars-next.observableusercontent.com/65daf566d4cdaaa7739fefeb1092ebab9f1bfc3771e73d5cc917b3157951c580","tier":null}],"members":[{"type":"individual","id":"06614d7d9ad38a95","login":"frankluo426","name":"","avatar_url":"https://avatars-next.observableusercontent.com/65daf566d4cdaaa7739fefeb1092ebab9f1bfc3771e73d5cc917b3157951c580","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"IGME-460 Assignment 4","cells":[{"id":0,"value":"md`# IGME-460 Assignment 4`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"dataset = d3.csvParse(await FileAttachment(\"data.csv\").text(), rowConverter);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"rowConverter = (row) => {\n // Modify code here for row conversion\n const form = d3.timeParse(\"%Y-%m-%d\");\n return {date:form(row['date']),hours_of_sleep: +(row['hours_of_sleep'])};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"w = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"h = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"makeChart()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"finishedProduct = md`\n---\n\n## Finished Product\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"Don't worry about the red lines in the examples below. Slider should change the number of bars visible in the plot. Exiting bars should exit offscreen to the left, and entering bars should enter from offscreen to the left as well.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"{\n const img = await FileAttachment(\"assignment4_7days.png\").image();\n img.height = 500;\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"{\n const img = await FileAttachment(\"assignment4_4days.png\").image();\n img.height = 500;\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`\n---\n\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"