Public
Edited
Oct 24, 2024
1 star
<h2>Hello, 2024</h2>
currentWeek = 10
`There are ${17 - currentWeek} weeks left in the semester!!!`
Plot.plot({
y: {
tickFormat: "s"
},
marks: [
Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry"}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
]
})
Plot.plot({
marks: [
Plot.dot(cars, {
x: "power (hp)",
y: "economy (mpg)",
fill: "yellow",
stroke: "steelblue"
})
]
})
Plot.plot({
marks: [
Plot.lineY(energy, {
x: "year",
y: "quadrillion_btu",
stroke: "type",
tip: true
}),
Plot.dot(energy, {
x: "year",
y: "quadrillion_btu",
r: "quadrillion_btu",
stroke: "white",
fill: "type"
})
],
x: { tickFormat: "Y", type: "linear", label: "Year" },
y: { label: "Quadrillion BTU" },
color: { scheme: "Tableau10", legend: true },
// color: {
// legend: true,
// domain: ["Adelie", "Chinstrap", "Gentoo"],
// range: ["purple", "teal", "orange"]
// }
r: { domain: d3.extent(energy, (d) => d.quadrillion_btu), range: [1, 10] },
grid: true
})
energy
X
year
Y
quadrillion_btu
Color
type
Size
—
Facet X
—
Facet Y
type
Mark
area
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
color: { legend: true },
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.areaY(energy, {
fy: "type",
x: "year",
y: "quadrillion_btu",
fill: "type",
tip: true
}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.rectY(
olympians,
Plot.binX({ y: "count" }, { x: "weight", fill: "steelblue" })
)
]
})
Plot.plot({
marks: [
Plot.barY(
penguins,
Plot.groupX(
{ y: "mean" },
{ x: "species", y: "body_mass_g", fill: "species" }
)
)
],
color: { legend: true }
})
Plot.plot({
marks: [
Plot.lineY(stocks, {
x: "Date",
y: "Close",
stroke: "symbol",
tip: true,
channels: {
Open: "Open"
}
}),
Plot.tip(
stocks,
Plot.selectMaxY({
x: "Date",
y: "Close",
stroke: "symbol",
anchor: "middle",
fill: "yellow"
})
) // Static annotation!
],
color: { legend: true }
})
Plot.plot({
marks: [
Plot.dot(cars, {
x: "power (hp)",
y: "economy (mpg)",
fill: "grey"
}),
Plot.dot(
cars,
Plot.pointer({
x: "power (hp)",
y: "economy (mpg)",
fill: "red",
r: 8,
opacity: 0.6,
tip: true,
title: (d) => `${d.name}`
})
),
Plot.crosshair(cars, {
x: "power (hp)",
y: "economy (mpg)",
textFill: "red",
textStroke: "white",
strokeWidth: 3
})
]
})
viewof pickMPG = Inputs.range(
d3.extent(cars, (d) => d['economy (mpg)']),
{ label: "economy (mpg):", step: 1, value: d3.min(cars, (d) => d['economy (mpg)']) }
)
Plot.plot({
marks: [
Plot.dot(cars, {
filter: (d) => d["economy (mpg)"] <= pickMPG,
x: "power (hp)",
y: "economy (mpg)"
})
]
})
cars
energy = FileAttachment("us_energy.csv").csv({ typed: true })
aapl = FileAttachment("aaplStock.csv").csv({ typed: true })
goog = FileAttachment("googStock.csv").csv({ typed: true })
tsla = FileAttachment("tslaStock.csv").csv({ typed: true })
stocks = aapl
.map((d) => ({ ...d, symbol: "aapl" }))
.concat(
goog.map((d) => ({ ...d, symbol: "goog" })),
tsla.map((d) => ({ ...d, symbol: "tsla" }))
)
.map((d) => ({ ...d, Date: d3.timeParse("%m/%d/%y")(d.Date) }))
function sumOfSquares(arr) {
return arr.reduce((sum, num) => sum + Math.pow(num, 2), 0);
}
function countVowels(str) {
const vowelMatch = str.match(/[aeiou]/gi); // Matches vowels (case insensitive)
return vowelMatch ? vowelMatch.length : 0; // Returns the count or 0 if no matches
}
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.
