pixel flipper, data sifter. trying to see what I can while I'm here
data = FileAttachment("seattle-weather.csv").csv({typed: true})
import {Table} from "@observablehq/inputs"
Table(data)
Plot // Plot is available in Observable by default
// type your code here
Plot.plot({
marks: [
Plot.line(data, {x: "date", y: "temp_min", stroke:"blue"}), // replace … by the field names.
Plot.line(data, {x: "date", y: "temp_max", stroke:"red"}),
],
width
})
viewof k = Inputs.range([1, 60], { step: 1, label: "k", value: 7} )
// type your code here
Plot.plot({
marks: [
Plot.line(data, Plot.windowY({x: "date", y: "temp_min", stroke:"blue", k})), // replace … by the field names.
Plot.line(data, Plot.windowY({x: "date", y: "temp_max", stroke:"red", k})),
],
width
})
// type your code here
Plot.plot({
marks: [
Plot.areaY(data, Plot.windowY({x: "date", y1: "temp_min", y2: "temp_max", fill:"lightgrey", k})),
// Plot.line(data, Plot.windowY({x: "date", y: "temp_max", stroke:"red", k})),
],
width,
grid: true
})
// type your code here
Plot.plot({
marks: [
Plot.line(data, Plot.windowY({
x: "date",
y: d => d.temp_max - d.temp_min,
stroke:"black",
k
})),
],
width,
grid: true
})
// type your code here
// type your code here
Plot.plot({
marks: [
Plot.areaY(data, Plot.windowY({
x: "date",
y1: "temp_min",
y2: "temp_max",
k: k,
fill: "lightgrey"
})),
Plot.line(data, Plot.windowY({
x: "date",
y: d => (d.temp_max + d.temp_min) / 2,
stroke:"black",
k: k
})),
],
width,
grid: true
})
{
let x = 5
let y = 6
return {
x: x, y: y
}
}
viewof bins = Inputs.range([1, 52], { step: 1, label: "bins" })
// Type your code here
Plot.plot({
marks: [
// Plot.line(data, { x: "date", y: "precipitation" })
Plot.rectY(data, Plot.binX({y: "sum" }, {
x: "date",
y: "precipitation",
thresholds: d3.timeWeek.every(bins)
}))
]
})
// type your code here
Plot.plot({
width: width,
x: {
axis: null
},
y: {
tickFormat: i => "SMTWTFS"[i],
tickSize: 0
},
color: {
scheme: "blues",
// type: "sqrt"
},
facet: {
data: data,
y: d => d.date.getUTCFullYear(),
},
marks: [
Plot.frame({stroke: "#ccc"}),
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
// type your code here
// type your question here
// type your code here
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.
