Public
Edited
Nov 2, 2023
<h3>Weclome to ITCS 4122/5122</h3>
currentWeek = 2
"There are " + (13 - currentWeek) + " weeks left in the semester"
Plot.plot({
marks: [
Plot.cell(weather.slice(-365), {
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: "temp_max"
})
]
})
Plot.plot({
marks: [
Plot.areaY(aapl, {x: "Date", y: "Close"}),
Plot.ruleY([0])
]
})
energy = FileAttachment("us_energy.csv").csv({ typed: true })
energy
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [Plot.dot(energy, { x: "year", y: "quadrillion_btu" })]
})
Plot.plot({
marks: [Plot.line(energy, { x: "year", y: "quadrillion_btu", z: "type" })]
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.line(energy, { x: "year", y: "quadrillion_btu", stroke: "type" }),
Plot.dot(energy, {
x: "year",
y: "quadrillion_btu",
fill: "type",
stroke: "white",
tip: true,
r: 3
})
],
// color: { scheme: "Plasma", legend: true },
// x: { tickFormat: "Y", type: "linear", label: "Year" }
})
penguins
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.dot(penguins, {
x: "flipper_length_mm",
y: "body_mass_g",
fill: "species",
r: "flipper_length_mm"
})
],
r: {
domain: d3.extent(penguins, (d) => d.flipper_length_mm),
range: [1, 10]
},
color: {
domain: ["Adelie", "Chinstrap", "Gentoo"],
range: ["purple", "teal", "orange"],
legend: true
},
x: { type: "log" }
})
penguins_temp = penguins
penguins_temp
X
species
Y
mean
body_mass_g
Color
species
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
color: { legend: true },
marks: [
Plot.barY(
penguins_temp,
Plot.groupX(
{ y: "mean" },
{ x: "species", y: "body_mass_g", fill: "species", tip: true }
)
),
Plot.ruleY([0])
]
})
company_stock_prices = FileAttachment("big_tech_stock_prices.csv").csv({
typed: true
})
company_stock_prices
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.lineY(company_stock_prices, {
x: "date",
y: "open",
stroke: "stock_symbol",
tip: true
})
],
color: { legend: true }
})
Plot.plot({
marks: [
Plot.dot(company_stock_prices, {
x: "open",
y: "adj_close",
fill: "#ccc",
opacity: 0.3,
r: "volume"
}),
Plot.dot(company_stock_prices, {
filter: (d) => d.stock_symbol == "NFLX",
x: "open",
y: "adj_close",
fill: "blue",
r: "volume"
})
]
})
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.
