25:null 26:["$","title",null,{"children":"Learn D3: 예제 | Chloe Noh | Observable"}] 2b:[{"id":"d28dcb2f7ccecddccb458a31296dbf5f290f4915347d845ecec513b55d27e8118eb4706dcd2430bcf702251bb2afa4e1f78ae41359a56c01d2b30559679d9a8b","href":"https://static.observableusercontent.com/files/d28dcb2f7ccecddccb458a31296dbf5f290f4915347d845ecec513b55d27e8118eb4706dcd2430bcf702251bb2afa4e1f78ae41359a56c01d2b30559679d9a8b","name":"changing-stuff@1.jpg","type":"image/jpeg","lastModified":1593612061650.31,"size":80072},{"id":"3847c94c6702a07037c13c98420295e8aae20c8a4630edea8543bbf7e8a72c87dd41d455035bc3f229ef3e6736ff476a7f34bcd14f013ae0a9a6c2d45114524f","href":"https://static.observableusercontent.com/files/3847c94c6702a07037c13c98420295e8aae20c8a4630edea8543bbf7e8a72c87dd41d455035bc3f229ef3e6736ff476a7f34bcd14f013ae0a9a6c2d45114524f","name":"values@1.json","type":"application/json","lastModified":1593612061650.31,"size":16177}] 29:{"id":"7a10e1b7ddc973f4","slug":"learn-d3/2","title":"Learn D3: 예제","thumbnail":"98543ee79c224d1f9b7e0c53f0830b4ab32d97637a5139c4dfd00368335b0f71","access_level":"public","create_time":"$D2020-07-01T14:01:01.650Z","update_time":"$D2020-07-02T13:54:35.568Z","view_time":null,"first_public_time":"$D2020-07-02T13:54:58.150Z","has_unpublished_edits":null,"fork":{"id":"7420ae0e4ed77fc4","slug":"learn-d3-by-example","title":"Learn D3: By Example","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"ab524f61107f6001","login":"shwldus3","name":"Chloe Noh","avatar_url":"https://avatars-next.observableusercontent.com/46bc2c13e24f5ccf64010c29167b92465d7b07ecf5cfe80239748ababd375ee6","tier":"starter_2024"},"version":761,"publish_version":761,"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":81,"value":"md`# Learn D3: 예제\n# Learn D3: By Example\n\nD3를 시작하는 제일 좋은 방법 중 하나는 [gallery를 둘러보는 것](/@d3/gallery)입니다. \nOne of the best ways to start with D3 is to [browse the gallery](/@d3/gallery).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`운이 좋다면 as-is 용도에 맞게 만들 수 있는 예제를 찾을 수 있습니다. 이것은 처음부터 만드는 방법을 배우는 것 보다 많은 노력이 드는걸 절약할 수 있습니다. 예를 들어, 트리맵을 구성하려면 [d3-hierarchy API reference](https://github.com/d3/d3-hierarchy/blob/master/README.md)을 참조할 수 있지만, 더 빠르게 [treemap example](https://observablehq.com/@d3/treemap)를 사용하여 데이터를 대체할 수 있습니다. \nIf you’re lucky (and with many to choose from, your odds aren’t bad), you may find an example you can repurpose as-is. This can save a lot of effort over learning how to build from scratch. For example, to construct a treemap, you *could* consult the [d3-hierarchy API reference](https://github.com/d3/d3-hierarchy/blob/master/README.md), but much faster would be to take the [treemap example](https://observablehq.com/@d3/treemap) and substitute your data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`이것이 컨닝같이 느껴질 수도 있지만, 괜찮습니다!👍 예제는 재사용 가능한 템플릿이 아니라 배움을 위한 도구로 학습 주제를 담습니다. 땜질을 통해 예제를 \"Breaking(부수는 것)\"은 수동 읽기보다 더 빠르게 이해하도록 해줍니다. \nThis may feel like cheating, but it’s okay! 👍 Examples are not merely reusable templates but tools for learning, hinting at subjects for study. “Breaking” an example by tinkering—changing stuff and seeing what happens—helps you achieve understanding faster than passive reading.\n\n게다가, 재밌어요. 😺 \nPlus, it’s fun. 😺`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`

A legitimate learning strategy. Image: [DEV Community](https://twitter.com/thepracticaldev)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`우연의 일치가 아니라 Observable은 땜질을 도와줍니다. 모든 노트북을 방문하고, cell을 수정하고, 어떻게 바뀌는지 확인해보세요! 대부분의 경우에서 데이터를 대체하기 위해 필요한 것은 파일을 바꾸기 위해 클릭하는 것입니다. 만일 결과가 맘에 들면, forking(포크)로 여러분의 작업을 저장하세요. \nNot by coincidence, Observable is designed to help you tinker. Visit any notebook, edit a cell, and see what happens! In many cases all it takes to substitute your data is clicking to replace a file. If you like the result, save your work by forking.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`또한 예제를 삽입할 수 있고 코드에 몰두하지 않고도 예제들을 땜질할 수 있습니다. 이는 D3로 시작하는 가장 빠른 방법이라 단언할 수 있고, 여러분은 배우면서 더욱 더 성장하게 될 것입니다. \nYou can also import examples and tinker with them without diving into the code. This is undoubtedly the fastest way to start with D3, and it’ll grow more powerful as you learn.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`자 어떻게 하는지 한번 보세요. \nLet’s see how.\n\n일련의 숫자들을 건네주었습니다. 이 데이터에 대해 여러분은 무엇을 얘기할 수 있나요? \nSay I hand you a set of numbers. What might you tell me about this data?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"values = FileAttachment(\"values@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"md`손으로 몇개의 값을 검증할 순 있지만, 그닥 드러나는 점이 없습니다. 손으로 검증한 소수 값이 전체 분포를 나타내는지 아닌지 알 수 있는 방법은 없습니다. 만일 D3(버전 5)를 [requiring-가져와서](/@observablehq/introduction-to-require) 최소, 중간, 최대 값과 같은 [summary statistics-요약통계](/@d3/d3-mean-d3-median-and-friends)를 계산하면 어떨까요? \nYou could inspect a few values by hand, but this won’t reveal much. There’s no way to know if the handful of values you inspect is representative of the overall distribution. What if you computed a few [summary statistics](/@d3/d3-mean-d3-median-and-friends), such as the min, median and max, by [requiring](/@observablehq/introduction-to-require) D3 (version 5)?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"[d3.min(values), d3.median(values), d3.max(values)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`글쎄요... 뭔가가 있습니다. 그러나 단순한 값보다 분포의 감각을 얻기 위해 우리는 풍부한 뭔가가 필요합니다. \nWell… that’s something. But we need something richer than a single number to get a sense of the distribution.\n\n시각화가 필요합니다. 특히, 히스토그램. 그래서 여기 [histogram example-히스토그램 예제](/@d3/histogram)를 [import-삽입](/@observablehq/introduction-to-imports)하고 import의 *with*절(Observable JavaScript에 고유 기능)을 사용해서 숫자 배열 *values*를 *data*로 치환해보세요. \nWe need a visualization. Specifically, a histogram. So let’s [import](/@observablehq/introduction-to-imports) the [histogram example](/@d3/histogram) and use the *with* clause of the import (a feature unique to Observable JavaScript) to substitute our *values* array of numbers as the *data*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {chart as chart1} with {values as data} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"chart1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"md`*Et voilà!(그리고 자!)* 보이는 것처럼: 데이터는 대략 0을 중심으로 정규 분포를 형성합니다. 저자는 예상값이 ${tex`\\mu = 0`}과 표준 편차 ${tex`\\sigma = 1`}인 [d3.randomNormal](/@d3/d3-random)를 사용해서 이 값들을 생성했습니다. \n*Et voilà!* Now we see: the data roughly forms a normal distribution centered on zero. (I created these values using [d3.randomNormal](/@d3/d3-random) with an expected value ${tex`\\mu = 0`} and standard deviation ${tex`\\sigma = 1`}.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`그러나 import할 때 데이터를 교체하는데 제약이 없습니다.모든 cell은 덮어쓰기할 수 있고, *x*- 또는 *y*-축의 표현도 커스터마이징할 수 있습니다. 아니면 약간 작은 차트를 선호한다면, 높이를 재정의할 수 있습니다. \nBut we’re not limited to substituting data when we import. We can override any cell, say to customize the appearance of the *x*- or *y*-axis. Or if we’d prefer a slightly shorter chart, we can redefine the height.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"import {chart as chart2} with {values as data, height} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"chart2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`*y*축을 사이 눈금이 작았나요? 마법을 부려보죠! 멋진걸 생각한다면, *동적* 데이터를 주입할 때 이 히스토그램이 살아나는걸 보세요! 아래 재생을 클릭하거나 슬라이더를 드래그 해보세요. \nDid you notice fewer ticks along the *y*-axis in this shorter chart? Magic! And if you think that’s cool, watch this histogram come alive as we inject *dynamic* data! Click play below or drag the slider.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"viewof mu = Scrubber(d3.ticks(-5, 5, 200), {\n format: x => `mu = ${d3.format(\"+.2f\")(x)}`,\n autoplay: false,\n alternate: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"chart3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"md`아래 *values3* cell은 랜덤 값을 생성하는 반면, *x* cell은 히스토그램 도메인을 [-10, +10]으로 고정합니다. 도메인을 고정하는 것은 분포가 mean, 즉 *mu*를 대응하여 어떻게 이동하는지 보여줍니다; 만일 고정된 도메인이 지정되지 않으면, 도메인은 데이터에 맞게 계산되고 분포 변화는 *x*축 눈금을 자세히 읽어야만 분명할 것입니다. (스스로 이걸 확인하기 위해 아래 import의 with절에 *x*를 제거해보세요) \nThe *values3* cell below generates random values, while the *x* cell fixes the histogram’s domain to [-10, +10]. Fixing the domain shows how the distribution shifts in response to the mean, *mu*; if a fixed domain were not specified, the domain would be computed to fit the data and the change in distribution would only be apparent by a close reading of the *x*-axis ticks. (To see this yourself, try removing *x* from the import’s with clause below.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"values3 = Float64Array.from({length: 2000}, d3.randomNormal(mu, 2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"x = d3.scaleLinear([-10, 10], [margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {chart as chart3, margin, width} with {x, values3 as data, height} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"md`가져온 cell들을 포함해서 *mu*를 참조하는 cell이 [dataflow](/@observablehq/how-observable-runs)덕분에 *mu*가 변경될 때 자동으로 실행되기 때문에 히스토그램을 다시 작성하지 않아도 됩니다. \nWe didn’t need to rewrite the histogram to make it live because cells referencing *mu*, including imported cells, automatically run when *mu* changes thanks to [dataflow](/@observablehq/how-observable-runs).\n\n어느정도 예제를 용도 변경하는걸 살펴봤으니 이제 코드를 첨부터 작성해봅시다! \nNow that you’ve seen how far you can get repurposing examples, let’s write some code from scratch!\n\nNext`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"md`---\n\n## Appendix\n\nMany Observable notebooks use an appendix to define needed cells, such as requires and imports, without interrupting the flow of reading. There’s nothing special about this section—it’s purely a stylistic convention.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2b","stdlib":"1","titling":"auto"}} 2a:"$29:body"