2b:null 2c:["$","title",null,{"children":"A5: Lego, Toy or Collector's Item? | ShamPow | Observable"}] 31:T604,//needs to be top 10 by theme_name { const x = vl.x().fieldQ('piece_count').title(null); const brush = vl.selectInterval().encodings('x').resolve('global').empty('all'); const multi = vl.selectMulti().encodings('x').resolve('global').empty('all'); const click = vl.selectSingle('Select') // name the selection 'Select' const plot1 = vl.markArea({clip:true,interpolate:"monotone", opacity:0.8}) .width(1000) .height(600) .data('https://raw.githubusercontent.com/axz2000/data/master/lego_themes.csv') .encode( vl.x().fieldN("year").title('Year'), vl.y().fieldQ("num_parts").stack("center").sort('descending').title('Aggregate Number of Parts'), vl.tooltip(['num_parts', 'theme_name', 'year']), vl.order('theme_name'), vl.color().value('lightgray') .if(click, multi, vl.color().fieldN('theme_name').title('Theme Name')) ) .width(width) .height(400) .transform(vl.filter(brush,click, multi)); const line = vl.markBar({opacity:0.8}) .select(click,brush,multi) .encode( vl.y().count('theme_name').title('Number of Years Sold'), vl.x().fieldN('theme_name').title('Theme Name'), vl.tooltip(['theme_name']), vl.order('theme_name'), vl.color().value('lightgray') .if(click,multi, vl.color().fieldO('theme_name')) ) .width(width); return vl.vconcat(plot1, line.select(brush).height(200)) .data('https://raw.githubusercontent.com/axz2000/data/master/lego_themes.csv') .autosize({type: 'fit-x', contains: 'padding'}) .render(); }32:T4e0,md`

# Interactive Scatter Plot and Bar Chart of LEGO Sets ### Description: Scatter plot and bar chart of LEGO sets with list price and piece count. This allows the viewer to explore the relationship of set age designation, set complixity, set difficulty, and price per part in one visual. **Points:** Quantitative price and piece count encoding - both are represented on a log scale due to the vast difference in total part counts (1 to 7500) *and* list price (2 to 800). **Color:** Tracks the price per part, a key metric for lego afficionados of the **value** of a set. Anything below 12 cents/piece is typically seen as a fair to good value a set. **Area:** Categorical approach to age suggestions on LEGO sets. Shows the value distribution among sets in each category ### Interactive Elements: Mouseover scatter plot to see exact *piece count, list price, set name, price per piece bin, exact price per piece, age category, and difficulty*. Click through the different categories in the bar chart below to highlight the corresponding points. Hold shift and click multiple age categories to explore multiple age categories over time. Brush categories in the bar chart to see semantic zoom into the scatter plot (for a closer look).`33:T702,{ const x = vl.x().fieldQ('piece_count').title(null); const brush =vl.selectInterval().encodings('x').resolve('global'); const multi = vl.selectMulti().encodings('x').resolve('global').empty('all'); const click = vl.selectSingle('Select') // name the selection 'Select' const scale = { domain: ['> 25 cents/piece','< 25 cents/piece','< 12 cents/piece','< 10 cents/piece', '< 8 cents/piece' ], range: ["#d7191c","#fdae61","#ffffbf","#a6d96a","#1a9641"] }; const plot1 = vl.markPoint({filled: true, opacity: 0.55, stroke: 'black', strokeWidth:0.1, size:60}) .encode( vl.color().value('lightgray') .if(click,multi, vl.color().fieldO('bins').scale(scale).title('Price per Part')), vl.order().fieldQ('star_rating').sort('ascending'), vl.x().fieldQ('piece_count').scale({type: 'log'}).title('Log-Scaled Piece Count'), vl.tooltip(['piece_count','list_price','set_name', 'bins', 'ppp','ages', 'review_difficulty']), vl.y().fieldQ('list_price').scale({type: 'log'}).title('Log-Scaled List Price') ) .width(width) .height(300) .transform(vl.filter(brush,multi,click)); const line = vl.markBar({opacity:0.75}) .select(click,multi,brush) .encode( vl.y().count('set_name').title('Number of Available Sets'), vl.x().fieldN('ages').title('Age Suggestion').sort('ascending'), vl.tooltip(['piece_count','list_price','ppp','bins','set_name']), vl.color().value('lightgray') .if(click,multi, vl.color().fieldO('bins').scale(scale).title('Price per Part')) ) .width(width); return vl.vconcat(plot1, line.select(brush).height(200)) .data('https://raw.githubusercontent.com/axz2000/data/master/lego_scatter.csv') .autosize({type: 'fit-x', contains: 'padding'}) .render(); }34:T430,md`

