2d:null 2e:["$","title",null,{"children":"IGME-460 Assignment 2 | frankluo426 | Observable"}] 33:T457,makeChart1 = (dataset) => { // sort the data by downloads // uses built-in Array.sort() with comparator function dataset.sort((a,b) => b.downloads - a.downloads); const chart = d3.create('svg') .attr('width', w) .attr('height', h); chart.selectAll('rect') .data(dataset) .enter() .append('rect') .attr('x', 80) .attr('y', (d) => yScale(d.app_name)) .attr('width', (d) => 0) .attr('height', 20) .attr('fill', '#88d') .transition('displaydata') .delay((d,i) => 35 * i) .attr('width', (d) => xScale(d.downloads)) .attr('fill', (d) => colorScale(d.downloads)) .transition('staticfill') .delay((d,i) => 35 * i) .attr('fill', '#88d') .transition('scaledfill') .delay((d,i) => 35 * i) .attr('fill', (d) => colorScale(d.downloads)) // AXES chart.append('g') .classed('axis', true) .attr('transform', `translate(80, ${h - 20})`) .call(d3.axisBottom(xScale)); chart.append('g') .classed('axis', true) .attr('transform', `translate(80,0)`) .call(d3.axisLeft(yScale)); return chart.node() }34:[{"id":"bbf0e832c28184d9e1d8cab2d7d5657085d1624b0f2f4ed4db08f2ca64fc5c5c5e2c191fd960a6e5d99d626dc4784540f25ecf6452e60b2e620b64321fbfb75f","href":"https://static.observableusercontent.com/files/bbf0e832c28184d9e1d8cab2d7d5657085d1624b0f2f4ed4db08f2ca64fc5c5c5e2c191fd960a6e5d99d626dc4784540f25ecf6452e60b2e620b64321fbfb75f","name":"fake_app_download_rating.csv","type":"text/csv","lastModified":1644420156145.259,"size":572}] 31:{"id":"045ce14fc47bd5e7","slug":"igme-460-assignment-2","title":"IGME-460 Assignment 2","thumbnail":"390588c7c99d50ade47376cc4b9e683446304d70c7008ccb674380aedfadb880","access_level":"public","create_time":"$D2022-02-09T15:22:36.145Z","update_time":"$D2022-02-09T17:41:08.679Z","view_time":null,"first_public_time":"$D2022-02-09T18:34:11.862Z","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":75,"publish_version":75,"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 2","cells":[{"id":0,"value":"md`# IGME-460 Assignment 2\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":8,"value":"md`\n## Instructions\n\nUsing the code on this page, update makeChart1() to\nintroduce animation when creating the bars for the chart. You'll\nstart off with most of the same values as the original but update\na couple properties to start at a different initial value. Next,\nyou'll add multiple .transition() calls to create a chain of\ntransitions that animate the chart.\n\n

Start each bar with a fill of #88d and width of 0.
First transition: use a delay of 35 milliseconds between items\n (requires a function to calculate according to datum index), sets the width using xScale(),\n and sets the color using colorScale(). The target width and color are set using code from\n the original file.
Second transition: set fill back to #88d.
Third transition: set fill back to value according to colorScale.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`\n### Grading\n\nThis assignment is worth 6 points: 3 points for getting three transitions chained,\n3 points for getting each of the properties and delay done correctly.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"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":26,"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)\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"w = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"h = dataset.length * 24","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// our range is limited from 0 to width - 100,\n// which is for the 80 pixels on left for axis and\n// 20 pixels on right for padding\nxScale = d3.scaleLinear()\n .domain([0, d3.max(dataset, (d) => d.downloads)])\n .rangeRound([0, w - 80 - 20]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"datasetAppNames = dataset.map((d) => d.app_name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// using scale band to work with nominal values\n// the Array.map() call allows us to get a new array\n// by calling a function on each item of the source array\n// here it pulls out the app_name\nyScale = d3.scaleBand()\n .domain(datasetAppNames)\n .rangeRound([20, h - 20]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// d3 allows scaling between colors\ncolorScale = d3.scaleLinear()\n .domain([0, d3.max(dataset, (d) => d.downloads)])\n .range(['#ccf', '#88d']);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"makeChart1(dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`\n---\n\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"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"