Build a Simple React JS Interactive Web-Based Survey Results Display: A Beginner’s Guide

Written by

javascriptdebugged

in

In the digital age, understanding user feedback is crucial. Surveys are a powerful tool for gathering this information, but raw data alone isn’t always helpful. That’s where visualizing survey results comes in. This tutorial will guide you through building a simple, interactive survey results display using React JS. You’ll learn how to take survey data and present it in a clear, engaging, and easy-to-understand format. This project is perfect for beginners and intermediate developers looking to enhance their React skills while creating something practical and useful.

Why Build a Survey Results Display?

Creating a survey results display offers several benefits:

  • Enhanced Data Interpretation: Visualizations like charts and graphs make it easier to spot trends and patterns in the data that might be missed in a raw dataset.
  • Improved Communication: Presenting results visually makes them accessible to a wider audience, including those without technical expertise.
  • Increased Engagement: Interactive elements can make the data more engaging, encouraging users to explore the results further.
  • Practical Application: This project is directly applicable to various scenarios, from market research to internal feedback analysis.

By building this project, you’ll gain valuable experience with React components, state management, and data rendering, all essential skills for modern web development.

Prerequisites

Before you begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server.
  • Basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is necessary to understand the code and concepts.
  • A code editor: Choose your preferred editor (e.g., VS Code, Sublime Text, Atom).
  • A modern web browser: For testing and viewing your application.

Project Setup

Let’s get started by setting up our React project. Open your terminal and run the following command:

npx create-react-app survey-results-display
cd survey-results-display

This command creates a new React application named “survey-results-display”. Navigate into the project directory using the cd command.

Project Structure

Our project will have a simple structure to keep things organized. Here’s how we’ll structure our files:

  • src/
    • App.js: The main component of our application.
    • components/
      • BarChart.js: Component for displaying bar charts.
      • PieChart.js: Component for displaying pie charts.
    • data/
      • surveyData.js: Contains the sample survey data.
    • App.css: Styles for the main application.
  • public/: Contains the index.html file.

We’ll create the components and data directories as we progress through the tutorial.

Step 1: Create Sample Survey Data

First, let’s create some sample data to simulate survey results. Create a new file named surveyData.js inside the src/data directory. Add the following code:


// src/data/surveyData.js
const surveyData = [
  {
    question: "How satisfied are you with our service?",
    type: "bar", // or "pie"
    options: [
      { label: "Very Satisfied", count: 150 },
      { label: "Satisfied", count: 200 },
      { label: "Neutral", count: 50 },
      { label: "Dissatisfied", count: 30 },
      { label: "Very Dissatisfied", count: 20 },
    ],
  },
  {
    question: "What is your favorite product?",
    type: "pie",
    options: [
      { label: "Product A", count: 80 },
      { label: "Product B", count: 120 },
      { label: "Product C", count: 50 },
    ],
  },
];

export default surveyData;

This data structure is an array of objects. Each object represents a survey question and its corresponding results. The type property determines whether to display a bar chart or a pie chart. The options array contains the labels and counts for each response.

Step 2: Create the BarChart Component

Next, let’s create a component to display bar charts. Create a new file named BarChart.js inside the src/components directory. Add the following code:


// src/components/BarChart.js
import React from 'react';

function BarChart({ question, options }) {
  const maxCount = Math.max(...options.map(option => option.count));

  return (
    <div>
      <h3>{question}</h3>
      {options.map((option, index) => (
        <div style="{{">
          <div style="{{"></div>
          <span>{option.label} ({option.count})</span>
        </div>
      ))}
    </div>
  );
}

export default BarChart;

This component takes two props: question and options. It calculates the maximum count to normalize the bar lengths. It then renders a series of divs, each representing a bar. The width of each bar is proportional to its count. The component also displays the label and count for each option.

Step 3: Create the PieChart Component

Now, let’s create a component to display pie charts. Create a new file named PieChart.js inside the src/components directory. Add the following code:


// src/components/PieChart.js
import React from 'react';

