2b:null 2c:["$","title",null,{"children":"230202_SSEN/Plot Exploration: Weather | Ssen Kim | Observable"}] 31:T79d,viewof q_average = Q({ title: "Question 4", questions: [ `We've seen the range of highs and lows, but how about the daily average temperature over time?`, `우리는 최고점과 최저점의 범위를 보았지만 시간이 지남에 따라 일일 평균 기온은 어떻습니까?` ], guides: [ `Sometimes your data table has something you want to show but it isn't in it's own column. We can calculate the daily average temperature by adding the *temp_min* and *temp_max* and dividing by two.-데이터 테이블에 표시하고 싶은 항목이 있지만 자체 열에 없는 경우가 있습니다. temp_min과 temp_max를 더하고 2로 나누어 일별 평균 기온을 계산할 수 있습니다.
[Plot marks](https://observablehq.com/@observablehq/plot-marks) allow you to easily do this by passing an "accessor function" to a channel instead of a column name-를 사용하면 열 이름 대신 채널에 "접근자 함수"를 전달하여 쉽게 이 작업을 수행할 수 있습니다.`, `Admittedly, we are encouraging a not-quite-right way of calculating the average daily temperature here, see this [PDF](https://sites.stat.washington.edu/peter/statclim/ma&guttorp.pdf) for details on better ways!
물론, 트위터에서는 일일 평균 기온을 계산하는 올바른 방법이 아닌 다른 방법을 권장하고 있으니 더 나은 방법에 대한 자세한 내용은 이 PDF를 참조하세요!` ], hints: [ `Plot.plot({ marks: [ Plot.lineY(data, {x: "…", y: (d) => (d["…"] + d["…"]) / 2 }) // replace … by the field names ] })` ], solutions: [ `Plot.plot({ grid: true, width: width, marks: [ Plot.areaY(data, Plot.windowY({x: "date", y1: "temp_min", y2: "temp_max", k: 28, fill: "lightgray", curve: "step"})), Plot.lineY(data, Plot.windowY({x: "date", y: d => (d.temp_min + d.temp_max) / 2, k: 28, stroke: "#111", curve: "step" })) ] })`] })32:T484,viewof q_bin = Q({ title: "Question 5", questions: [ "How rainy is it in Seattle? Let's take a look at how much it rains each month.
시애틀에는 비가 얼마나 오나요? 매월 비가 얼마나 내리는지 살펴보세요." ], guides: [ `To agregate our data over time we can leverage the [Plot.**bin**](https://observablehq.com/@observablehq/plot-bin) transform using [d3's time intervals](https://github.com/d3/d3-time) to determine the thresholds of our bins.`, `When using the bin transform, the [Plot.**rect**](https://observablehq.com/@observablehq/plot-rect) transform is a natural companion for rendering the bins.`, ], hints: [ `Plot.plot({ facet: { data: data, y: d => d.date.getUTCFullYear(), }, marks: [ Plot.rectY(data, Plot.binX({ y: "sum" }, { thresholds: d3.timeMonth, ... }) ` ], solutions: [ `Plot.plot({ grid: true, width: width, marks: [ Plot.rectY(data, Plot.binX({ y: "sum" }, { x: "date", y: "precipitation", stroke: "#111", thresholds: d3.timeMonth, insetLeft: 2, insetRight: 2 })), ] })`] })33:T6b1,viewof q_calendar = Q({ title: "Question 6", questions: [ "How rainy is it in Seattle every day? It would be interesting to see a calendar view of how much it rains." ], guides: [ `To make a calendar view we can leverage the [Plot.**cell**](https://observablehq.com/@observablehq/plot-cell) mark to draw lots of little rectagnles along with [faceting](https://observablehq.com/@observablehq/plot-facets) to break the data up into years. We will also want to make use of [d3's time calculations](https://github.com/d3/d3-time).`, `Try using a [sqrt scale](https://observablehq.com/@observablehq/plot-scales) to get a better sense of when times are relatively dry. This can be used on the y scale in a line chart or the color scale of the calendar view.`, ], hints: [ `Plot.plot({ facet: { data: data, y: d => d.date.getUTCFullYear(), }, marks: [ 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: "…", }) ` ], solutions: [ `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, }) ] })`] })34:T505,viewof q_text = Q({ title: "Question 7", questions: [ "The *weather* column of the data gives a single word description of the weather for each day. It would be interesting to represent that visually using the calendar view, perhaps using Emoji 🌞? " ], guides: [ `The [Plot.**text**](https://observablehq.com/@observablehq/plot-text) mark can be placed with *x* and *y* channels just like the cell mark, but instead of a fill we want to give it some text to display.`, ], hints: [ `text: (d) => { const emoji = { "rain": "🌧", "drizzle": "🌦", "fog": "🌫", "sun": "☀️", "snow": "❄️"} return emoji[d.weather] }, ` ], solutions: [ `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] }, fontSize: 12 }) ] })`] })35:T82d,viewof q_group = Q({ title: "Question 8", questions: [ "Can we see patterns in the precipitation on a monthly basis with a heatmap?
히트맵으로 월별 강수량 패턴을 볼 수 있나요?" ], guides: [ `We could approach this a number of ways, let's try out two different transforms to do it.`, `First, we can continue using our cell marks by using a [Plot.**group**](https://observablehq.com/@observablehq/plot-group) transform to average all of the data points that occur within the same day of the same month of the year. This will give us a heatmap of daily precipitation over the years.`, `Another way we could approach this is the same way we did in Question 5, with temporal binning, leveraging [Plot.**bin**](https://observablehq.com/@observablehq/plot-bin) to calculate the average precipitation per month and rendering those as a bar chart.` ], hints: [ ` Plot.cell(data, Plot.group({fill: "mean"}, { x: d => d.date.getUTCDate(), y: d => d.date.getUTCMonth(), fill: "precipitation", inset: 0.5 }))`, `Plot.rectY(data, Plot.binX({ y: "mean" }, { x: "date", y: "precipitation", stroke: "#111", thresholds: d3.timeMonth })` ], solutions: [ `Plot.plot({ width: width, height: 350, padding: 0, color: { scheme: "blues", 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 })) ] })`, `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: "steelblue", strokeOpacity: 0.5 })), ] })` ] })36:[{"id":"9a74aa4f8addb29c94f8a780f9b6211ffa49fc6cd956d665c85ada864b6ada28fb44e047062a927663f6f7885a8a02cfede8ed60ac79d72130c913b0820ec190","href":"https://static.observableusercontent.com/files/9a74aa4f8addb29c94f8a780f9b6211ffa49fc6cd956d665c85ada864b6ada28fb44e047062a927663f6f7885a8a02cfede8ed60ac79d72130c913b0820ec190","name":"weather.png","type":"image/png","lastModified":1675304507768.194,"size":666971},{"id":"831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","href":"https://static.observableusercontent.com/files/831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","name":"seattle-weather.csv","type":"text/csv","lastModified":1675304507768.194,"size":48219},{"id":"3b12c349e13f0473701a290d17e9a79b07556c06bd498dd87f00b7b5f79475101f627ccbf33e99c5c4ba22dcb2693467871dd718398c5edfa3175a87c50dd4ea","href":"https://static.observableusercontent.com/files/3b12c349e13f0473701a290d17e9a79b07556c06bd498dd87f00b7b5f79475101f627ccbf33e99c5c4ba22dcb2693467871dd718398c5edfa3175a87c50dd4ea","name":"penguins.png","type":"image/png","lastModified":1675304507768.194,"size":358223}] 2f:{"id":"3debed1497dfa4b8","slug":null,"title":"230202_SSEN/Plot Exploration: Weather","thumbnail":"1bc90fdf12e6345933f9dd68af2659be104f4de6cfca164abcfd632a48e16d64","access_level":"public","create_time":"$D2023-02-02T02:21:47.768Z","update_time":"$D2023-02-10T06:36:47.001Z","view_time":null,"first_public_time":"$D2023-02-02T02:21:47.768Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ca32d02dd4fd9da1","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":"starter_2024"},"version":1001,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null}],"members":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"230202_SSEN/Plot Exploration: Weather","cells":[{"id":0,"value":"md`# 230202_SSEN/Plot Exploration: Weather`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`

\nWelcome to this semi-guided tutorial for learning [Observable Plot](/@observablehq/plot). We have prepared a tidy dataset, along with a series of exercises that will guide you in coding your own data visualizations.\n\nThis notebook focuses on visualizing data where time is an important dimension. The idea is to quickly go beyond the simple line chart and try out some of the powerful data transformation features available in Plot.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"md`*To begin the exploration, please fork this notebook! This way your work will be saved.*\n\n----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"md`The dataset we will use is a record of daily weather in Seattle between 2012 and 2016, collected from [NOAA](https://www.ncdc.noaa.gov/cdo-web/datatools/records) in the [vega-datasets](https://github.com/vega/vega-datasets/blob/master/SOURCES.md#seattle-weathercsv) project.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = FileAttachment(\"seattle-weather.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"md`Before we begin visualizing, let's use an Observable table component and have a look at the contents, structure and dimensions of this dataset:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"md`\nSince we are focused on visualizing time, it is important to note that Plot expects JavaScript Dates when we pass in our data. Thanks to the {typed: true} option in the [FileAttachment](#data) cell, the _date_ column contains JavaScript Dates, and the numerical columns contain numbers. The *weather* column contains strings. We’re ready to use Plot 🚀\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"md`## Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"Plot // Plot is available in Observable by default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"md`*Here's a link to the Plot [documentation collection](/collection/@observablehq/plot) and the [GitHub repository](https://github.com/observablehq/plot), for reference.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"md`Now, here’s a few questions about this dataset that we can try to answer with Plot:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof q_extent = Q({\n title: \"Question 1: Extent\",\n questions: [\n `What patterns can we see in the high temperatures over the years? The low temperatures?,
수년간의 고온에서 어떤 패턴을 볼 수 있을까요? 저 기온에서는?`,\n ],\n guides: [\n `Let's start simple, try making a line with the [Plot.**line**](https://observablehq.com/@observablehq/plot-line)({x: \"dimension 1\", y: \"dimension 2\"}) mark.`,\n ],\n hints: [\n `Plot.plot({\n marks: [\n Plot.line(data, {x: \"…\", y: \"…\"}) // replace … by the field names.\n ]\n})`\n ],\n solutions: [\n `Plot.plot({\n grid: true,\n width: width,\n marks: [\n Plot.line(data, {x: \"date\", y: \"temp_max\", stroke: \"red\"}),\n Plot.line(data, {x: \"date\", y: \"temp_min\", stroke: \"blue\"}),\n ]\n})`]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":" //viewof k=Inputs.range([1,60], {step:1, label: \"k\", value:7})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"// type your code here\nPlot.plot({\n marks: [\n Plot.line(data,Plot.windowY({x: \"date\", y: \"temp_min\", stroke:\"#A1B9C5\", k:7})), // replace … by the field names.//k는 뭔가 부드럽게 고친느낌인데?\n Plot.line(data,Plot.windowY({x: \"date\", y: \"temp_max\", stroke:\"#C07560\", k:7})),\n ],\n width: 1500 //너비 변경해 봄 - x축 연도랑 구분할 수 없을까? 자동으로 연도-월 섞이고 있음\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"Plot.plot({\n marks: [\n Plot.line(data, {x: \"date\", y: \"temp_max\"}) // replace … by the field names.\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"viewof k=Inputs.range([1,60],{step:1, label:\"k-표시정도\", value:7})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"Plot.plot({\n marks: [\n Plot.line(data,Plot.windowY({x:\"date\", y:\"temp_min\", stroke:\"#A1B9C5\", k})),\n Plot.line(data,Plot.windowY({x:\"date\", y:\"temp_max\", stroke:\"#C07560\", k}))\n ],\n width: 1500\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"근데... 이거 어떻게 읽어야 하지?;; \n2012년 부터 2015년까지 2015년 7월달에 최고 온도를 찍음, 최저온도는 2013년 말 11월 이후로 추측. \n역시 이거 일교차로 비교하는게 맞겠는데","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"viewof q_window = Q({\n title: \"Question 2\",\n questions: [\n `Daily temperature fluctuations make it hard to see broad trends, can we smooth the lines?`,\n ],\n guides: [\n `이를 수행하는 한 가지 방법은 롤링 평균을 사용하는 것입니다. 28일 롤링 평균은 각 데이터 요소의 값을 이전 28일의 평균으로 대체합니다.(그래서 스무스하게 바뀌는 거군- windowY는 롤링평균을 위해 쓰임, 변수는 k 사용`,\n `Plot supports rolling averages with the [window transform](https://observablehq.com/@observablehq/plot-map). To use a transform you pass all of your mark options (the options for Plot.**line**) to Plot.**windowY** with the addition of the **k** parameter.`,\n ],\n hints: [\n `Plot.plot({\n marks: [\n Plot.line(data, Plot.windowY({x: \"…\", y: \"…\", k: 28})) // replace … by the field names.\n ]\n})`\n ],\n solutions: [\n `Plot.plot({\n grid: true,\n width: width,\n marks: [\n Plot.line(data, Plot.windowY({x: \"date\", y: \"temp_max\", k: 28, stroke: \"red\"})),\n Plot.line(data, Plot.windowY({x: \"date\", y: \"temp_min\", k: 28, stroke: \"blue\"})),\n ]\n})`,\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"1,2번이 합쳐져서 1번 답으로 나온 케이스!\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":470,"value":"A(q_window)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"viewof q_area = Q({\n title: \"Question 3\",\n questions: [\n `Let's visualize the area between the high and low temperatures.`,\n ],\n guides: [\n `Instead of using Plot.**line** let's use the [Plot.**areaY**](https://observablehq.com/@observablehq/plot-area) mark.`,\n `You can also use the[ Plot.**windowY**](https://github.com/observablehq/plot#map) function with the area mark to get the 28-day rolling average.`\n ],\n hints: [\n `Plot.plot({\n marks: [\n Plot.areaY(data, {x: \"…\", y1: \"…\", y2: \"…\"}) // replace … by the field names.\n ]\n})`\n ],\n solutions: [\n `Plot.plot({\n grid: true,\n width: width,\n marks: [\n Plot.areaY(data, {x: \"date\", y1: \"temp_min\", y2: \"temp_max\", fill: \"lightgray\", curve: \"step\"})\n ]\n})`,\n `Plot.plot({\n grid: true,\n width: width,\n marks: [\n Plot.areaY(data, Plot.windowY({x: \"date\", y1: \"temp_min\", y2: \"temp_max\", k: 28, fill: \"lightgray\"}))\n ]\n})`]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"// type your code here\nPlot.plot({\n marks: [ \n Plot.areaY(data,Plot.windowY({x: \"date\", y1: \"temp_max\", y2:\"temp_min\", fill:\"#A1B9C5\", k})), \n //Plot.areaY(data,Plot.windowY({x: \"date\", y: \"temp_max\", stroke:\"#C07560\", k})),\n ],\n width,\n grid:true//그리드 넣기\n \n})\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"// type your code here\nPlot.plot({\n marks: [ \n Plot.line(data,Plot.windowY({\n x: \"date\", \n y: d=>d.temp_max-d.temp_min,\n stroke:\"#A1B9C5\", \n k\n })), \n ],\n width,\n grid:true \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"A(q_area)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"Plot.plot({\n marks: [\n Plot.areaY(data,Plot.windowY({x: \"date\", y1: \"temp_max\", y2: \"temp_min\", fill:\"#A1B9C5\", fillOpacity: 0.5, k:k})),\n Plot.lineY(data,Plot.windowY({x:\"date\", y:d=>(d.temp_max+d.temp_min)/2,stroke:\"#CB4C4E\", k:k})),\n ],\n width:width,\n grid:true,\n color:{legend:true}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"md`# 230209_여기까지`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"Plot.plot({\n marks: [ \n Plot.areaY(data, Plot.windowY({\n x:\"date\",\n y1:\"temp_min\",\n y2:\"temp_max\",\n k:k,//아직 이렇게 쓰는 이유를 잘 모르겠다.-이동평균 개념이라고\n fill:\"#BDCCD4\"\n })),\n Plot.lineY(data,Plot.windowY({\n x: \"date\", \n y: d=>(d.temp_max+d.temp_min)/2,\n stroke:\"black\", \n k:k\n })), \n ],\n width,\n grid:true \n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"평균 기온이 올라가는 것으로 보임 - 특히 최저 온도 기준으로 보기\n연도/계절별로 쪼개서 보면 더 잘 나올 것 같은데","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":922,"value":"Plot.dot(data, \n {x: \"date\", y: \"temp_min\", //what do we call these? `x ` and `y` are data driven \"channels\"\n fill:\"blue\", fillOpacity: 0.2}).plot({width:width}) //꼭 이런건 색을 바꿔봐야 한 느낌이 든단 말이지.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"최저 온도가 점점 상승하고 있다는걸 보여주고 싶음.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":808,"value":"[youtube Link_1:07:02](https://youtu.be/SnLBbbQzK1E?t=4022)\n
230202 여기까지.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":811,"value":"{\n let x=5\n let y=6\n return {\n x:x,y:y\n }\n}//위의 k:k 에 대한 답변, 실제로 return을 쓸 때 x값과 y값을 지정하는 방식이 맞음. 우리가 생략해서 쓰고 있던 것.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"A(q_average)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"md`---\nThe next few questions will leverage some functions from [D3.js](https://d3js.org), which is available in Observable notebooks by default. In particular we will make use of [d3-time](https://github.com/d3/d3-time)'s handy date functions.\n
다음 몇 문제는 D3.js의 도움을 받을 것임, Observable 노트북에서 기본적으로 사용 가능한것, 특히 [d3-time]의 함수를 이용해서 사용할 것\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"viewof bins = Inputs.range([1,52],{step:1, label:\"bins\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"// Type your code here\nPlot.plot({\n marginLeft:100, //그래프의 y축이랑 그래프 시작지점이랑 떨어뜨리는 방법은 없을까?\n marks:[\n //Plot.line(data,{x: \"date\", y:\"precipitation\"})\n Plot.rectY(data,Plot.binX({y: \"sum\"},{\n x:\"date\", \n y: \"precipitation\",\n thresholds: d3.timeWeek.every(bins)\n }))\n],\n \n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"[Observable Plot](https://observablehq.com/collection/@observablehq/plot)\n
지금까지 배운 그래프&다른 기본 그래프들도 코딩으로 볼 수 있음. 다음에 이거 할까?
<자답> 유투브 긴 영상들 위주로 봐도 될 거야 이런식이면","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":732,"value":"A(q_bin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"Plot.plot({\n //facet: {\n //data: data,\n //y: d => d.date.getUTCFullYear(),\n //},\n marks: [\n Plot.rectY(data, Plot.binX({ y: \"sum\" }, {\n x:\"date\",\n y:\"precipitation\",\n stroke:\"#7297A0\",\n thresholds: d3.timeMonth,\n insetLeft: 2, //막대 사이를 떨어뜨리기 위해 간격 주기\n insetRight: 2\n \n })),\n ]\n})\n \n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"Plot.plot({\n width:width,\n x:{\n axis:null\n },\n y:{\n tickFormat:i => \"SMTWTFS\"[i],\n tickSize:0\n },\n color:{\n scheme: \"blues\",\n type:\"sqrt\",\n legend:true\n },\n facet: {\n data: data,\n y: d => d.date.getUTCFullYear()\n },\n marks: [\n Plot.frame({stroke:\"#CCC\"}),\n Plot.cell(data, {\n // lay the days out in the x direction based on the week of the year\n x: d => d3.utcWeek.count(d3.utcYear(d.date), d.date), \n // lay the days out in the y direction based on day of the week\n y: d => d.date.getUTCDay(), \n fill: \"precipitation\",\n title:\"precipitation\",\n inset:0.5\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"A(q_calendar)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"// type your code here\nPlot.plot({\n width:width,\n x:{\n axis:null\n },\n y:{\n //type:\"point\",\n tickFormat:i => \"SMTWTFS\"[i],\n tickSize:0\n },\n\n //color:{\n //scheme: \"blues\",\n //type:\"sqrt\",\n //legend:true\n //},\n facet: {\n data: data,\n y: d => d.date.getUTCFullYear(),\n },\n marks: [\n Plot.text(data,{\n 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\n y: d => d.date.getUTCDay(), // lay the days out in the y direction based on day of the week\n text: (d) => {\n const emoji = { \"rain\": \"🌧\", \"drizzle\": \"🌦\", \"fog\": \"🌫\", \"sun\": \"☀️\", \"snow\": \"❄️\"}\n return emoji[d.weather]\n },\n fontSize:12\n })\n \n \n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"A(q_text)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"// type your code here\nPlot.plot({\n width:width,\n height: 350,\n padding:0,\n color:{\n scheme:\"blues\",\n type:\"sqrt\",\n legend:true\n },\n y:{\n tickFormat:i=>\"JFMAMJJASOND\"[i]\n },\n marks:[Plot.cell(data,Plot.group({fill:\"mean\"},{\n x:d=>d.date.getUTCDate(),\n y:d=>d.date.getUTCMonth(),\n fill:\"precipitation\",\n inset:0.5\n }))\n ]\n})\n\n\n//Plot.cell(data, Plot.group({fill:\"mean\"},{\n// x:d=>d.date.getUTCDate(),\n //y:d=>d.date.getUTCMonth(),\n //fill:\"precipitation\",\n //inset:0.5\n//}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"Plot.plot({\n grid:true,\n width:width,\n height:400,\n y:{type:\"sqrt\"},\n marks:[\n Plot.rectY(data, Plot.binX({y:\"mean\"},{\n x:\"date\",\n y:\"precipitation\",\n stroke:\"#111\",\n thresholds:d3.timeMonth,\n insetLeft:2,\n insetRight:2\n })),\n\n Plot.lineY(data, Plot.windowY({x:\"date\",y:\"precipitation\",k:28, stroke:\"#A88C7D\",strokeOpacity:0.8})),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"A(q_group)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"md`# 230210_마무리!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"md`---\n

Congratulations! You’ve made it! Now for the last item, please ask your own question to the data:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"// type your question here\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"// type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"md`*Don’t hesitate to share your notebook, and feel free to comment on the original notebook so we can make this tutorial better for the next person. Thank you!*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"md`*Thanks to everyone who tried our first draft and sent suggestions, in particular: [John](/@john-guerra), [Maya](/@mayagans), [Claudio](/@esperanc), [Fabian](/@mootari).*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"md`\n

\n \nIf you enjoyed this, try out our other [Exploration Tutorials!](https://observablehq.com/collection/@observablehq/plot-explorations)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"md`If you'd like to get a sense for all the visualizations you can make in this exploration, click the \"Show all\" checkbox below:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"viewof showAll","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"md`The structure of this exploration is setup in the introductory [Penguins Plot Exploration](https://observablehq.com/@data-workflows/plot-exploration-penguins). If you are interested in using, improving or giving feedback on the structure or content please don't hesitate to fork or comment!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {Q, A, styles, viewof showAll} with { data } from \"@observablehq/plot-exploration-penguins\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"styles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"