data = FileAttachment("seattle-weather.csv").csv({typed: true})
Inputs.table(data)
Plot // Plot is available in Observable by default
//viewof k=Inputs.range([1,60], {step:1, label: "k", value:7})
viewof k=Inputs.range([1,60],{step:1, label:"k-표시정도", value:7})
Plot.plot({
marks: [
Plot.line(data,Plot.windowY({x:"date", y:"temp_min", stroke:"#A1B9C5", k})),
Plot.line(data,Plot.windowY({x:"date", y:"temp_max", stroke:"#C07560", k}))
],
width: 1500
})
1,2번이 합쳐져서 1번 답으로 나온 케이스!
// type your code here
Plot.plot({
marks: [
Plot.areaY(data,Plot.windowY({x: "date", y1: "temp_max", y2:"temp_min", fill:"#A1B9C5", k})),
//Plot.areaY(data,Plot.windowY({x: "date", y: "temp_max", stroke:"#C07560", k})),
],
width,
grid:true//그리드 넣기
})
Plot.plot({
marks: [
Plot.areaY(data,Plot.windowY({x: "date", y1: "temp_max", y2: "temp_min", fill:"#A1B9C5", fillOpacity: 0.5, k:k})),
Plot.lineY(data,Plot.windowY({x:"date", y:d=>(d.temp_max+d.temp_min)/2,stroke:"#CB4C4E", k:k})),
],
width:width,
grid:true,
color:{legend:true}
})
md`# 230209_여기까지`
Plot.plot({
marks: [
Plot.areaY(data, Plot.windowY({
x:"date",
y1:"temp_min",
y2:"temp_max",
k:k,//아직 이렇게 쓰는 이유를 잘 모르겠다.-이동평균 개념이라고
fill:"#BDCCD4"
})),
Plot.lineY(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
}
}//위의 k:k 에 대한 답변, 실제로 return을 쓸 때 x값과 y값을 지정하는 방식이 맞음. 우리가 생략해서 쓰고 있던 것.
viewof bins = Inputs.range([1,52],{step:1, label:"bins"})
// Type your code here
Plot.plot({
marginLeft:100, //그래프의 y축이랑 그래프 시작지점이랑 떨어뜨리는 방법은 없을까?
marks:[
//Plot.line(data,{x: "date", y:"precipitation"})
Plot.rectY(data,Plot.binX({y: "sum"},{
x:"date",
y: "precipitation",
thresholds: d3.timeWeek.every(bins)
}))
],
})
Plot.plot({
width:width,
x:{
axis:null
},
y:{
tickFormat:i => "SMTWTFS"[i],
tickSize:0
},
color:{
scheme: "blues",
type:"sqrt",
legend:true
},
facet: {
data: data,
y: d => d.date.getUTCFullYear()
},
marks: [
Plot.frame({stroke:"#CCC"}),
Plot.cell(data, {
// lay the days out in the x direction based on the week of the year
x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date),
// lay the days out in the y direction based on day of the week
y: d => d.date.getUTCDay(),
fill: "precipitation",
title:"precipitation",
inset:0.5
})
]
})
// type your code here
Plot.plot({
width:width,
x:{
axis:null
},
y:{
//type:"point",
tickFormat:i => "SMTWTFS"[i],
tickSize:0
},
//color:{
//scheme: "blues",
//type:"sqrt",
//legend:true
//},
facet: {
data: data,
y: d => d.date.getUTCFullYear(),
},
marks: [
Plot.text(data,{
x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date), // lay the days out in the x direction based on the week of the year
y: d => d.date.getUTCDay(), // lay the days out in the y direction based on day of the week
text: (d) => {
const emoji = { "rain": "🌧", "drizzle": "🌦", "fog": "🌫", "sun": "☀️", "snow": "❄️"}
return emoji[d.weather]
},
fontSize:12
})
]
})
// type your code here
Plot.plot({
width:width,
height: 350,
padding:0,
color:{
scheme:"blues",
type:"sqrt",
legend:true
},
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
}))
]
})
//Plot.cell(data, Plot.group({fill:"mean"},{
// x:d=>d.date.getUTCDate(),
//y:d=>d.date.getUTCMonth(),
//fill:"precipitation",
//inset:0.5
//}))
Plot.plot({
grid:true,
width:width,
height:400,
y:{type:"sqrt"},
marks:[
Plot.rectY(data, Plot.binX({y:"mean"},{
x:"date",
y:"precipitation",
stroke:"#111",
thresholds:d3.timeMonth,
insetLeft:2,
insetRight:2
})),
Plot.lineY(data, Plot.windowY({x:"date",y:"precipitation",k:28, stroke:"#A88C7D",strokeOpacity:0.8})),
]
})
md`# 230210_마무리!`
// type your question here
// type your code here
import {Q, A, styles, viewof showAll} with { data } from "@observablehq/plot-exploration-penguins";
styles
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.