interactive-article v1.0.15

Interactive Article (iArticle)

An opinionated React framework for building interactive articles. Featuring matrix visualizations, with planned support for interactive timelines, function plots, and UML diagrams.

Features

• Matrix Visualization: Interactive heat-map style visualization of 2D matrices using D3
• Timeline: Interactive timeline with events and descriptions
• Smooth animations for value changes
• Text shadow for improved visibility
• Support for matrix operations and transformations

Installation

# Using npm
npm install interactive-article

# Using yarn
yarn add interactive-article

# Using pnpm
pnpm add interactive-article

Usage

import React from 'react';
import { MatrixVisualization } from 'interactive-article';

const sampleMatrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

function MyComponent() {
  return (
    <div>
      <h2>Matrix Visualization Example</h2>
      <MatrixVisualization initialData={sampleMatrix} />
    </div>
  );
}

Development Setup

1. Clone the repository:

   git clone https://github.com/your-org/interactive-article.git
   cd interactive-article

2. Install dependencies:

   pnpm install

3. Start development server:

   pnpm dev

4. Run tests:

   pnpm test
   
   # Run tests with coverage:
   
   pnpm test:coverage
   
   # Run tests with UI:
   
   pnpm test:ui

Tech Stack

• React 18+
• D3.js for visualizations
• Vite for development and building
• Vitest for testing
• TailwindCSS for styling

Contributing

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