3f:null 40:["$","title",null,{"children":"Snowflakes | Michelle Sharer | Observable"}] 46:T40a,{ const red = html``; const orange = html``; const yellow = html``; const green = html``; const blue = html``; const purple = html``; const pink = html``; const updateColorRange = color => { colorRange[0] = color; colorScale.range(colorRange); }; red.onclick = () => updateColorRange('red'); orange.onclick = () => updateColorRange('orange'); yellow.onclick = () => updateColorRange('yellow'); green.onclick = () => updateColorRange('green'); blue.onclick = () => updateColorRange('blue'); purple.onclick = () => updateColorRange('purple'); pink.onclick = () => updateColorRange('pink'); return html`${red} ${orange} ${yellow} ${green} ${blue} ${purple} ${pink}`; }47:[] 44:{"id":"32e9cd3be24c18d6","slug":"snowflakes","title":"Snowflakes","thumbnail":"bba37a035a3efee8c9c6f36d5ceee923272577361905fed843a991a027ec0f65","access_level":"public","create_time":"$D2018-08-03T01:53:19.374Z","update_time":"$D2020-07-17T03:36:38.776Z","view_time":null,"first_public_time":"$D2018-08-03T02:19:18.499Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"a8c61a0bd942bbae","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":"starter_2024","bio":"Code is art","following":false},"version":101,"publish_version":101,"role":null,"authored":false,"authors":[{"type":"individual","id":"9fee62f7566ea13e","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":null,"bio":"Code is art","following":false}],"members":[{"type":"individual","id":"9fee62f7566ea13e","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Snowflakes","cells":[{"id":0,"value":"md`# Snowflakes\n\ncatch one!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"setInterval(() => {\n new Snowflake();\n}, 100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"class Snowflake {\n constructor() {\n this.radius = random(...radiusRange);\n this.color = colorScale(this.radius);\n this.duration = durationScale(this.radius);\n this.draw();\n this.animate();\n this.addMouseEvents();\n }\n \n draw() {\n const x = random(0, width);\n this.select = circle(this.radius, x, 0, this.color);\n }\n \n animate(y = 0) {\n this.select.transition()\n .duration(this.duration * 1000)\n .ease(d3.easeLinear)\n .attrTween('cy', () => d3.interpolate(y, height))\n .remove();\n }\n \n addMouseEvents() {\n this.select.call(d3.drag()\n .on('start', () => {\n this.select.transition();\n })\n .on('drag', () => {\n this.select.attr('cx', d3.event.x);\n this.select.attr('cy', d3.event.y);\n })\n .on('end', () => {\n const progress = d3.event.y / height;\n this.duration -= this.duration * progress;\n this.animate(d3.event.y);\n }));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"radiusRange = [1, 10]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"durationRange = [15, 5]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"colorRange = ['#3498db', '#fff']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"durationScale = d3.scaleLinear().domain(radiusRange).range(durationRange)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"colorScale = d3.scaleLinear().domain(radiusRange).range(colorRange)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"svg = d3.select(\"svg\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"function random(min, max) {\n return (Math.random() * (max - min)) + min;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function circle(radius, x, y, color) {\n return svg.append('circle')\n .attr('r', radius)\n .attr('cx', x)\n .attr('cy', y)\n .attr('fill', color);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"