Curious human. Interested in the mechanics of how things work.
Public
Edited
Feb 1, 2023
2 forks
3 stars
viewof radius = Inputs.range([0, 50], {value: 40, step: 0.1, label: "Max radius"})
test = Plot.plot({
grid: true,
width,
height: width/2,
marginLeft: 50,
marginRight: 50,
marginBottom: 50,
marks: [
Plot.dot(pData, {x: "Year", y: "Rank", r: d => scaleT(d['Trade value (US$)']), strokeWidth: 1, stroke: 'pink', fill:'pink' }), //
Plot.dot(pData, {x: "Year", y: "Rank", r: d => scaleC(d['Country size']), strokeWidth: 1, stroke: 'red' }),
Plot.text(pData, {x: "Year", y: "Rank", text: "Country", dy: 25}),
// Plot.dot(cars, {x: "economy (mpg)", y: "power (hp)"})
]
})
domainT = d3.extent(data.map(row=> row['Trade value (US$)']));
scaleT = d3.scaleLinear().domain(domainT).range([0.5, radius]);
domainC = d3.extent(data.map(row=> row['Country size']));
scaleC = d3.scaleLinear().domain(domainC).range([0.5, radius]);
pData = {
let countries = Array.from(new Set(data.map(row => row.Country)));
let years = Array.from(new Set(data.map(row => row.Year))).sort();
let newDf = [];
for (let y in years) {
let year = years[y];
let subdf = data.filter(row=> row['Year'] === year);
subdf = subdf.sort(function (a, b) { return b['Trade value (US$)'] - a['Trade value (US$)']});
subdf.map((row, i) => row['Rank'] = i+1);
subdf.map(row => newDf.push(row));
}
return newDf;
}
data = FileAttachment("global-sand.csv").csv({typed: true})
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.
