42:null 43:["$","title",null,{"children":"Fundamentos de D3 - Student View - 2025-2 | Jeffry Arturo Hilario Quintana | Observable"}] 49:T4ba,Tres líneas clave aquí son: ```javascript svg.selectAll('circle') .data(circleInfo) .join('circle') ``` El resultado de estas líneas es que tenemos un `` en `svg` por cada elemento en `circleInfo`. Si `circleInfo` contiene ${circleInfo.length} objetos, entonces tenemos ${circleInfo.length} círculos. Cada círculo está vinculado a un elemento del array `circleInfo`. Cuando llamamos a `.attr()`, el primer argumento es el nombre del atributo SVG que estamos configurando. El segundo argumento puede ser un valor constante, como establecer `fill` en verde, o puede ser una función, como en los casos de `cx`, `cy` y `r`. Si es una función, el atributo se establece con el valor devuelto por la función. Esta función se ejecuta para cada círculo y recibe como argumento el dato asociado a ese círculo. Por lo tanto, en el código anterior, `circ` es un elemento de `circleInfo`. Para establecer `cx` y `cy`, usamos [funciones flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). Para establecer `r`, utilizamos una función con la sintaxis tradicional. Ambas sintaxis son válidas para asignar valores a los atributos.4a:T419,### Escalas En los ejemplos anteriores, nuestros conjuntos de datos indicaban directamente la posición y el tamaño de los círculos y rectángulos. Sin embargo, normalmente no es así, y necesitamos un mapeo entre los datos y la representación visual. Por ejemplo, supongamos que tenemos un conjunto de datos con la población de cada estado y queremos representarlo en un gráfico de barras. Necesitamos una forma de mapear la población al tamaño de las barras. Podemos hacer esto utilizando escalas. Las [escalas](https://d3js.org/d3-scale) realizan un mapeo desde un **dominio** (valores de entrada) a un **rango** (valores de salida). Puedes usar escalas para definir cómo convertir tus datos en propiedades visuales, como posición, tamaño y color. El **dominio** de una escala define los valores de entrada, mientras que el **rango** define los valores de salida. Generalmente, el valor de entrada es un dato, como la población, y el valor de salida es un atributo visual, como la longitud de una barra en un gráfico. 4b:[] 47:{"id":"7fa6bd940740969b","slug":null,"title":"Fundamentos de D3 - Student View - 2025-2","thumbnail":"dfb716df45a9067a61a1d67595fa047b0c5889c12e375fefe92450718cfde9c8","access_level":"public","create_time":"$D2026-08-25T14:37:38.113Z","update_time":"$D2026-08-26T15:11:41.615Z","view_time":null,"first_public_time":"$D2026-08-25T14:37:38.113Z","has_unpublished_edits":null,"fork":{"id":"3923d2492137f49e","slug":null,"title":"Fundamentos de D3 - Student View - 2025-2","owner":{"id":"a25d8d0a78fdd028","login":"visualizaciondatosutec","name":"VisualizacionDatosUtec"}},"stars":0,"starred":false,"owner":{"type":"team","id":"09e60fe201e998c2","login":"jeffry-arturo-hilario-quintana","name":"Jeffry Arturo Hilario Quintana","avatar_url":"https://avatars-next.observableusercontent.com/78c0e0bf2c11dda88f60c623ee6945ad92fa87d512797e4c815adb070d6fa20c","tier":"starter_2024","bio":"","following":false},"version":355,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"556bede6fab89e32","login":"jeffry-arturo-hilario-quintana","name":"Jeffry Arturo Hilario Quintana","avatar_url":"https://avatars-next.observableusercontent.com/78c0e0bf2c11dda88f60c623ee6945ad92fa87d512797e4c815adb070d6fa20c","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"556bede6fab89e32","login":"jeffry-arturo-hilario-quintana","name":"Jeffry Arturo Hilario Quintana","avatar_url":"https://avatars-next.observableusercontent.com/78c0e0bf2c11dda88f60c623ee6945ad92fa87d512797e4c815adb070d6fa20c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fundamentos de D3 - Student View - 2025-2","cells":[{"id":0,"value":"# Fundamentos de D3 - Student View - 2025-2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"- **¿Qué es D3.js?**\n\nD3.js es una biblioteca de JavaScript para manipular documentos basados en datos. \nD3 te ayuda a dar vida a los datos utilizando HTML, SVG y CSS. \nSu énfasis en los estándares web te permite aprovechar al máximo las capacidades de los navegadores modernos sin depender de un framework propietario, combinando potentes componentes de visualización con un enfoque basado en datos para la manipulación del DOM.\n\n* Creado por [Mike Bostock](https://medium.com/@mbostock).\n* La versión original fue presentada como un artículo en InfoVis 2011: [D3: Data-Driven Documents](http://idl.cs.washington.edu/papers/d3).\n* ¡Código abierto! Disponible en [GitHub](https://github.com/d3/d3).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"#### Ejercicio 1\n\nRecrea estos rectángulos usando D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"// tu código aquí","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"### Selections y Joins\n\nSupongamos que tenemos un conjunto de datos que describe 5 círculos que queremos mostrar.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"circleInfo = [\n {\n x: 25,\n y: 50,\n radius: 5\n },\n {\n x: 75,\n y: 50,\n radius: 10\n },\n {\n x: 125,\n y: 50,\n radius: 15\n },\n {\n x: 175,\n y: 50,\n radius: 20\n },\n {\n x: 225,\n y: 50,\n radius: 25\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"No queremos repetir el mismo código ${circleInfo.length} veces para dibujar cada círculo individualmente. \nPodemos usar las selecciones y uniones de datos (`data joins`) de D3 para crear un círculo por cada objeto en nuestro conjunto de datos.\n\nMaterial adicional para selecciones y uniones: \n- [Selecciones y Joins](/@nyuvis/review) \n- [Learn D3: Joins](/@d3/learn-d3-joins) \n- [\\`selection.join\\`](/@d3/selection-join).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"#### Ejercicio 2\n\nVuelve a crear el ejemplo del rectángulo, esta vez utilizando selecciones y uniones de datos (`selections` y `joins`).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"rectInfo = [\n { xPos: 10, yPos: 10, width: 300, height: 20, color: 'purple' },\n { xPos: 10, yPos: 40, width: 250, height: 20, color: 'brown' },\n { xPos: 10, yPos: 70, width: 200, height: 20, color: 'orange' },\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"//tu código aquí\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"### Uniones Anidadas (Nested Joins)\n\nAquí tenemos un conjunto de datos que describe tres filas de círculos. \nHaz clic en el triángulo negro antes de \"Array\" para ver el contenido de `circleGrid`.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"circleGrid = [\n {\n y: 50,\n color: 'purple',\n label: 'Row A',\n circles: [\n { x: 25, radius: 5 },\n { x: 75, radius: 10 },\n { x: 125, radius: 15 },\n { x: 175, radius: 20 },\n { x: 225, radius: 25 }\n ]\n },\n {\n y: 150,\n color: 'brown',\n label: 'Row B',\n circles: [\n { x: 25, radius: 25 },\n { x: 75, radius: 20 },\n { x: 125, radius: 15 },\n { x: 175, radius: 10 },\n { x: 225, radius: 5 }\n ]\n },\n {\n y: 250,\n color: 'orange',\n label: 'Row C',\n circles: [\n { x: 25, radius: 20 },\n { x: 75, radius: 10 },\n { x: 125, radius: 5 },\n { x: 175, radius: 10 },\n { x: 225, radius: 20 }\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"{\n \n //Crear SVG\n const grafico = d3.create('svg')\n .attr('width', 500)\n .attr('height', 300);\n \n // Crear un grupo para cada círculo\n const rows = grafico.selectAll('g')\n .data(circleGrid)\n .join('g')\n //Colocamos la posición en y\n .attr('transform', row => `translate(0,${row.y})`)\n .attr('fill', row => row.color);\n \n // Adicionamos el label\n rows.append('text')\n .attr('font-family', 'sans-serif')\n .attr('y', -30)\n .text(d => d.label)\n \n // Se adiciona otro data join para dibujar cada uno de los círculos\n rows.selectAll('circle')\n // row.circles contiene los círculos de cada fila\n .data(row => row.circles)\n .join('circle')\n .attr('cx', circ => circ.x)\n .attr('r', circ => circ.radius);\n\n rows.append('text')\n \n return grafico.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"`circleGrid` contiene ${circleGrid.length} elementos: uno por cada fila. \nCada elemento incluye la coordenada `y` de la fila, el `color` de la fila, una etiqueta de texto (`label`) y un array con los ${circleGrid[0].circles.length} círculos de la fila. \nCada círculo tiene una coordenada `x` y un `radius`.\n\nPara dibujar esto, necesitaremos dos uniones de datos (`data joins`): \nuna para agregar los grupos correspondientes a cada fila y otra para agregar los círculos dentro de cada grupo.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"{\n //Crear SVG\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 300);\n \n\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"Parecido a este pseudocódigo:\n\n~~~\ncrear svg\n\npara cada fila en circleGrid {\n agregar un grupo al svg\n establecer la posición del grupo en (0, row.y)\n establecer el color de relleno del grupo en row.color\n\n agregar texto al grupo\n establecer el contenido del texto en row.label\n\n para cada circ en row.circles {\n agregar un círculo al grupo\n establecer el color de relleno del círculo en circ.color\n establecer la coordenada x del círculo en circ.x\n establecer el radio del círculo en circ.radius\n }\n}\n~~~\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"#### Ejercicio 3\n\nAquí tenemos un conjunto de datos que describe tres filas de rectángulos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"rectGrid = [\n {\n y: 50,\n color: 'purple',\n rects: [\n { x: 25, width: 10, height: 30 },\n { x: 75, width: 30, height: 10 },\n { x: 125, width: 20, height: 20 },\n { x: 175, width: 30, height: 10 },\n { x: 225, width: 10, height: 30 }\n ]\n },\n {\n y: 150,\n color: 'brown',\n rects: [\n { x: 25, width: 5, height: 5 },\n { x: 75, width: 10, height: 10 },\n { x: 125, width: 15, height: 15 },\n { x: 175, width: 20, height: 20 },\n { x: 225, width: 25, height: 25 }\n ]\n },\n {\n y: 250,\n color: 'orange',\n rects: [\n { x: 25, width: 10, height: 10 },\n { x: 75, width: 10, height: 15 },\n { x: 125, width: 10, height: 20 },\n { x: 175, width: 10, height: 25 },\n { x: 225, width: 10, height: 30 }\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"`rectGrid` contiene ${rectGrid.length} elementos: uno por cada fila. \nCada elemento incluye la coordenada `y` de la fila, el `color` de la fila y un array con los ${rectGrid[0].rects.length} rectángulos de la fila. \nCada rectángulo tiene una coordenada `x`, un `width` (ancho) y un `height` (alto).\n\nUsa dos uniones de datos (`data joins`) para dibujar este conjunto de datos.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"// Tu código aquí\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"ver [Mike Freeman](https://observablehq.com/@uw-info474/animated-scale-diagram?collection=@uw-info474/explanations). \nreferencia para **dominio** y el **rango** de una escala.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"scaleDiagram","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"Ver [Introducción a las escalas de D3](/@d3/introduction-to-d3s-scales).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"#### Escala Lineal\n\nLa escala más simple es: [`scaleLinear`](https://d3js.org/d3-scale/linear), que es un mapeo lineal de un dominio continuo a un rango continuo. \nEsta escala es útil cuando tienes un atributo cuantitativo en tus datos y quieres mapearlo a un canal cuantitativo, como posición o longitud.\n\nPara entender cómo funcionan, vamos a crear una escala que mapea el dominio [0, 10] al rango [0, 100].\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"linearScale = d3.scaleLinear()\n .domain([0,1300])\n .range([0,200])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"Para otro ejemplo, podemos crear una escala que convierta de Fahrenheit a Celsius.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"fahrenheitToCelsius = d3.scaleLinear()\n .domain([32,212])\n .range([0,200])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"fahrenheitToCelsius(32)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"Para un ejemplo más realista, supongamos que tenemos un conjunto de datos con los resultados de un juego y queremos crear un gráfico de barras horizontal que muestre la puntuación de cada persona.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"scores = [\n {name: 'Brian', score: 90},\n {name: 'Taylor', score: 80},\n {name: 'Kelly', score: 70},\n {name: 'Jane', score: 45},\n {name: 'Joe', score: 30},\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"Necesitamos una escala que mapee la puntuación de cada persona a la longitud de su barra. \nDefiniremos el ancho de nuestro gráfico en 300 píxeles.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"width = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"Primero, necesitamos sacar el número más alto en el conjunto de datos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"maxScore = d3.max(scores, d=>d.score)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"Ahora podemos crear una escala lineal para definir la longitud de las barras. \nEl dominio irá de 0 a ${maxScore}, que es la puntuación máxima. \nEl rango irá de 0 al ancho de la visualización. \n\nElegimos este dominio y rango para que una puntuación de 0 corresponda a una barra de longitud 0, \ny la puntuación máxima corresponda a una barra que cubra todo el ancho de la visualización.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"x = d3.scaleLinear()\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"x(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"x(maxScore/2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"x(maxScore)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"#### Escala de Bandas (Band Scale)\n\nA menudo usaremos [`scaleBand`](https://d3js.org/d3-scale/band) para posicionar barras en un gráfico de barras o para posicionar grupos de barras en un gráfico de barras agrupadas. \nLas escalas de bandas mapean un **dominio discreto** a un **rango continuo**. \nAl posicionar barras en un gráfico, una escala de bandas nos ayuda a gestionar el ancho y el espacio entre las barras.\n\nAquí tienes un diagrama que muestra una escala de bandas aplicada al eje x:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"

