2c:null 2d:["$","title",null,{"children":"Accuracy of visual encodings | David Tittsworth | Observable"}] 32:T70a,selectablesData = { const data = [{ text: "Position", imageUrl: await FileAttachment("position.png").url(), description: "Positions provide the most accurate judgements.", correctPosition: 7, }, { text: "Color Shading", imageUrl: await FileAttachment("shading.png").url(), description: "Color shading provides almost the most generic judgements.", correctPosition: 2, }, { text: "Volume", imageUrl: await FileAttachment("volume.png").url(), description: "Volume is close to the middle, but leans towards more generic judgements.", correctPosition: 3, }, { text: "Color Saturation", imageUrl: await FileAttachment("saturation.png").url(), description: "Color saturation provides the most generic judgements.", correctPosition: 1, }, { text: "Direction", imageUrl: await FileAttachment("direction.png").url(), description: "Direction is close to middle, but leans towards more accuracy.", correctPosition: 5, }, { text: "Length", imageUrl: await FileAttachment("length.png").url(), description: "Length provides almost the most accurate judgements.", correctPosition: 6 }, { text: "Area", imageUrl: await FileAttachment("area.png").url(), description: "Area is right in the middle.", correctPosition: 4 }] const selectableWidth = 120; const selectableHeight = 100; const selectablesPerRow = Math.floor(width / selectableWidth); function getX(d, i) { return (i % selectablesPerRow) * selectableWidth } function getY(d, i) { return Math.floor(((i + 1) * selectableWidth) / width) * selectableHeight; } for (let i = 0; i < data.length; i++) { data[i].x = getX(data[i], i); data[i].y = getY(data[i], i); } return data }33:T449,html``34:[{"id":"c11f7186d34c95a9c735c48e8388a9f94ae6ef1ddc9be84b38fe0341607fea049ac811ab17c04ca899e7c875ae84a2f6b497d1a744f266efaf835c4913787390","href":"https://static.observableusercontent.com/files/c11f7186d34c95a9c735c48e8388a9f94ae6ef1ddc9be84b38fe0341607fea049ac811ab17c04ca899e7c875ae84a2f6b497d1a744f266efaf835c4913787390","name":"saturation.png","type":"image/png","lastModified":1600802705448.268,"size":8621},{"id":"e06681e8218ad55385b07404c8affbe74bf7af146225dd09dfa5069a1f67f7366788b43d21f492ca699be8f686eff865b6dad43ec9159994ab5db2db015b134d","href":"https://static.observableusercontent.com/files/e06681e8218ad55385b07404c8affbe74bf7af146225dd09dfa5069a1f67f7366788b43d21f492ca699be8f686eff865b6dad43ec9159994ab5db2db015b134d","name":"answers.png","type":"image/png","lastModified":1600880077394.817,"size":82625},{"id":"32a850420c2b2897c8186c59951553637d319bd751e4e3d58d52ae2f3759019c05cd12984731c176f78fd0efa595b42d7b7b46fa7debd714a7da0ddb4d80bfa6","href":"https://static.observableusercontent.com/files/32a850420c2b2897c8186c59951553637d319bd751e4e3d58d52ae2f3759019c05cd12984731c176f78fd0efa595b42d7b7b46fa7debd714a7da0ddb4d80bfa6","name":"volume.png","type":"image/png","lastModified":1600798950442.286,"size":12530},{"id":"d8eeb3ed4d90aa08de92b377d437f0fce76ff9108dde3c4499b995fc833202cc5cdeff5206e3bf308ab1a44d12a029ddcdf5e6f9919a829e0b9df85edd006837","href":"https://static.observableusercontent.com/files/d8eeb3ed4d90aa08de92b377d437f0fce76ff9108dde3c4499b995fc833202cc5cdeff5206e3bf308ab1a44d12a029ddcdf5e6f9919a829e0b9df85edd006837","name":"area.png","type":"image/png","lastModified":1600802829406.241,"size":12362},{"id":"55cec38c8e76da15f555aca6fcbe11278e58d48bd3999e4b170a1f250a31832008e1180e1423c1f8c3b175bcf9f8f5e72dcbb1cbaf87f70667548424349a8e1a","href":"https://static.observableusercontent.com/files/55cec38c8e76da15f555aca6fcbe11278e58d48bd3999e4b170a1f250a31832008e1180e1423c1f8c3b175bcf9f8f5e72dcbb1cbaf87f70667548424349a8e1a","name":"length.png","type":"image/png","lastModified":1600802829453.876,"size":16266},{"id":"c51d5a88e4c5e8bec11147b596cbcac268d11600f95952755fa3893e53f82f0424233b7f2c79d51fc551b14b8357d60d3f863e49ff96f28681c027f057b7496f","href":"https://static.observableusercontent.com/files/c51d5a88e4c5e8bec11147b596cbcac268d11600f95952755fa3893e53f82f0424233b7f2c79d51fc551b14b8357d60d3f863e49ff96f28681c027f057b7496f","name":"shading.png","type":"image/png","lastModified":1600802829473.795,"size":10237},{"id":"bc162663e2390345ee2202e22a16fda42ce5e847c53255861e15f112be02941e3d30bb9f8c18691236a9236376e99b8abe3d761205bc12bb95461afb0a0fcc0e","href":"https://static.observableusercontent.com/files/bc162663e2390345ee2202e22a16fda42ce5e847c53255861e15f112be02941e3d30bb9f8c18691236a9236376e99b8abe3d761205bc12bb95461afb0a0fcc0e","name":"position.png","type":"image/png","lastModified":1600802829502.763,"size":15020},{"id":"c8475978cf62b1dfccce174104a81d6576cf42be9baeb0998f4a519ef4ed1e222b6ce6aad25d2f393a95d08a9230d65935b9ddbd302934a00060a2aa2d85e972","href":"https://static.observableusercontent.com/files/c8475978cf62b1dfccce174104a81d6576cf42be9baeb0998f4a519ef4ed1e222b6ce6aad25d2f393a95d08a9230d65935b9ddbd302934a00060a2aa2d85e972","name":"direction.png","type":"image/png","lastModified":1600802829451.793,"size":6516}] 30:{"id":"39b8b571568e1b9b","slug":"accuracy-of-visual-encodings","title":"Accuracy of visual encodings","thumbnail":"32705dadb125c8cee7d11ba557018b1f6e55abd19c44098348cdb743a563db93","access_level":"public","create_time":"$D2020-09-22T15:46:06.218Z","update_time":"$D2020-09-24T17:54:45.180Z","view_time":null,"first_public_time":"$D2020-09-23T22:11:52.255Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4dfcd480bbd72886","login":"stopyoukid","name":"David Tittsworth","avatar_url":"https://avatars-next.observableusercontent.com/29f6d13ac12f218d62203a21bd2eb3181c5d317241a794d072af6e37779ad5ec","tier":"starter_2024"},"version":312,"publish_version":312,"role":null,"authored":false,"authors":[{"type":"individual","id":"47807972bdcd7e05","login":"stopyoukid","name":"David Tittsworth","avatar_url":"https://avatars-next.observableusercontent.com/29f6d13ac12f218d62203a21bd2eb3181c5d317241a794d072af6e37779ad5ec","tier":null}],"members":[{"type":"individual","id":"47807972bdcd7e05","login":"stopyoukid","name":"David Tittsworth","avatar_url":"https://avatars-next.observableusercontent.com/29f6d13ac12f218d62203a21bd2eb3181c5d317241a794d072af6e37779ad5ec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Accuracy of visual encodings","cells":[{"id":0,"value":"md`\n# Accuracy of visual encodings\nClick and drag each of the encodings to where you believe it lies on the axis. If you are stuck, there is an answer button that you can click to show the answer.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"chart = {\n const dom = html`\n

\n \n

\n `\n \n renderSelectables(dom)\n return dom;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"{\n const imageUrl = await FileAttachment(\"answers.png\").url()\n return spoiler('Click to show answer', html`

`) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"function renderSelectables(dom) {\n const selectableContainer = d3.select(dom).select(\".selectables\");\n const selectables = \n selectableContainer\n .selectAll(\".selectable\")\n .data(selectablesData, d => d.text)\n .join(\"div\")\n .attr(\"class\", \"selectable\")\n .attr(\"title\", d => d.description)\n .style(\"left\", d => `${d.x}px`)\n .style(\"top\", d => `${d.y}px`)\n .call(drag)\n selectables.selectAll('.selectable-text')\n .data(d => [d])\n .join(\"div\")\n .attr('class', 'selectable-text')\n .text(d => d.text)\n selectables.selectAll('.selectable-image')\n .data(d => [d])\n .join(\"img\")\n .attr('class', 'selectable-image')\n .attr('src', d => d.imageUrl)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"drag = {\n\n function dragstarted(event, d) {\n //d3.select(this).raise().attr(\"stroke\", \"black\");\n }\n\n function dragged(event, d) {\n d.x = event.x;\n d.y = event.y;\n d3.select(this)\n .style(\"top\",`${d.y}px`)\n .style(\"z-index\", 10000)\n .style(\"left\", `${d.x}px`)\n }\n\n function dragended(event, d) {\n d3.select(this)\n .style(\"z-index\", null)\n\n }\n\n return d3.drag()\n .subject((event, d) => d)\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"/**\n * Function to hide the given node behind a button click\n */\nfunction spoiler(buttonText, spoilerNode) {\n const id = `spoiler_${Math.random()}`.replace(\".\", \"_\");\n const result = html`\n \n

\n `\n const spoilerToggle = result.querySelector(\".spoiler-toggle\")\n const spoilerContainer = result.querySelector(\".spoiler-container\")\n spoilerContainer.appendChild(spoilerNode);\n window.toggleElement = (element, toggle) => {\n if (element) {\n debugger;\n const visible = toggle != null ? toggle : element.style.display == \"none\";\n element.style.display = visible ? null : \"none\";\n }\n }\n \n spoilerToggle.addEventListener(\"click\", () => window.toggleElement(spoilerContainer))\n \n window.toggleElement(spoilerContainer, false);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"