3f:null 40:["$","title",null,{"children":"Lab 5 - Filtering | Colin Shaw | Observable"}] 46:T446,html `

`47:[] 44:{"id":"8b51fc0ec2bd9f06","slug":"lab-5-filtering","title":"Lab 5 - Filtering","thumbnail":"794c057941134435eca73597b2f0f6897af944742440caaafc39af56f1e8a6f1","access_level":"public","create_time":"$D2020-02-12T16:35:05.784Z","update_time":"$D2020-02-12T19:01:01.922Z","view_time":null,"first_public_time":"$D2020-02-13T18:46:57.774Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8e065e0ac7e06128","login":"colinshaw","name":"Colin Shaw","avatar_url":"https://avatars-next.observableusercontent.com/cd76d90cb3422163e9ff6391296ccebf1781ddd4f9809750d53e106b988fc63d","tier":"starter_2024","bio":"","following":false},"version":719,"publish_version":719,"role":null,"authored":false,"authors":[{"type":"individual","id":"0c5452da3a8143fa","login":"colinshaw","name":"Colin Shaw","avatar_url":"https://avatars-next.observableusercontent.com/cd76d90cb3422163e9ff6391296ccebf1781ddd4f9809750d53e106b988fc63d","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0c5452da3a8143fa","login":"colinshaw","name":"Colin Shaw","avatar_url":"https://avatars-next.observableusercontent.com/cd76d90cb3422163e9ff6391296ccebf1781ddd4f9809750d53e106b988fc63d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Lab 5 - Filtering","cells":[{"id":0,"value":"md`\n# Lab 5 - Filtering\n### PURPOSE\nEnhance a static visualization by implementing interactive filtering controls. Exercise\nimplementing dynamic behaviour with D3’s enter and exit selections. \n\n### TASKS\nIn this lab you are given a static visualization of the Diamonds dataset that depicts the\nrelation between diamond price and carat in a scatterplot. You are asked to make this\nvisualization interactive by implementing filtering functionality. \n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"md \n`\nNote the structure of the document. You will find a range slider for the continuous attribute price, and a set of checkboxes for the ordinal attribute cut. Price is mapped to vertical position in the scatterplot, while cut\nis mapped to color.\n\n**For the purposes of this lab, you do not need to edit the CSS or the HTML structure of\nthe page.** \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"md\n`\n### 1. Upon loading the data, set the correct minimum and maximum values for the range slider.\n\nThe range slider is initialized with the *minPrice* and *maxPrice* variables declared below. Update the price slider values to match the correct minimum and maximum prices in data. \n\n**Remember you can use d3.min, d3.max, and d3.extent to get an array’s extrema.\nArray’s map function may be useful**. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"md \n`\n#### 2. Filter the data and update the display whenever a slide event is triggered.\n\nYou can choose among many filtering strategies. A basic strategy is to keep two arrays:\none with all records and other with the filtered data. When a filter changes, the second\narray is overridden with the result of calling Array.filter on the first.\nOnce you have the filtered array, bind it to your D3 selection. Make sure you remove\nextra elements, which are stored in the exit selection. And create new elements, which\nare accessible under the enter selection.\n\n\n**If you need to refresh your understanding of D3 selections, [check out this jsfiddle](https://jsfiddle.net/rafa_veras/qj4k7agz/), which\nmakes use of D3 enter, exit, and update; or [read this](https://bost.ocks.org/mike/join/) concise explanation by D3’s\nauthor Mike Bostock. **\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md \n`\n#### 3. Filter the data and update the display when a checkbox event is triggered.\n\n\nThe filters *Price and Cut* should work together. That is, if an unchecked box is\nchecked, then only the records that correspond to that box AND lie within the currently\nselected price range should enter the display. Likewise, when the slider is changed, \ndata records should not enter the display if they have a cut value that is not selected in\nthe cut filter. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"md\n`\n#### 4. Update the scale and axis.\n\nThe price axis should respond to changes in the filter. In D3, axes are created from\nscales:\n\n\\`\\`\\`\nvar yAxis = d3.axisLeft(yScale);\n\\`\\`\\`\n\nThis is very convenient because the yScale is probably already defined (it was needed\nto determine the vertical position of points).\nThe axis is then drawn by creating an SVG group and calling the axis on the\ncorresponding selection.\n\n\\`\\`\\`\nd3.select('svg')\n .append(\"g\")\n .attr(\"transform\", \"translate(40,0)\")\n .call(yAxis);\n\\`\\`\\`\nIn the code above, yAxis will “create itself” inside the SVG group (“g element”). It knows\nthe proper axis values from the scale we passed at creation time.\nIn order to update the axis, you just need to recreate the scale with the new data, then\nempty the SVG group that wraps the old axis, and repeat the axis creation calls. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"md\n`\n### SUBMISSION INSTRUCTIONS\n 1. Download the code by clicking the menu button at the top of the page, and enable link-sharing.\n 2. Rename the downloaded code zip folder to *Lab4-firstName-lastName.zip*, and submit the file with your **published observable link** to the BlackBoard dropbox.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"data1 = d3.csv(\"https://raw.githubusercontent.com/rafaveguim/toy-datasets/master/diamonds.tsv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"// UNCOMMENT THE FOLLOWING LINE WHEN TESTING (LESS DATA, FASTER TESTING)\ndata = data1.filter((d,i) => i % 1000 ==0); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"viewof priceSlider = rangeSlider({\n min: minPrice,\n max: maxPrice,\n value: this ? this.value : [150, 250], // Default value\n format: (\"$\"),\n color: '#3b99fc',\n title: 'Price',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"chart = {\n const svg = d3.selectAll(\"#vis\")\n .attr(\"viewBox\", [0, 0, width, height])\n \n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n var circles = svg\n .selectAll('circle')\n .data(data)\n .enter()\n .append('circle');\n \n circles.attr('cx', (d) => xScale(+d.carat))\n .attr('cy', (d) => yScale(+d.price))\n .attr('r', 1)\n .attr('fill', (d) => colorScale(d.cut));\n \n var legend = d3Legend\n .legendColor()\n .scale(colorScale)\n \n svg.append(\"g\")\n .attr(\"class\", \"legend\")\n .style('font-size', 12)\n .style('font-family', 'sans-serif')\n .attr(\"transform\", \"translate(50,20)\")\n .call(legend)\n \n d3.selectAll(\"#checkbox\").on(\"click\",update());\n d3.selectAll(\".range-slider\").on(\"click\", update());\n //update();\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"function update(){\n\nvar choices = [];\nvar checkboxes = d3.selectAll(\"#checkbox\");//.on(\"click\", function(){\n checkboxes.each(function(d){\n var cbox = d3.select(this);\n if(cbox.property(\"checked\")){\n choices.push(cbox.property(\"value\"));\n }\n });\n \n //checkbox filter\n var filterData;\n if(choices.length > 0){\n filterData = data.filter(function(d,i){return choices.includes(d);});\n } else {\n filterData = data; \n }\n filterData = filterData.filter(d => d.price >= priceSlider[0] && d.price <= priceSlider[1]);\n \n var circles = d3.selectAll(\"circle\");\n \n circles.data(filterData).enter()\n .append('circle');\n \n circles.attr('cx', (d) => xScale(+d.carat))\n .attr('cy', (d) => yScale(+d.price))\n .attr('r', 1)\n .attr('fill', (d) => colorScale(d.cut));\n \n circles.exit().remove();\n \n d3.selectAll(\".axes\").remove();\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"// Price Slider update function\n// d3.selectAll(\".range-slider\").on(\"click\", function() {\n// var filterData = test.filter(d => d.price >= priceSlider[0] && d.price <= priceSlider[1]);\n \n// var circles = d3.selectAll(\"circle\");\n \n// circles.data(filterData).enter()\n// .append('circle');\n \n// circles.attr('cx', (d) => xScale(+d.carat))\n// .attr('cy', (d) => yScale(+d.price))\n// .attr('r', 5)\n// .attr('fill', (d) => colorScale(d.cut));\n \n// circles.exit().remove();\n \n// })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"// Set the correct minimum price here\nminPrice = d3.min(data, d => d.price)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"// Set the correct maximum price here\nmaxPrice = d3.max(data, d => d.price)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"xScale = d3.scaleLinear()\n .domain(d3.extent(data, d => d.carat)).nice()\n .range([margin.left, width - margin.right]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"yScale = d3.scaleLinear()\n .domain(d3.extent(data, d => d.price)).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"class\", \"axes\")\n .call(d3.axisBottom(xScale).ticks(width / 80));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"axes\")\n .call(d3.axisLeft(yScale));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"colorScale = d3.scaleOrdinal()\n .domain([\"Fair\", \"Good\", \"Very Good\", \"Premium\", \"Ideal\"])\n .range([\"#E67838\", \"#DB9B19\", \"#BDBE18\", \"#8DDD4B\", \"#23F990\"]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"shape = d3.scaleOrdinal(data.map(d => d.category), d3.symbols.map(s => d3.symbol().type(s)()))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"height = 330 // SVG height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"width = 1050 // SVG width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"d3Legend = require('d3-svg-legend')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"// RangeSlider - https://observablehq.com/@mootari/range-slider\nimport {rangeSlider} from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"