## Implementation #### What libraries, tools, and platforms did you use to build the final visualization? Did you use specific techniques for data loading? Did you need to address performance issues? For our final visualization, we used the Observable platform and the Vega Lite API. To account for different types of data analysis and their visualizations, we ended up cleaning and analyzing most of our data through Python Pandas and plugging in the newly cleaned dataset to the javascript code. We had trouble merging our datasets from rebrickable and brickset since they used different systems to ID their sets, resulting in only a few matches between them. We also thought about pulling images for different sets on the tooltip for our scatter plot but could not manage to do so automatically so we scrapped the feature. We also found an interesting potential bug in one of our visualizations where the bin color the data would change when we activated the ‘tooltip’ which has no bearing over the data. We plan on potentially submitting a bug report. `35:[] 2f:{"id":"39ed30492f62ed16","slug":"untitled","title":"A5: Lego, Toy or Collector's Item?","thumbnail":"105b0178c8e4b5d1667c0616ae58a3e705d8f8d72b898fb845d272023f9a6535","access_level":"public","create_time":"$D2019-12-08T18:36:13.089Z","update_time":"$D2021-01-12T19:40:02.175Z","view_time":null,"first_public_time":"$D2019-12-08T19:53:12.468Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"355287568c324edf","login":"williamshamma","name":"ShamPow","avatar_url":"https://avatars-next.observableusercontent.com/7095c3ff1a6862f80ef7294bdc919117d923ff74bcd30d915a7deb888a436345","tier":"starter_2024"},"version":794,"publish_version":794,"role":null,"authored":false,"authors":[{"type":"individual","id":"273ac36a18dc5f14","login":"williamshamma","name":"ShamPow","avatar_url":"https://avatars-next.observableusercontent.com/7095c3ff1a6862f80ef7294bdc919117d923ff74bcd30d915a7deb888a436345","tier":null}],"members":[{"type":"individual","id":"273ac36a18dc5f14","login":"williamshamma","name":"ShamPow","avatar_url":"https://avatars-next.observableusercontent.com/7095c3ff1a6862f80ef7294bdc919117d923ff74bcd30d915a7deb888a436345","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"84ef2d753dadcc26","slug":"visualization-pieces","title":"Visualization Pieces","owner":{"id":"355287568c324edf","login":"williamshamma","name":"ShamPow"}},"type":"notebook","body":{"title":"A5: Lego, Toy or Collector's Item?","cells":[{"id":0,"value":"md`# A5: Lego, Toy or Collector's Item?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"md`\n

\n# Number of Parts per Set Binned by Year`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"vl.markBar()\n .data('https://raw.githubusercontent.com/axz2000/data/master/lego_sets.csv')\n .encode(\n vl.x().fieldN('year').bin({maxbins: 50}).title('Year'),\n vl.y().fieldQ('log_parts').bin({maxbins: 25}).title('Log Scale - Number Parts in a Set'),\n vl.color().count().scale({range:[\"lightgrey\",\"black\"]}).title('Count of Relevant Sets')\n \n )\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"md`\n

\n# Basic - Non Basic Piece Count over the Years`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"vl.markBar()\n.width(700)\n.data('https://raw.githubusercontent.com/axz2000/data/master/lego_basic_count.csv')\n.encode(\n vl.x().fieldN(\"year\").title('Year'),\n vl.y().fieldQ(\"quantity\").title('Number of Parts'),\n vl.color().fieldN(\"basic\").scale({domain:['non basic', 'basic'],range:[\"#b2df8a\",\"#1f78b4\"]}).title('Part Proportions'),\n vl.tooltip([\"year\", \"quantity\"]),\n vl.order().fieldQ(\"year\")\n )\n.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"md`\n

\n# Basic - Non Basic Piece Count Proportion over the Years\nNotw: In 1962 LEGO changed the classification of \"basic\" and \"non-basic\" parts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"vl.markBar()\n.width(725)\n.data('https://raw.githubusercontent.com/axz2000/data/master/lego_perc.csv')\n.encode(\n vl.x().fieldN(\"year\").title('Year'),\n vl.y().fieldQ(\"perc\").title('Number of Parts'),\n vl.color().fieldN(\"basic\").scale({domain:['non basic', 'basic'],range:[\"#b2df8a\",\"#1f78b4\"]}).title('Part Proportions'),\n vl.tooltip([\"year\", \"perc\"]),\n vl.order().fieldQ(\"year\")\n )\n.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`\n

