Public
Edited
Sep 26, 2023
function parseNumber(dollarStr) {
return +dollarStr.split("$").join("").split(",").join("");
}
function processingFn(year) {
function get(values) {
let obj = {}
values = d3.map(values, function(obj){
let newObj = {...obj};
newObj[revenuesColumn] = parseNumber(obj[revenuesColumn]);
return newObj;
} )
obj[year] = values;
return obj;
}
return get;
}
allData = (await Promise.all([
FileAttachment("furtune500-2023.csv").csv({typed: true}).then(processingFn(2023)),
FileAttachment("furtune500-2022.csv").csv({typed: true}).then(processingFn(2022)),
FileAttachment("furtune500-2021.csv").csv({typed: true}).then(processingFn(2021))
])).reduce((a, v) => (Object.assign(v, a)))
viewof selectYear = Inputs.radio(Object.keys(allData), {label: "Select year", value: "2023"})
data = allData[selectYear]
data
Type Table, then Shift-Enter. Ctrl-space for more options.
Object.keys(data[0])
countryTerritoryColumn = "Country / Territory"
sectorColumn = "Sector"
revenuesColumn = "Revenues ($M)"
countryField = "Country"
countField = "Count"
countByCountry = {
const mapping = d3.rollup(data, v => v.length, d => d[countryTerritoryColumn]);
return d3.map(mapping, function(d) {
let obj = {};
obj[countryField] = d[0];
obj[countField] = d[1];
return obj;
})
}
countBySector = {
const mapping = d3.rollup(data, v => v.length, d => d[sectorColumn]);
return d3.map(mapping, function(d) {
let obj = {};
obj[sectorColumn] = d[0];
obj[countField] = d[1];
return obj;
})
}
revenuesBySector = {
const mapping = d3.rollup(data, v => d3.sum(v, d => d[revenuesColumn]), d => d[sectorColumn]);
return d3.map(mapping, function(d) {
let obj = {};
obj[sectorColumn] = d[0];
obj[revenuesColumn] = d[1];
return obj;
})
}
// https://observablehq.com/@observablehq/plot-horizontal-bar-chart?intent=fork
countByCountryHorizontalBarChart = {
return Plot.plot({
marginLeft: 100,
width: 500,
height: 400,
x: {
axis: "top"
},
marks: [
Plot.ruleX([0]),
Plot.barX(countByCountry, {x: countField, y: countryField, sort: {y: "x", reverse: true}, fill: "steelblue"})
]
})
}
countBySectorHorizontalBarChart = {
return Plot.plot({
marginLeft: 160,
width: 500,
height: 400,
x: {
axis: "top"
},
marks: [
Plot.ruleX([0]),
Plot.barX(countBySector, {x: countField, y: sectorColumn, sort: {y: "x", reverse: true}, fill: "steelblue"})
]
})
}
revenuesBySectorHorizontalBarChart = {
return Plot.plot({
marginLeft: 160,
width: 500,
height: 400,
x: {
axis: "top"
},
marks: [
Plot.ruleX([0]),
Plot.barX(revenuesBySector, {x: revenuesColumn, y: sectorColumn, sort: {y: "x", reverse: true}, fill: "steelblue"})
]
})
}
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.
