30:T735,graphic = { const barId = DOM.uid("bar"); const arrowId = DOM.uid("arrow"); return svg``; }31:[] 2e:{"title":"Margin Convention","cells":[{"id":0,"value":"md`# Margin Convention`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`First 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`Define 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`Define 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`Define 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`Lastly, 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@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}