\n# Interactive Stream Graph and Bar Chart of LEGO Themes and Part Counts\n\n\n### Description:\nStream Graph with LEGO Part totals represented by the area of the color band from 1953 to 2017 (years with available data). \n\n**Band Size:** number of LEGO parts in each set \n\n**Theme Name:** theme name with corresponding color (some are duplicated because of the number of themes explored)\n\n**Note:** All themes named are themes with 15+ years of sets built. 'All Others' comprise the aggregate of all themes with less than 15 years of sets built.\n\n### Interactive Elements:\nMouseover stream to see exact *year, theme, number of parts*. Click through the different themes in the bar chart below to highlight the corresponding stream. Hold shift and click multiple themes to explore multiple themes over time. Brush themes in the bar chart to see semantic zoom into the time period the theme covers.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"md`\n

\n## Introduction\n\n#### An explanation of the problem and the motivation for solving it.\n\n\nAlthough we wanted to further our flight dataset analysis from A4 and A5, we couldn’t find a dataset that had sufficient information for the problem we tried to solve. That is how our group arrived at the LEGO dataset since we all had a common interest in LEGOs. When we decided that we would work on LEGOs, all of us immediately talked about the price of the LEGO sets. LEGO sets in our childhood consisted of random, basic blocks that we used to build simple houses, cars, and other imaginative figures. However, LEGO sets today range from educational children’s set, all the way to the StarWars themed sets that can cost a couple of hundred dollars. Because of this phenomenon, we wanted to delve deeper into how LEGO sets evolved over the years, the price breakdown of each set, and the piece/parts breakdown of each set.`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"md`\n

\n## Related Work\n#### A description of prior work or research related to your project.\n\nBefore starting our project, we looked into the annual reports of LEGO, as well as the history of the LEGO company. One thing that we noted was the LEGO crisis of 2004 and how the company rebranded itself so that they constantly made huge jumps in their return on equity. This gave us a clear direction in terms of which areas and approaches we should focus on when cracking our dataset. Moreover, we looked into past data projects related to LEGOs, which mainly focused on the evolution of color schemes in sets over years and the set of colors used for different types of themes. `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"md`\n

\n## Methodology\n#### An explanation of the data, analysis, techniques, and algorithms you used.\n\nWe initially found two datasets focusing on sets/parts and prices from Bricklink and Rebrickable. However, we struggled to link the two different datasets, so we decided to stick with the Rebrickable datasets. Most of the data analysis involved joining different tables such as the parts and sets tables and grouping them by themes, years, and prices. One of the most technical parts of cracking the data involved an algorithm that did regex matching for the basic/non-basic part names. We tried to manually match the piece name to classify them into basic / non-basic parts.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"md`\n

\n## Design\n#### What were the primary considerations for the visual and interaction encodings you chose? Were there alternatives that you attempted but needed to abandon?\n\nWe initially wanted to make visualizations that users can easily interact with and navigate through. This involved simple graphs that could have different parts selected so that users can only focus on parts that they want to learn more about. We also wanted to have more visualizations that are themed such as different shapes of lego parts and visualization of different themes of sets, but given the time constraint and the complexity of matching different parts to actual images, we had to abandon that idea.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"md`\n

\n## Discussion\nHow successful was your final visual encoding and interaction design? Analyze audience reaction to your work (whether critics, classmates, or other people.) Were there points of user confusion? What new insights or practices has your system enabled, for the intended audience, general audience, or yourself?\n\nWe believe that our visualization and analysis were thorough and truthful. We tried to clean only the most unnecessary data and keep even the outliers, even if that meant that our visualization needed extra work to encompass all of the analysis we have made. With the explanation and instructions before each visualization, we got a lot of feedback saying that it was easy to interact with our visualizations. However, we also got some feedback on the lack of storytelling--some critics thought that because of the abrupt transition between different visualizations, we were unclear on the storytelling aspect of the project, which we can definitely improve upon in the future.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"md`\n

\n## Future Work\nDescribe how you would extend or refine your project.\n\nWe anticipate moving the observable notebook to an actual website (web application) that can hold the stories and visualization to make a full story with the given dataset. In addition to hosting the actual website, we would like to add items that change and interact with the user upon scrolling so that the transition between different analytics can be smoother. Furthermore, in terms of the actual visualization itself, we would love to have more visual details such as actual lego pieces and forms instead of squares or graphs so that it connects better with the given theme and story of our project. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"md`\n

\n## Acknowledgments or References\nN/A`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"