Data Visualization

The nova-plot module allows you to create SVG charts directly in your documents from CSV or JSON files.

Chart Types

Type Description Typical Use
line Line chart Time series, trends
bar Bar chart Comparisons, distributions
scatter Scatter plot Correlations, regressions
pie Pie chart Proportions, percentages
area Area chart Volumes, cumulative data

Basic Syntax

// Chart from a CSV file
#nova-plot(
  data: "data.csv",
  type: "line",
  title: "My chart"
)

Available Parameters

Parameter Type Description
data string Path to CSV or JSON file
type string Chart type (line, bar, scatter, pie, area)
title string Chart title
x-label string X-axis label
y-label string Y-axis label
width length Chart width (default: 100%)
height length Chart height (default: 300pt)
colors array Custom color palette
legend bool Show legend (default: true)
grid bool Show grid (default: true)

Data Format

CSV

// data.csv
x,series1,series2,series3
2020,10,15,8
2021,15,20,12
2022,25,22,18
2023,30,28,25
2024,35,32,30

JSON

// data.json
{
  "labels": ["2020", "2021", "2022", "2023", "2024"],
  "datasets": [
    {
      "name": "Series 1",
      "values": [10, 15, 25, 30, 35]
    },
    {
      "name": "Series 2",
      "values": [15, 20, 22, 28, 32]
    }
  ]
}

Examples by Type

Line Chart

#nova-plot(
  data: "evolution.csv",
  type: "line",
  title: "Temporal Evolution",
  x-label: "Year",
  y-label: "Value",
  colors: ("#2563eb", "#10b981", "#f59e0b")
)

Bar Chart

#nova-plot(
  data: "comparison.csv",
  type: "bar",
  title: "Method Comparison",
  x-label: "Method",
  y-label: "Score"
)

Scatter Plot with Regression

#nova-plot(
  data: "correlation.csv",
  type: "scatter",
  title: "X-Y Correlation",
  x-label: "Variable X",
  y-label: "Variable Y",
  trend-line: true,
  trend-color: "#ef4444"
)

Pie Chart

// Category distribution
#nova-plot(
  data: "distribution.csv",
  type: "pie",
  title: "Distribution by Category",
  show-percentages: true
)

Area Chart

#nova-plot(
  data: "cumulative.csv",
  type: "area",
  title: "Cumulative Evolution",
  stacked: true,
  opacity: 0.7
)

Advanced Customization

Color Palette

// Custom colors
#nova-plot(
  data: "data.csv",
  type: "bar",
  colors: (
    "#2563eb",  // Blue
    "#10b981",  // Green
    "#f59e0b",  // Orange
    "#ef4444",  // Red
    "#8b5cf6"   // Purple
  )
)

Dimensions

#nova-plot(
  data: "data.csv",
  type: "line",
  width: 80%,
  height: 250pt
)

Axis Styling

#nova-plot(
  data: "data.csv",
  type: "line",
  x-min: 0,
  x-max: 100,
  y-min: 0,
  y-max: 50,
  x-ticks: 5,
  y-ticks: 10
)

Integration with Figure

#figure(
  nova-plot(
    data: "results.csv",
    type: "bar",
    title: none,  // The title will be the caption
    height: 200pt
  ),
  caption: [Performance comparison of different methods],
) <fig:results>

As shown in @fig:results, our method outperforms...

Inline Data

You can also specify the data directly:

#nova-plot(
  data: (
    labels: ("A", "B", "C", "D"),
    values: (25, 40, 30, 55)
  ),
  type: "bar",
  title: "Inline Data"
)
Technical Note

nova-plot generates SVG charts, which guarantees perfect vector quality regardless of the export resolution (PDF, high-quality printing, etc.).

Complete Example

= Experimental Results

== Model Performance

#figure(
  nova-plot(
    data: "benchmark.csv",
    type: "bar",
    x-label: "Model",
    y-label: "F1-Score",
    colors: ("#94a3b8", "#94a3b8", "#94a3b8", "#2563eb"),
    height: 220pt
  ),
  caption: [F1-Score Comparison]
) <fig:f1>

The results presented in @fig:f1 show that our
approach (in blue) significantly outperforms the baselines.

== Temporal Evolution

#figure(
  nova-plot(
    data: "training.csv",
    type: "line",
    x-label: "Epoch",
    y-label: "Loss",
    legend: true,
    grid: true
  ),
  caption: [Learning Curves]
) <fig:training>