Instala la skill CLI belt: npx skills add belt-sh/cli
Visualización de Datos
Crea visualizaciones de datos claras y efectivas a través de la CLI de inference.sh.
Inicio Rápido
Requiere CLI de inference.sh (belt). Instrucciones de instalación
belt login
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nmonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"]\nrevenue = [42, 48, 55, 61, 72, 89]\n\nfig, ax = plt.subplots(figsize=(10, 6))\nax.bar(months, revenue, color=\"#3b82f6\", width=0.6)\nax.set_ylabel(\"Revenue ($K)\")\nax.set_title(\"Monthly Revenue Growth\", fontweight=\"bold\")\nfor i, v in enumerate(revenue):\n ax.text(i, v + 1, f\"\${v}K\", ha=\"center\", fontweight=\"bold\")\nplt.tight_layout()\nplt.savefig(\"revenue.png\", dpi=150)\nprint(\"Saved\")"
}'
Guía de Selección de Gráficos
¿Qué gráfico para qué datos?
| Relación de Datos | Mejor Gráfico | Nunca Usar |
|---|
| Cambio en el tiempo | Gráfico de líneas | Gráfico circular |
| Comparar categorías | Gráfico de barras (horizontal para muchas categorías) | Gráfico de líneas |
| Parte de un todo | Barra apilada, treemap | Gráfico circular (controvertido pero: la barra siempre es más clara) |
| Distribución | Histograma, diagrama de caja | Gráfico de barras |
| Correlación | Gráfico de dispersión | Gráfico de barras |
| Ranking | Gráfico de barras horizontal | Barra vertical, circular |
| Geográfico | Mapa de coropletas | Gráfico de barras |
| Composición a lo largo del tiempo | Gráfico de área apilada | Múltiples gráficos circulares |
| Métrica única | Número grande (tarjeta KPI) | Cualquier gráfico (excesivo) |
| Flujo / proceso | Diagrama de Sankey | Gráfico de barras |
El Problema del Gráfico Circular
Los gráficos circulares son casi siempre la elección incorrecta:
❌ Problemas del gráfico circular:
- Difícil comparar porciones de tamaño similar
- No puede mostrar más de 5-6 categorías
- Los gráficos circulares 3D siempre están mal
- Imposible leer valores exactos
✅ Usa en su lugar:
- Gráfico de barras horizontal (comparación fácil)
- Barra apilada (parte de un todo)
- Treemap (partes jerárquicas)
- Solo una tabla (si la precisión importa)
Reglas de Diseño
Ejes
| Regla | Por Qué |
|---|
| Siempre empezar el eje Y en 0 (gráficos de barras) | Evita representaciones engañosas |
| Los gráficos de líneas PUEDEN empezar por encima de 0 | Al mostrar cambio, no valores absolutos |
| Etiquetar ambos ejes | El lector no debería tener que adivinar unidades |
| Eliminar cuadrículas innecesarias | Reducir ruido visual |
| Usar etiquetas horizontales | El texto vertical es difícil de leer |
| Ordenar gráficos de barras por valor | No usar orden alfabético a menos que haya una razón |
Color
| Principio | Aplicación |
|---|
| Máximo 5-7 colores por gráfico | Más resulta ilegible |
| Resaltar una cosa | Gris todo lo demás, color para el foco |
| Secuencial para magnitud | Claro → oscuro para bajo → alto |
| Divergente para positivo/negativo | Rojo ← neutral → azul |
| Categórico para grupos | Tonos distintos, brillo similar |
| Seguro para daltónicos | Evitar solo rojo/verde — añadir formas o etiquetas |
| Significado consistente | Si azul = ingresos, mantener azul en todas partes |
Buenas Paletas de Colores
sequential = ["#eff6ff", "#bfdbfe", "#60a5fa", "#2563eb", "#1d4ed8"]
diverging = ["#ef4444", "#f87171", "#d1d5db", "#34d399", "#10b981"]
categorical = ["#3b82f6", "#f59e0b", "#10b981", "#8b5cf6", "#ef4444"]
cb_safe = ["#0077BB", "#33BBEE", "#009988", "#EE7733", "#CC3311"]
Texto y Etiquetas
| Elemento | Regla |
|---|
| Título | Enuncia el insight, no el tipo de dato. "Los ingresos se duplicaron en el segundo trimestre" no "Gráfico de ingresos del segundo trimestre" |
| Anotaciones | Señalar puntos de datos clave directamente en el gráfico |
| Leyenda | Evitar si es posible — etiquetar directamente en líneas/barras del gráfico |
| Tamaño de fuente | Mínimo 12px, 14px+ para presentaciones |
| Formato de números | Usar K, M, B para números grandes (42K no 42,000) |
| Etiquetas de datos | Añadir a barras/puntos cuando los valores exactos importan |
Recetas de Gráficos
Gráfico de Líneas (Serie de Tiempo)
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(12, 6))\nfig.patch.set_facecolor(\"white\")\n\nmonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]\nthis_year = [120, 135, 148, 162, 178, 195, 210, 228, 245, 268, 290, 320]\nlast_year = [95, 102, 108, 115, 122, 130, 138, 145, 155, 165, 178, 190]\n\nax.plot(months, this_year, color=\"#3b82f6\", linewidth=2.5, marker=\"o\", markersize=6, label=\"2024\")\nax.plot(months, last_year, color=\"#94a3b8\", linewidth=2, linestyle=\"--\", label=\"2023\")\nax.fill_between(range(len(months)), last_year, this_year, alpha=0.1, color=\"#3b82f6\")\n\nax.annotate(\"\$320K\", xy=(11, 320), fontsize=14, fontweight=\"bold\", color=\"#3b82f6\")\nax.annotate(\"\$190K\", xy=(11, 190), fontsize=12, color=\"#94a3b8\")\n\nax.set_ylabel(\"Revenue (\$K)\", fontsize=12)\nax.set_title(\"Revenue grew 68% year-over-year\", fontsize=16, fontweight=\"bold\")\nax.legend(fontsize=12)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.grid(axis=\"y\", alpha=0.3)\nplt.tight_layout()\nplt.savefig(\"line-chart.png\", dpi=150)\nprint(\"Saved\")"
}'
Gráfico de Barras Horizontal (Comparación)
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(10, 6))\n\ncategories = [\"Email\", \"Social\", \"SEO\", \"Paid Ads\", \"Referral\", \"Direct\"]\nvalues = [12, 18, 35, 22, 8, 5]\ncolors = [\"#94a3b8\"] * len(values)\ncolors[2] = \"#3b82f6\" # Resaltar el ganador\n\n# Order by value\nsorted_pairs = sorted(zip(values, categories, colors))\nvalues, categories, colors = zip(*sorted_pairs)\n\nax.barh(categories, values, color=colors, height=0.6)\nfor i, v in enumerate(values):\n ax.text(v + 0.5, i, f\"{v}%\", va=\"center\", fontsize=12, fontweight=\"bold\")\n\nax.set_xlabel(\"% del Tráfico Total\", fontsize=12)\nax.set_title(\"SEO genera la mayor cantidad de tráfico\", fontsize=16, fontweight=\"bold\")\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nplt.tight_layout()\nplt.savefig(\"bar-chart.png\", dpi=150)\nprint(\"Saved\")"
}'
Tarjeta KPI / Número Grande
belt app run infsh/html-to-image --input '{
"html": "<div style=\"display:flex;gap:20px;padding:20px;background:white;font-family:system-ui\"><div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:24px;width:200px;text-align:center\"><p style=\"color:#64748b;font-size:14px;margin:0\">Ingresos Mensuales</p><p style=\"font-size:48px;font-weight:900;margin:8px 0;color:#1e293b\">$89K</p><p style=\"color:#22c55e;font-size:14px;margin:0\">↑ 23% vs el mes pasado</p></div><div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:24px;width:200px;text-align:center\"><p style=\"color:#64748b;font-size:14px;margin:0\">Usuarios Activos</p><p style=\"font-size:48px;font-weight:900;margin:8px 0;color:#1e293b\">12.4K</p><p style=\"color:#22c55e;font-size:14px;margin:0\">↑ 8% vs el mes pasado</p></div><div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:24px;width:200px;text-align:center\"><p style=\"color:#64748b;font-size:14px;margin:0\">Tasa de Abandono</p><p style=\"font-size:48px;font-weight:900;margin:8px 0;color:#1e293b\">2.1%</p><p style=\"color:#ef4444;font-size:14px;margin:0\">↑ 0.3% vs el mes pasado</p></div></div>"
}'
Mapa de Calor
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport numpy as np\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(10, 6))\n\ndays = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"]\nhours = [\"9AM\", \"10AM\", \"11AM\", \"12PM\", \"1PM\", \"2PM\", \"3PM\", \"4PM\", \"5PM\"]\ndata = np.random.randint(10, 100, size=(len(hours), len(days)))\ndata[2][1] = 95 # Pico martes 11AM\ndata[2][3] = 88 # Jueves 11AM\n\nim = ax.imshow(data, cmap=\"Blues\", aspect=\"auto\")\nax.set_xticks(range(len(days)))\nax.set_yticks(range(len(hours)))\nax.set_xticklabels(days, fontsize=12)\nax.set_yticklabels(hours, fontsize=12)\n\nfor i in range(len(hours)):\n for j in range(len(days)):\n color = \"white\" if data[i][j] > 60 else \"black\"\n ax.text(j, i, data[i][j], ha=\"center\", va=\"center\", fontsize=10, color=color)\n\nax.set_title(\"Tráfico del Sitio Web por Día y Hora\", fontsize=16, fontweight=\"bold\")\nplt.colorbar(im, label=\"Visitantes\")\nplt.tight_layout()\nplt.savefig(\"heatmap.png\", dpi=150)\nprint(\"Saved\")"
}'
Narración con Datos
El Arco Narrativo
| Paso | Qué Hacer | Ejemplo |
|---|
| 1. Contexto | Preparar lo que el lector necesita saber | "Seguimos el costo de adquisición de clientes mensualmente" |
| 2. Tensión | Mostrar el problema o cambio | "El CAC aumentó un 40% en el tercer trimestre" |
| 3. Resolución | Mostrar el insight o solución | "Pero el LTV aumentó un 80%, por lo que la economía unitaria mejoró" |
Título como Insight
❌ Títulos descriptivos (lo que muestra el gráfico):
"Ingresos del Tercer Trimestre por Línea de Producto"
"Usuarios Activos Mensuales 2024"
"Resultados de la Encuesta de Satisfacción del Cliente"
✅ Títulos de insight (lo que significa el gráfico):
"El producto empresarial impulsa el 70% del crecimiento de ingresos"
"El crecimiento de usuarios se aceleró tras el lanzamiento del nivel gratuito"
"El tiempo de respuesta del soporte es el principal impulsor de satisfacción"
Técnicas de Anotación
| Técnica | Cuándo Usar |
|---|
| Etiqueta destacada | Resaltar un punto de datos específico ("Pico: 320K") |
| Línea de referencia | Mostrar objetivo/referencia ("Meta: 100K") |
| Región sombreada | Marcar un período de tiempo ("Ventana de lanzamiento del producto") |
| Flecha + texto | Llamar la atención sobre un cambio de tendencia |
| Línea antes/después | Mostrar el impacto de un evento |
Gráficos en Modo Oscuro
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\n# Tema oscuro\nplt.rcParams.update({\n \"figure.facecolor\": \"#0f172a\",\n \"axes.facecolor\": \"#0f172a\",\n \"axes.edgecolor\": \"#334155\",\n \"axes.labelcolor\": \"white\",\n \"text.color\": \"white\",\n \"xtick.color\": \"white\",\n \"ytick.color\": \"white\",\n \"grid.color\": \"#1e293b\"\n})\n\nfig, ax = plt.subplots(figsize=(12, 6))\nmonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"]\nvalues = [45, 52, 58, 72, 85, 98]\n\nax.plot(months, values, color=\"#818cf8\", linewidth=3, marker=\"o\", markersize=8)\nax.fill_between(range(len(months)), values, alpha=0.15, color=\"#818cf8\")\nax.set_title(\"Crecimiento MRR: Camino a los $100K\", fontsize=18, fontweight=\"bold\")\nax.set_ylabel(\"MRR ($K)\", fontsize=13)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.grid(axis=\"y\", alpha=0.2)\n\nfor i, v in enumerate(values):\n ax.annotate(f\"\${v}K\", (i, v), textcoords=\"offset points\", xytext=(0, 12), ha=\"center\", fontsize=11, fontweight=\"bold\")\n\nplt.tight_layout()\nplt.savefig(\"dark-chart.png\", dpi=150, facecolor=\"#0f172a\")\nprint(\"Saved\")"
}'
Errores Comunes
| Error | Problema | Solución |
|---|
| Gráficos circulares | Difíciles de comparar, siempre engañosos | Usar gráficos de barras o treemaps |
| Eje Y no comienza en 0 (gráficos de barras) | Exagera las diferencias | Empezar en 0 para barras, está bien truncar para líneas |
| Demasiados colores | Ruido visual, confuso | Máximo 5-7 colores, resaltar solo lo que importa |
| Sin título o título genérico | El lector no conoce el insight | Título = la conclusión, no el tipo de dato |
| Gráficos 3D | Distorsiona datos, parece poco profesional | Usar siempre 2D |
| Dobles ejes Y | Engañoso, difícil de leer | Usar dos gráficos separados |
| Orden alfabético en gráficos de barras | Oculta la historia | Ordenar por valor (mayor primero) |
| Sin etiquetas en los ejes | El lector no puede interpretar | Etiquetar siempre con unidades |
| Chartjunk (elementos decorativos) | Distrae de los datos | Eliminar todo lo que no transmita información |
| Solo rojo/verde para codificación de color | Los usuarios daltónicos no pueden leer | Usar formas, patrones o paletas seguras para daltónicos |
Habilidades Relacionadas
npx skills add inference-sh/skills@pitch-deck-visuals
npx skills add inference-sh/skills@technical-blog-writing
npx skills add inference-sh/skills@competitor-teardown
Explorar todas las apps: belt app list