Public
Edited
Sep 6, 2021
md`# 📑 Exploration of Animated Objects`
md`## 🤖 Markdown Cells & HTML Headers`
{const md_cell1=md`### 🌈 Color Interpolation for Markdown Cells`;
md_cell1.style.color=d3.interpolateRainbow(now%60000/10000);
return md_cell1;}
html`<div width=900 height=100><p>${randemo}</p></div>`
randemo={while (true) {
yield d3.shuffle([...'🐀🐁🐂🐃🐄🐅🐆🐇🐈🐉🐊🐋🐌🐍🐎🐏🐐🐑🐒🐓🐔🐕🐖🐗🐘🐙🐚🐛🐜🐝🐞🐟'].slice())
.slice(Math.floor(Math.random()*30)+1)
.sort(d3.ascending);
await Promises.delay(3000)}; }
md`### 🕒 ${new Date(now).toLocaleString()}`
{const html_header=html`<h3>🌈 Color Interpolation for HTML Headers</h3>`;
html_header.style.color=d3.interpolateSinebow(now/6000);
return html_header}
md`## 🤖 Charts`
margin=({top:20,right:20,bottom:20,left:60})
height=250
viewof play_button_1=html`
<button style='background:silver; width:200px; height:25px'>RUN</button>`
{play_button_1; for (let i=1; i<customers.length+1; i++) {yield i;};}
play_button_1,
html`<svg viewBox='0 0 ${width} ${height}'>
${d3.select(line_path(customers)).call(reveal).node()}
${d3.select(svg`<g>`).call(xAxis).node()}
${d3.select(svg`<g>`).call(yAxis).node()}</svg>`
viewof input_1=html`
<select id='product' name='Product'
style='text-align:center; text-align-last:center;
background:silver; width:200px; height:25px'>
<option value='Fresh'>Fresh</option>
<option value='Milk'>Milk</option>
<option value='Grocery'>Grocery</option>
<option value='Frozen'>Frosen</option>
<option value='Detergents_Paper'>Detergents Paper</option>
<option value='Delicatessen'>Delicatessen</option>
</select>`
reveal=path=>
path.transition().duration(7000).ease(d3.easeLinear)
.attrTween('stroke-dasharray',function() {
const length=this.getTotalLength();
return d3.interpolate(`0,${length}`,`${length},${length}`);})
x=d3.scaleLinear()
.domain([0,customers.length])
.range([margin.left,width-margin.right])
y=d3.scaleLinear()
.domain([0,d3.max(tr_customers[`${input_1}`])])
.range([height-margin.bottom,margin.top])
xAxis=(g,scale=x)=>g
.attr('transform',`translate(0,${height-margin.bottom})`)
.call(d3.axisBottom(scale).ticks(width/80).tickSizeOuter(0))
yAxis=(g,scale=y)=>g
.attr('transform',`translate(${margin.left},0)`)
.call(d3.axisLeft(scale).ticks(height/40))
.call(g=>g.select('.domain').remove())
line=d3.line().x(function(d,i) {return x(i);})
.y(function(d) {return y(d[`${input_1}`]);})
function line_path(data) {
return svg`<path d='${line(data)}'
fill='none' stroke='#ff36ff' stroke-width='1'
stroke-miterlimit='1' stroke-dasharray='0,1'></path>`}
md`## 🤖 Modules & Data`
url='https://raw.githubusercontent.com/OlgaBelitskaya/'
.concat('machine_learning_engineer_nd009/master/')
.concat('Machine_Learning_Engineer_ND_P3/customers.csv')
customers=d3.csv(url,d3.autoType)
tr_customers=Object.assign(...Object.keys(customers[0])
.map(key=>({[key]:customers.map(o=>o[key])})))
d3=require('d3@6')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
