Public
Edited
Jun 29, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = FileAttachment("seattle-weather.csv").csv({typed: true})
Insert cell
Insert cell
Inputs.table(data)
Insert cell
Insert cell
Insert cell
Plot // Plot is available in Observable by default
Insert cell
Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
width:1200,
height:500,
style: {
fontSize: "15px"
},
marks: [
Plot.line(data, {x: "date", y: "temp_max",stroke:"blue",strokeOpacity:0.5}),
Plot.line(data, {x: "date", y: "temp_min",stroke:"orange",strokeOpacity:0.5}),
Plot.tickY(data,Plot.groupZ({y:"mean"},{y:"temp_max",stroke:"Blue",strokeWidth:5,strokeOpacity:0.6})),
Plot.tickY(data,Plot.groupZ({y:"mean"},{y:"temp_min",stroke:"orange",strokeWidth:5,strokeOpacity:0.6}))

]
})

Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
width:1200,
grid:true,
height: 400,
style:{
fontSize:"15px"
},
marks:[
Plot.line(data, Plot.windowY({x: "date", y: "temp_max", k: 28, stroke: "blue"})),
Plot.line(data, Plot.windowY({x: "date", y: "temp_min", k: 28, stroke: "orange"})),

]
})
Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
width:1200,
grid:true,
height: 400,
style:{
fontSize:"15px"
},
marks:[
Plot.line(data, {x: "date", y: "temp_max", k: 28, stroke: "blue"}),
Plot.areaY(data, {x: "date",
y1: "temp_max",
y2:"temp_min",
fill: "gray", fillOpacity:0.4}),
Plot.line(data, {x: "date", y: "temp_min", k: 28, stroke: "orange"}),

]
})

Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
width: 1500,
height:500,
style:{
fontSize:"15px"
},
x:{
grid:true
},
marks:
[
Plot.line(data,{x:"date",y: (d) => (d["temp_max"] + d["temp_min"])/2,stroke:"orange" })
]
})
Insert cell
Insert cell
Insert cell
Insert cell
// Type your code here
Plot.plot({
marks:[
Plot.rectY(data,
Plot.binX(
{ y:"sum"},
{
x:"date",
y:"precipitation",
fill:"darkblue",
fillOpacity:0.3,
thresholds:d3.timeMonth,
insetLeft: 2,
insetRight: 2
})
)
]
})

Insert cell
Insert cell
Insert cell
Plot.plot({
width:1000,
color:{
scheme: "blues"
},
x: {
axis: null
},
y: {
tickFormat: i => "SMTWTFS"[i],
tickSize: 0
},
facet:{
data,
y: d => d.date.getUTCFullYear(),
},
marks:[
Plot.frame({stroke:"gray"}),
Plot.cellY(data,
{
x: d => d3.utcWeek.count(d3.utcYear(d.date),d.date),
y: d => d.date.getUTCDay(),
fill: "precipitation",
}
)
]
})
Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
width:1000,
color:{
scheme: "blues"
},
x: {
axis: null
},
y: {
tickFormat: i => "SMTWTFS"[i],
tickSize: 0
},
facet:{
data,
y: d => d.date.getUTCFullYear(),
},
marks:[
// Plot.frame({stroke:"gray"}),
Plot.text(data,
{
x: d => d3.utcWeek.count(d3.utcYear(d.date),d.date),
y: d => d.date.getUTCDay(),
text: (d) => {
const emoji = { "rain": "🌧", "drizzle": "🌦", "fog": "🌫", "sun": "☀️", "snow": "❄️"}
return emoji[d.weather]
},

}
)
]
})

Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
width:1000,
color:{
scheme: "blues",
type: "sqrt"

},
y: {
tickFormat: i => "JFMAMJJASOND"[i]
},
marks:[
Plot.frame({stroke:"gray"}),
Plot.cellY(data,
Plot.group({fill: "mean"},{
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: "precipitation",
inset: 0.5
}),
)
]
})

Insert cell
Insert cell
Insert cell
// type your question here


Insert cell
// type your code here


Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {Q, A, styles, viewof showAll} with { data } from "@observablehq/plot-exploration-penguins";
Insert cell
styles
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