2a:T6a8,md`Paths는 원, 사각형, 선, 구불구불한 선, 삐침선, 호랑이 [🐅](https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg), 상상하는 무엇이든 그릴 수 있습니다. path의 모양은 [SVG path data 언어](https://www.w3.org/TR/SVG/paths.html#TheDProperty)(또는 해당하는 [Canvas path 메소드](https://html.spec.whatwg.org/multipage/canvas.html#canvaspath))로 지정되며, 이것은 구식 [pen plotter](https://en.wikipedia.org/wiki/Plotter)에 제공하는 명령어와 유사합니다. 예를 들어: * Mx,y - 특정 [*x*, *y*] 위치로 이동 * Lx,y - 특정 [*x*, *y*] 위치까지 선 그리기 * hx - 길이 *x*의 수평선 그리기 * vy - 길이 *y*의 수직선 그리기 * z - 현재 subpath를 닫기 Paths can draw circles, rectangles, lines, squiggles, swoops, tigers [🐅](https://commons.wikimedia.org/wiki/File:Ghostscript_Tiger.svg), and anything else you can imagine. A path’s shape is specified in the [SVG path data language](https://www.w3.org/TR/SVG/paths.html#TheDProperty) (or equivalent [Canvas path methods](https://html.spec.whatwg.org/multipage/canvas.html#canvaspath)), which is akin to commands you’d give an old-fashioned [pen plotter](https://en.wikipedia.org/wiki/Plotter). Such as: * Mx,y - move to the specified point [*x*, *y*] * Lx,y - draw a line to the specified point [*x*, *y*] * hx - draw a horizontal line of length *x* * vy - draw a vertical line of length *y* * z - close the current subpath`2b:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1593612152972.439,"size":48822}] 29:{"title":"Learn D3: 모양","cells":[{"id":0,"value":"md`# Learn D3: 모양\n# Learn D3: Shapes\n\nSVG와 Canvas(캔버스-이하 동일)는 의도적으로 일반적입니다; 이들은 모든 그래픽 유형을 허용합니다. 한편 D3는 시각화를 위한 것으로, path 데이터를 생성하는 특수한 문법인 *shapes* 함수를 제공합니다. \nSVG and Canvas are intentionally generic; they allow for any type of graphic. D3 meanwhile is intended for visualization, and so provides a specialized vocabulary of *shapes* which are functions that generate path data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`우리가 몇년 간 Apple 주식 가격을 선 차트로 시각화하길 원했다 해봅니다. 여기에 *date*와 *close*(증권 시장 문이 닫았을 때의 주식 가격을 의미하는 \"close\")항목을 가지는 데이터셋이 있고 해당하는 scale들이 있습니다. \nSay we wanted to visualize several years of Apple stock price as a line chart. Here’s a dataset with *date* and *close* columns (with “close” referring to the price of the stock when the market closed), and the corresponding scales.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"data = d3.csvParse(await FileAttachment(\"aapl-bollinger.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.upper)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"md`선을 그리려면 Mx,y로 시작하여 첫번째 위치로 이동한 다음, Lx,y를 반복해서 따라오는 각 경로에 선을 그립니다. 연결하기 위해 포인트를 반복하여 이 작업을 수행할 수 있습니다. \nTo draw the line, we need path data that starts with Mx,y to move to the first point, followed repeatedly by Lx,y to draw a line to each subsequent point. We could do this by looping over the points to concatentate.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"{\n let path = `M${x(data[0].date)},${y(data[0].close)}`;\n for (let i = 1; i < data.length; ++i) {\n path += `L${x(data[i].date)},${y(data[i].close)}`;\n }\n return path;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"md`그러나 [d3.line](/@d3/d3-line)는 더 간편합니다. d3.line을 호출하면 기본적인 선 생성자를 반환되고, *line*.x와 *line*.y를 호출하면 주어진 데이터 포인트 *d*에 대한 *x*, *y* 위치를 반환하는 함수로 선을 구성할 수 있습니다. 이 함수는 원하는 추상 값(*data* 또는 *count*)을 찾고 scale을 적용해서 시각적 위치로 변환합니다. \nBut [d3.line](/@d3/d3-line) is more convenient. Calling d3.line returns a default line generator, and by calling *line*.x and *line*.y we can configure the line with functions to return the *x*- and *y*-position for a given data point *d*. These functions retrieve the desired abstract value (*date* or *count*) and convert it to visual position (by applying a scale).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`선 생성자에 data를 넘기면 해당하는 SVG path 문자열 데이터를 반환하는데, 이것은 path 요소의 *d* 속성을 설정하는데 사용될 수 있습니다. \nPassing the line generator the data returns the corresponding SVG path data string which can be used to set a path element’s *d* attribute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"line(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`반복을 피하기 위해 아래 부록에 재사용 가능한 축들을 정의했습니다. 각 축은 덧붙이기 위한 G 요소 선택하는 함수입니다. \n(To avoid repetition, I defined reusable axes in the appendix below. Each axis is a function that takes a selection of G elements to populate.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"md`위의 path는 파란색 선으로 스타일하고 영역을 채우진 않았습니다. 선 세그먼트 사이의 miter limit으로 인한 잘못된 스파이크를 피하기 위해 [miter limit](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit)을 선 너비의 100%(1x)로 설정했습니다. 대신해서 둥근 선과 꼭지점을 사용할 수도 있습니다. \nThe path above is styled with a blue stroke and no fill. To avoid misleading spikes caused by miter joins between line segments, I set the [miter limit](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit) to 100% of (1×) the stroke width. I could have used round line joins and caps, alternatively.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`영역차트는 d3.area와 유사합니다. 영역 모양은 *x* 값을 가진 두개의 선으로 지정됩니다: *area*.y0이 기준선이고 *area*.y1이 최상위선입니다. 차트 아래쪽 가장자리를 따라 일정한 기준선이 있는 영역 차트의 경우, *area*.y0을 y(0)으로 설정합니다. \nFor an area chart, there’s similarly d3.area. An area’s shape is specified as two lines with shared *x*-values: *area*.y0 is the baseline and *area*.y1 is topline. For an area chart with a constant baseline along the chart’s bottom edge, we set *area*.y0 to *y*(0).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"area = d3.area()\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`만일 [stacked area chart(스택 영역 차트)](/@d3/stacked-area-chart), [streamgraph(스트림 그래프)](/@d3/streamgraph) 또는 [Bollinger bands(볼린저 밴드 차트)](/@d3/bollinger-bands)와 같이 가변 기준선을 가지는 기준선 영역을 원한다면 *area*.y0 함수를 전달하세요. *area*.x와 *area*.y1과 마찬가지로, 이 함수는 각 데이터 포인트에 해당하는 *y*값을 계산하기 위해 호출됩니다. \nIf you want an area with a variable baseline—as in a [stacked area chart](/@d3/stacked-area-chart), a [streamgraph](/@d3/streamgraph), or the chart of [Bollinger bands](/@d3/bollinger-bands) below—pass *area*.y0 a function instead. As with *area*.x and *area*.y1, this function will be called for each data point to compute the corresponding *y*-value.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"areaBand = d3.area()\n .x(d => x(d.date))\n .y0(d => y(d.lower))\n .y1(d => y(d.upper))","pinned":true,"hidden":false,"mode":"ojs"},{"id":645,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"md`중앙 이동 평균 및 일일 마감 가격을 보여주는 Bolliner bands(볼린저 밴드) 디스플레이를 완료하기 위해 상단 선을 덮어씌울 수 있습니다. 각 path 요소가 단일 스타일만 가질 수 있기 때문에 다중 path에 다중 색상을 사용합니다. \nTo complete the display of Bollinger bands by showing the central moving average and the daily closing price, we can overlay lines on top. Since each path element can only have a single style, we use multiple paths for multiple colors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"lineMiddle = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.middle))","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`선과 영역은 함께 작동하도록 설계되었습니다: *area*.lineY0 또는 *area*.lineY1을 각각 호출하여 영역의 기준선이나 최상위 선에 해당하는 선을 파생시킬 수 있습니다. 위쪽 또는 아래쪽 선을 가지는 영역을 장식할 때 유용합니다. \nLines and areas are designed to work together: you can derive the line corresponding to an area’s baseline or topline by calling *area*.lineY0 or *area*.lineY1, respectively. This is useful for decorating an area with a top or bottom stroke.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":773,"value":"md`선과 영역은 여기서 더이상 다루지 않는 더 많은 기능을 가지지만, 몇가지 힌트를 주자면: [계절 별 온도](/@d3/radial-area-chart)와 같은 순환 데이터에는 [radial lines and areas(방사형 선과 영역)](/@d3/d3-lineradial)이 유용; [curves(곡선)](https://github.com/d3/d3-shape/blob/master/README.md#curves)은 단일-유지 스플라인 같이 구성 가능한 interpolation 메소드를 제공; 그리고 [누락된 데이터에 대한 간격 표시](/@d3/area-with-missing-data)를 보여줄 수 있습니다 \nLines and areas have more features we won’t cover here, but to hint at a few: [radial lines and areas](/@d3/d3-lineradial) are useful for cyclical data, such as [seasonal temperatures](/@d3/radial-area-chart); [curves](https://github.com/d3/d3-shape/blob/master/README.md#curves) provide configurable interpolation methods, such as monotonicity-preserving splines; and you can [show gaps for missing data](/@d3/area-with-missing-data).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`물론, 시각화는 단지 막대, 선, 영역만 있는 건 아닙니다. \nOf course, visualization is not just bars, lines, and areas.\n\n또 다른 일반적인 모양은 D3가 *arc(호-이하 동일)*라고 부르는 것인데, 수학자들은 *annulus sector(고리 섹터)*라고 부릅니다. [pie charts(파이 차트)](/@d3/pie-chart), [donut charts(도넛 차트)](/@d3/donut-chart) 그리고 [sunbursts(햇살)](/@d3/sunburst)의 특징을 가집니다. ([arc diagrams](/@d3/arc-diagram)와 혼동한 것은 아님) \nAnother common shape is what D3 calls the *arc*, but what mathematicians would call an *annulus sector*. It features in [pie charts](/@d3/pie-chart), [donut charts](/@d3/donut-chart) and [sunbursts](/@d3/sunburst) (but not, confusingly, [arc diagrams](/@d3/arc-diagram)).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"arc = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .startAngle(([startAngle, endAngle]) => startAngle)\n .endAngle(([startAngle, endAngle]) => endAngle)","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`선과 영역이 *x*, *y*로 구성된 방법과 유사하게, 호는 *innerRadius(내부 반경)*, *outerRadius(외부 반경)*, *startAngle(시작 각)*, *endAngle(끝 각)* (radians-라디안 각도)으로 구성됩니다. 위에 arc(호) 생성자는 [*startAngle*, *endAngle*] 배열을 받도록 구성되어 있습니다. \nSimilar to how lines and areas are configured by *x* and *y*, an arc is configured by *innerRadius*, *outerRadius*, *startAngle*, and *endAngle* (with angles in radians). The arc generator above is configured to accept an array [*startAngle*, *endAngle*].`","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"arc([Math.PI / 2, Math.PI]) // from 90° to 180°","pinned":true,"hidden":false,"mode":"ojs"},{"id":896,"value":"viewof n = {\n const form = html``;\n form.oninput = () => form.output.value = form.value = form.input.valueAsNumber;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`위와 같이 호 각을 계산하는 것은 파이 또는 도넛 차트에 지루할 수 있어서 D3는 편리하도록 [d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pies)를 제공합니다. 맛있는 과일 데이터셋을 다시 기억해보세요. \nComputing arc angles as above can be tedious for a pie or donut chart, so D3 provides [d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pies) for convenience. Recall the tasty fruits dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"fruits = [\n {name: \"🍊\", count: 21},\n {name: \"🍇\", count: 13},\n {name: \"🍏\", count: 8},\n {name: \"🍌\", count: 5},\n {name: \"🍐\", count: 3},\n {name: \"🍋\", count: 2},\n {name: \"🍎\", count: 1},\n {name: \"🍉\", count: 1}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":937,"value":"md`*count* 속성에 *value* 접근자를 사용해서 파이 레이아웃을 구성하면 각 호의 각도 범위가 해당 값에 비례하고 호가 0에서 2π까지 연속적으로 걸쳐지도록 호 각도를 계산할 수 있습니다. \nBy configuring a pie layout with a *value* accessor for the *count* property, we can compute the arc angles such that the angular span of each arc is proportional to its value, and together the arcs span contiguously from 0 to 2π.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"pieArcData = d3.pie()\n .value(d => d.count)\n (fruits)","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`datum당 하나의 이러한 객체들(fruits)은 고정 반경을 가진 원호 생성자로 전달되어 도넛 차트를 생성할 수 있습니다. (그리고 *약간* 패딩과 코너 반경을 적용해보겠습니다.) \nThese objects, one per datum, can be passed to an arc generator with fixed radii to produce a donut chart. (And because I can’t resist showing off a *little* bit, I’ll apply padding and a corner radius.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"arcPie = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .padRadius(300)\n .padAngle(2 / 300)\n .cornerRadius(8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`이제 일반적인 데이터 그래픽에 대해 살펴봤으므로 이를 생생하게 만드는 방법에 대해 알아보겠습니다! \nNow that we’ve covered a handful of common data graphics, let’s see how to make them come alive!\n\nNext`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2b","stdlib":"1","titling":"auto"}