2e:null 2f:["$","title",null,{"children":"Learn D3: 소개 | Chloe Noh | Observable"}] 34:T56f,md`

[D3’s logo](/@d3/logo) is drawn with circles and perpendicular lines.

`35:T73d,md`다른 측면으로, D3는 유연합니다. D3의 강점은 당신이 원하는 것이 무엇이든 자유롭게 만들 수 있다는 것입니다! [D3 gallery](/@d3/gallery)는 진정한 형태의 동물원인데, 몇 가지만 예를 들자면 [treemap](/@d3/treemap), [hierarchical edge bundling](/@d3/hierarchical-edge-bundling/2), [Sankey diagram](/@d3/sankey-diagram), [density contours](/@d3/density-contours), [force-directed graph](/@d3/disjoint-force-directed-graph) 등이 있습니다. (그리고 거의 100개나 되는 [map projections](/@d3/world-map)도!) 이 유연함은 D3의 구성 가능한 차트가 아니라 [shapes](https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12)와 [scales](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f) 같은 기본요소를 구성가능하는데 중점을 둔 저수준 접근법에서 비롯됩니다. D3는 제약이 없어서, 최신 브라우저에서 지원하는 모든 보조 요소들을 활용해보세요. For another, D3 is flexible. D3’s superpower is that you can do whatever you want—creative freedom! The [D3 gallery](/@d3/gallery) is a veritable zoo of forms: [treemap](/@d3/treemap), [hierarchical edge bundling](/@d3/hierarchical-edge-bundling/2), [Sankey diagram](/@d3/sankey-diagram), [density contours](/@d3/density-contours), [force-directed graph](/@d3/disjoint-force-directed-graph), to name a few. (And nearly a hundred [map projections](/@d3/world-map)!) This flexibility stems from D3’s low-level approach, focusing on composable primitives such as [shapes](https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12) and [scales](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f) rather than configurable charts. D3 imposes no constraints, so avail yourself of all bells and whistles supported by modern browsers.`36:T5c5,md`그리고 D3는 애니메이션과 상호작용(interaction)으로 잘 알려져 있습니다. 만일 시간이 있다면, [bar chart race](/@d3/bar-chart-race)나 [animated treemap](/@d3/animated-treemap)을 한번 보세요. [hierarchical bar chart](/@d3/hierarchical-bar-chart), [collapsible tree](/@d3/collapsible-tree), 또는 확대가능한 [sunburst](/@d3/zoomable-sunburst), [treemap](/@d3/zoomable-treemap)나 [packed circles](/@d3/zoomable-circle-packing)에도 빠져보세요. 아니면 [scatterplot matrix](/@d3/brushable-scatterplot-matrix)를 그려보거나 [area chart](/@d3/zoomable-area-chart)를 확대해보세요. 애니메이션은 스토리텔링에 매우 효과적인 장치가 될 수 있으며, 상호작용(interaction)을 통해 능동적인 독자가 직접 탐색할 수 있게 합니다. And D3 is renowned for animation and interaction. If you’ve got a few minutes, watch a [bar chart race](/@d3/bar-chart-race) or an [animated treemap](/@d3/animated-treemap). Dive into a [hierarchical bar chart](/@d3/hierarchical-bar-chart), [collapsible tree](/@d3/collapsible-tree), or zoomable [sunburst](/@d3/zoomable-sunburst), [treemap](/@d3/zoomable-treemap), or [packed circles](/@d3/zoomable-circle-packing). Or brush a [scatterplot matrix](/@d3/brushable-scatterplot-matrix) or zoom into an [area chart](/@d3/zoomable-area-chart). Animation can be a powerful device for storytelling, while interaction allows active readers to explore.`37:[] 32:{"id":"0fdd5599ae135008","slug":"learn-d3","title":"Learn D3: 소개","thumbnail":"baa07897a36f1944b631684aadf259e138e370575421cf34646f6d462998c989","access_level":"public","create_time":"$D2020-06-15T11:10:17.024Z","update_time":"$D2020-06-30T09:02:44.189Z","view_time":null,"first_public_time":"$D2020-06-30T09:02:49.144Z","has_unpublished_edits":null,"fork":{"id":"5a4c8ad2dcf5d2e1","slug":"learn-d3","title":"Learn D3: Introduction","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":2,"starred":false,"owner":{"type":"team","id":"ab524f61107f6001","login":"shwldus3","name":"Chloe Noh","avatar_url":"https://avatars-next.observableusercontent.com/46bc2c13e24f5ccf64010c29167b92465d7b07ecf5cfe80239748ababd375ee6","tier":"starter_2024"},"version":1611,"publish_version":1611,"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":0,"value":"md`# Learn D3: 소개\n# Learn D3: Introduction\n\n이 노트북 시리즈는 [D3.js](https://d3js.org)로의 첫번째 단계로 안내합니다. \nThis series of notebooks will guide you through your first steps with [D3.js](https://d3js.org).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1507,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"md`시작하기 전 간단하게 고려할만한 것: 왜 D3 배우는게 귀찮나요? 그리고 왜 여기서 Observable에 대해 배우나요? \nBefore we embark, it’s worth briefly considering: *Why bother learning D3? And why learn here in Observable?*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"md`우선, D3는 인기 있으며([1억 다운로드](/@mbostock/npm-daily-downloads?name=d3)와 [9만 stars](https://github.com/d3/d3)), 좋은 회사입니다. 튜토리얼, 비디오, 강의 그리고 책을 포함하여 커뮤니티 기반으로 개발된 많은 리소스들이 있습니다. 그리고 D3 팀은 학습과 생산성을 높이기 위한 수백개의 고유 예제와 튜토리얼을 게재해왔습니다. \nFor one, D3 is popular ([80M downloads](/@mbostock/npm-daily-downloads?name=d3) and [90K stars](https://github.com/d3/d3)), so you’re in good company. There are plenty of community-developed resources, including tutorials, videos, classes, and books. And the D3 team has published hundreds of its own forkable examples and tutorials to boost your learning and productivity.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"md`물론, 힘이듭니다. 배울게 많습니다: D3는 30개가 넘는 모듈들과 1000개의 메소드들을 갖고 있습니다!ㅎㅎㅎ 그래서 D3는 [Vega-Lite](https://vega.github.io/vega-lite/)같은 탐색 시각화를 위해 명확하게 만들어진 도구보다 더 지루할 수 있습니다. \nThis power, of course, comes at a cost. There’s much to learn: D3 has more than thirty modules and a thousand methods! And D3 can be more tedious than tools expressly intended for exploratory visualization, such as [Vega-Lite](https://vega.github.io/vega-lite/).\n\n그러나 이제 Observable이 등장합니다. \nBut that’s where Observable comes in.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"md`Observable은 [스프레드시트 처럼](/@observablehq/how-observable-runs) dataflow로 코드를 단순화하기 때문에 D3를 배우는데 이상적인 환경입니다. 수정하면, cells은 자동으로 빠르게 반응하여 동작합니다. 거의 코드 없이 상호작용(interaction)이나 애니메이션을 추가할 수 있습니다. Observable의 [quirks and features](/@observablehq/observables-not-javascript)에 대해 다룰 것입니다. \nObservable is the ideal environment for learning D3 because it [simplifies code](https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0) with dataflow, [like a spreadsheet](/@observablehq/how-observable-runs). As you edit, cells run automatically for rapid feedback. You can add interaction or animation with almost no code! We’ll cover Observable’s [quirks and features](/@observablehq/observables-not-javascript) as we go along.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"md`그리고 Observable은 공동작업을 중심으로, 커뮤니티로부터 배우고 배움을 환원하는데 도움을 줍니다. 복붙을 넘어서세요. 어떠한 노트북도 fork로 가져오거나 [삽입할 수 있습니다.](/@observablehq/introduction-to-imports) 노트북들은 [color legend](/@d3/color-legend)나 [scrubber](/@mbostock/scrubber)와 같이 재사용 가능한 컴포넌트로 내보내기할 수 있습니다. 당신은 [cells에 댓글을 달 수 있고](/@observablehq/suggestions-and-comments), 제안하고 [변경사항을 머지](/@observablehq/fork-share-merge)하거나 [도움을 요청](https://talk.observablehq.com/)할 수 있습니다. \nAnd Observable revolves around collaboration, helping you learn from and give back to the community. Go beyond copy-and-paste. Any notebook can be forked or [imported](/@observablehq/introduction-to-imports). Notebooks can export reusable components, such as a [color legend](/@d3/color-legend) or [scrubber](/@mbostock/scrubber). You can [comment on cells](/@observablehq/suggestions-and-comments), suggest and [merge changes](/@observablehq/fork-share-merge), or [ask for help](https://talk.observablehq.com/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"md`충분히 서론이 길었으니, 이제 장막을 열어 D3를 처음부터 살펴보도록 하겠습니다. \nEnough overture. Let’s raise the curtain and get our first glimpse of D3.\n\nNext`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"md`---\n\n## Table of Contents\n\n1. Introduction - you are here!\n1. [By Example](/@d3/learn-d3-by-example?collection=@d3/learn-d3) - finding, forking, importing examples\n1. [Data](/@d3/learn-d3-data?collection=@d3/learn-d3) - loading, parsing, transforming data\n1. [Scales](/@d3/learn-d3-scales?collection=@d3/learn-d3) - making the abstract visual\n1. [Shapes](/@d3/learn-d3-shapes?collection=@d3/learn-d3) - geometric primitives for visualization\n1. [Animation](/@d3/learn-d3-animation?collection=@d3/learn-d3) - graphics that change over time\n1. [Joins](/@d3/learn-d3-joins?collection=@d3/learn-d3) - D3’s pattern for manipulating the DOM\n1. [Interaction](/@d3/learn-d3-interaction?collection=@d3/learn-d3) - responding to user input\n1. [Further Topics](/@d3/learn-d3-further-topics?collection=@d3/learn-d3) - where to go next`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"