25:null 26:["$","title",null,{"children":"Learn D3: 스케일 | Chloe Noh | Observable"}] 2b:T8ba,{ const margin = ({top: 30, right: 30, bottom: 30, left: 30}); const barId = DOM.uid("bar"); const arrowId = DOM.uid("arrow"); return svg``; }2c:T52a,md`축을 추가하기 위해, 먼저 svg`…`를 사용해서 (아직 분리되어 있는) G 요소를 생성합니다. 그런 다음, 이 G 요소를 [d3.select](https://github.com/d3/d3-selection/blob/master/README.md#select)로 전달해서 선택(select)합니다. 그리고 [*selection*.call](https://github.com/d3/d3-selection/blob/master/README.md#selection_call)를 한번 호출하여 축을 G 요소로 렌더링하고, 다시 미니멀 스타일로 domain 경로를 제거합니다. 마지막으로 [*selection*.node](https://github.com/d3/d3-selection/blob/master/README.md#selection_node)를 호출해서 G 요소를 찾고, 외부 문장에 임베드합니다. To add the axis, we first create a (as yet detached) G element using svg`…`. Then we select this element by passing it to [d3.select](https://github.com/d3/d3-selection/blob/master/README.md#select). Then we invoke [*selection*.call](https://github.com/d3/d3-selection/blob/master/README.md#selection_call) once to render the axis into the G element, and again to remove the domain path (for a minimalist style). Lastly we retrieve the G element by calling [*selection*.node](https://github.com/d3/d3-selection/blob/master/README.md#selection_node), and embed it in the outer literal.`2d:[{"id":"ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","href":"https://static.observableusercontent.com/files/ef5fbb8b77ff7c117ec45df5583ee5919321685578e8247c348eaa9139e6dacf64ef339374c8069109351d0985aee2e536884e5cb82d4361c21123adb8790475","name":"bertin-variables.png","type":"image/png","lastModified":1593612126310.78,"size":329437}] 29:{"id":"c0bd2ca2dfdecd71","slug":"learn-d3/4","title":"Learn D3: 스케일","thumbnail":"2b51d1b3a7aa67580c068c5222bc4e67096c7703b5ee9b1607ca1b24e46a106c","access_level":"public","create_time":"$D2020-07-01T14:02:06.310Z","update_time":"$D2020-07-19T12:56:58.220Z","view_time":null,"first_public_time":"$D2020-07-16T16:58:08.934Z","has_unpublished_edits":null,"fork":{"id":"68c99514280dff28","slug":"learn-d3-scales","title":"Learn D3: Scales","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":4452,"publish_version":4452,"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":75,"value":"md`# Learn D3: 스케일\n# Learn D3: Scales\n\n데이터 그래픽을 위한 모든 D3 도구들 중에서, 가장 기본적인 것은 *스케일*이며, 이것은 데이터의 추상적인 차원을 시각적 변수에 매핑합니다. \nOf all D3’s tools for data graphics, the most fundamental is the *scale*, which maps an abstract dimension of data to a visual variable.\n\n맛을 보려면 과일의 작지만 맛있는(!) 데이터셋을 고려하세요. \nFor a taste, consider this tiny (but delicious!) dataset of fruit.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3042,"value":"md`우리는 일반적으로 차원을 3차원에서의 위치처럼 공간적인 것으로 생각하지만, 추상적인 차원이 공간적일 필요는 없습니다. 위에 각 과일의 *count*와 같이 정량적일 수 있습니다. 아니면 *name*처럼 명칭이 있을 수도 있습니다. \nWe typically think of dimensions as spatial, such as position in three dimensions, but an abstract dimension need not be spatial. It may be quantitative, such as the *count* of each fruit above. Or it may be nominal, such as a *name*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3825,"value":"fruits.map(d => d.count) // the count dimension (quantitative)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3828,"value":"fruits.map(d => d.name) // the name dimension (nominal)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3061,"value":"md`Jacques Bertin(자크 베르틴)은 *그래픽의 과학*에서 점, 선과 같은 그래픽 마크가 어떻게 \"차이(≠), 유사(≡), 정량적 순서(Q), 정성적 순서(O)를 나타내고 그룹, 계층, 수직이동을 표현할 수 있는지\"를 위치, 크기, 색상 등을 사용해서 설명합니다. 그래픽 마크의 이러한 속성은 시각적 변수들입니다. \nIn *Semiology of Graphics*, Jacques Bertin describes how graphical marks such as points and lines can “represent differences (≠), similarities (≡), a quantified order (Q), or a nonquantified order (O), and can express groups, hierarchies, or vertical movements” using position, size, color, and the like. These properties of graphical marks are our visual variables.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3075,"value":"md`

From *Semiology of Graphics*, colorized by the author.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3394,"value":"md`많은 시각화에서처럼, 아래의 막대 차트는 두 추상적인 차원을 두 시각 변수들로 매핑합니다: *name*차원이 막대의 *y*위치에 매핑되는 반면, *count*차원은 *x*위치에 매핑됩니다. 이 매핑은 다음과 같이 *x*와 *y* 스케일로 구현됩니다. \nLike many visualizations, the bar chart below maps two abstract dimensions to two visual variables: the *name* dimension is mapped to the bars’ *y*-position, while the *count* dimension is mapped to the *x*-position. These mappings are implemented by the *x* and *y* scales that follow.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3396,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2241,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(fruits, d => d.count)])\n .range([margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2237,"value":"y = d3.scaleBand()\n .domain(fruits.map(d => d.name))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3081,"value":"md`(자유롭게 코드를 수정해보고 어떻게 되는지 보세용!) \n(Feel free to edit the code and see what happens!)\n\nD3 스케일은 많은 유형을 제공합니다. 여러분이 사용하는 것은 추상 차원(정량적 또는 정성적?)와 시각 변수(위치 또는 색상?)에 따라 다릅니다. 여기서 *count*는 정량적이고 막대 길이는 값에 비례하기 때문에 *x*가 [linear scale](/@d3/d3-scalelinear)인 반면, *name*은 명칭적이고 막대는 두껍기 때문에 *y*는 [band scale](/@d3/d3-scaleband)입니다. \nD3 scales come in many types. Which you use depends on the abstract dimension (quantitative or nominal?) and the visual variable (position or color?). Here *x* is a [linear scale](/@d3/d3-scalelinear) because *count* is quantitative and bar length should be proportional to value, while *y* is a [band scale](/@d3/d3-scaleband) because *name* is nominal and bars are thick.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3474,"value":"md`각 스케일은 추상 데이터(*domain*)에서 시각적 변수(*range*)까지 쌍으로 대응하여 구성됩니다. 예를 들어, *x* domain의 낮은 값(0)은 *x* range의 낮은 값(차트의 왼쪽 가장자리)로 매핑되는 반면, domain의 높은 값(최대 값)은 range의 높은 값(차트의 오른쪽 가장자리)에 매핑됩니다. \nEach scale is configured by pairwise correspondences from abstract data (the *domain*) to visual variable (the *range*). For example, the *x*-domain’s lower value (0) is mapped to *x*-range’s lower value (the chart’s left edge), while the domain’s upper value (the maximum count) is mapped to the range’s upper value (the right edge).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3539,"value":"md`선형 스케일에서, domain과 range는 연속적 간격을 가집니다(*min*부터 *max*까지). band 스케일에서, domain은 이산 값 배열 (🍊, 🍇, 🍏, …)이며 range는 연속적 간격입니다. 이처럼 band 스케일은 range를 분리된 패딩 밴드로 어떻게 분리할지 자동으로 결정합니다. \nFor a linear scale, the domain and range are continuous intervals (from *min* to *max*). For a band scale, the domain is an array of discrete values (🍊, 🍇, 🍏, …) while the range is a continuous interval; the band scale automatically determines how to slice the range into discrete, padded bands.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4036,"value":"md`위 스케일은 *method chaining*을 사용해서 구성됩니다. *scale*.domain처럼 스케일을 구성하는 메소드가 스케일을 반환하기 때문에 이 간결한 스타일이 가능합니다. Here’s the equivalent longhand. \nThe scales above are configured using *method chaining*. This concise style is possible because methods that configure a scale, such as *scale*.domain, return the scale. Here’s the equivalent longhand.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4039,"value":"{\n const x = d3.scaleLinear();\n x.domain([0, d3.max(fruits, d => d.count)]);\n x.range([margin.left, width - margin.right]);\n x.interpolate(d3.interpolateRound);\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4050,"value":"md`또한 스케일 메소드는 매개변수 없이 호출하면 연관된 값들을 찾을 수 있습니다. 이것은 새로운 스케일을 도출하거나 디버깅할 때 유용합니다. \nScale methods can also be used to retrieve their associated values if you call them with no arguments. This is useful for deriving new scales or debugging.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4046,"value":"x.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4047,"value":"x.range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2893,"value":"md`그리고 D3 스케일은 무엇일까요? 함수입니다. 스케일 함수를 호출하면 매개변수로 주어진 추상 값(*count*와 같은)에 해당하는 시각적 값(예: *x* 위치)이 반환됩니다. \nAnd what *is* a D3 scale? A function. Calling it returns the visual value (such as an *x*-position) corresponding to the given abstract value (such as a *count*).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2717,"value":"y(\"🍇\") // the y-coordinate for name = grapes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4414,"value":"y(\"🍇\") // 그림 \"포도\"에 대한 y 좌표값","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2720,"value":"x(21) // the x-coordinate corresponding to count = 21","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4416,"value":"x(21) // count 값이 21에 해당하는 x 좌표값","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4313,"value":"x(0) // the x-coordinate corresponding to count = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4421,"value":"x(0) // count 값이 0에 해당하는 x 좌표값","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4191,"value":"md`[convention](/@d3/margin-convention)에 의해, 대부분의 D3 차트는 여백을 적용하여 배율 범위를 설정하고 축에 대한 공간을 만듭니다. 따라서 *x*(0)은 주로 0이 아닙니다; x(0)은 왼쪽 여백의 크기입니다. \nBy [convention](/@d3/margin-convention), most D3 charts apply margins to inset scale ranges and make room for axes. Hence, *x*(0) is often not zero; it’s the size of the left margin.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4076,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3435,"value":"md`이 스케일로 반환되는 *xy* 위치는 [*x* = 640, *y* = 30]와 같은 점입니다. 그러나 막대는 너비와 높이를 가지는 것처럼 무한이 아니기 때문에, 이 *xy* 위치는 해당 막대의 오른쪽 위 모서리에 해당합니다. 이 막대의 너비는 *x*(*count*) - *x*(0)이고, 높이는 band 스케일로 인해 *y*.bandwidth()로 정의됩니다. \nThe *xy*-position returned by these scales is a point, such as [*x* = 640, *y* = 30]. But since bars aren’t infinitesimal—they have a width and height—this position corresponds to the bar’s top-right corner. The bar’s width is *x*(*count*) - *x*(0), and its height is defined as *y*.bandwidth() by the band scale.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3541,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3595,"value":"x(21) - x(0) // the width of the bar corresponding to count = 21","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4424,"value":"x(21) - x(0) // count = 21에 해당하는 막대 너비 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3597,"value":"y.bandwidth() // the height of each bar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4426,"value":"y.bandwidth() // 각 막대의 높이 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3620,"value":"md`스케일이 어떻게 사용되는지 보기 위해, 양파(아니면... 바나나?) 껍질을 벗겨봅시다. 아래는 단독 막대에 대한 코드입니다. \nLet’s peel away another layer of the onion (or the… banana?) to see how scales are used. Below is the code for a solitary bar.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3603,"value":"viewof count = {\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3607,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2139,"value":"md`위 코드는 HTML 태그 템플릿 문자인, [html`…`](https://github.com/observablehq/stdlib/blob/master/README.md#html) 인데, 이것은 Observable에서 HTML 마크업을 만드는데 편리한 방법입니다. 막대 너비(위 코드에서 width 변수)같은 동적 표현식은 \\${…}같은 문장으로 임베드될 수 있습니다. \nThe code above is an HTML tagged template literal, [html`…`](https://github.com/observablehq/stdlib/blob/master/README.md#html), which is a convenient way to render HTML markup in Observable. Dynamic expressions, such as the width of the bar, can be embedded in literals as \\${…}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2442,"value":"md`그러나 요기서 HTML문장의 진정한 마법은 임베드된 표현식이 DOM 요소 또는 DOM 요소의 배열일 수 있다는 것입니다! 따라서 데이터를 SVG 요소로 매핑해서 모든 막대를 동시에 생성할 수 있습니다. \nThe real magic of HTML literals, though, is that embedded expressions can be DOM elements or even arrays of DOM elements! We can thus generate all the bars simultaneously by mapping the data to SVG elements.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2695,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3746,"value":"md`(이 중첩 표현식들은 HTML마크업이기 보단 SVG마크업에 대한 Observable의 템플릿 문장인 [svg`…`](https://github.com/observablehq/stdlib/blob/master/README.md#svg)를 사용합니다(SVG 요소는 SVG 만의 XML namespace를 가지기 때문에). 여러분은 외부 SVG요소에 svg`…` 또는 html`…`을 사용할 수 있지만, SVG 문장이 필요합니다. 이는 namespace 때문에 그렇습니다. \n(These nested expressions use [svg`…`](https://github.com/observablehq/stdlib/blob/master/README.md#svg)—Observable’s template literal specifically for SVG markup, rather than HTML markup—because SVG elements have their own XML namespace. You can use either svg`…` or html`…` for the outer SVG element, but within, the SVG literal is necessary. Because namespaces.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2945,"value":"md`Another great reason to use scales is that D3 provides axes for explicitly showing a positional scale’s encoding, complete with nice, human-readable ticks. Axes improve the readability of charts, helping you to communicate.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2270,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4347,"value":"md`D3 축은 [selections](https://github.com/d3/d3-selection)를 필요로 하는데, 이것은 우리가 선언적 HTML 템플릿 문장을 위해 지금까지 피해왔던 것입니다. 그러나 위와 같이, 두가지는 조화롭게 짝을 이룰 수 있습니다. \nD3 axes require [selections](https://github.com/d3/d3-selection), which we’ve so far avoided in favor of declarative HTML template literals. But as above, the two can be paired harmoniously.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3899,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2950,"value":"md`위치는 가장 강력한 시각적 변수이므로, 스케일에 대한 논의가 지금까지 위치에 초점을 둔 것은 우연이 아닙니다 (훗) \nPosition is the strongest visual variable, so it’s not a coincidence that our discussion of scales has so far focused on position.\n\n그러나 스케일은 색상과 같은 다른 시각적 변수로 사용될 수 있습니다(시각적으로 위치로 보여주는 것 말고도 색상으로 표현될 수 있다는 의미).🌈 \nYet scales can be used for other visual variables, such as color. 🌈`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3763,"value":"color = d3.scaleSequential()\n .domain([0, d3.max(fruits, d => d.count)])\n .interpolator(d3.interpolateBlues)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3940,"value":"md`위 코드는 연속적 스케일을 정의하며, 이는 interpolator(인터폴레이터-보간기)에 의존하는 range 보다는 선형 스케일에 유사합니다. 그리고 interpolator는 0과 1 사이 값을 가져오는 함수로서, 해당하는 시각적 값을 반환합니다. 종종, 이 interpolator는 D3 [내장된 색상 스키마](/@d3/color-schemes) 중 하나입니다. \nThe code above defines a sequential scale, which is similar to a linear scale except instead of a range it relies on an interpolator. And an interpolator is a function which takes a value between 0 and 1, returning the corresponding visual value. Often, this interpolator is one of D3’s [built-in color schemes](/@d3/color-schemes).\n\ncount를 이 색상 스케일에 전달하면 해당 색상 문자열이 반환됩니다. \nPassing this color scale a count returns the corresponding color string.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3918,"value":"color(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3921,"value":"color(21)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3953,"value":"md`자 이제 막대 그래프에 중복된 인코딩을 추가하여 *count*를 *color*와 *x*위치에 매핑할 수 있습니다. 위치 인코딩을 위한 축과 유사한 색상 인코딩을 문서화하기 위해, [D3 색상 범례(color-legend)](/@d3/color-legend)를 가져옵니다. \nNow we can add a redundant encoding to the bar chart, mapping *count* to *color* as well as *x*-position. To document the color encoding, similar to an axis for a positional encoding, we’ll import a [D3 color legend](/@d3/color-legend).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3767,"value":"legend({color, title: \"Number of fruit\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3765,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1419,"value":"md`일부 시각화에는 SVG나 Canvas에 내장되지 않은 특수 그래픽 표시가 필요합니다. 다음으로 기본 막대차트를 넘어서서 D3 도형들을 만나보겠습니다. \nSome visualizations require specialized graphical marks that aren’t built-in to SVG or Canvas. Next, we’ll go beyond basic bar charts and visit D3’s shapes.\n\nNext`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2264,"value":"width = 640","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"height = 202","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2307,"value":"margin = ({top: 20, right: 0, bottom: 0, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3769,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2a:"$29:body"