data = FileAttachment("seattle-weather.csv").csv({typed: true})
Inputs.table(data)
Plot // Plot is available in Observable by default
// type your code here
Plot.plot({
grid: true,
width:width,
marks: [
Plot.line(data, {x: "date", y: "temp_max", stroke: "green"}),
Plot.line(data, {x: "date", y: "temp_min", stroke: "blue"})// replace … by the field names.
]
})
// type your code here
Plot.plot({
grid: true,
width:width,
marks: [
Plot.line(data, Plot.windowY({x: "date", y: "temp_max", k: 28, stroke: "green", strokeOpacity: 0.8})),
Plot.line(data, Plot.windowY({x: "date", y: "temp_min", k: 28, stroke: "blue", strokeOpacity: 0.8}))
]
})
// type your code here
Plot.plot({
grid: true,
width:width,
marks: [
Plot.areaY(data, Plot.windowY({x: "date", y1: "temp_max", y2: "temp_min", k: 28, fill: "lightgreen"})),
]
})
// type your code here
Plot.plot({
grid: true,
width: width,
marks: [
Plot.areaY(data, Plot.windowY({x: "date", y1: "temp_min", y2: "temp_max", k: 28, fill: "lightgreen", curve: "step"})),
Plot.lineY(data, Plot.windowY({x: "date", y: d => (d.temp_min + d.temp_max) / 2, k: 28, stroke: "green", curve: "step" }))
]
})
// Type your code here
Plot.plot({
grid: true,
width: width,
marks: [Plot.frame(),
Plot.rectY(data, Plot.binX({ y: "sum" }, {
x: "date",
y: "precipitation",
stroke: "black",
thresholds: d3.timeMonth,
insetLeft: 2,
insetRight: 2
})),
]
})
// type your code here
Plot.plot({
width: width,
x: {
axis: null
},
y: {
tickFormat: i => "SMTWTFS"[i],
tickSize: 0
},
color: {
scheme: "greens",
type: "sqrt"
},
facet: {
data: data,
y: d => d.date.getUTCFullYear(),
},
marks: [
Plot.frame({stroke: "lightgrey"}),
Plot.cell(data, {
x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date),
y: d => d.date.getUTCDay(),
fill: "precipitation",
title: "precipitation",
inset: 0.5,
})
]
})
// type your code here
Plot.plot({
width: width,
height: 500,
x: {
axis: null,
},
y: {
type: "point",
tickFormat: i => "SMTWTFS"[i],
tickSize: 0
},
facet: {
data: data,
y: d => d.date.getUTCFullYear(),
},
fy: {
padding: 0.2,
},
marks: [
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]
},
insetLeft: 2,
insetRight: 2,
fontSize: 12
})
]
})
// type your code here
Plot.plot({
width: width,
height: 400,
padding: 0,
color: {
scheme: "greens",
type: "sqrt"
},
y: {
tickFormat: i => "JFMAMJJASOND"[i]
},
marks: [
Plot.cell(data, Plot.group({fill: "mean"}, {
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: "precipitation",
inset: 0.5
}))
]
})
// type your question here Across Weather Plot the maximum min Temperature and the minimum max temperature from the data
// type your code here
Plot.plot({
color: {legend: true},
facet:{data, y: "weather", marginRight: 80 },
marks: [
Plot.frame(),
Plot.tickX(data, Plot.selectMaxX({
x: "temp_max",
stroke: "red",
strokeWidth: 6,
title: "Max Temperature"
})),
Plot.tickX(data, Plot.selectMinX({
x: "temp_min",
stroke: "green",
strokeWidth: 6
})),
Plot.tickX(data, Plot.selectMaxX({
x: "temp_min",
stroke: "lightgreen",
strokeWidth: 3
})),
Plot.tickX(data, Plot.selectMinX({
x: "temp_max",
stroke: "red",
strokeWidth: 3
})),
Plot.dot(data, {
x: "temp_max",
fill: "red",
r: 2
}),
Plot.dot(data, {
x: "temp_min",
fill: "lightgreen",
r: 2
})
]
})
import {Q, A, styles, viewof showAll} with { data } from "@observablehq/plot-exploration-penguins";
styles
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.
