31:T735,graphic = { const barId = DOM.uid("bar"); const arrowId = DOM.uid("arrow"); return svg``; }32:[] 2f:{"title":"2.3 Márgenes y escalas","cells":[{"id":0,"value":"md`# 2.3 Márgenes y escalas `","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md` Para definir márgenes, en general creamos un objeto con un atributo para cada uno de los cuatro lados de un canvas, representando los respectivos márgenes. Las cantidades deben estar en píxeles. Por ejemplo:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40}) // Cambiá estos valores para ver el efecto","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`Además, es común tener que reutilizar el ancho y el alto de una gráfica en diferentes partes del código. Por este motivo, es una buena práctica definir variables para el ancho y el alto y utilizarlas en lugar del valor numérico. Si queremos, podemos evitar definir el ancho ya que Observable la define por defecto. Por ejemplo:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"// width = 954 // (Opcional, si no está definida se considera que vale lo mismo que el ancho de la celda)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 500 // Alto","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`\nAl trabajar con las escalas, tenemos que considerar los márgenes al calcular los rangos. Es decir, los rangos de *x* e *y* van a estar definidos en base a las dimensiones internas del gráfico. También hay que tener en cuenta que el rango del eje *y* generalmente se voltea para colocar *y*=0 en la parte inferior del área interna del gráfico.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"x = d3.scaleLinear()\n .domain([0, 1])\n .range([margin.left, width - margin.right]) // x va de (margen izquierdo) -> (ancho - margen derecho)","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"y = d3.scaleLinear()\n .domain([0, 1])\n .range([height - margin.bottom, margin.top]) // y va de (altura - margen inferior) -> (margen superior)","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`### Otras funciones auxiliares `","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}