function PieChart({ question, options }) {
  const total = options.reduce((sum, option) => sum + option.count, 0);

  return (
    <div>
      <h3>{question}</h3>
      <div style="{{">
        {options.map((option, index) => {
          const angle = (option.count / total) * 360;
          let startAngle = 0;
          for (let i = 0; i < index; i++) {
            startAngle += (options[i].count / total) * 360;
          }

          const style = {
            position: 'absolute',
            width: '100%',
            height: '100%',
            clip: `rect(0px, ${200}px, ${200}px, 0px)`, // Initial clip
          };

          const styleInner = {
            position: 'absolute',
            width: '100%',
            height: '100%',
            backgroundColor: `hsl(${index * 60}, 70%, 50%)`,
            transform: `rotate(${startAngle}deg)`, // Rotate to the correct starting angle
            clip: `rect(0px, ${200}px, ${200}px, 0px)` // Clip for each slice
          };

          return (
            <div>
              <div></div>
              <span style="{{">{option.label} ({option.count})</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default PieChart;

This component calculates the total count and then iterates through the options to create pie slices. Each slice is a div with a calculated angle and a background color. The position of each slice is handled with absolute positioning and transforms. The labels and counts are overlaid on top of the pie chart slices. This implementation uses CSS to create the pie chart effect.

Step 4: Build the App Component

Now, let’s create the main component that orchestrates everything. Open src/App.js and replace the existing code with the following:


// src/App.js
import React from 'react';
import surveyData from './data/surveyData';
import BarChart from './components/BarChart';
import PieChart from './components/PieChart';
import './App.css';

function App() {
  return (
    <div>
      <h1>Survey Results</h1>
      {surveyData.map((questionData, index) => (
        <div>
          {questionData.type === 'bar' ? (
            
          ) : (
            
          )}
        </div>
      ))}
    </div>
  );
}

export default App;

This component imports the sample data, the BarChart and PieChart components, and the CSS file. It then iterates through the surveyData array and renders either a BarChart or a PieChart based on the question’s type. The key prop is crucial for React to efficiently update the DOM.

Step 5: Add Basic Styling

To make the application look better, add some basic styling to src/App.css. Replace the existing content with the following:


/* src/App.css */
.App {
  text-align: center;
  padding: 20px;
  font-family: sans-serif;
}

.survey-question {
  margin-bottom: 30px;
}

Step 6: Run the Application

Finally, run your application in the development server. In your terminal, run:

npm start

This will start the development server, and your application should open in your browser. You should see the survey results displayed as bar charts and pie charts, based on the data you provided.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Incorrect Data Format: Ensure your surveyData.js file has the correct data structure (an array of objects with question, type, and options). Double-check the spelling and casing of the keys.
  • Missing Component Imports: Make sure you’ve imported the BarChart and PieChart components correctly in App.js. Also, verify the import paths.
  • Incorrect Prop Passing: Ensure you are passing the correct props (question and options) to the BarChart and PieChart components.
  • CSS Issues: If the styling is not displaying correctly, check your CSS files for any syntax errors or incorrect class names. Use your browser’s developer tools to inspect the elements and see if the styles are being applied.
  • Key Prop Errors: When mapping over arrays, make sure you provide a unique key prop to each element. In this example, we use the index. However, in real-world scenarios, the data should have a unique identifier.

Enhancements and Next Steps

Here are some ways you can enhance this project:

  • Add more chart types: Implement other chart types, such as line charts or radar charts, to provide more ways to visualize your data.
  • Implement interactivity: Allow users to filter the results, hover over bars to see values, or click on pie slices for details.
  • Fetch data from an API: Instead of using static data, fetch the survey data from a backend API to make the application more dynamic.
  • Add a responsive design: Ensure the application looks good on different screen sizes. Use media queries in your CSS to adapt the layout.
  • Implement user authentication: Add a login system to control access to the survey results.

Key Takeaways

  • Component-Based Architecture: React promotes a component-based architecture, making your code modular and reusable.
  • Data Rendering: You learned how to render data dynamically using the map function.
  • Conditional Rendering: You used conditional rendering to display different chart types based on the data.
  • State Management (Implicit): While this example doesn’t explicitly use a state management library, you implicitly managed the data within the components.
  • Basic Styling: You learned how to apply basic styling using CSS.

FAQ

  1. Can I use a different charting library?

    Yes, you can. Libraries like Chart.js, Recharts, and Victory provide more advanced charting features and are easy to integrate into your React application. However, for a beginner-friendly tutorial, we’ve implemented the charting logic directly.

  2. How do I handle more complex survey data?

    For more complex data, you might need to preprocess the data before passing it to the charting components. This might involve grouping data, calculating percentages, or transforming the data into a format that the charting library expects.

  3. How can I deploy this application?

    You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide simple deployment processes for static websites. You’ll typically build your React application using npm run build and then upload the contents of the build directory to the deployment platform.

  4. How do I add a legend to the pie chart?

    You can add a legend by creating a separate component that iterates through the options and displays the labels and corresponding colors. Place this component next to the pie chart.

  5. How can I make the charts responsive?

    You can use CSS media queries to adjust the chart sizes and layouts based on the screen size. Consider using responsive units like percentages or viewport units for the chart dimensions.

Building a survey results display is a fantastic way to solidify your React skills and create a useful tool. This project provides a solid foundation for understanding data visualization in React. By experimenting with different chart types, adding interactivity, and integrating data from APIs, you can create a truly powerful and versatile application. Remember, the key to mastering React, like any other skill, is consistent practice and experimentation. Embrace the challenges, learn from your mistakes, and keep building! As you delve deeper into React, you’ll discover a vibrant ecosystem of libraries and tools that can further enhance your projects. The skills you’ve gained here will serve as a strong base for your future endeavors in web development, allowing you to create engaging and informative data visualizations for various applications. Keep exploring, keep building, and enjoy the journey!

More posts