Student
import { meteorites_autoTyped } from "@clokman/import-data"
Inputs.table(meteorites_autoTyped)
meteorites = aq
.from(meteorites_autoTyped)
.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()
// ... include only 'name', 'mass', 'fall', and 'year' columns
// ... sample 20.000 or 10.000 cells, especially if your computer is slowing down
// ... rename 'mass' column to 'massInGrams'
// ... create a new 'mass' column, which holds the masses as units of tons
Inputs.table(meteorites)
Plot.plot({
marks: [Plot.dot(meteorites, { x: "year", y: "mass" })]
})
Plot.plot({
marks: [Plot.dot(meteorites, { x: "year", y: "mass", r: "mass" })]
})
Plot.plot({
marks: [
Plot.dot(meteorites, { x: "year", y: "mass", r: "mass", fill: "mass" })
]
})
Plot.plot({
marks: [
Plot.dot(meteorites, { x: "year", y: "mass", r: "mass", fill: "fall" })
]
})
Plot.plot({
marks: [
Plot.dot(meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "fall",
fillOpacity: 0.5
})
]
})
Plot.plot({
color: { legend: true },
marks: [
Plot.dot(meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "fall",
fillOpacity: 0.5
})
]
})
Plot.plot({
color: { legend: true },
marks: [
Plot.dot(meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "mass",
fillOpacity: 0.5
})
]
})
Plot.plot({
marks: [
Plot.dot(meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "mass",
fillOpacity: 0.5
}),
Plot.text(meteorites, {
x: 1470,
y: 10,
text: ["Hallo ->"],
fontSize: 25,
fill: "red"
})
]
})
Plot.plot({
marks: [
Plot.dot(meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "mass",
fillOpacity: 0.5
}),
Plot.text(meteorites, {
x: "year",
y: "mass",
text: "name",
fontSize: 10
})
]
})
Plot.plot({
marks: [
Plot.dot(meteorites, {
x: "year",
y: "mass",
r: "mass",
fill: "mass",
fillOpacity: 0.5
}),
Plot.text(meteorites, {
filter: (d) => d.mass > 5,
x: "year",
y: "mass",
text: "name",
fontSize: 10
})
]
})
Plot.plot({
marks: [
Plot.dot(meteorites, {
x: "year",
y: "mass",
r: 2,
fill: "dodgerBlue",
opacity: 0.5
})
]
})
// skipped in class
regression = require('d3-regression')
linearRegression = regression.regressionLinear()
.x(d => d.year)
.y(d => d.mass)
trendLine = linearRegression(meteorites) // please uncommment after 'meteorites' variable is declared
Plot.plot({
marks: [
Plot.dot(meteorites, {
x: "year",
y: "mass",
r: 2,
opacity: 0.5,
fill: "dodgerBlue"
}),
Plot.link([0], {
x1: trendLine[0][0],
y1: trendLine[0][1],
x2: trendLine[1][0],
y2: trendLine[1][1],
stroke: "salmon"
})
]
})
// ...
// ...
// ...
linearRegression_usingDateColumn = regression.regressionLinear()
.x(d => d.date)
.y(d => d.mass)
// trendLine2 = linearRegression_usingDateColumn(meteoritesWithDates)
// ...
// ...
// Inputs.table(meteorites_fixed) // please uncomment
// trendLine3 = linearRegression_usingDateColumn(meteorites_fixed) // please uncomment
// Please uncomment the following code
//
//
// Plot.plot({
// y: {
// label: '↑ Mass in Tons',
// grid: true
// },
// x: {
// label: 'Year →',
// },
// marks: [
// // Values based on linear regression
// Plot.link([0], {
// x1: trendLine3[0][0],
// y1: trendLine3[0][1],
// x2: trendLine3[1][0],
// y2: trendLine3[1][1],
// stroke: 'salmon'
// }),
// Plot.dot(meteorites_fixed, {
// x: "date",
// y: "mass",
// fill: 'dodgerblue',
// fillOpacity: 0.5
// })
// ]
// })
// You can uncomment the following code after 'meteorites' variable is declared
//
// meteoritesWithMapDates = meteorites.map( ({ name, fall, year, mass }) => ({
// name: name,
// year: new Date(year, 1, 1),
// fall: fall,
// mass: +mass
// }) )
// You can uncomment the following code after 'meteoritesWithMapDates' and 'trendLine3' variables are declared
// Plot.plot({
// y: {
// label: '↑ Mass in Tons',
// grid: true
// },
// x: {
// label: 'Year →',
// },
// marks: [
// Plot.dot(meteoritesWithMapDates, {
// x: "year",
// y: "mass",
// fill: 'dodgerblue',
// fillOpacity: 0.5
// }),
// // Values based on linear regression
// Plot.link([0], {
// x1: trendLine3[0][0],
// y1: trendLine3[0][1],
// x2: trendLine3[1][0],
// y2: trendLine3[1][1],
// stroke: 'salmon'
// })
// ]
// })
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.
