React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

DAO Sustainability Analysis Project

Overview

This project provides a comprehensive analysis and visualization tool for evaluating DAO sustainability through multiple Key Performance Indicators (KPIs). It focuses on network participation, governance efficiency, and other critical metrics using real blockchain data.

Project Structure

dao-analysis-project/
├── public/
│   └── data/
│       └── dao-metrics.json     # Input data file
├── src/
│   ├── components/
│   │   └── visualization/
│   │       └── KPIAnalysis/
│   │           ├── ParticipationAnalysis.jsx       # Main participation scatter plot
│   │           ├── ParticipationDistribution.jsx   # Distribution analysis
│   │           ├── ParticipationDensityAnalysis.jsx # KDE visualization
│   │           └── ThresholdAnalysis.jsx           # Threshold validation
│   ├── utils/
│   │   └── exportUtils.js      # Export utilities for figures
│   ├── lib/
│   │   └── data/
│   │       └── metrics-processor.js  # Data processing utilities
│   └── App.jsx                 # Main application component
├── package.json
└── README.md

Setup and Running

1. Install dependencies:

npm install

2. Place your data file:

cp your-data.json public/data/dao-metrics.json

3. Run the development server:

npm run dev

Data Requirements

Input JSON format:

{
  "dao_name": "string",
  "network_participation": {
    "num_distinct_voters": number,
    "total_members": number,
    "participation_rate": number,
    "unique_proposers": number
  },
  // ... other metrics
}

Visualization Export

Each visualization can be exported in:

• SVG format (vector graphics)
• High-resolution PNG (3x scale)

Usage:

handleExport('svg' | 'png')