companies = FileAttachment("companies_3.csv").csv({typed: true})
viewof metric = Inputs.select(
["Market Cap", "Earnings", "Earnings to Employee Ratio"],
{label: "Select metric:"}
)
sortedData = companies
.filter(d => d[metric] != null)
.sort((a, b) => b[metric] - a[metric]);
chart = Plot.plot({
marginBottom: 100,
marginLeft: 70,
marginTop: 40,
x: {
label: "Company",
tickRotate: -45,
domain: sortedData.map(d => d.Company) // Enforce descending order on x-axis
},
y: {
label: metric,
grid: true,
tickFormat: d => {
if (d >= 1e12) return (d / 1e12).toFixed(1) + "T"; // trillions
if (d >= 1e9) return (d / 1e9).toFixed(1) + "B"; // billions
if (d >= 1e6) return (d / 1e6).toFixed(1) + "M"; // millions
if (d >= 1e3) return (d / 1e3).toFixed(1) + "K"; // thousands
return d; // raw numbers
}
},
color: {
domain: ["Tech", "Non-Tech"],
range: ["green", "#5dade2"],
legend: true
},
marks: [
Plot.text([{}], {
text: () => `Top 20 Largest Companies in US`,
frameAnchor: "top",
anchor: "middle",
dy: -25,
fontSize: 15,
fontWeight: "bold"
}),
Plot.text([{}], {
text: () => `Ranked by ${metric}`,
frameAnchor: "top",
anchor: "middle",
dy: -5,
fontSize: 15,
fontWeight: "bold"
}),
Plot.barY(sortedData, {
x: "Company",
y: metric,
fill: "Category", // map color to category
title: d => `${d.Company}\n${metric}: ${d[metric]}`,
})
]
})
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.
