2b:null 2c:["$","title",null,{"children":"Rankings over Time | Matthew Berger | Observable"}] 31:Tbed,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. 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\` (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:T9ce,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})`) let books_link = g .selectAll('path') .data(link_data) .enter() .append('path') books_link .attr('class', d => book_counts[d.title] >= min_weeks ? 'selectedlink' : 'backgroundlink') .attr('d', d => link(d)) .attr('fill', 'none') .attr('stroke', d3.hcl(0,0,80)) .attr('opacity', .4) .attr('stroke-width', point_radius) g.selectAll('.selectedlink') .attr('stroke', d => d3.hcl(top_books_hues(d.title),28,45)) .attr('opacity', d => .8) g.selectAll('.backgroundlink').lower() let books_circle = g .selectAll('circle') .data(data) .enter() .append('circle') books_circle .attr('class', d => book_counts[d.title] >= min_weeks ? 'selectedcircle' : 'backgroundcircle') .attr('cx', d => time_scale(d.date)).attr('cy', d => rank_scale(d.rank)) .attr('r', point_radius) .attr('fill', d3.hcl(0,0,84)) .attr('stroke', d3.hcl(0,0,22)).attr('stroke-width', 1) g.selectAll('.selectedcircle') .attr('fill', d => d3.hcl(top_books_hues(d.title),30,66)) g.append('g').attr('class', 'left axis').attr('transform', 'translate(-5,0)') .call(d3.axisLeft(rank_scale)) g.select('.left').selectAll('.tick').selectAll('line').remove() g.select('.left').select('.domain').remove() g.select('.left').selectAll('text') .attr('fill', d3.hcl(0,0,50)).attr('font-weight', 'bold').attr('font-size', '13px') g.append('text') .attr('transform', `translate(-35,${plot_height/2}) rotate(270)`).attr('text-anchor', 'middle') .text('Ranking').attr('fill', d3.hcl(0,0,35)).attr('font-weight', 'bold') g.append('g').attr('class', 'bottom axis').attr('transform', `translate(0,${plot_height+6})`) .call(d3.axisBottom(time_scale).ticks(5)) g.select('.bottom').selectAll('.tick').selectAll('line').remove() g.select('.bottom').select('.domain').remove() g.select('.bottom').selectAll('text') .attr('fill', d3.hcl(0,0,50)).attr('font-weight', 'bold').attr('font-size', '13px') g.append('text') .attr('transform', `translate(${plot_width/2},${plot_height+46})`).attr('text-anchor', 'middle') .text('Week').attr('fill', d3.hcl(0,0,35)).attr('font-weight', 'bold') return svg.node() }33:T40b,titles_plot = { let top_books = top_books_hues.domain() let tiny_pad = 2, the_height = top_books.length*2*(1+0.2)*(point_radius) let total_height = 2*tiny_pad+the_height let svg = d3.create('svg').attr('width', width).attr('height', total_height) let g = svg.append('g').attr('transform', `translate(${tiny_pad},${tiny_pad})`) let titles_scale = d3.scaleBand().domain(top_books).range([0,the_height]).paddingInner(0.2) g.selectAll('circle').data(top_books).enter().append('circle') .attr('cx', point_radius).attr('cy', d => titles_scale(d)+titles_scale.bandwidth()/2) .attr('r', point_radius) .attr('fill', d => d3.hcl(top_books_hues(d),30,66)) .attr('stroke', d3.hcl(0,0,22)).attr('stroke-width', 1) g.selectAll('text').data(top_books).enter().append('text').text(d => d) .attr('x', 2*point_radius+5).attr('y', d => 1.5+titles_scale(d)+titles_scale.bandwidth()/2) .attr('alignment-baseline', 'middle') .attr('font-size', (titles_scale.bandwidth())+'px') return svg.node() }34:T4a8,md`# Undergraduate Assessment ## Circle Marks: 45 points * Correctly computing data domains for scales (5 points) * Setting up scales for time and ranking (10 points) * Create circle elements from data (5 points) * Set circle positions from \`date\` and \`rank\` (10 points) * Setup remaining circle attributes (stroke, 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, fill, opacity) (5 points) ## Highlighting Marks: 15 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 (5 points) ## Extra Credit: 15 points * Assignment of unique hues to the current set of highlighted books (5 points) * Color legend (10 points) `35:T4a9,md`# Graduate Assessment ## Circle Marks: 35 points * Correctly computing data domains for scales (5 points) * Setting up scales for time and ranking (5 points) * Create circle elements from data (5 points) * Set circle positions from \`date\` and \`rank\` (5 points) * Setup remaining circle attributes (stroke, 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, fill, opacity) (5 points) ## Highlighting Marks: 15 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 (5 points) ## Hues and Color Legend: 15 points * Assignment of unique hues to the current set of highlighted books (5 points) * Color legend (10 points) `36:[{"id":"0cb7400dea1579bd9705ca05b6923e77254530a11425d520d9f9f6696c4f8093c5f117bf0d715e3a20488eeace4bc523b4ed5cc006e65880a410c877f4276bb0","href":"https://static.observableusercontent.com/files/0cb7400dea1579bd9705ca05b6923e77254530a11425d520d9f9f6696c4f8093c5f117bf0d715e3a20488eeace4bc523b4ed5cc006e65880a410c877f4276bb0","name":"bestsellers@26.json","type":"application/json","lastModified":1599739357829.508,"size":38190}] 2f:{"id":"3a9c8140fe01b00a","slug":null,"title":"Rankings over Time","thumbnail":"a5aabdee5117aade7cef4af841407eda27c645bab495b1672ee8be2a47617167","access_level":"unlisted","create_time":"$D2020-08-13T18:00:55.074Z","update_time":"$D2020-09-25T19:29:57.049Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"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":576,"publish_version":576,"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":1,"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.\n\n# 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 visualiization), 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\\`). The hues that you create may be \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":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":false,"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":"$33","pinned":false,"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":439,"value":"link = d3.linkHorizontal()\n .source(d => {\n return {rank:d.rank, date:d.date}\n })\n .target(d => {\n return {rank:d.rank_last_week, date:d.date_last_week}\n })\n .x(d => time_scale(d.date))\n .y(d => rank_scale(d.rank))","pinned":true,"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":259,"value":"time_scale = d3.scaleTime().domain(time_extent).range([0,plot_width])","pinned":true,"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":241,"value":"rank_scale = d3.scalePoint().domain(ranking_extent).range([0,plot_height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"point_radius = rank_scale.step()/4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"md`### Scale for the top titles (hues)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"top_books_hues = {\n let top_books = []\n for(let title in book_counts) {\n if(book_counts[title] >= min_weeks)\n top_books.push({title:title,count:book_counts[title]})\n }\n top_books.sort((a,b) => b.count-a.count)\n return d3.scalePoint().domain(top_books.map(d => d.title)).range([0,360]).padding(.5)\n}","pinned":true,"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":417,"value":"time_extent = d3.extent(data.map(d => d.date))","pinned":true,"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":428,"value":"ranking_extent = d3.range(d3.max(data, d => d.rank)).map(d => d+1)","pinned":true,"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":454,"value":"book_counts = {\n let book_obj = {}\n for(let i = 0; i < data.length; i++) {\n if(!(data[i].title in book_obj))\n book_obj[data[i].title] = 0\n book_obj[data[i].title] += 1\n }\n return book_obj\n}","pinned":true,"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":554,"value":"link_data = data.filter(d => d.rank_last_week != 0)","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"$35","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"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"