Add support for JSON files

Author: ndrezn

.github/workflows/deploy-pages.yml

@@ -25,6 +25,20 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Install uv (Python package manager)
+        run: |
+          curl -LsSf https://astral.sh/uv/install.sh | sh
+          echo "$HOME/.cargo/bin" >> $GITHUB_PATH
+
+      - name: Convert JSON files to HTML
+        run: |
+          if [ -d "json" ] && [ "$(ls -A json/*.json 2>/dev/null)" ]; then
+            chmod +x convert_json_to_html.py
+            ~/.cargo/bin/uv run convert_json_to_html.py
+          else
+            echo "No JSON files found in json/ directory, skipping conversion"
+          fi
+
       - name: Disable Chart Studio showLink
         run: |
           chmod +x .github/scripts/disable-showlink.sh

README.md

@@ -13,9 +13,10 @@ Host your Plotly Chart Studio visualizations online for free using GitHub Pages.
 
 ## What This Does
 
-Upload your Chart Studio HTML exports, and they'll be automatically published online:
+Upload your Chart Studio HTML exports or JSON data files, and they'll be automatically published online:
 - An **index page** listing all your Plotly charts is created at `https://yourusername.github.io/your-project/`
 - Each chart gets its own web address: `https://yourusername.github.io/your-project/my-chart.html`
+- **NEW:** Support for JSON exports - just place Chart Studio JSON files in the `json/` directory and they'll be automatically converted to HTML
 
 Perfect for sharing interactive Plotly visualizations with your team or embedding in presentations!
 
@@ -65,6 +66,14 @@ You can add files directly on GitHub (easiest) or use GitHub Desktop:
 4. In GitHub Desktop, write a description and click **Commit to main**
 5. Click **Push origin** to upload
 
