📈 Comunica tus resultados de manera efectiva con las mejores visualizaciones de datos
Image credit: Unsplash
Hugo Blox está diseñado para brindar a los creadores de contenido técnico una experiencia perfecta. Puedes concentrarte en el contenido y Hugo Blox se encarga del resto.
Usa herramientas populares como Plotly, Mermaid y marcos de datos.
Gráficos
Hugo Blox admite el formato popular Plotly para visualizaciones de datos interactivas. ¡Con Plotly, puedes diseñar casi cualquier tipo de visualización que puedas imaginar!
Guarda tu JSON de Plotly en la carpeta de tu página, por ejemplo line-chart.json, y luego añade el shortcode {{< chart data="line-chart" >}} donde quieras que aparezca el gráfico.
Demo:
También puede que encuentres útil el Editor JSON de Plotly.
Diagramas
Hugo Blox admite la extensión Mermaid de Markdown para diagramas.
Un ejemplo de diagrama de flujo:
```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```
se renderiza como
Un ejemplo de diagrama de secuencia:
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
se renderiza como
Un ejemplo de diagrama de clases:
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```
se renderiza como
Un ejemplo de diagrama de estados:
```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
se renderiza como
Marcos de Datos
Guarda tu hoja de cálculo como un archivo CSV en la carpeta de tu página y luego renderízala añadiendo el shortcode Table a tu página:
{{< table path="results.csv" header="true" caption="Table 1: My results" >}}
se renderiza como
| customer_id | score |
|---|---|
| 1 | 0 |
| 2 | 0.5 |
| 3 | 1 |
