---
title: "Índice — simulador de plataforma de inversión | Logic2b Lab"
description: "Dashboard financiero interactivo con compraventa simulada, rebalanceo hacia un objetivo, gráficos SVG animados y control de volatilidad. Un laboratorio de Logic2b."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/indice/
  md: https://logic2b.com/lab/indice/index.md
---

# Índice Lab · Finanzas y contabilidad / Cuadros de mando

lab.logic2b.com/indice

Ruta: [Lab](https://logic2b.com/lab) › [Finanzas y contabilidad](https://logic2b.com/sistemas/finanzas-contabilidad)

## Cómo se construyó Índice

Laboratorio de inversión con cotizaciones ficticias y una cartera que se recalcula con cada movimiento. Una interfaz editorial de fondo carbón, tarjetas salvia, crema y azul, acentos naranja y gráficos SVG propios: patrimonio con eje, línea de apertura, crosshair y transición entre periodos, donut de asignación frente a un objetivo y barras que siguen el precio real simulado. El usuario puede comprar y vender con capital virtual viendo antes el impacto en su cartera, rebalancear hacia su objetivo en un gesto, consultar coste y resultado de cada posición, filtrar su historial y exportarlo. Todo funciona en el navegador, con persistencia local y sin servicios financieros externos.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.

### Qué demuestra

- Gráfico de patrimonio en SVG a tamaño real: curva monótona, línea de apertura con área bicolor, eje con ticks que se deslizan, máximo y mínimo, etiqueta de precio viva y crosshair con ratón, táctil y teclado
- Cinco periodos con series seedeadas que se transforman por interpolación al cambiar de rango, con banda de variaciones por punto
- Compra y venta con precio fijado, importes rápidos, validación y vista previa de unidades, capital resultante y peso del activo antes de confirmar
- Asignación frente a un objetivo 45/35/20 con donut interpolado, desvío en puntos y rebalanceo que calcula y ejecuta las órdenes en un gesto
- Modelo de datos con coste por posición y resultado latente y realizado: aportado + latente + realizado = patrimonio, visible en pantalla
- Tarjetas de activo con 12 tramos reales del precio, destello de subida o bajada y posición del usuario; ticker vivo con mini-sparklines
- Coreografía de entrada escalonada y contadores que interpolan en un único bucle requestAnimationFrame; pausa, volatilidad y reinicio del mercado
- Vistas de cartera, mercados con búsqueda y actividad con filtros; primeros pasos guiados, persistencia en localStorage y exportación CSV
- Diseño adaptable, objetivos táctiles de 44 px, diálogos accesibles, contraste AA y estado final estático con movimiento reducido

### Detalles

**Categoría**

Finanzas y contabilidad / Cuadros de mando

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- SVG

### Categorías

[Finanzas y contabilidad](https://logic2b.com/sistemas/finanzas-contabilidad) [Cuadros de mando y analítica](https://logic2b.com/sistemas/cuadros-de-mando) Fintech Dashboard Simulación Microinteracciones

### Lo ofrecemos con webs de

[Banca, fintech y seguros](https://logic2b.com/diseno-web/fintech)

## Labs relacionados

[Ver todos](https://logic2b.com/lab)

[**Emisora** Paneles de control / Fintech](https://logic2b.com/lab/emisora) [**Rúbrica** Fintech / Cumplimiento normativo](https://logic2b.com/lab/rubrica) [**Estrado** Cuadros de mando](https://logic2b.com/lab/estrado)

---

Logic2b S.L. · Castellón (España) · [info@logic2b.com](mailto:info@logic2b.com) · [Contacto](https://logic2b.com/contacto/) · [Auditoría gratuita](https://logic2b.com/auditoria/) · [Índice para IA](https://logic2b.com/llms.txt)