Goal
To develop an interactive, data-driven SWOT analysis chart for each product on the Sentimate analytics platform. The chart combines visual and tabular data to allow users to explore product strengths, weaknesses, opportunities, and threats—along with user reviews tied to each factor.
Key Milestones
- Designed and implemented the base SWOT chart component.
- Added a synchronized value table below the chart.
- Enabled real-time interaction between selected chart regions and corresponding table columns.
- Integrated contextual user reviews under each SWOT category.
Technologies Used
- Visualization:
amcharts4
- Frontend: JavaScript, RxJS (BehaviorSubject)
- Backend: Elastic-search queries, multi-index merging
- Architecture: Modular design (dedicated chart+table component)
Implementation Overview
Client-Side
Chart Component
- Built four interconnected SWOT quadrant charts (Strengths, Weaknesses, Opportunities, Threats).
- Shared X/Y axes across all charts for consistency and alignment.
- Parsed dynamic data from the backend and rendered it with custom labels and tooltip-enabled markers.
Table Component
- Displayed values in a dynamic table synced with the chart.
-
Used
BehaviorSubject
to map active chart regions to table columns. - Enabled sorting and highlighting based on user interactions.
Server-Side
- Constructed complex queries in Elasticsearch to fetch quotes and review metadata.
- Merged datasets across multiple indexes to support comprehensive product-level analysis.
Project Highlights & Challenges
Connecting Multiple Charts
Creating four separate chart instances with synchronized axes required precise coordination of configuration and runtime updates.
Solution
- Connected the charts programmatically using amCharts' shared axis capability.
- Centralized axis definitions to maintain alignment between visualizations.
Dynamic Axis Calculation
The axis bounds had to adapt to incoming data to ensure consistent scaling across all quadrants.
Solution
- Calculated global min/max values from datasets to define a unified X and Y axis range for all charts.
This project demonstrates my ability to create rich, interactive data visualizations and synchronize multiple UI components—while integrating them with advanced backend search infrastructure like Elasticsearch.