Interactive Salary Visualization

Using D3.js or Chart.js to display interactive salary data, highlighting industry trends and potential areas for salary growth.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Salary Visualization</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .chart-container {
            width: 600px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <canvas id="salaryChart"></canvas>
    </div>
    <script src="salary-data.js"></script>
    <script src="salary-chart.js"></script>
</body>
</html>

HTML structure that includes Chart.js library and specifies a container for the chart with a canvas element. The `salary-data.js` will contain the salary data and the `salary-chart.js` will contain the JavaScript needed to create the chart.

/* Example Salary Data */
const salaryData = {
    labels: ['Tech', 'Health', 'Finance', 'Education', 'Manufacturing'],
    datasets: [{
        label: 'Average Salary',
        data: [85000, 75000, 90000, 50000, 65000],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)'
        ],
        borderWidth: 1
    }]
};

This is 'salary-data.js' containing an example salary dataset with industry labels and corresponding average salary values. The datasets also include styling for the bar colors.

// Salary Chart using Chart.js
const ctx = document.getElementById('salaryChart').getContext('2d');
const salaryChart = new Chart(ctx, {
    type: 'bar',
    data: salaryData,
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const label = context.dataset.label || '';
                        if (label) {
                            label += ': ';
                        }
                        if (context.parsed.y !== null) {
                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                        }
                        return label;
                    }
                }
            }
        }
    }
});

This is 'salary-chart.js' where the Chart.js library is used to create an interactive bar chart. The 'ctx' gets the drawing context of the canvas. The Chart constructor is called with the context and configuration for the chart, including the salary data and options for scales and tooltips. The tooltips are formatted to display the currency in a readable format.