The avatar for @cbadatavis
Data Visualisation
Public
Worksheets: Learn Plot - Oleg Petrenko
Edited
Apr 27, 2023
Fork of 🏠 Home Exercises C: Build a Plot and Tweak It
•
1 fork
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dataRaw = aapl
Insert cell
Inputs.table(dataRaw)
Insert cell
Plot.plot({
marks: [
Plot.dot(dataRaw, {
x: "Date",
y: "Close"
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(dataRaw, {
x: "Date",
y: "Close",
r: "Volume",
fill: "Volume",
fillOpacity: 0.6
})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
color:{
legend: true,
tickFormat: d3.format(".2s")
},
marks: [
Plot.dot(dataRaw, {
x: "Date",
y: "Close",
r: "Volume",
fill: "Volume",
fillOpacity: 0.6
})
]
})
Insert cell
Insert cell
Plot.plot({
y: {grid: true},
color:{
legend: true,
tickFormat: d3.format(".2s"),
},
marks: [
Plot.dot(dataRaw, {
x: "Date",
y: "Close",
r: "Volume",
fill: "Volume",
fillOpacity: 0.6
})
]
})
Insert cell
Insert cell
Plot.plot({
x: {label: "Year →"},
y: {label: "↑ Share Price ($)", grid: true},
color:{
legend: true,
tickFormat: d3.format(".2s"),
label: "Shares Traded per Day"
},
marks: [
Plot.dot(dataRaw, {
x: "Date",
y: "Close",
r: "Volume",
fill: "Volume",
fillOpacity: 0.6
})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
x: {label: "Year →"},
y: {label: "↑ Share Price ($)", grid: true},
color:{
legend: true,
tickFormat: d3.format(".2s"),
label: "Shares Traded per Day"
},
marks: [
Plot.dot(dataRaw, {
x: "Date",
y: "Close",
r: "Volume",
fill: "Volume",
fillOpacity: 0.6
}),
Plot.text(dataRaw, {
x: "Date",
y: "Close",
text: d => (d["High"] - d["Low"]) > 8 ? d["Date"] : "",
fill: "brown"
})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
x: {label: "Year →"},
y: {label: "↑ Share Price ($)", grid: true},
color:{
legend: true,
tickFormat: d3.format(".2s"),
label: "Shares Traded per Day"
},
marks: [
Plot.dot(dataRaw, {
x: "Date",
y: "Close",
r: "Volume",
fill: "Volume",
fillOpacity: 0.6
}),
Plot.text(dataRaw, {
x: "Date",
y: "Close",
text: d => (d["High"] - d["Low"]) > 8 ? d["Date"] : "",
fill: "brown"
}),
Plot.linearRegressionY(dataRaw, {
x: "Date",
y: "Close",
stroke: "orange"
})
]
})
Insert cell

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.
Learn more