+**Option C: Upload JSON Files (Alternative)**
+If you have JSON exports from Chart Studio instead of HTML files:
+1. Click on the `json` folder (or create it if it doesn't exist)
+2. Click **Add file** → **Upload files**
+3. Drag and drop your Chart Studio JSON files (e.g., `chart_data.json` files)
+4. Click **Commit changes** at the bottom
+5. The GitHub Action will automatically convert these to HTML files in the `charts` folder
+
 ### Step 5: Wait for Publishing
 
 After uploading files:
@@ -185,3 +194,60 @@ uv run poll_all_charts.py
 The script will download all your charts and save them as HTML files in the `charts/` folder. Then just commit and push the changes to publish them on GitHub Pages!
 
 **Note:** This script uses Plotly.js version 1.58.5 to ensure compatibility and consistent rendering across all your charts.
+
+## Working with JSON Exports
+
+If you have Chart Studio JSON exports (such as `chart_data.json` files from bulk exports), this repository can automatically convert them to HTML files.
+
+### Why Use JSON Files?
+
+- Bulk exports from Chart Studio often come as JSON files
+- JSON files are more portable and easier to version control
+- You can modify chart data programmatically before converting to HTML
+- Smaller file sizes compared to full HTML files
+
+### How to Use JSON Files
+
+**Option 1: Manual Conversion (Local)**
+
+1. Place your JSON files in the `json/` directory
+2. Run the conversion script locally:
+   ```bash
+   ./convert_json_to_html.py
+   ```
+3. The script will create HTML files in the `charts/` directory
+
+**Option 2: Automatic Conversion (GitHub)**
+
+1. Upload your JSON files to the `json/` folder in your repository
+2. Commit and push the changes
+3. GitHub Actions will automatically:
+   - Detect the JSON files
+   - Convert them to HTML using the same Plotly.js version (1.58.5)
+   - Include them in your published site
+
+### JSON File Format
+
+The JSON files should match the Chart Studio export format:
+
+```json
+{
+  "data": [
+    {
+      "type": "scatter",
+      "x": [1, 2, 3],
+      "y": [2, 4, 6],
+      "mode": "lines+markers"
+    }
+  ],
+  "layout": {
+    "title": {
+      "text": "My Chart"
+    },
+    "xaxis": {"title": {"text": "X Axis"}},
+    "yaxis": {"title": {"text": "Y Axis"}}
+  }
+}
+```
+
+The conversion script reads the `data` and `layout` fields and generates standalone HTML files with embedded Plotly.js.

convert_json_to_html.py

@@ -0,0 +1,71 @@
+#!/usr/bin/env -S uv run --script
+#
+# /// script
+# requires-python = ">=3.12"
+# dependencies = []
+# ///
+
+import json
+import os
+import sys
+
+def convert_json_to_html(json_path, output_path):
+    """Convert a Chart Studio JSON export to standalone HTML"""
+    with open(json_path, 'r') as f:
+        chart_data = json.load(f)
+
+    # Extract data and layout from the JSON
+    data_json = json.dumps(chart_data.get('data', []))
+    layout_json = json.dumps(chart_data.get('layout', {}))
+
+    # Generate standalone HTML with Plotly.js 1.58.5
+    html_template = f"""<html>
+    <head><meta charset="utf-8" /></head>
+    <body>
+        <div id="plotly-div"></div>
+        <script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
+        <script>
+            var data = {data_json};
+            var layout = {layout_json};
+            Plotly.newPlot('plotly-div', data, layout);
+        </script>
+    </body>
+</html>"""
+
+    with open(output_path, 'w') as f:
+        f.write(html_template)
+
+    return output_path
+
+def main():
+    # Convert all JSON files in the json/ directory
+    json_dir = "json"
+    charts_dir = "charts"
+
+    if not os.path.exists(json_dir):
+        print(f"❌ Directory '{json_dir}' does not exist")
+        sys.exit(1)
+
+    os.makedirs(charts_dir, exist_ok=True)
+
+    json_files = [f for f in os.listdir(json_dir) if f.endswith('.json')]
+
+    if not json_files:
+        print(f"No JSON files found in '{json_dir}' directory")
+        return
+
+    print(f"Found {len(json_files)} JSON file(s) to convert")
+
+    for json_file in json_files:
+        json_path = os.path.join(json_dir, json_file)
+        html_filename = json_file.replace('.json', '.html')
+        html_path = os.path.join(charts_dir, html_filename)
+
+        try:
+            convert_json_to_html(json_path, html_path)
+            print(f"✅ Converted {json_file} → {html_filename}")
+        except Exception as e:
+            print(f"❌ Failed to convert {json_file}: {e}")
+
+if __name__ == "__main__":
+    main()

json/example-chart-2.json

@@ -0,0 +1,86 @@
+{
+  "data": [
+    {
+      "meta": {
+        "columnNames": {
+          "labels": "A",
+          "values": "D"
+        }
+      },
+      "mode": "markers",
+      "type": "pie",
+      "labelssrc": "kiwisky:10:e2d9e3",
+      "labels": [
+        "Club",
+        "Real Madrid CF",
+        "FC  Bayern M\u00fcnchen",
+        "FC Barcelona",
+        "Manchester  United",
+        "Juventus",
+        "Liverpool  FC",
+        "AC Milan",
+        "SL  Benfica",
+        "FC Porto",
+        "AFC Ajax",
+        "Chelsea FC",
+        "FC  Internazionale Milano",
+        "Nottingham Forest FC"
+      ],
+      "valuessrc": "kiwisky:10:38e1a2",
+      "values": [
+        "Titles",
+        "14",
+        "6",
+        "5",
+        "3",
+        "2",
+        "6",
+        "7",
+        "2",
+        "2",
+        "4",
+        "2",
+        "3",
+        "2"
+      ]
+    }
+  ],
+  "frames": [],
+  "layout": {
+    "title": {
+      "x": 0.05,
+      "font": {
+        "size": 35,
+        "family": "Droid Sans"
+      },
+      "text": "<b>Vyhran\u00e9 tituly (klub)</b>"
+    },
+    "xaxis": {
+      "range": [
+        -1,
+        6
+      ],
+      "autorange": true
+    },
+    "yaxis": {
+      "range": [
+        -1,
+        4
+      ],
+      "autorange": true
+    },
+    "legend": {
+      "x": 0.9199999999999999,
+      "y": 1,
+      "font": {
+        "size": 25
+      },
+      "borderwidth": 3
+    },
+    "margin": {
+      "l": 50
+    },
+    "autosize": true,
+    "paper_bgcolor": "rgb(227, 227, 227)"
+  }
+}