[d3-scale documentation](https://github.com/d3/d3-scale/tree/83555bd759c7314420bd4240642beda5e258db9e#band-scales)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"Podemos crear una escala de bandas (`scaleBand`) para mapear el nombre de cada persona a la posición vertical de su barra (eje y). \nEl **dominio** será la lista de nombres de las personas y el **rango** irá de 0 a la altura de nuestra visualización. \nEl **padding** define cuánto espacio queremos entre las barras.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"names = scores.map(d => d.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"height = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"y = d3.scaleBand()\n .domain(names)\n .range([0, height])\n .padding(0,2)\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"Esta escala mapea el nombre de una persona a la posición vertical de su barra. \nBrian es el primer nombre, por lo que su valor estará más cerca de 0. \nJoe es el último nombre, por lo que su valor estará más cerca de `height`.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"Podemos obtener el ancho de una banda en la escala llamando al método `bandwidth`. \nEste valor corresponderá a la altura de una barra en el gráfico.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"y.bandwidth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"#### Ejercicio 4\n\nVamos a crear el inicio de un gráfico de barras horizontal para el conjunto de datos `scores` dibujando las barras. \nEdita las líneas indicadas a continuación para usar las escalas `x` y `y` y definir la coordenada `y`, el ancho (`width`) y la altura (`height`) de las barras.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"scores","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"{\n // creamos nuestro elemento SVG externo con un tamaño de 500x100\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n \n // barra por cada elemento en scores\n const alumnos = svg.selectAll('rect')\n .data(scores)\n .join('rect')\n // establecemos los atributos para los rectángulos\n .attr('fill', 'orange')\n .attr('x', 10)\n .attr('y', d => y(d.name)) // EDITAR aquí\n .attr('width', d => x(d.score)) // EDITAR aquí\n .attr('height', y.bandwidth()); // EDITAR aquí\n \n // devolvemos el elemento SVG externo para que se pueda renderizar\n return svg.node();\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"{\n const height = 300;\n const width = 500;\n\n const yscale = d3.scaleBand()\n .domain(scores.map(d => d.name))\n .range([0, width])\n .padding(0.5);\n\n const xscale = d3.scaleLinear()\n .domain([0, d3.max(scores, d => d.score)])\n .range([0, height]);\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.selectAll(\"rect\")\n .data(scores)\n .join(\"rect\")\n .attr(\"x\", d => yscale(d.name))\n .attr(\"y\", d => height - xscale(d.score))\n .attr(\"width\", yscale.bandwidth())\n .attr(\"height\", d => xscale(d.score))\n .attr(\"fill\", \"orange\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"#### Escala de Puntos (Point Scale)\n\nTambién utilizaremos escalas de puntos. \nAl igual que `scaleBand`, [`scalePoint`](https://d3js.org/d3-scale/point) mapea un **dominio discreto** a un **rango continuo**. \nLa diferencia es que **no tiene ancho de banda (`bandwidth`)**. \n\nUsaremos una escala de puntos cuando no necesitemos considerar el ancho de una barra, como al posicionar círculos en una matriz de adyacencia, por ejemplo.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"

[d3-scale documentation](https://github.com/d3/d3-scale/tree/83555bd759c7314420bd4240642beda5e258db9e#point-scales)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"#### Escala Ordinal\n\n[`scaleOrdinal`](https://d3js.org/d3-scale/ordinal) mapea un **dominio discreto** a un **rango discreto**. \nPor ejemplo, podemos mapear las palabras \"uno\", \"dos\" y \"tres\" a sus números correspondientes.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"ordinalScale = d3.scaleOrdinal()\n .domain([\"one\",\"two\",\"three\"])\n .range([1,2,3])\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"ordinalScale(\"one\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"{\n const height = 300;\n const width = 500;\n\n const ordinalScale = d3.scaleOrdinal()\n .domain(scores.map(d=>d.name))\n .range([\"green\",\"orange\",\"blue\",\"red\", \"brown\"])\n \n const yscale = d3.scaleBand()\n .domain(scores.map(d => d.name))\n .range([0, width])\n .padding(0.5);\n\n const xscale = d3.scaleLinear()\n .domain([0, d3.max(scores, d => d.score)])\n .range([0, height]);\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.selectAll(\"rect\")\n .data(scores)\n .join(\"rect\")\n .attr(\"x\", d => yscale(d.name))\n .attr(\"y\", d => height - xscale(d.score))\n .attr(\"width\", yscale.bandwidth())\n .attr(\"height\", d => xscale(d.score))\n .attr(\"fill\", d => ordinalScale(d.name));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"A menudo usaremos escalas ordinales para mapear una categoría a un tono de color. \nPor ejemplo, si queremos que cada barra en un gráfico de barras tenga un color diferente, \npodemos crear una escala que asigne un color a cada nombre de persona. \n\nEl **dominio** de esta escala será el array de nombres, y el **rango** será un array de colores. \nPara este array de colores, podemos definir nuestros propios colores, como `['red', 'blue', 'brown', 'pink', 'purple']`, \no podemos usar uno de los [esquemas de color](https://d3js.org/d3-scale-chromatic) que proporciona D3.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"names","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"ordinalColor = d3.scaleOrdinal()\n .domain(names)\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"El notebook [D3 Color Legend](/@d3/color-legend) es útil para crear leyendas para escalas de color. \nEse notebook también contiene ejemplos de muchos tipos de escalas de color continuas.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"swatches({color: ordinalColor})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"#### Ejercicio 5\n\nUsa la escala `color` para asignar un color a las barras según el nombre de cada persona.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"{\n\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n\n const circles = svg.selectAll('rect')\n .data(scores)\n .join('rect')\n .attr('fill', d => 'steelblue') // Aquí\n .attr('x', 0)\n .attr('y', d => y(d.name))\n .attr('width', d => x(d.score))\n .attr('height', y.bandwidth())\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`---\n## Apéndice`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"solution = (code, lang='javascript') => html`\n

Solution

\n${md`\\`\\`\\`${lang}\n${code}\n\\`\\`\\``}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"import {chart as scaleDiagram} from '@uw-info474/animated-scale-diagram'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", 100)\n .attr(\"height\", 100);\n\n const g = svg.append(\"g\")\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"{\n \n //Crear SVG\n const grafico = d3.create('svg')\n .attr('width', 500)\n .attr('height', 300);\n \n // Crear un grupo para cada círculo\n const rows = grafico.selectAll('g')\n .data(circleGrid)\n .join('g')\n //Colocamos la posición en y\n .attr('transform', row => `translate(0,${row.y})`)\n .attr('fill', row => row.color)\n .text(\"miau\");\n \n // Adicionamos el label\n rows.append('text')\n .attr('font-family', 'sans-serif')\n .attr('y', -30)\n .text(\"miau\");\n \n // Se adiciona otro data join para dibujar cada uno de los círculos\n rows.selectAll('circle')\n // row.circles contiene los círculos de cada fila\n .data(row => row.circles)\n .join('circle')\n .attr('cx', circ => circ.x)\n .attr('r', circ => circ.radius)\n .text(\"miau\");\n \n return grafico.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 48:"$47:body"