2d:null 2e:["$","title",null,{"children":"📑 Exploration of Animated Objects | Olga Belitskaya | Observable"}] 33:[] 31:{"id":"f487688eb1d80499","slug":"exploration-of-animated-objects","title":"📑 Exploration of Animated Objects","thumbnail":"94059409581095e7d9560e008d8c873e78f812ce70224f4800a4231b01f94e21","access_level":"public","create_time":"$D2020-11-27T07:54:55.098Z","update_time":"$D2021-09-06T06:55:41.181Z","view_time":null,"first_public_time":"$D2020-11-27T09:13:47.204Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"98198089abd4b9a8","login":"olgabelitskaya","name":"Olga Belitskaya","avatar_url":"https://avatars-next.observableusercontent.com/efc5a1fdd47c22643bdfdce309fc023e67a3769736526e3805f1df287d3c1b68","tier":"starter_2024"},"version":407,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f76f5ed10936f426","login":"olgabelitskaya","name":"Olga Belitskaya","avatar_url":"https://avatars-next.observableusercontent.com/efc5a1fdd47c22643bdfdce309fc023e67a3769736526e3805f1df287d3c1b68","tier":null}],"members":[{"type":"individual","id":"f76f5ed10936f426","login":"olgabelitskaya","name":"Olga Belitskaya","avatar_url":"https://avatars-next.observableusercontent.com/efc5a1fdd47c22643bdfdce309fc023e67a3769736526e3805f1df287d3c1b68","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"📑 Exploration of Animated Objects","cells":[{"id":0,"value":"md`# 📑 Exploration of Animated Objects`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## 🤖 Markdown Cells & HTML Headers`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"{const md_cell1=md`### 🌈 Color Interpolation for Markdown Cells`;\n md_cell1.style.color=d3.interpolateRainbow(now%60000/10000);\n return md_cell1;}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"html`

${randemo}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"randemo={while (true) {\n yield d3.shuffle([...'🐀🐁🐂🐃🐄🐅🐆🐇🐈🐉🐊🐋🐌🐍🐎🐏🐐🐑🐒🐓🐔🐕🐖🐗🐘🐙🐚🐛🐜🐝🐞🐟'].slice())\n .slice(Math.floor(Math.random()*30)+1)\n .sort(d3.ascending);\n await Promises.delay(3000)}; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`### 🕒 ${new Date(now).toLocaleString()}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"{const html_header=html`

🌈 Color Interpolation for HTML Headers

`;\n html_header.style.color=d3.interpolateSinebow(now/6000);\n return html_header}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`## 🤖 Charts`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"margin=({top:20,right:20,bottom:20,left:60})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"height=250","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"viewof play_button_1=html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"{play_button_1; for (let i=1; i\n ${d3.select(line_path(customers)).call(reveal).node()}\n ${d3.select(svg``).call(xAxis).node()}\n ${d3.select(svg``).call(yAxis).node()}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"viewof input_1=html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"reveal=path=>\npath.transition().duration(7000).ease(d3.easeLinear)\n .attrTween('stroke-dasharray',function() {\n const length=this.getTotalLength();\n return d3.interpolate(`0,${length}`,`${length},${length}`);})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"x=d3.scaleLinear()\n .domain([0,customers.length])\n .range([margin.left,width-margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"y=d3.scaleLinear()\n .domain([0,d3.max(tr_customers[`${input_1}`])])\n .range([height-margin.bottom,margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"xAxis=(g,scale=x)=>g\n .attr('transform',`translate(0,${height-margin.bottom})`)\n .call(d3.axisBottom(scale).ticks(width/80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"yAxis=(g,scale=y)=>g\n .attr('transform',`translate(${margin.left},0)`)\n .call(d3.axisLeft(scale).ticks(height/40))\n .call(g=>g.select('.domain').remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"line=d3.line().x(function(d,i) {return x(i);})\n .y(function(d) {return y(d[`${input_1}`]);})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"function line_path(data) {\n return svg``}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## 🤖 Modules & Data`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"url='https://raw.githubusercontent.com/OlgaBelitskaya/'\n .concat('machine_learning_engineer_nd009/master/')\n .concat('Machine_Learning_Engineer_ND_P3/customers.csv')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"customers=d3.csv(url,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"tr_customers=Object.assign(...Object.keys(customers[0])\n .map(key=>({[key]:customers.map(o=>o[key])})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3=require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"