Public
Edited
Oct 26, 2023
Insert cell
Insert cell
Insert cell
Plot.plot({
caption: "Fonte: Censo 2022 (IBGE)",
height: 500,
x: {
axis: null
},
y: {
grid: false,
label: "",
fontFamily: "Roboto"
},
marginLeft: 170,
marginRight: 100,
marks: [
Plot.axisY({ fontFamily: "Roboto", fontSize: 12 }),
Plot.text(dados, {
x: "populacao_2022",
y: "nome_municipio",
text: (d) => d3.format(".3s")(d.populacao_2022),
textAnchor: "start",
fontFamily: "Roboto",
fontSize: 12,
fontWeight: "bold",
dx: 10
}),
Plot.barX(dados, {
x: "populacao_2022",
y: "nome_municipio",
fill: "#C0C0C0",
sort: { y: "x", reverse: true },
fill: (d) => (d.nome_municipio == "Aracaju" ? "#d62828" : "#eae2b7")
}),
Plot.ruleX([0])
]
})
Insert cell
dados = FileAttachment("top_municipios_10@1.csv").csv({ typed: true })
Insert cell
Insert cell
<style>
.title {
font-family: "Roboto";
}

.subtitle {
font-family: "Roboto";
font-size: 0.8em;
}

.highlight {
font-size: 1.1em;
font-weight: bold;
color: #d62828
}
</style>
Insert cell
top_municipios_10@1.csv
X
populacao_2022
Y
nome_municipio
Color
Size
Facet X
Facet Y
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [
Plot.barX(
await FileAttachment("top_municipios_10@1.csv").csv({ typed: "auto" }),
{ x: "populacao_2022", y: "nome_municipio", tip: true }
),
Plot.ruleX([0])
]
})
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