25:null 26:["$","title",null,{"children":"Learn D3: 데이터 | Chloe Noh | Observable"}] 2b:Taff,md`이 노트북에는 일일 온도 축정에 대한 CSV파일이 있습니다. ${keyStyled("Shift-Cmd-U")} [keyboard shortcut](/@observablehq/keyboard-shortcuts)을 사용해서 이 파일을 첨부합니다; 또한 노트북 메뉴를 통해 파일에 접근하거나 노트북 상단 클립모양을 클릭하여 파일 창으로 파일을 드래그 앤 드롭해서 파일 첨부할 수도 있습니다 This notebook has a CSV file of daily temperature readings. I attached it using the ${keyStyled("Shift-Cmd-U")} [keyboard shortcut](/@observablehq/keyboard-shortcuts); you can also attach a file by dragging and dropping a file onto the files pane, which is accessible through the notebook menu or by clicking the paperclip above.`2c:[{"id":"cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","href":"https://static.observableusercontent.com/files/cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","name":"temperature.csv","type":"text/csv","lastModified":1593612110677.9,"size":5873}] 29:{"id":"1b28ff49f2b04d76","slug":"learn-d3/3","title":"Learn D3: 데이터","thumbnail":"9536fe5ee140e834af0b8dbd79161d674c087cd61d78f554d3f168191b13923f","access_level":"public","create_time":"$D2020-07-01T14:01:50.677Z","update_time":"$D2020-07-07T04:36:56.912Z","view_time":null,"first_public_time":"$D2020-07-07T04:22:21.850Z","has_unpublished_edits":null,"fork":{"id":"f9510e4b68b21a4c","slug":"learn-d3-data","title":"Learn D3: Data","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab524f61107f6001","login":"shwldus3","name":"Chloe Noh","avatar_url":"https://avatars-next.observableusercontent.com/46bc2c13e24f5ccf64010c29167b92465d7b07ecf5cfe80239748ababd375ee6","tier":"starter_2024"},"version":831,"publish_version":831,"role":null,"authored":false,"authors":[{"type":"individual","id":"225ae9197ed1774c","login":"shwldus3","name":"Chloe Noh","avatar_url":"https://avatars-next.observableusercontent.com/46bc2c13e24f5ccf64010c29167b92465d7b07ecf5cfe80239748ababd375ee6","tier":null}],"members":[{"type":"individual","id":"225ae9197ed1774c","login":"shwldus3","name":"Chloe Noh","avatar_url":"https://avatars-next.observableusercontent.com/46bc2c13e24f5ccf64010c29167b92465d7b07ecf5cfe80239748ababd375ee6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2f2e30c35000ea9b","slug":"learn-d3","title":"Learn D3","owner":{"id":"ab524f61107f6001","login":"shwldus3","name":"Chloe Noh"}},"type":"notebook","body":{"title":"Learn D3: 데이터","cells":[{"id":105,"value":"md`# Learn D3: 데이터 \nLearn D3: Data\n\nObservable에서 [데이터에 접근](/@observablehq/introduction-to-data)하는 다양한 방법이 있씁니다. 그러나 막 시작할 땐 가장 단순한 것부터 시작해봅시다: [file attachments](/@observablehq/file-attachments). \nThere are a variety of ways to [access data](/@observablehq/introduction-to-data) in Observable. But as we’re just starting out, let’s use the simplest: [file attachments](/@observablehq/file-attachments).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"FileAttachment(\"temperature.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`FileAttachment 함수는 [blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob), [buffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), 또는 (UTF-8로 인코드된) 텍스트처럼 원하는 표현방식을 선택할 수 있는 단순한 손잡이를 돌려줍니다. CSV 파일의 경우 *file*.text를 호출해서 파일 내용을 문자열로 지정할 수 있습니다. \nThe FileAttachment function merely returns a handle that allows you to choose the desired representation, such as a [blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob), a [buffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), or (UTF-8 encoded) text. For a CSV file, we can call *file*.text to get a promise to the file’s contents as a string.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"FileAttachment(\"temperature.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`물론 더 유용한 것은 *date* 및 *temperature* 속성을 가진 객체로 문자열을 파싱하는 것입니다. 그것은 우리가 문자열을 [d3.csvParse](https://github.com/d3/d3-dsv/blob/master/README.md#csvParse)로 전달하는 것으로 할 수 있습니다. (아래 부록에 D3가 로드돼서, 노트북의 모든 cell에서 사용할 수 있습니다.) \nOf course, more useful is to parse the text into objects with named *date* and *temperature* properties, which we can do by passing the text to [d3.csvParse](https://github.com/d3/d3-dsv/blob/master/README.md#csvParse). (D3 is loaded in the appendix below, making it available to every cell in the notebook.)\n\n아래 배열을 클릭하여 객체를 확인해보세요. \nClick the array below to inspect the objects.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3.csvParse(await FileAttachment(\"temperature.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`Observable은 암묵적으로 cell을 넘어서 promises(약속 - 이하 동일)을 기다리는 반면, 우리는 동일한 cell 내에서 약속된 값을 접근하고 싶기 때문에 반드시 file.text 약속을 기다려야 합니다. \nWhile Observable implicitly awaits promises across cells, we must await the *file*.text promise because we wish to access the promised value within the same cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`기본적으로, D3는 타입 추론을 수행하지 않아서, *date*와 *temperature* 속성 모두 문자열입니다. 따라서 작업하기 좀 까다롭습니다. 예를 들어 두 온도를 추가하려 한다면, 문자열로 온도값이 연결됩니다. 아이코! 😝 \nBy default, D3 does not perform type inference, so both the *date* and *temperature* properties are strings. This makes them tricky to work with. For example, if you tried to add two temperatures, it would concatenate them. Oops! 😝`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"\"62.7\" + \"59.9\" // 122.6? Nope!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`이 문자열들을 date와 number로 변환하기 위해서, d3.csvParse 두번째 매개변수로 함수를 전달합니다. 이 함수는 원하는대로 row 객체를 조작하기 위해 각 row마다 호출됩니다. 더 좋은 방법으로 형식을 자동으로 추론하는 [d3.autoType](/@d3/d3-autotype)을 두번째 매개변수로 전달해보세요. \nTo convert these strings into dates and numbers, pass a function as the second argument to d3.csvParse. This function is called for each row to manipulate the row’s object as desired. Better yet, pass [d3.autoType](/@d3/d3-autotype) to infer type automatically.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3.csvParse(await FileAttachment(\"temperature.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"md`만일 위 배열을 확인한다면, (파란 문자열이 아니라) 청록색 date들과 number들을 볼 수 있고, 이는 성공적으로 타입 변환이 된 것을 확인할 수 있습니다. \nIf you inspect the array above, you’ll see teal dates and numbers (rather than blue strings), confirming successful type conversion.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`자 Observable cell의 구문에 대해 간단히 설명해보겠습니다. 지금까지는 [expression](https://2ality.com/2012/09/expressions-vs-statements.html)(표현식 - 이하 동일) cell들을 보았습니다. 그건 이름이 있거나 익명입니다. 두개의 cell 타입을 모두 확인할 수 있지만, 이름이 있는 cell만 다른 cell에서 참조할 수 있습니다. \nLet’s briefly digress into the syntax of Observable cells. So far you’ve seen only [expression](https://2ality.com/2012/09/expressions-vs-statements.html) cells, which can be named or anonymous. Both types of cells can be inspected, but only named cells can be referenced from other cells.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"1 + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"name = \"fred\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"[...name].reverse().join(\"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`단순한 표현식 보다 더 복잡한 코드의 경우, 중괄호로 둘러쌓인 하나 또는 더 많은 명령문인 *block(블록 - 이하동일)*을 작성하세요. 블록 cell들은 함수와 비슷하고, 오직 블록이 [return](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return)을 하거나 [yield](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield)을 할 때만 값을 생성합니다. 그리고 표현식 cell처럼 다른 cell에서는 이름있는 블록 cell을 참조할 수 있습니다. \nFor code that’s more complex than a simple expression, write a *block*, which is one or more statements surrounded by curly braces. Block cells, similar to functions, only produce a value if they [return](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return) or [yield](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield). And like expression cells, named block cells can be referenced from other cells.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"sum = {\n let s = 0;\n for (let i = 0; i < 10; ++i) {\n s += i;\n }\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`위에 *s*와 같은 지역 변수는 나머지 노트북에서 보이지 않습니다; 오직 이름있는 cell로 리턴된 값만이 다른 cell에서 접근 가능합니다. 이 방식으로 Observable은 스프레드 시트와 유사합니다. 각 cell은 단일 값을 정의합니다. \nLocal variables, such as *s* above, are not visible to the rest of the notebook; only the returned value of a named cell is accessible from other cells. In this way Observable is akin to a spreadsheet: each cell defines a singular value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"s // not defined!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"md`진행하던 작업으로 돌아가서 여기에 *data*라는 이름의 cell으로 CSV파일을 가져오고, 파싱하고, 타입 변환하는 명확한 방법이 있습니다. 여러분의 데이터가 d3.autoType으로 호환되지 않는 경우 이 방식을 사용할 수 있습니다. (확실하지 않은 경우, 자동 타입 추론이나 [consult the documentation](https://github.com/d3/d3-dsv/blob/master/README.md#autoType)에 의존하지 마세요.) \nGetting back to the task at hand, here’s a more explicit way of fetching, parsing, and type-converting the CSV file in a cell named *data*. You might take this approach if your data isn’t compatible with d3.autoType. (If you’re unsure, don’t rely on automatic type inference or [consult the documentation](https://github.com/d3/d3-dsv/blob/master/README.md#autoType).)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"data = {\n const text = await FileAttachment(\"temperature.csv\").text();\n const parseDate = d3.utcParse(\"%Y-%m-%d\");\n return d3.csvParse(text, ({date, temperature}) => ({\n date: parseDate(date),\n temperature: +temperature\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`데이터를 편리하게 표현했으니, 이제 작업할 수 있습니다! 예를 들어, 날짜와 온도 범위를 계산해서 범위를 파악할 수 있습니다. \nWith the data conveniently represented, we can now get to work! For example, we can compute the extents of the dates and temperatures to get a sense of scope.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"d3.extent(data, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"d3.extent(data, d => d.temperature)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md`그리고 이전에 봤던 것 처럼, 온도 분포의 빠른 파악을 위해 [example histogram](/@d3/histogram)로 확인할 수 있습니다. \nAnd as we saw previously, we can inject into the [example histogram](/@d3/histogram) for a quick sense of the temperature distribution.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"temperatures = data.map(d => d.temperature)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"import {chart as temperatureHistogram} with {temperatures as data, height} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"temperatureHistogram","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"md`온화한 기후! 아 샌프란시스코네요. 🌤 \nA temperate climate! Ah, San Francisco. 🌤\n\nObservable에서 데이터로 작업할 때 미묘한 고려사항은 코드를 단일 cell에 넣을 것인지 아니면 별도 cell에 넣을 것인지 입니다. 경험 상 가장 좋은 규칙은 cell이 다른 cell에서 이름있는 값(예: *data*)을 참조하도록 정의하거나 독자에게 유용한 정보(예: 위 산문, 차트, 데이터를 확인하는 cell)을 표시해야 합니다. \nA subtle consideration when working with data in Observable is whether to put code in a single cell or separate cells. A good rule of thumb is that a cell should either define a named value to be referenced by other cells (such as *data* above), or it should display something informative to the reader (such as this prose, the chart above, or cells which inspect the data).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"md`이 규칙에 중요한 의미는 cell간 암시적 종속성을 피해야 한다는 것입니다: 이름을 지정하는 것에만 의존. \nA critical implication of this rule is that you should avoid implicit dependencies between cells: only depend on what you can name.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"md`왜일까요? 노트북의 [dataflow](/@observablehq/how-observable-runs)은 cell 참조로 작성됩니다. 만일 cell에 이름이 없는 경우, 셀은 참조할 수 없으며 그 영향에 암시적으로 의존하는 cell이 그 전에 실행될 수 없습니다. (Cell은 위에서 아래로가 아니라 topolocal 순서로 실행합니다.) 암시적 종속성은 개발 중 결정되지 않은 동작을 유발하고😱 노트북이 다시 로드될 때 에러💥들을 발생할 수 있습니다! \nWhy? A notebook’s [dataflow](/@observablehq/how-observable-runs) is built from its cell references. If a cell doesn’t have a name, it cannot be referenced and cells that implicitly depend on its effect may run *before* it. (Cells run in topological order, not top-to-bottom.) Implicit dependencies lead to nondeterministic behavior 😱 during development, and possible errors 💥 when the notebook is reloaded!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`예를 들어, 만일 첫번째 cell이 배열을 정의하고 두번째 cell에서 그 배열을 수정한다면, 다른 cell은 변형 전 *또는* 후를 볼 수 있습니다. 결정되지 않은 것을 피하기 위해서, 두번째 cell에 이름을 지정하고 [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) 또는 [*array*.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)로 배열을 복사해서 종속성을 명시적으로 만드세요. 아니면 이미 변형된 배열만 다른 cell에 보여지도록 두개의 cell을 결합하세요. \nFor example, if one cell defines an array and a second cell modifies it in-place, other cells may see the array before *or* after the mutation. To avoid this nondeterminism, make the dependency explicit by giving the second cell a name and copying the array using [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) or [*array*.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Or combine the two cells so that only the already-modified array is visible to other cells.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"md`데이터가 준비됐으니, 그래픽으로 넘어가겠습니다! \nWith our data so prepared, let’s move towards graphics!\n\nNext`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import {keyStyled} from \"@mbostock/keys\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 2a:"$29:body"