CoolFace
Apppublic

harshapitla/stackoverflow

sourceHugging Facemitupdated 9mo agoView on Hugging Face
0likes
App README

Stack Overflow Data Analysis Dashboard

A comprehensive interactive dashboard for analyzing Stack Overflow developer survey data, built with React and featuring multiple visualization components.

Features

1️⃣ Developer Demographics

📊 Developers by Country

  • —Shows global distribution of developers
  • —Chart Type: Bar chart (Top 10 countries)
  • —Columns Used: Country

📊 Developers by Gender

  • —Diversity & inclusion insight
  • —Chart Type: Pie / Donut chart
  • —Columns Used: Gender

📊 Age Distribution of Developers

  • —Workforce age trends
  • —Chart Type: Histogram
  • —Columns Used: Age

2️⃣ Experience & Career Insights

📊 Coding Experience (YearsCode)

  • —Skill maturity distribution
  • —Chart Type: Histogram
  • —Columns Used: YearsCode

📊 Professional Coding Experience

  • —Industry readiness insight
  • —Chart Type: Histogram
  • —Columns Used: YearsCodePro

📊 Developer Roles Distribution

  • —Market demand for roles
  • —Chart Type: Bar chart
  • —Columns Used: DevType

3️⃣ Salary & Compensation

📊 Salary Distribution

  • —Income spread & outliers
  • —Chart Type: Box plot
  • —Columns Used: ConvertedCompYearly

📊 Average Salary by Country (Top 10)

  • —Regional salary comparison
  • —Chart Type: Bar chart
  • —Columns Used: Country, ConvertedCompYearly

📊 Salary vs Experience

  • —Career growth insight
  • —Chart Type: Scatter plot
  • —Columns Used: YearsCodePro, ConvertedCompYearly

4️⃣ Technology Trends

📊 Most Used Programming Languages

  • —Technology popularity
  • —Chart Type: Horizontal bar chart
  • —Columns Used: LanguageHaveWorkedWith

📊 Most Used Databases

  • —Backend tech trends
  • —Chart Type: Bar chart
  • —Columns Used: DatabaseHaveWorkedWith

📊 Platforms Developers Work With

  • —Cloud & OS usage insight
  • —Chart Type: Bar chart
  • —Columns Used: PlatformHaveWorkedWith

5️⃣ Education & Learning

📊 Education Level of Developers

  • —Academic background insight
  • —Chart Type: Pie / Bar chart
  • —Columns Used: EdLevel

📊 Learning Sources

  • —How developers learn
  • —Chart Type: Bar chart
  • —Columns Used: LearnCode

6️⃣ Work & Lifestyle

📊 Remote Work Preference

  • —Work culture trend
  • —Chart Type: Pie chart
  • —Columns Used: RemoteWork

📊 Job Satisfaction

  • —Workforce happiness
  • —Chart Type: Bar chart
  • —Columns Used: JobSat

Technology Stack

  • —Frontend: React.js
  • —Charts: Custom React components with Chart.js
  • —Styling: CSS with responsive design
  • —Data Processing: JavaScript/ES6+ features

Getting Started

  1. 1.Clone the repository
  2. 2.Install dependencies: npm install
  3. 3.Start the development server: npm start
  4. 4.Open http://localhost:3000 to view the dashboard

Key Components

  • —KpiOverview: Displays key performance indicators
  • —StackOverflowChart: Main chart container
  • —DataLoader: Handles data fetching and processing
  • —Various Chart Components: Specialized visualizations for different data aspects

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference