SWOT Chart – Interactive Product Analysis for Sentimate

05/19/2025
2 minute read

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

  1. Designed and implemented the base SWOT chart component.
  2. Added a synchronized value table below the chart.
  3. Enabled real-time interaction between selected chart regions and corresponding table columns.
  4. 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.

An error has occurred. This application may no longer respond until reloaded. Reload x