# open-jsxgraph

**Repository Path**: tiantiantuo/open-jsxgraph

## Basic Information

- **Project Name**: open-jsxgraph
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-20
- **Last Updated**: 2026-07-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Open-JSXGraph - Interactive Mathematics and Geometry Visualization Tool

A modern interactive mathematics and geometry visualization tool built with JSXGraph, supporting dynamic geometric drawing, function plotting, statistical charts, and mathematical formula editing.

## ✨ Key Features

### 🎯 Geometric Drawing
- **Basic Geometric Elements**: Points, lines, circles, ellipses, parabolas, hyperbolas
- **Advanced Shapes**: Polygons, stars, hearts, rose curves, spirals
- **Vectors and Segments**: Vector drawing and segment measurement support
- **Tangents**: Automatic tangent calculation and drawing

### 📊 Function Plotting
- **Mathematical Functions**: Support for arbitrary mathematical function plotting
- **Trigonometric Functions**: Visualization of sine, cosine, and other trigonometric functions
- **Parametric Equations**: Support for parametric equation plotting of ellipses, circles, etc.
- **LaTeX Formulas**: LaTeX mathematical formula input and rendering support

### 📈 Statistical Charts
- **Bar Charts**: Draggable interactive bar charts
- **Pie Charts**: Dynamic pie chart visualization
- **Scatter Plots**: Data point visualization
- **Real-time Editing**: Support for real-time chart data modification

### 🎨 Interactive Features
- **Drag Operations**: All graphical elements support drag and drop
- **Zoom and Pan**: Canvas zoom and pan support
- **Undo/Redo**: Complete operation history tracking
- **Multi-canvas**: Support for multiple workspace switching
- **Animation**: Support for geometric animation demonstrations

### 🔧 Mathematical Tools
- **Formula Editor**: Integrated MathLive mathematical formula editor
- **Calculation Engine**: MathJS-based mathematical computation
- **Probability Distributions**: Normal, exponential, Poisson, and other distributions
- **Geometric Construction**: Support for complex geometric construction processes

## 🚀 Quick Start

### Requirements
- Node.js 18+
- Yarn or npm

### Install Dependencies
```bash
# Using yarn (recommended)
yarn install

# Or using npm
npm install
```

### Start Development Server
```bash
# Using yarn
yarn dev

# Or using npm
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to start using the application.

### Build for Production
```bash
# Build
yarn build

# Start production server
yarn start

# Export static files
yarn export
```

## 🛠️ Tech Stack

- **Frontend Framework**: Next.js 15 + React 19
- **Geometry Engine**: JSXGraph 1.11
- **Mathematical Computation**: MathJS + MathLive
- **UI Components**: Radix UI + Tailwind CSS
- **Chart Library**: D3.js
- **Formula Rendering**: KaTeX
- **Development Tools**: TypeScript + ESLint

## 📖 User Guide

### Basic Operations
1. **Add Geometric Shapes**: Click the shape buttons in the left toolbar
2. **Plot Functions**: Use the formula editor to input mathematical functions
3. **Create Charts**: Select chart type and input data
4. **Interactive Operations**: Drag shapes, zoom canvas, pan view

### Advanced Features
- **Multi-canvas Management**: Create multiple workspaces for complex projects
- **Animation Demo**: Use animation tools to demonstrate geometric transformations
- **Data Import**: Support for external data import into charts
- **Export Functionality**: Support for image and data export

## 🎯 Use Cases

### Education
- **Mathematics Teaching**: Interactive visualization of mathematical concepts
- **Geometry Learning**: Dynamic geometric construction and exploration
- **Function Analysis**: Real-time function plotting and parameter adjustment
- **Statistics Education**: Interactive data visualization and analysis

### Research
- **Mathematical Research**: Complex mathematical function visualization
- **Data Analysis**: Statistical chart creation and manipulation
- **Geometric Modeling**: Advanced geometric shape construction
- **Algorithm Visualization**: Mathematical algorithm demonstration

### Development
- **Prototyping**: Quick mathematical visualization prototyping
- **Testing**: Mathematical function and algorithm testing
- **Documentation**: Creating mathematical diagrams and charts
- **Presentation**: Interactive mathematical presentations

## 🔧 Development

### Project Structure
```
open-jsxgraph/
├── app/                    # Next.js app directory
│   ├── page.tsx           # Main page component
│   └── layout.tsx         # App layout
├── components/            # React components
│   ├── Workspace.tsx      # Main workspace component
│   ├── JXGBoard.tsx       # JSXGraph board wrapper
│   ├── MathEditor.tsx     # Mathematical formula editor
│   └── ui/                # UI components
├── lib/                   # Utility libraries
├── types/                 # TypeScript type definitions
└── public/                # Static assets
```

### Key Components

#### Workspace.tsx
The main component that integrates all functionality:
- JSXGraph board management
- Toolbar and UI controls
- State management for geometric elements
- Animation and interaction handling

#### MathEditor.tsx
Mathematical formula editing component:
- LaTeX formula input
- Real-time formula rendering
- Function compilation and plotting

#### DraggableBarChart.tsx
Interactive chart component:
- Draggable bar chart implementation
- Real-time data editing
- Chart customization options

### Adding New Features

#### Adding a New Geometric Shape
1. Create a new function in `Workspace.tsx`
2. Add the shape creation logic using JSXGraph API
3. Add a toolbar button for the new shape
4. Update the component state management

#### Adding a New Chart Type
1. Create a new chart component
2. Implement the chart rendering logic
3. Add chart data management
4. Integrate with the main workspace

## 🤝 Contributing

We welcome contributions! Please feel free to submit issues and pull requests.

### Development Setup
1. Fork the repository
2. Clone your fork: `git clone https://github.com/yourusername/open-jsxgraph.git`
3. Install dependencies: `yarn install`
4. Start development server: `yarn dev`
5. Make your changes
6. Test thoroughly
7. Submit a pull request

### Contribution Guidelines
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

### Code Style
- Use TypeScript for all new code
- Follow the existing code style and formatting
- Add appropriate comments for complex logic
- Include tests for new features when possible

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🙏 Acknowledgments

- [JSXGraph](https://jsxgraph.org/) - Powerful interactive geometry library
- [MathJS](https://mathjs.org/) - Mathematical computation library
- [D3.js](https://d3js.org/) - Data visualization library
- [Next.js](https://nextjs.org/) - React framework
- [Radix UI](https://www.radix-ui.com/) - UI component library
- [Tailwind CSS](https://tailwindcss.com/) - CSS framework

## 📞 Support

If you encounter any issues or have questions:
- Open an issue on GitHub
- Check the documentation
- Review existing issues for solutions

## 🔗 Related Projects

- [JSXGraph](https://jsxgraph.org/) - The core geometry library
- [MathJS](https://mathjs.org/) - Mathematical computation library
- [D3.js](https://d3js.org/) - Data visualization library
- [KaTeX](https://katex.org/) - Math typesetting library