Public
Edited
Nov 29, 2023
md`# 📑 DataFrame-HTML Experiments`
db_data=Object.entries(tr_data).slice(2,8).map(
el=>({'name':el[0],
'median_mean':[d3.median(el[1]),d3.mean(el[1])]}))
chart={
const col1='#36ff36',col2='#3636ff';
const svg=d3.create('svg').attr('style','background:whitesmoke')
.attr('viewBox',[0,0,1.2*width,1.2*height]);
svg.append('g').append('text').attr('text-anchor','middle')
.attr('x',(width+margin.left)/2)
.attr('y',height+margin.bottom+margin.top)
.style('font-size','24px')
.text('Median & Mean Values');
svg.append('g').call(xAxis).style('font-size','12px');
svg.append('g').call(yAxis).style('font-size','12px');
const lines=svg.append('g').attr('class','lines')
.attr('transform',`translate(0,${margin.top})`)
.selectAll('line').data(db_data).join('line')
.attr('stroke','#363636').attr('stroke-width',4)
.attr('opacity','.7')
.attr('x1',d=>x(d.median_mean[0]))
.attr('x2',d=>x(d.median_mean[1]))
.attr('y1',d=>y(d.name)).attr('y2',d=>y(d.name));
const dots=svg.append('g').attr('class','dots')
.attr('transform',`translate(0,${margin.top})`)
.selectAll('circle').data(db_data).join('circle')
.attr('fill',col1).attr('r',8)
.attr('cx',d=>x(d.median_mean[0]))
.attr('cy',d=>y(d.name))
.clone(true)
.attr('cx',d=>x(d.median_mean[1]))
.attr('fill',col2);
const legend_trans=`translate(${width+margin.right}`
.concat(`,${height/2-margin.bottom})`);
const legend=svg.append('g').attr('class','legend')
.attr('transform',legend_trans)
.call(d3Legend.legendColor()
.shape('circle').shapeRadius(8)
.shapePadding(60).orient('vertical')
.labelAlign('center').labelOffset('20')
.scale(d3.scaleOrdinal()
.domain(['median','mean'])
.range([col1, col2])));
yield svg.node();}
width=800
height=400
margin=({top:20,right:20,bottom:20,left:120})
url='https://raw.githubusercontent.com/OlgaBelitskaya/'
.concat('machine_learning_engineer_nd009/master/')
.concat('Machine_Learning_Engineer_ND_P3/customers.csv')
data=d3.csv(url,d3.autoType)
tr_data=Object.assign(...Object.keys(data[0])
.map(key=>({[key]:data.map(o=>o[key])})));
x=d3.scaleLinear()
.domain([0,d3.max(db_data,d=>d.median_mean[1])])
.range([margin.left,width-margin.right])
y=d3.scalePoint()
.domain(db_data.map(d=>d.name))
.rangeRound([margin.top,height-margin.bottom])
xAxis=g=>g
.attr('transform',
`translate(${margin.left}),${height-margin.bottom})`)
.call(d3.axisBottom(x).ticks(.02*width).tickSizeOuter(0))
.call(g=>g.select('.domain').remove())
yAxis=g=>g
.attr('transform',
`translate(${margin.left},${margin.top})`)
.call(d3.axisLeft(y))
.call(g=>g.select('.domain').remove())
.call(g=>g.select('.tick:last-of-type text')
.append('tspan').text(db_data.name))
d3Legend = require('d3-svg-legend')
d3=require('d3@6')
html`<div style='border:10px double white;
width:950px; height:750px; overflow:auto;
padding:5px; background-color:ghostwhite'>
<iframe src='https://olgabelitskaya.gitlab.io/instagram_posts/instagram15.html'
width='930' height='745'></iframe></div>`
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.
