Data Viz Renderer

Generate self-contained HTML/SVG infographics from JSON data. Four supported types:

1. Stats Cards, KPI big numbers + trend arrows + icons
2. Comparison Chart, Grouped bar chart with multiple series
3. Flow Diagram, Step-by-step process with numbering, icons, and connecting arrows
4. Dashboard, Mixed layout: stat cards + bar chart + donut chart + flow

Output is a fully self-contained HTML file (all CSS/SVG inline, no external dependencies), ready to open directly in a browser.

Usage

Basic Usage

python3 scripts/build_infographic.py config.json

Also supports reading from stdin:

cat config.json | python3 scripts/build_infographic.py

The script outputs a JSON status to stdout and writes the generated HTML to the path specified in the output field.

JSON Configuration Format

Common fields:

Field	Type	Required	Description
title	string	No	Infographic title
subtitle	string	No	Subtitle
type	string	Yes	stats / comparison / flow / dashboard
palette	string	No	Color palette (default: auto)
data	object/array	Yes	Data content (format depends on type)
output	string	No	Output file path (default: infographic.html)
footer	string	No	Footer text

Color Palettes

Available values: auto (automatically chosen based on data), ocean, sunset, forest, berry, vibrant, corporate, pastel, earth

Data Format by Type

1. stats, Stat Cards

{
  "type": "stats",
  "data": [
    {
      "label": "Total Revenue",
      "value": "$1.2M",
      "icon": "money",
      "trend": "+12.5%",
      "trend_dir": "up"
    },
    {
      "label": "Users",
      "value": "45,230",
      "icon": "users",
      "trend": "+8.2%",
      "trend_dir": "up"
    }
  ]
}