2b:null 2c:["$","title",null,{"children":"Interactivity Lab | cbudamagunta1 | Observable"}] 31:T713,md` ### Instructions Implement one or more of the following actions when the mouse is hovered over a bar (use the [\`mouseover\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event) or [\`mouseenter\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event) event). Restore the visualization to its normal state when the mouse is no longer hovered over a bar (use the [\`mouseout\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event) or [\`mouseleave\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event\) event). - Fade all of the non-hovered bars, essentially *brushing* the hovered bar. You can use [\`fill-opacity\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity) to control how transparent or opaque a bar appears. - Show the letter codeword as an [SVG \`text\` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text) above the bar. - Show a dotted reference line using an [SVG \`line\` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line) at the y-axis position of that letter's frequency. - Show the letter's frequency value as an [SVG \`text\` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text) in the y-axis next to the reference line. The [d3-format](https://github.com/d3/d3-format) module may be useful here. *This should action not be implemented until the reference line is implemented.* - Use smooth transitions for all of the hover actions, so elements smoothly appear on hover. The [d3-transition](https://github.com/d3/d3-transition) module will be useful here. Implement as many of the above actions you can within the provided time. You only need to implement one action to receive participation credit. `32:Tdee,md` ### Submission Follow the steps below to submit your lab: 1. Sign in with the Github account you use for this class. 2. Click the button at the top of the notebook and then the **Fork** button from the menu. 3. Click the button at the top of the notebook and select **Enable link sharing** from the menu. 4. Copy and paste the link to this notebook into Canvas. You can submit the link to this notebook and continue working up until the deadline. If you choose this option, make sure you click the **Reshare** button after making changes. If you forget, **your changes will not be visible** to anyone else (including the teacher assistant or instructor). `33:[{"id":"b0262bd84730e6993a84c99ca236f8c3a271c2b9b8eae696683dc57744791c3bbbfbf61e6f48198c700b391f789ae41fb1cc1b6d1d03bd99482eb27ec83bf242","href":"https://static.observableusercontent.com/files/b0262bd84730e6993a84c99ca236f8c3a271c2b9b8eae696683dc57744791c3bbbfbf61e6f48198c700b391f789ae41fb1cc1b6d1d03bd99482eb27ec83bf242","name":"demo.gif","type":"image/gif","lastModified":1582853497628.115,"size":2183871}] 2f:{"id":"5ca62cc3579dc2ce","slug":null,"title":"Interactivity Lab","thumbnail":"45854f0a24c1b71108b1122491a2b9408ed70a2c1f445ea065dd55004191a744","access_level":"unlisted","create_time":"$D2020-02-28T01:31:37.628Z","update_time":"$D2020-02-28T03:43:53.178Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"3b79fc1a415b8495","slug":"interactivity-lab","title":"Interactivity Lab","owner":{"id":"5daeb3b295f61c60","login":"sjengle","name":"Sophie Engle"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6f5f7aaf393148ad","login":"cbudamagunta1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a0245746acd21641cdb6c65f6a6790525c36b904921271979b970bdff873ac2d","tier":"starter_2024"},"version":167,"publish_version":167,"role":null,"authored":false,"authors":[{"type":"individual","id":"fceb4a552fb7005e","login":"cbudamagunta1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a0245746acd21641cdb6c65f6a6790525c36b904921271979b970bdff873ac2d","tier":null}],"members":[{"type":"individual","id":"fceb4a552fb7005e","login":"cbudamagunta1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a0245746acd21641cdb6c65f6a6790525c36b904921271979b970bdff873ac2d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interactivity Lab","cells":[{"id":0,"value":"md`\n# Interactivity Lab\n\nThis notebook is intended to be used for an in-class lab on interactivity. It is related to the other notebooks in this collection.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`Below is an example with all of the options implemented:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"FileAttachment(\"demo.gif\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`\n## Visualization\n\nThe following bar chart shows English-language letters in alphabetic order along the x-axis, and that letter's frequency along the y-axis.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height))\n .attr(\"id\", \"chart\");\n \n svg.append(\"g\")\n .attr(\"id\", \"x-axis\")\n .attr(\"transform\", `translate(${margin.left}, ${height - margin.bottom})`)\n .call(xaxis);\n \n svg.append(\"g\")\n .attr(\"id\", \"y-axis\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`)\n .call(yaxis);\n \n svg.append(\"g\")\n .attr(\"id\", \"bars\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`)\n .selectAll(\"rect\")\n .data(letters)\n .enter()\n .append(\"rect\")\n .attr(\"x\", d => x(d.letter))\n .attr(\"y\", d => y(d.frequency))\n .attr(\"width\", x.bandwidth())\n .attr(\"height\", d => innerHeight - y(d.frequency));\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"bars = d3.select(chart).select(\"g#bars\").selectAll(\"rect\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"brush = {\n const svg = d3.select(\"svg#chart\");\n \n bars.on(\"mouseover.brush\", function(d) {\n bars.filter(e => (d.letter !== e.letter))\n .transition()\n .style(\"fill\", \"#bbbbbb\");\n //.style(\"fill-opacity\", \"50%\");\n });\n \n bars.on(\"mouseout.brush\", function(d) {\n bars.transition()\n .style(\"fill\", \"\");\n //.style(\"fill-opacity\", \"100%\");\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"line = {\n const svgChart = d3.select(\"svg#chart\");\n \n bars.on(\"mouseover.line\", function(d) {\n svgChart.append(\"line\")\n .attr(\"id\", \"refLine\")\n .attr(\"x1\", 0)\n .attr(\"x2\", innerWidth + margin.left)\n .attr(\"y1\", y(d.frequency))\n .attr(\"y2\", y(d.frequency))\n .style(\"stroke\", \"red\")\n .style(\"stroke-dasharray\", 2)\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\n });\n \n bars.on(\"mouseout.brush\", function(d) {\n svgChart.selectAll(\"line\").remove();\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`## Scales ⚖️ and Axes 🪓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"x = d3.scaleBand()\n .domain(letters.map(d => d.letter))\n .range([0, innerWidth])\n .paddingInner(0.2)\n .paddingOuter(0.1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(letters, d => d.frequency)])\n .range([innerHeight, 0])\n .nice();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"xaxis = d3.axisBottom(x)\n .tickSize(0)\n .tickPadding(5);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"yaxis = d3.axisLeft(y)\n .tickValues(y.domain())\n .tickPadding(5);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"margin = ({\n left: 30, // left margin\n right: 5, // right margin\n top: 10, // top margin\n bottom: 15 // bottom margin\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"innerWidth = width - margin.left - margin.right;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"innerHeight = height - margin.top - margin.bottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {letters} from \"@sjengle/english-alphabet-dataset\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"letters","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"