Skip to content

Repository files navigation

DataViz Assistant 🎨

Color Palette Generator for Chart, graph, map and infographic

DataViz Assistant is a client-side web application designed for data scientists, analysts, developers, and designers to create, audit, preview, and export color palettes for data visualization.


🌟 Key Features

  1. Categorical, Sequential & Diverging Palettes: Built-in library featuring world-class palettes from:
    • Excel / MS Office (Office 2016+, Office 2013, Metro)
    • R / ggplot2 (ggplot2 default, Wes Anderson, Economist, FiveThirtyEight)
    • Plotly Express (Plotly default, Dark 24, Electric Blue, Portland)
    • Python Seaborn (Seaborn Deep, Muted, Magma, Coolwarm)
    • ColorBrewer (Okabe-Ito, Set 2, Dark 2, RdBu, YlGnBu, etc.)
    • D3 & Web (Tableau 10, D3 Category 10, IBM Carbon, Tailwind, Nord)
  2. Library Filtering & Sorting: Filter palettes by source library and sort by name or color count.
  3. Auto-Generator from Brand & Canvas Colors: Enter canvas/background color and 1 or 2 brand anchor colors with custom color harmony rules.
  4. Colorblind Accessibility Audit: Real-time simulation of 4 vision deficiency types (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) with DeltaE conflict detection and WCAG contrast checks.
  5. Interactive Previews: Live visual rendering on Bar Chart, Line Chart, Pie Chart, Heatmap Matrix, and Interactive Map of Iran Provinces.
  6. Production-Ready Code Export: Export palette snippets directly to Python (Matplotlib/Seaborn), R (ggplot2), Power BI JSON theme files, CSS/SCSS/Tailwind, and JSON.
  7. Bilingual (English & Persian): Complete UI translation with Persian number support (Vazirmatn typography).

🚀 Deployment to GitHub Pages

Follow these simple steps to host this serverless app on GitHub Pages for free:

Step 1: Create GitHub Repository

Push this codebase to a public or private GitHub repository.

Step 2: Add GitHub Action Workflow

Create a file named .github/workflows/deploy.yml in your repository with the following YAML configuration:

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main, master ]

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: './dist'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Step 3: Enable GitHub Pages

In your GitHub Repository, go to Settings -> Pages -> Source, and select GitHub Actions.

Step 4: Push & Publish

Commit and push your code to your default branch. The GitHub Action will automatically build and publish your site!


📄 License

Open source and built with ♥ by Alireza and AI.

About

Color Palette Generator for Chart, graph, map and infographic

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages