Plot ResourcesWhat is Plot?TableBar Chart🏁 Checkpoint: Interactive Visualization of Your Data🏁 Assignment: Build a Plot and Tweak ItLine ChartArea Chart🏁 Assignment: Upgrade Your Line ChartCandlestick Chart🏁 Assignment: Upgrade Your Dashboard👥 Assignment: Technical Analysis DashboardGroup Assignment #2: Your Data on Observable
Scatterplot
import {data_meteorites as data_meteoritesInitial} from "@datavisufs/table"
// Uncomment below to enable
Inputs.table(data_meteoritesInitial)
// Uncomment below to enable
data_meteorites = aq.from(data_meteoritesInitial)
.select('name','mass','fall','year')
.sample(10_000) // uncomment if your computer is slowing down
.rename({mass: "massInGrams"}) // uncomment later
.derive({mass: d => d.massInGrams/1000000}) // uncomment later
.objects()
Plot.plot({
marks:[
Plot.dot(data_meteorites, {x: "year", y: "mass"})
]
})
Plot.plot({
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
r: "mass"
})
],
})
Plot.plot({
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "mass"
})
],
})
Plot.plot({
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "fall"
})
],
})
Plot.plot({
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "mass",
fillOpacity: 0.4
})
],
})
Plot.plot({
color: {
legend: true,
scheme: "Cool"
},
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "fall",
fillOpacity: 0.8
})
]
})
Plot.plot({
color: {
legend: true,
scheme: "Cool"
},
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "mass",
fillOpacity: 0.9
})
]
})
Plot.plot({
color: {
legend: true,
scheme: "Cool"
},
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "mass",
fillOpacity: 0.9,
}),
Plot.text(data_meteorites,
{
x: 1840,
y: 16,
text: ["Hello→"],
fontSize: 20,
fill: "blue"
})
]
})
Plot.plot({
color: {
legend: true,
scheme: "Cool"
},
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "mass",
fillOpacity: 0.9,
}),
Plot.text(data_meteorites,
{
x: "year",
y: "mass",
text: "name",
fontSize: "mass",
fill: "black"
})
]
})
Plot.plot({
color: {
legend: true,
scheme: "Cool"
},
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "mass",
fillOpacity: 0.9,
}),
Plot.text(data_meteorites,
{
x: "year",
y: "mass",
text: d=> d["mass"]> 5 ? d["name"] : "",
fontSize: "mass",
fill: "black"
})
]
})
Plot.plot({
marks: [
Plot.dot(data_meteorites, {
x: "year", y: "mass", fill: "dodgerblue"})
]
})
Plot.plot({
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
fill: "dodgerblue"
}),
Plot.link({length: 1}, {
x1: 0,
y1: 0,
x2: 2000,
y2: 2
}
)
]
})
Plot.plot({
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
fill: "dodgerblue"
}),
Plot.linearRegressionY(data_meteorites, {
x: "year",
y: "mass",
stroke: "steelblue",
ci: 0.95
}),
],
x: {
label: "year→ "
},
y: {
label: "↑Mass in tons"
}
})
Plot.plot({
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
fill: "dodgerblue",
}),
Plot.linearRegressionY(data_meteorites, {
x: "year",
y: "mass",
stroke: "steelblue",
ci: 0.95,
}),
],
x: {
label: "year→ "
},
y: {
label: "↑Mass in tons",
grid: true,
}
})
Plot.plot({
marks: [
Plot.dot(data_meteorites, {
x: "year",
y: "mass",
fill: "dodgerblue",
}),
Plot.linearRegressionY(data_meteorites, {
x: "year",
y: "mass",
stroke: "steelblue",
ci: 0.95,
}),
],
x: {
label: "year→ ",
tickFormat: d3.format(".0f")
},
y: {
label: "↑Mass in tons",
grid: true,
}
})
import {Wrangler, op} from "@observablehq/data-wrangler"
import {imageToDo} from "@clokman/student-blocks"
imageToDo
import {toc} from "@nebrius/indented-toc"
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.
