2d:null 2e:["$","title",null,{"children":"IGME-460 Assignment 3 | Jackson Levitt | Observable"}] 33:Tcf4,makeChart = (dataset) => { dataset = [...dataset]; // Copy dataset array so we don't modify the original dataset.sort((a,b) => b.downloads - a.downloads); const w = 600; const h = dataset.length * 24; const svg = d3.create('svg') .attr('width', w) .attr('height', h); // our range is limited from 0 to width - 100, // which is for the 80 pixels on left for axis and // 20 pixels on right for padding const xScale = d3.scaleLinear() .domain([0, d3.max(dataset, d => d.downloads)]) .rangeRound([0, w - 100]); // using scale band to work with nominal values // the Array.map() call allows us to get a new array // by calling a function on each item of the source array // here it pulls out the app_name const yScale = d3.scaleBand() .domain(dataset.map(d => d.app_name)) .rangeRound([20, h - 20]); // d3 allows scaling between colors const colorScale = d3.scaleLinear() .domain(xScale.domain()) .range(['#88d', '#ccf']); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); // AXES const xAxisGroup = svg.append('g') .attr('class', 'axis') .attr('transform', `translate(80, ${h - 20})`) .call(xAxis); const yAxisGroup = svg.append('g') .attr('class', 'axis-left1') .attr('transform', `translate(80,0)`) .call(yAxis); const updateChartType = (newType) => { console.log(newType); // TODO // Depending on newType // update the chart by: // 1. re-sorting the dataset // 2. update xscale domain // 3. update yscale domain // 4. Modifying the update parameter of .join, use transition to then // update x,y, and width of bars // // After that, alway update xAxis scale, xAxisGroup with xAxis (call), and same for yAxis scale and yAxisGroup // dataset.sort((a,b) => b[newType] - a[newType]); let uxScale = d3.scaleLinear() .domain([0, d3.max(dataset, d => d[newType])]) .rangeRound([0, w - 100]); let uyScale = d3.scaleBand() .domain(dataset.map(d => d.app_name)) .rangeRound([20, h - 20]); console.log(uxScale(dataset[0][newType])); svg.selectAll('rect') .data(dataset, d => d.app_name) .join( enter => enter.append('rect') .attr('x', 80) .attr('y', d => yScale(d.app_name)) .attr('width', d => xScale(d.downloads)) .attr('height', 18) .attr('fill', d => colorScale(d.downloads)), // UPDATE the below update => update .transition() .attr('x', 80) .attr("y", d => uyScale(d.app_name)) .attr("width", d => uxScale(d[newType])) ); xAxisGroup.call(d3.axisBottom(uxScale)); yAxisGroup.call(d3.axisLeft(uyScale)); }; updateChartType('downloads'); const typeSelector = html` `; d3.select(typeSelector).on('change', () => { updateChartType(typeSelector.value); }); return html`

Chart Type: ${typeSelector} ${svg.node()}

`; }34:[{"id":"bbf0e832c28184d9e1d8cab2d7d5657085d1624b0f2f4ed4db08f2ca64fc5c5c5e2c191fd960a6e5d99d626dc4784540f25ecf6452e60b2e620b64321fbfb75f","href":"https://static.observableusercontent.com/files/bbf0e832c28184d9e1d8cab2d7d5657085d1624b0f2f4ed4db08f2ca64fc5c5c5e2c191fd960a6e5d99d626dc4784540f25ecf6452e60b2e620b64321fbfb75f","name":"fake_app_download_rating.csv","type":"text/csv","lastModified":1644794193530.911,"size":572}] 31:{"id":"022056d18c64db3d","slug":"igme-460-assignment-3","title":"IGME-460 Assignment 3","thumbnail":"38a17372c189cdf1b420a38905d7f8bec57e1509902690bf6a542de42051bf50","access_level":"public","create_time":"$D2022-02-13T23:16:33.530Z","update_time":"$D2022-03-03T19:07:11.864Z","view_time":null,"first_public_time":"$D2022-02-27T17:03:37.087Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f0d7d54504928296","login":"crazyjackel","name":"Jackson Levitt","avatar_url":"https://avatars-next.observableusercontent.com/a44c86489d64da7dd9cecec0f6dfc5574c03679903d5f0952ecd29f6897d775a","tier":"starter_2024"},"version":170,"publish_version":170,"role":null,"authored":false,"authors":[{"type":"individual","id":"ffa38b67fcc03196","login":"crazyjackel","name":"Jackson Levitt","avatar_url":"https://avatars-next.observableusercontent.com/a44c86489d64da7dd9cecec0f6dfc5574c03679903d5f0952ecd29f6897d775a","tier":null}],"members":[{"type":"individual","id":"ffa38b67fcc03196","login":"crazyjackel","name":"Jackson Levitt","avatar_url":"https://avatars-next.observableusercontent.com/a44c86489d64da7dd9cecec0f6dfc5574c03679903d5f0952ecd29f6897d775a","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 3","cells":[{"id":0,"value":"md`# IGME-460 Assignment 3\n### Data Visualization\n---\nTo complete this assignment, fork this document (button above), edit the document where prompted, and run your code with the \"play\" buttons at the top-right of each cell. \n\nTo submit this assignment, make sure to click \"Publish\" in the menu above, and select \"unlisted.\" Then, submit the link to your fork to myCourses. **Remember**, if you make any changes and want me to see them, you'll need to click the \"Republish\" button above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`\n## Instructions\n\nUsing the code on this page, implement the code to update the chart whenever the user selects a different chart type from the dropdown selector. The code is setup so that you only have to focus on the updating part of the project. The event listener is already wired up into the selector. \n\n## Grading\n\nThis assignment is worth 6 points: 2 points for each of the chart types being implemented in full (bars move smoothly and change size with the re-sorted data, both axes update).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"dataset = d3.csvParse(dataFile, (row) => ({\n app_name: row.app_name,\n downloads: parseInt(row.downloads),\n average_rating: parseFloat(row.average_rating),\n thirty_day_keep: parseFloat(row.thirty_day_keep) / 100\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"makeChart(dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"dataFile = await FileAttachment(\"fake_app_download_rating.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`\n---\n\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"