Nutrition in numbers
🌊 Así hice esta infografía: un proceso entre datos, diseño y experimentación.
Es es mi flujo de trabajo para el proceso de creación de una infografía. En este caso he partido de un material sobre macronutrientes que comencé hace unos meses. Al final, en estos proyectos personales trato de buscar un tema que me interese y profundizar en cómo puedo contar gráficamente una idea.
Puedes ver el resultado final en pdf aquí y más abajo en imágenes.
Detrás de la elaboración de esta hay varias fases en las que organizo ideas, selecciono datos, pruebo gráficos y ajusto detalles. Aquí te cuento cómo lo hice paso a paso.
🔍 Fase de documentación
Todo comenzó en Miro, donde fui volcando ideas en un lienzo infinito y consultando bibliografía (que dejo al final 📚). También programé una pequeña aplicación en Flask + Python para extraer datos de OpenFoodFacts, una base de datos colaborativa sobre productos alimenticios. Esto me permitió seleccionar ejemplos relevantes para la infografía.
🗄 Preparación de datos
Nada nuevo por aquí: Google Sheets + Excel fueron clave para ordenar la información y empezar a darle forma.
🎨 Fase de diseño
Aquí se empieza a poner interesante:
- GeoGebra + JavaScript: Tengo que decir que la elección de los gráficos de sectores circulares así como el BeesWarm Plot (los círculos que representan las horquillas de proporción de cada grupo de alimento) son a todas luces una elección en la que prima más el diseño que la precisión. El motivo es que que los seres humanos somos en realidad bastante peores midiendo y comparando ángulos y áreas que midiendo y comparando longitudes. Así que en este proyecto me permití este estudio en detalle del gráfico circular porque quería experimentar con GeoGebra y su precisión pero sacrifiqué la claridad del gráfico. Sin duda una elección discutible.
- Papel y boli: Bocetos y primeras ideas sobre la disposición de elementos.
- Códigos de color: En GeoGebra, los colores pueden modificarse con deslizadores. Para escoger los ocho colores que necesitaba la infografía, creé mi propia gama usando una aplicación en JavaScript. Dejo una nota aquí sobre cómo hacerlo: Notas sobre JavaScript y GeoGebra.
- La construcción en GeoGebra fue un ejercicio de matrices de datos, listas anidadas, bucles y rotaciones de elementos, algo en lo que me siento muy cómodo.
- Illustrator: Una vez definidos los gráficos y colores, preparé la plantilla y tipografía en Illustrator.
📈 Fase de creación de gráficos vectoriales
Para generar los gráficos en SVG, utilicé dos herramientas:
- RawGraphs: Rápido, gratuito y perfecto para necesidades básicas.
- Tableau: Más potente, libre en su versión Public, pero también más complejo y con más opciones.
🛠️ Fase de composición
Exporté los elementos en SVG, limpié detalles, retoqué textos y ajusté todo para la versión final. Esta fase a veces te lleva atrás a revisar decisiones anteriores o profundizar en otras ideas como el tipo de gráfico o los detalles. Varias revisiones después, la infografía estaba lista.
🖼️ Resultado final
Aquí dejo la infografía terminada, junto con un video donde muestro las fases y herramientas en acción. Más detalles en mi web: [enlace]
💡 Reflexión final
Como en cualquier proyecto, hay decisiones discutibles. ¿Habría sido mejor priorizar precisión sobre diseño? Tal vez. Pero experimentar con nuevos enfoques también es parte del aprendizaje.
🎇 La infografía en imágenes
📚 Bibliografía
- Biesalski, H. K., Grimm, S., & Nowitzki-Grimm, S. (2021). Texto y atlas de nutrición. Elsevier Gezondheidszorg.
- Greenfield, H., & Southgate, D. A. T. (2006). Datos de Composición de Alimentos: Obtención, Gestión y Utilización. FAO.
- McGee, H. (2017). La cocina y los alimentos: Enciclopedia de la Ciencia y la Cultura de la Comida. Grupo Editorial Patria.
🎶 Música del video
- Solo los Valientes: Fifty Sounds