3f:null 40:["$","title",null,{"children":"picture homework with D3 | Mary Kromer | Observable"}] 46:[] 44:{"id":"5667a6cd5e7d18af","slug":"picture-homework-with-d3","title":"picture homework with D3","thumbnail":"13af77eee1d197476bd812f7e410125885443be0d3bfa23c20408f76357b4e20","access_level":"public","create_time":"$D2020-09-10T16:22:12.405Z","update_time":"$D2020-09-10T16:30:09.639Z","view_time":null,"first_public_time":"$D2020-09-18T19:14:45.172Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6a3ee212add6b33e","login":"mkrom","name":"Mary Kromer","avatar_url":"https://avatars-next.observableusercontent.com/a42e46ff651f9807d4df24d7b00ee3324eb13db8c5a754d3139f0abb7b81c216","tier":"starter_2024","bio":"","following":false},"version":179,"publish_version":179,"role":null,"authored":false,"authors":[{"type":"individual","id":"2a5c85ff0f624da6","login":"mkrom","name":"Mary Kromer","avatar_url":"https://avatars-next.observableusercontent.com/a42e46ff651f9807d4df24d7b00ee3324eb13db8c5a754d3139f0abb7b81c216","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"2a5c85ff0f624da6","login":"mkrom","name":"Mary Kromer","avatar_url":"https://avatars-next.observableusercontent.com/a42e46ff651f9807d4df24d7b00ee3324eb13db8c5a754d3139f0abb7b81c216","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"8159d7c217a9b915","slug":"homeworks","title":"Homeworks","owner":{"id":"6a3ee212add6b33e","login":"mkrom","name":"Mary Kromer"}},"type":"notebook","body":{"titling":"auto","title":"picture homework with D3","cells":[{"id":0,"value":"md`# picture homework with D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"svg = {\n const svg = html``\n const container = d3.select(svg)\n \n const pathData = d3.line().x(d => d.x).y(d => d.y).curve(d3.curveStep)(data)\n container.append(\"path\")\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"red\")\n .attr(\"opacity\",.75)\n .attr(\"d\",pathData)\n \n for(let i = 0; i < 1000; i = i + 1){\n const x = Math.random()*600\n const y = Math.random()*300\n const r = Math.random()*10\n container.append(\"circle\")\n .attr(\"cx\",x)\n .attr(\"cy\",y)\n .attr(\"r\",r) \n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"stroke\", \"black\")\n .attr(\"opacity\",.5)\n }\n \n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"data = {\n const data = []\n for(let i = 0; i < 100 ; i = i + 1){\n data.push({x:Math.random()*600, y:Math.random()*300})\n\n } \n return data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html`\n

CSS

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"