31:T735,graphic = { const barId = DOM.uid("bar"); const arrowId = DOM.uid("arrow"); return svg``; }32:[] 2f:{"title":"여백(에 대한)관습","cells":[{"id":0,"value":"md`# 여백(에 대한)관습 \n# Margin Convention`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`먼저 각 여백을 픽셀로 나타내는 4개의 면 속성(CSS처럼 시계방향)을 가진 객체를 정의하세요. 눈금 레이블에 맞게 여백을 조정해야할 수도 있습니다. \nFirst define an object with a property for each of the four sides (clockwise from the top, as in CSS) representing the respective margins in pixels. You may need to adjust the margins to fit your tick labels.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`그래픽의 바깥 차원으로 너비와 높이를 정의하세요. Observable 표준 라이브러리에서 [reactive width(반응형 너비)](https://github.com/@observablehq/stdlib/blob/master/README.md#width)를 사용하려면 너비를 정의하지 마세요. 비-반응형 그래픽만 고정 너비를 정의하세요. \nDefine the width and height as the graphic’s outer dimensions. To use the [reactive width](https://github.com/@observablehq/stdlib/blob/master/README.md#width) from the Observable standard library, do not define a width; only define a fixed width for a non-responsive graphic.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"// width = 954","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`차트의 내부 차원을 기준으로 *x*와 *y* range를 정의하세요. *y* range는 일반적으로 내부 차트 영역의 맨 아래가 *y* = 0이 되도록 뒤집습니다. \nx range : 40 부터 924 \ny range : 470 부터 20 \nDefine the *x*- and *y*-ranges based on the inner dimensions of the chart. Note that the *y*-range is typically flipped to place *y* = 0 at the bottom of the inner chart area.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"x = d3.scaleLinear()\n .domain([0, 1])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"y = d3.scaleLinear()\n .domain([0, 1])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`원하는 방향에 따라 축을 적절한 위치로 변환하는 함수로 *x*와 *y*축을 정의하세요. \nDefine the *x*- and *y*-axes as functions that translate the axes into the appropriate location based on the desired orientation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`마지막으로, 좌표계를 설정하기 위해 SVG 요소에 view 상자를 할당하세요. (너비와 높이 속성을 지정할 필요 없습니다. 비-반응형 그래픽을 위해 고정 너비를 사용하면 가로-세로 비율을 유지하면서 view 상자는 SVG 요소를 자동으로 크기 조정됩니다. \nLastly, assign a view box to the SVG element to set the coordinate system. (You won’t need to assign width and height attributes, and when using a fixed width for a non-responsive graphic, the view box will cause the SVG element to resize automatically while preserving its aspect ratio.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}