MDV

MDV (Markdown Data & Visualization) is a powerful Markdown superset designed for creating documents, dashboards, and slides with integrated data and visual content. It enhances standard Markdown with a set of features that allow for the easy incorporation of charts, KPI cards, tables, and styled regions without the need for complex coding or expressions.

Key Features

• YAML Front-Matter: Define your documents with metadata including titles, themes, and dataset references.
• Fenced Blocks for Data Visualization: Leverage fenced code blocks to insert various types of data visualizations. For example:

  ```chart type=bar x=region y=sales```
  

• Stylized Regions: Use ::: containers for creating styled sections within your documents, such as callouts or columns.
• Automatic Table of Contents: Generate an organized table of contents effortlessly with the ::: toc functionality.

Example Usage

Here is how a typical MDV file looks:

---
title: Q1 Report
theme: report
data:
  sales: ./data/sales.csv
---

::: toc
:::

# Q1 Results

```stat
label, value, delta
Total revenue, $2.06M, +14%
New customers, 1238, +8%
```

```chart type=line data=sales x=month y=revenue series=region yFormat=currency title="Monthly revenue"
```

This snippet showcases a flash report featuring a table of statistics and a line chart visualizing monthly revenue, both rendered seamlessly in a self-contained HTML format or as a PDF.

Integrated Development Experience

MDV operates efficiently within Visual Studio Code, allowing users to preview content live side-by-side as they write.

Documentation and Resources

• Getting Started: A comprehensive guide to set up and author your first MDV file.
• Syntax Reference: Detailed descriptions of the Markdown enhancements provided by MDV.
• Charts & Stats: Documentation covering visualization options and features.
• Data Handling: Instructions for integrating datasets in CSV, JSON formats or file-referenced datasets.
• Themes & Styles: Information about using built-in themes and creating custom styles.
• CLI Commands: Options to render, preview, and export documents.
• VS Code Extension: Details about using MDV's features in the VS Code environment.

Examples

Explore the examples/ directory for sample files that demonstrate all MDV features, along with their rendered HTML output available in examples/out/.

Current Status

MDV version 1 is currently in pre-release, built to function with Node.js version 20 or above. For those interested in the project's design philosophy and future roadmap, further information can be found in the MDV format design document.

MDV offers a streamlined approach to building interactive, data-driven documents, making it a valuable tool for anyone looking to enhance their content with visual data representation.