2b:null 2c:["$","title",null,{"children":"Rankings over Time | Matthew Berger | Observable"}] 31:Tc1f,md`# Visual Encoding Your visual encoding should consist of two graphical marks. ## Point (\`circle\`) Each item in \`data\` should be mapped to a circle. ### Visual Variables * You will map \`date\` to the **x position**. This requires computing the extent for \`date\`, and creating a time scale for this mapping. * You will map \`rank\` to the **y position**. This requires an ordered list of all ranks (e.g. from 1 to 10), and creating a point scale for this mapping. Furthermore, you should create axes for each of these scales - a bottom axis for the time scale, and a left axis for the rank scale. Feel free to adjust axes to your liking. Last, you should label the scales. ## Curve (\`path\`) You will create a link - via \`d3.linkHorizontal\` - for each Object in \`data\`, limited to those Objects where \`rank_last_week\` is nonzero, e.g. the book was on the list the previous week. The link should form a curve that connects the book's rank at the previous week (\`rank_last_week\`, \`date_last_week\`), to the book's rank at the current week (\`rank\`, \`date\`). It is recommended to first \`filter\` your \`data\` Array, returning only those Objects whose \`rank_last_week\` is nonzero. You should use the aforementioned scales when setting up \`d3.linkHorizontal\`. ## Highlighting Top Books with Colors For books that are on the NYT Best Seller list for a certain number of weeks, we would like to **highlight their assigned graphical marks** in our visualization. This requires the following: * For each book title, derive a count for how many times this book appears on the list (e.g. how many times a book with property \`title\` is in the data Array). * Use the cell named \`min_weeks\` (our slider) to determine which books should be highlighted - those with counts at least \`min_weeks\` - and those that should not. Simply treat \`min_weeks\` as a variable that you can reference. * When creating your \`\` and \`\` elements, you might find it useful to assign "class" names to distinguish those that should be highlighted from those that should not, thus making the "class" attribute data-dependent. * For those books that _should_ be highlighted, adjust their color (\`fill\` for circle, \`stroke\` for path) and \`opacity\` for path (higher opacity for highlighted books). * For those books that should _not_ be highlighted, lower their marks (via the \`lower\` method of a Selection). How should we assign colors? You should use the HCL color space via \`d3.hcl\`, as we have discussed, varying the \`l\` channel (brightness, in the interval [0,100]). At a minimum, your colors should be _ordered_, in decreasing brightness, as follows: 1. Circles for books that are not highlighted. 2. Links for books that are not highlighted. 3. Circles for books that are highlighted. 4. Links for books that are highlighted. There is no one best solution here, experiment with different levels of the \`l\` channel. You are also free to experiment with the \`h\` and \`c\` channels, e.g. it is recommended to assign a different hue for highlighted books. `32:T676,main_plot = { // our SVG element let svg = d3.create('svg').attr('width', width).attr('height', height) // group element to center our plot, provide margins for axes/labels -> add your elements to this element let g = svg.append('g').attr('transform', `translate(${pad},${pad})`) // TODO: data join for your horizontal links -> one path element for each data item // Should use the array that filtered out all items whose `rank_last_week` was 0 // TODO: set the attributes for your path elements // * a 'd' attribute that uses your linkHorizontal shape // * a 'class' attribute that, given an element's data, distinguishes // elements that should be highlighted from those that should not // The remaining attributes should be 'fill' (set to 'none'), and appropriately // set 'stroke', 'opacity', and 'stroke-width' (customize to your liking) // TODO: select _only_ the highlighted path elements (from your class attribute set above), // and modify their stroke and opacity so that they are emphasized // TODO: `lower` path elements _not_ highlighted // TODO: second data join for plotting points for each book across time/rank -> use `data` here // TODO: set circle attributes // * 'cx' and 'cy' should be set based on your data // * 'class' should be set in an identical manner to that above // * and assign appropriate 'fill' and 'stroke' attributes, to your liking // TODO: select _only_ the highlighted circle elements, modify their fill // TODO: left axis and label -> for your rank scale // TODO: bottom axis and label -> for your time scale return svg.node() }33:T4c6,md`# Undergraduate Assessment ## Circle Marks: 50 points * Correctly computing data domains for scales (5 points) * Setting up scales for time and ranking (10 points) * Create circle elements from data (10 points) * Set circle positions from \`date\` and \`rank\` (10 points) * Setup remaining circle attributes (stroke, stroke-width, fill, opacity) (5 points) * Axes and labels (10 points) ## Link Marks: 30 points * Filter out Objects whose \`rank_last_week\` is zero (5 points) * Correctly setup \`d3.linkHorizontal\` (10 points) * Create path elements from filtered data (5 points) * Setup \`d\` attribute from the link (5 points) * Setup remaining path attributes (stroke, stroke-width, fill, opacity) (5 points) ## Highlighting Marks: 20 points * Compute book title counts (5 points) * Assign classes to \`\` and \`\` elements that distinguish highlighted books from those that are not highlighted (5 points) * Adjust the \`\` fill and \`\` stroke for highlighted books, as well as lower \`\` elements that are not highlighted (10 points) ## Extra Credit: 15 points * Assignment of unique hues to the current set of highlighted books (5 points) * Color legend (10 points) `34:T4c7,md`# Graduate Assessment ## Circle Marks: 40 points * Correctly computing data domains for scales (5 points) * Setting up scales for time and ranking (5 points) * Create circle elements from data (10 points) * Set circle positions from \`date\` and \`rank\` (5 points) * Setup remaining circle attributes (stroke, stroke-width, fill, opacity) (5 points) * Axes and labels (10 points) ## Link Marks: 25 points * Filter out Objects whose \`rank_last_week\` is zero (5 points) * Correctly setup \`d3.linkHorizontal\` (5 points) * Create path elements from filtered data (5 points) * Setup \`d\` attribute from the link (5 points) * Setup remaining path attributes (stroke, stroke-width, fill, opacity) (5 points) ## Highlighting Marks: 20 points * Compute book title counts (5 points) * Assign classes to \`\` and \`\` elements that distinguish highlighted books from those that are not highlighted (5 points) * Adjust the \`\` fill and \`\` stroke for highlighted books, as well as lower \`\` elements that are not highlighted (10 points) ## Hues and Color Legend: 15 points * Assignment of unique hues to the current set of highlighted books (5 points) * Color legend (10 points) `35:[{"id":"0cb7400dea1579bd9705ca05b6923e77254530a11425d520d9f9f6696c4f8093c5f117bf0d715e3a20488eeace4bc523b4ed5cc006e65880a410c877f4276bb0","href":"https://static.observableusercontent.com/files/0cb7400dea1579bd9705ca05b6923e77254530a11425d520d9f9f6696c4f8093c5f117bf0d715e3a20488eeace4bc523b4ed5cc006e65880a410c877f4276bb0","name":"bestsellers@26.json","type":"application/json","lastModified":1599751360623.237,"size":38190},{"id":"54c6101877dca0641bf31dea430947e4ae86550646abb9d37c720876b2809872d2b7c08d6b6986f5e0411d20be5e9dbb99cbc23d7b53af7acc814f2538d10d48","href":"https://static.observableusercontent.com/files/54c6101877dca0641bf31dea430947e4ae86550646abb9d37c720876b2809872d2b7c08d6b6986f5e0411d20be5e9dbb99cbc23d7b53af7acc814f2538d10d48","name":"solution.png","type":"image/png","lastModified":1599751944989.409,"size":440934}] 2f:{"id":"85f1f4f097d5c609","slug":null,"title":"Rankings over Time","thumbnail":"4581520d40be9b9d33c69afb42ba5aea7bc7678580975b79a9b1da8521eeb0f6","access_level":"unlisted","create_time":"$D2020-09-10T15:22:40.623Z","update_time":"$D2020-09-10T16:14:10.104Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ff8d3dc5309f0e8f","login":"mattberger","name":"Matthew Berger","avatar_url":"https://avatars-next.observableusercontent.com/db43c568a6d4eb06d6475f8809d39dc6cc8e44a37000cb82904f063c85599c88","tier":"starter_2024"},"version":594,"publish_version":594,"role":null,"authored":false,"authors":[{"type":"individual","id":"3e3683c87ab9f224","login":"mattberger","name":"Matthew Berger","avatar_url":"https://avatars-next.observableusercontent.com/db43c568a6d4eb06d6475f8809d39dc6cc8e44a37000cb82904f063c85599c88","tier":null}],"members":[{"type":"individual","id":"3e3683c87ab9f224","login":"mattberger","name":"Matthew Berger","avatar_url":"https://avatars-next.observableusercontent.com/db43c568a6d4eb06d6475f8809d39dc6cc8e44a37000cb82904f063c85599c88","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":24,"collection":null,"type":"notebook","body":{"title":"Rankings over Time","cells":[{"id":0,"value":"md`# Rankings over Time`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`\n\nIn this assignment you will create a visualization that will display rankings of books on the New York Times' Best Seller list, over a given time interval. Your visualization should look something like this:\n\n\n

${Object.assign(await FileAttachment('solution.png').image(), { alt: 'Rankings Over Time', style: 'width: 100%; max-width: 900px;' })}\n\nPlease note: the color legend and unique hues for books are required for graduate students, and optional extra credit for undergraduates.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"md`# Data\n\nYou are provided an array of Objects in the cell named \\`data\\`, where each Object represents a **book**, consisting of the following properties:\n* \\`title\\`: a String containing the title of the book\n* \\`rank\\`: the ranking of this book on the list (an integer from 1 to 10)\n* \\`date\\`: the Date this book appeared on the list (in units of week)\n* \\`rank_last_week\\`: if this book was on the list in the previous week, this property contains its previous rank; otherwise, it is set to 0\n* \\`date_last_week\\`: if this book was on the list in the previous week, this property contains its previous Date; otherwise, it is set to null\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"md`# Graduate Students / UG Extra Credit\n\nYou are expected to assign a **unique hue** to each highlighted book (its circle and path in the visualization), and within a separate cell, create a **color legend** for the highlighted books (those on the NYT Best Seller list for at least \\`min_weeks\\`).\n\nThe hues that you assign should allow us to easily discern, at most, **6 books**. Past this number, it becomes hard to assign colors that we can distinguish, so do not be concerned if your color scheme is sub-optimal.\n\nFor your color legend:\n* You should create a circle for each highlighted book, whose \\`fill\\` contains that book's assigned hue.\n* Adjacent to each circle, create a text element that will display the book's title.\n\nYour color legend should be a function of the current set of highlighted books.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"md`\n\nFurther details, and recommendations for how to complete this assignment, are given below.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof min_weeks = slider({\n min: 1, \n max: n_weeks, \n step: 1, \n value: n_weeks,\n description: 'Minimum number of weeks spent on the NYT Best Seller list'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`## Top Books`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"titles_plot = {\n let svg = d3.create('svg').attr('width', width).attr('height', 10)\n // NOTE: your SVG element's height should be a function of the number of books you will show!\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"md`## Link Shape\n\nHere you should create your \\`d3.linkHorizontal\\` Object (recall: technically a function!). Your accessor functions should be dependent on your time and rank scales, as computed below.\n\nYou should think carefully about what you want your accessor functions to be, given the properties of Objects in the data Array.\n\nIn particular, within your \\`source\\` and \\`target\\` accessors, you may find it useful to return **new** Objects, from which your \\`x\\` and \\`y\\` accessors can access appropriate data, e.g. the time and rank properties, respectively.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`### Scale for time\n\nDomain should be your time extent below, and range should be [0,plot_width] (e.g. the full width). You should use \\`d3.scaleTime\\`.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"md`### Scale for ranking\n\nDomain should be all unique, ordered values for the ranking as computed below, range should be [0,plot_height] (e.g. the full height). You should use \\`d3.scalePoint\\`.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"md`## Data Domains`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"md`### Time Extent\n\nYou should use \\`d3.extent\\` to compute the minimum and maximum of the \\`date\\` property of your data Array.\n\nNOTE: Dates in JavaScript are comparable! So you do not need to give special treatment to this.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":" md`### Rank Values\n\nCompute all unique values of \\`rank\\` in your data Array. For simplicity, assume this to be in the interval of [1, 10], so ... create an Array of numbers from 1 through 10.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"md`## Derived Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"md`### Book Counts\n\nYou should construct an Object whose properties are book titles. For a given book title, its value is a count of how many times the book appeared on the Best Sellers list. You may want to revisit the basics on Objects that we covered earlier ([see notebook here](https://observablehq.com/d/c505cd79b0d7fe1d)).\n\n**Hint:** to test if a given Object contains a property, use the \\`in\\` syntax, e.g.\n\n\\`'prop_name' in obj\\`\n\n(same syntax as Python for dicts).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"md`### Filtered Link Data\n\nUse \\`filter\\` on the data Array to filter out Objects whose \\`rank_last_week\\` property is 0, e.g. we do not want to draw links for these Objects.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`## General Visualization Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"pad = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"plot_width = width-2*pad","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"plot_height = height-2*pad","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`## Data\n\n***Inspect me!***\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"data = {\n let time_formatter = d3.timeParse('%Y-%m-%e')\n let the_data = await FileAttachment(\"bestsellers@26.json\").json()\n the_data.forEach(datum => {\n datum.date = time_formatter(datum.date)\n datum.date_last_week = time_formatter(datum.date_last_week)\n })\n return the_data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"n_weeks = d3.set(data, d => d.date).values().length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"import {drawdom,drawjoin} from '91007ee9d5fd152b'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"