🚀 Features

• Developed a Power BI Custom Visual using TypeScript, React, and D3.js.
• Implemented a visual schema with properties (title, description, imagePath).
• Added support for dynamic data binding and user interaction.
• Configured capabilities.json for fields, formatting options, and interactivity.
• Built and packaged with the Power BI Visuals SDK.
• Optimized for performance and reusability.

🧩 Tech Stack

• Power BI Visuals SDK
• TypeScript
• React
• D3.js
• Node.js / npm

📁 Project Structure

my-custom-visual/
│- .tmp/              # Temporary build files (ignored in git)
│- dist/              # Final packaged visual
│- node_modules/      # Dependencies
├── .vscode/          # Editor settings
├── capabilities.json # Defines visual capabilities
├── visual.ts         # Main logic for rendering
├── visualSettings.ts # Custom settings
├── pbiviz.json       # Config for packaging
├── package.json      # Dependencies & scripts
└── README.md         # Documentation
      

⚙️ How I Built This (Step by Step)

1. Installed Power BI Visuals Tools (pbiviz) via npm.
2. Created a new visual project using the CLI (pbiviz new <visual-name>).
3. Defined schema & configuration in pbiviz.json and capabilities.json.
4. Implemented main rendering logic inside visual.ts.
5. Added React components for UI rendering.
6. Styled visual using CSS for clean presentation.
7. Tested visual with sample data in Power BI Desktop.
8. Packaged visual into .pbiviz format for deployment.