SVG & Data Visualization - Incomplete-Infinity/eve-companion GitHub Wiki

📊 SVG & Data Visualization

This page outlines the use of SVG graphics and data visualizations within the EVE Companion App. From interface embellishments to dynamic graphs and ship silhouettes, SVG is a core part of the app's visual identity and functionality.

🎯 Goals

  • Render clean, scalable visuals that reflect EVE's futuristic UI
  • Use SVG for both static icons and animated overlays
  • Enable efficient data-driven visualizations (charts, maps)
  • Support full customization of vector assets

🧩 SVG Use Cases

Type Purpose
UI Icons Lightweight, themed iconography for actions and tools
Animated Elements Glow rings, radar sweeps, and scanning overlays
Ship Silhouettes Generated from 3D models, used in fitting and fleet modules
Charts & Graphs Visualize prices, training, and wallet trends (Chart.js + SVG)
Starmap Visualization Rendered via D3.js using SVG for interactivity

🧬 Vector Asset Pipeline

You previously vectorized a large portion of EVE's UI icons and optimized them for:

  • Minimal file size
  • Color/gradient overrides
  • Dynamic fill, stroke, and layer control

These assets will be added to the project soon and stored under:

assets/svg/icons/

Ship silhouette SVGs, extracted from models, will be available in:

assets/svg/ships/

📈 Data Visualization

Charts and graphs are rendered using Chart.js with SVG fallback. Examples include:

  • Market price history (line/area graphs)
  • Skill training progress (radar or donut)
  • Wallet flow (stacked bar/pie charts)

Each chart is themed according to empire or user mode.

🌌 3D Model Integration

A growing library of EVE 3D models is included with the app. These are used to:

  • Generate silhouettes
  • Animate ships in background scenes (with Three.js)
  • Provide ship rotation previews (planned)

Models are stored under:

assets/models/

📡 Planned Enhancements

  • Live fit comparison via side-by-side silhouette overlays
  • D-Scan cone visualizer with ship vector estimates
  • Custom SVG loader utility for styling and mounting icons
  • Faction icon library with interactive tooltips

📌 Summary

  • SVGs power icons, maps, charts, and animations throughout the app
  • Ship silhouettes and UI icons are optimized for performance and styling
  • Combined with Chart.js and D3, SVG gives us a rich, responsive visual layer