Public
Edited
May 14
1 fork
Insert cell
Insert cell
data = FileAttachment("Distribution of Taxable Wealth of Male Household Heads in Massachusetts@1.csv").csv({typed: true})
Insert cell
data1 = data.columns.slice(1)
.flatMap((Percent) => data.map(({ Year, [Percent]: Wealth }) => ({ Year, Percent, Wealth })));
Insert cell

chart_1 = Plot.plot({
//y: { reverse: true },
marginTop: 60,
width: 650,
height: 400,
y: {
label: "Wealth Percentage",
},
x: {
tickFormat: d3.format("d") // removes commas by using integer format
},
color: {scheme: "YlGn", legend: true, domain: ["Bottom 80%", "Top 20-5%", "Top 5-1%", "Top 1%"]},
marks: [
Plot.text([{}], {
text: () => "Distribution of Taxable Wealth in Massachusetts",
frameAnchor: "top",
anchor: "middle",
dy: -50,
fontSize: 16,
fontWeight: "bold"
}),
Plot.text([{}], {
text: () => "1820-1910 (10 year increments)",
frameAnchor: "top",
anchor: "middle",
dy: -30,
fontSize: 16,
fontWeight: "bold"
}),
Plot.barY(data1, {x: "Year", y: "Wealth", fill: "Percent", reverse: true}),
Plot.textY(
data1,
Plot.stackY(
{
x: "Year",
z: "Percent",
y: "Wealth",
text: (d) => (d.Wealth < 5 ? null : d3.format(".1%")(d.Wealth/100)),
reverse: true
}
)
),
Plot.ruleY([0])
]
})
Insert cell
second_graph = FileAttachment("redone_for_formatting.csv").csv({typed: true})
Insert cell
second_graph_1 = second_graph.columns.slice(1)
.flatMap((Percent) => second_graph.map(({ Year, [Percent]: Wealth }) => ({ Year, Percent, Wealth })));
Insert cell
chart_2 = Plot.plot({
//y: { reverse: true },
marginTop: 60,
width: 650,
height: 400,
y: {
label: "Wealth Percentage",
},
x: {
tickFormat: d3.format("d") // removes commas by using integer format
},
color: {scheme: "YlGn", legend: true, domain: ["Bottom 80%", "Top 20-5%", "Top 5-1%", "Top 1%"]},
marks: [
Plot.text([{}], {
text: () => "Distribution of Wealth in United States",
frameAnchor: "top",
anchor: "middle",
dy: -50,
fontSize: 16,
fontWeight: "bold"
}),
Plot.text([{}], {
text: () => "2010-2023 (1 year increments)",
frameAnchor: "top",
anchor: "middle",
dy: -30,
fontSize: 16,
fontWeight: "bold"
}),
Plot.barY(second_graph_1, {x: "Year", y: "Wealth", fill: "Percent", reverse: true}),
Plot.textY(
second_graph_1,
Plot.stackY(
{
x: "Year",
z: "Percent",
y: "Wealth",
text: (d) => (d.Wealth < 5 ? null : d3.format(".1%")(d.Wealth/100)),
reverse: true
}
)
),
Plot.ruleY([0])
]
})
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