Brazilian, Computer Science: professor and researcher, Areas of interest: #dataviz, #datascience, #machinelearning, #python, #d3js. I believe that technology should be used for society.
toy_data = [
{tipo: 'A', value: 10},
{tipo: 'B', value: 30},
{tipo: 'C', value: 5},
{tipo: 'D', value: 40}
]
Plot.dot(toy_data, {x: "value", y: "tipo"}).plot()
Plot.dot(toy_data, {x: d => d.value, y: d => d.tipo}).plot()
Plot.dot(toy_data, {x: d => d.value * 100, y: d => d.tipo}).plot()
Plot.dot(toy_data, {x: d => d.value * 100, y: d => d.tipo}).plot(
{x: {label: "valores →"}, y: {label: "categorias"}},
)
Plot.plot({
marks: [
Plot.dot([[10, 'A']]), // [X1, Y1]
Plot.dot([[30, 'B']]), // [X2, Y2]
Plot.dot([[5, 'C']]), // ...
Plot.dot([[40, 'D']])
]
})
Plot.plot({
marks: [
Plot.dot(toy_data, {x: d => d.value, y: d => d.tipo}),
Plot.ruleX([0]),
]
})
Plot.barX(toy_data, {x: "value", y: "tipo"}).plot()
Plot.plot({
marks: [
Plot.barX(toy_data, {x: "value", y: "tipo", fill: "steelblue"}),
Plot.ruleX([0])
]
})
Plot.plot({
marks: [
Plot.barX(toy_data, {x: "value", y: "tipo", fill: "tipo"}),
Plot.ruleX([0])
]
})
Plot.plot({
marks: [
Plot.barX(toy_data, {x: "value", y: "tipo", fill: d => d.tipo}),
Plot.ruleX([0])
]
})
Plot.plot({
marks: [
Plot.barX(toy_data, {x: "value", y: "tipo", fill: d => d.value > 20 ? "blue" : "orange"}),
Plot.ruleX([0])
]
})
Plot.plot({
color: {
domain: ["pequeno", "grande"],
range: ["blue", "orange"],
legend: true
},
marks: [
Plot.barX(toy_data, {x: "value", y: "tipo", fill: d => d.value > 20 ? "pequeno" : "grande"}),
Plot.ruleX([0])
]
})
Plot.plot({
marks: [
Plot.dot(toy_data, {x: d => d.value, y: d => d.tipo}),
Plot.ruleX([0]),
]
})
Plot.plot({
x: {
domain: [0, 100],
grid: true
},
marks: [
Plot.dot(toy_data, {x: d => d.value, y: d => d.tipo}),
Plot.ruleX([0]),
]
})
Plot.plot({
x: {
domain: [0, 100],
grid: true,
reverse: true
},
marks: [
Plot.dot(toy_data, {x: d => d.value, y: d => d.tipo}),
Plot.ruleX([0]),
]
})
Plot.plot({
x: {
domain: [0, 100],
grid: true,
type: 'sqrt'
},
marks: [
Plot.dot(toy_data, {x: d => d.value, y: d => d.tipo}),
Plot.ruleX([0]),
]
})
Plot.plot({
x: {
domain: [0, 50],
grid: true
},
y: {
type: 'band',
grid: true,
padding: 0.2,
},
marks: [
Plot.barX(toy_data, {x: "value", y: "tipo", fill: d => d.value > 20 ? "blue" : "orange"}),
Plot.ruleX([0])
]
})
Plot.plot({
color: {
type: 'categorical',
scheme: "accent",
legend: true ,
domain: ["alto", "baixo"],
},
x: {
domain: [0, 50],
grid: true
},
y: {
type: 'band',
grid: true,
padding: 0.2,
},
marks: [
Plot.barX(toy_data, {x: "value", y: "tipo", fill: d => d.value > 20 ? "alto" : "baixo"}),
Plot.ruleX([0])
]
})
athletes = FileAttachment("athletes.csv").csv({typed: true})
filter_athletes = athletes.sort((d1, d2) => d2.gold - d1.gold).slice(0,5)
viewof table = Inputs.table(filter_athletes)
// Vamos carregar os dados em uma nova variável para não interferir nas visualizações anteriores
dados_atletas = FileAttachment("athletes.csv").csv({typed: true})
Plot.plot({
grid: true, // Usamos o grid diretamente no plot para exibir nos dois eixos.
color: {
type: "categorical",
scheme: "tableau10",
},
x: {
label: "Top 10 atletas"
},
y: {
label: "Total de medalhas"
},
marks: [
Plot.barY(
dados_atletas,
{
x: "name",
y: "gold",
fill: 'nationality',
filter: d => d.nationality === 'GBR',
sort: {x: "y", reverse: true, limit: 5}
}
)
]
})
Plot.plot({
grid: true, // Usamos o grid diretamente no plot para exibir nos dois eixos.
color: {
type: "categorical",
scheme: "tableau10",
legend: true
},
x: {
label: "Peso",
},
y: {
label: "Altura",
},
marks: [
Plot.dot(athletes, {x: 'height', y: 'weight', fill: 'sex', filter: d => d.sport === 'aquatics'})
]
})
Plot.plot({
color: {
type: "diverging",
scheme: "BuRd"
},
x: {
label: "Altura →"
},
y: {
label: "↑ Frequência"
},
marks: [
Plot.rectY(dados_atletas, Plot.binX({y: "count"}, {x: "height"})),
Plot.ruleY([0])
]
})
Plot.plot({
color: {
type: "diverging",
scheme: "BuRd"
},
x: {
label: "Altura →"
},
y: {
label: "↑ Frequência"
},
marks: [
Plot.barY(
dados_atletas,
Plot.groupX(
{ y: "sum" },
{
x: "nationality",
y: "gold",
sort: { x: "y", reverse: true, limit: 5 }
}
)
),
Plot.ruleY([0])
]
})
ForceGraph(miserables, {
nodeId: (d) => d.id, // node identifier, to match links
nodeGroup: (d) => d.group, // group identifier, for color
nodeTitle: (d) => d.id, // hover text
width,
height: 520,
invalidation // stop when the cell is re-run
})
toy_data2 = [
{ ano: 2000, genero: "feminino", total: 136 },
{ ano: 2000, genero: "masculino", total: 659 },
{ ano: 2004, genero: "feminino", total: 113 },
{ ano: 2004, genero: "masculino", total: 573 },
{ ano: 2008, genero: "feminino", total: 103 },
{ ano: 2008, genero: "masculino", total: 589 },
{ ano: 2012, genero: "feminino", total: 120 },
{ ano: 2012, genero: "masculino", total: 665 },
{ ano: 2016, genero: "feminino", total: 129 },
{ ano: 2016, genero: "masculino", total: 670 },
{ ano: 2020, genero: "feminino", total: 134 },
{ ano: 2020, genero: "masculino", total: 669 }
]
Plot.plot({
marginLeft: 60,
grid: true,
y: {
label: "Total",
},
x: {
label: "Ano"
},
facet: {
data: toy_data2,
y: "genero",
label: "Gênero",
marginRight: 60
},
marks: [
Plot.barY(toy_data2, {x: "ano", y: "total", fill: "genero", sort: {x: "x", reverse: false}}),
Plot.ruleY([0]),
]
})
import {toc} from "@robertbatty/toc"
import {ForceGraph} from "@d3/force-directed-graph"
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.
