2b:null 2c:["$","title",null,{"children":"In a dream I saw | Ben Garvey | Observable"}] 31:[] 2f:{"id":"879254f0bfeab239","slug":"in-a-dream-i-saw","title":"In a dream I saw","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2018-08-20T02:11:30.821Z","update_time":"$D2018-08-23T09:54:29.560Z","view_time":null,"first_public_time":"$D2018-08-20T04:13:56.254Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"4a7a81c4b995a82f","login":"bengarvey","name":"Ben Garvey","avatar_url":"https://avatars-next.observableusercontent.com/67019b2433e6482edcefba53f1b1768d9be40c20121c9ea154a755a28e23483a","tier":"starter_2024"},"version":194,"publish_version":194,"role":null,"authored":false,"authors":[{"type":"individual","id":"b15d593d6d699aa9","login":"bengarvey","name":"Ben Garvey","avatar_url":"https://avatars-next.observableusercontent.com/67019b2433e6482edcefba53f1b1768d9be40c20121c9ea154a755a28e23483a","tier":null}],"members":[{"type":"individual","id":"b15d593d6d699aa9","login":"bengarvey","name":"Ben Garvey","avatar_url":"https://avatars-next.observableusercontent.com/67019b2433e6482edcefba53f1b1768d9be40c20121c9ea154a755a28e23483a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"In a dream I saw","cells":[{"id":0,"value":"md`# In a dream I saw`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`

a black rectangle

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html`\n

but in the dream, it appeared when I touched the screen

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"html`\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"the_screen = d3.select(\"#the_screen\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"rects = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"the_screen.on(\"click\", function() { \n rects.push(d3.mouse(this)); \n the_screen.selectAll(\"rect\")\n .data(rects)\n .enter()\n .append(\"rect\")\n .attr(\"height\", 65)\n .attr(\"width\", 50)\n .attr(\"fill\", '#000000')\n .attr(\"x\", d3.mouse(this)[0])\n .attr(\"y\", d3.mouse(this)[1]);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"html`\nBut not like that.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"html`\nLike towels being layed at the beach.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"the_beach = d3.select(\"#the_beach\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"towels = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"the_beach.on(\"click\", function() { \n towels.push(d3.mouse(this)); \n the_beach.selectAll(\"rect\")\n .data(towels)\n .enter()\n .append(\"rect\")\n .attr(\"height\", 0)\n .attr(\"width\", 50)\n .attr(\"fill\", '#000000')\n .attr(\"x\", d3.mouse(this)[0])\n .attr(\"y\", d3.mouse(this)[1])\n .transition()\n .duration(500)\n .attr(\"height\", 65);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"html`\nBut you don't lay towels on the beach in a straight line.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"html`\nYou flip them out in front of you\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"html`\nand snap them back you want them.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"html`\nBut where do I want them?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"the_dream = d3.select(\"#the_dream\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"dreams = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"the_dream.on(\"click\", function() { \n dreams.push(d3.mouse(this)); \n the_dream.selectAll(\"rect\")\n .data(dreams)\n .enter()\n .append(\"rect\")\n .attr(\"height\", 0)\n .attr(\"width\", 0)\n .attr(\"fill\", '#000000')\n .attr(\"x\", d3.mouse(this)[0])\n .attr(\"y\", d3.mouse(this)[1] - 64)\n .transition()\n .duration(350)\n .attr(\"transform\", \"translate(-25, -45)\")\n .attr(\"height\", 65)\n .attr(\"width\", 50)\n .transition()\n .duration(1000)\n .attr(\"transform\", \"translate(-25, 0)\");\n\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"