Public
Edited
Mar 27, 2023
1 fork
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(sheetDataParsed, {x: "Probability of Computerisation",
y: "Some college",
title: "Occupation Name",
fill: d => category.indexOf(categoriesArr[d['Category Label']-1].name)>-1? "steelblue" : "lightgray",
r: d=> Math.sqrt(+d['Employment in Thousands']*400),
fillOpacity: d => category.indexOf(categoriesArr[d['Category Label']-1].name)>-1? 1: 0.2,
})
],
height: 300,
width
})
Insert cell
all_cat = d3.range(1, 13).map(t=> categoriesArr[t-1].name)
Insert cell
Insert cell
data = FileAttachment("penguins.csv").csv({typed: true})
Insert cell
height = 400
Insert cell
x = d3.scaleLinear()
.domain([0, 1]).nice()
.range([margin.left, width - margin.right])
Insert cell
y = d3.scaleLinear()
.domain([0, 100]).nice()
.range([height - margin.bottom, margin.top])
Insert cell
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
Insert cell
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSize(-width).ticks(5))
.call(g=> g.selectAll('.domain').remove())
.call(g=> g.selectAll('.tick line').attr('stroke', '#efefef'))
.call(g=> g.selectAll('.tick text').attr('dy', -5).attr('dx', 10))
Insert cell
margin = ({top: 25, right: 20, bottom: 35, left: 40})
Insert cell
d3.extent(sheetData, d=>+d["Some college"])
Insert cell
rankArr=d3.range(0, 10).map(t=> [t/10, (t+1)/10])
Insert cell
d3.group(sheetData, d=> d['Category Label'], d=> Math.floor(+d['Probability of Computerisation']*10) )
Insert cell
sheetData = sheet_data_fn("https://docs.google.com/spreadsheets/d/e/2PACX-1vT6gEWQ8DYX2rrvjWjlrKLG2y6CF7u9XfxRTll6-U5oOrzDh1SLjPb9QaZ-7eCn2c9hIl6EzfYv6z3E/pub?gid=0&single=true&output=tsv")
Insert cell
sheetDataParsed = sheetData.map(t=>(
{
...t,
'Category Label': +t['Category Label'],
'Probability of Computerisation': +t['Probability of Computerisation'],
'Employment in Thousands': +t['Employment in Thousands'],
'Some college': +t['Some college']
}
))
Insert cell
async function sheet_data_fn (new_url){
let sheet_data =[];
const spreadsheet = await d3.tsv(new_url)
.then(data => data.forEach(d => {
// d[''] = months[+ d.DATE.split("/")[0] -1 ]
sheet_data.push(d);
} )); // d3.tsv returns a Promise
return sheet_data;
}
Insert cell
Insert cell
Insert cell

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.
Learn more