| Ejemplo | Description |
|---|---|
| data-mapping-0-div.html | Este archivo muestra un gráfico de barras simple utilizando div para representar el número de habitantes por estado. Los datos de los estados y sus habitantes están definidos en un array de objetos. Cada barra se genera dinámicamente con base en la cantidad de habitantes, y su longitud se ajusta proporcionalmente mediante un factor de escala. El nombre del estado y el número de habitantes se muestran dentro de cada barra. |
| data-mapping-1-div.html | Este archivo es una variación del anterior, donde se ha añadido una clase especial para resaltar una barra en particular. La diferencia principal es que si el estado es "Italy", la barra correspondiente se destaca visualmente mediante un cambio de color de fondo y color de texto. Esto se logra con la clase .highlight, que aplica un estilo especial a dicha barra. |
| data-mapping-2-svg.html | Este archivo utiliza SVG para representar los datos de habitantes por estado en un gráfico de barras. A diferencia de los archivos anteriores, donde se usaban div para las barras, aquí se emplean elementos rect de SVG para dibujar las barras dentro de un contenedor SVG. Cada barra se dibuja con un ancho proporcional al número de habitantes, ajustado por un factor de escala. Los rectángulos se colocan en diferentes filas en función del índice del estado, lo que asegura que no se superpongan. Se utiliza JavaScript para generar dinámicamente los rectángulos dentro del contenedor SVG. |
| data-mapping-3-svg.html | Al igual que en el archivo anterior, se usan elementos rect para dibujar las barras, pero en este caso, las barras están desplazadas horizontalmente, con una posición x fija en 140, lo que crea un margen a la izquierda. El ancho de cada barra se calcula en función del número de habitantes, ajustado por un factor de escala. Además de las barras, se incluyen etiquetas de texto (text) para mostrar el nombre de cada estado. Estas etiquetas están alineadas al final de cada barra, y se posicionan justo antes de la barra en el eje horizontal, con un tamaño de fuente de 24 y utilizando la fuente "Verdana". |
| data-mapping-4-svg.html | Al igual que en el archivo anterior, se utilizan elementos rect para dibujar las barras y text para mostrar el nombre de cada estado. Además, junto a cada barra se muestra el nombre del estado y, a su derecha, el número exacto de habitantes con otro elemento text. |
| data-mapping-5-svg.html | Al igual que en el archivo anterior, pero con un detalle adicional: a la derecha de cada barra se muestra el número de habitantes en millones, redondeado a un decimal, utilizando siempre un elemento text. Este número se presenta de manera más legible, por ejemplo, '15.4M' en lugar del número completo. |
| data-mapping-6-svg.html | Este archivo es similar al anterior, pero con algunos detalles adicionales: la altura de las barras (rectángulos) se ha reducido a 2 píxeles, lo que las hace más sutiles. Además, se ha añadido un círculo al final de cada barra para resaltar visualmente los datos. |
| data-mapping-7-svg.html | Este archivo sigue la estructura de los anteriores, pero con una característica adicional: se ha añadido un estilo especial para resaltar el estado de "France". Si el estado es "France", la barra correspondiente se colorea con un color especial (azul oscuro: #337799), mientras que las demás barras se mantienen con un color estándar (gris: #bbb). Además, se utiliza un círculo en la parte final de cada barra, cuyo color también varía según el estado destacado. |
| data-mapping-8-svg.html | El gráfico generado muestra el número de habitantes por estado con barras horizontales representando cada país. El estado con el mayor número de habitantes se resalta utilizando un color específico (azul oscuro: #337799). Esto se logra buscando el estado con el mayor valor de habitantes y luego cambiando el color de la barra y el círculo correspondiente a ese estado. |
| data-mapping-9-svg-events.html | Este archivo HTML permite visualizar un gráfico interactivo de barras, donde se muestran las poblaciones de diferentes países en tres regiones: Europa, Asia y América. Al hacer clic en los botones correspondientes, se actualiza el gráfico con los datos de la región seleccionada. Cada barra representa la población de un país, y el país con mayor población se resalta en color azul para destacarlo. |
| data-mapping-a-svg-events.html | Este código HTML es similar al ejemplo anterior de mapeo de datos, pero con una diferencia principal: se añade una interacción adicional. Al pasar el ratón sobre las barras del gráfico, se muestra información sobre el idioma del país correspondiente. |