Salary Distribution by Job Title

nSalary").value = document.getElementById("salaryRange").value; }); d3.select("#sortBy").on("change", updateChart); // Initial chart rendering updateChart(); }).catch(function(error) { console.log(error); }); + d.salary.toFixed(2), ); // Add x-axis svg .append('g') .attr('class', 'axis-x') .attr('transform', 'translate(0,' + height + ')') .call(d3.axisBottom(xScale)) .selectAll('text') .attr('transform', 'rotate(-45)') .attr('dx', '-.8em') .attr('dy', '.15em') .style('text-anchor', 'end'); // Add y-axis svg .append('g') .attr('class', 'axis-y') .call(d3.axisLeft(yScale)); // Axis labels svg .append('text') .attr( 'transform', 'translate(' + width / 2 + ' ,' + (height + margin.top + 150) + ')', ) .style('text-anchor', 'middle') .text('Job Title'); svg .append('text') .attr('transform', 'rotate(-90)') .attr('y', 0 - margin.left) .attr('x', 0 - height / 2) .attr('dy', '1em') .style('text-anchor', 'middle') .text('Average Salary (USD)'); // Function to update the chart based on user input function updateChart() { var minSalary = +document.getElementById('minSalary').value; var maxSalary = +document.getElementById('maxSalary').value; // Filter data based on salary range var filteredData = jobTitleSalaryArray.filter( (d) => d.salary >= minSalary && d.salary <= maxSalary, ); // Sort filtered data based on user selection var sortValue = document.getElementById('sortBy').value; filteredData.sort((a, b) => { if (sortValue === 'salary') { return b.salary - a.salary; } else { return a.jobTitle.localeCompare(b.jobTitle); } }); // Update x-scale domain xScale.domain(filteredData.map((d) => d.jobTitle)); // Update bars var bars = svg .selectAll('.bar') .data(filteredData, (d) => d.jobTitle); bars.exit().remove(); bars .enter() .append('rect') .attr('class', 'bar') .merge(bars) .attr('x', (d) => xScale(d.jobTitle)) .attr('y', (d) => yScale(d.salary)) .attr('width', xScale.bandwidth()) .attr('height', (d) => height - yScale(d.salary)) .select('title') .text( (d) => 'Job Title: ' + d.jobTitle + '\nAverage Salary: nSalary").value = document.getElementById("salaryRange").value; }); d3.select("#sortBy").on("change", updateChart); // Initial chart rendering updateChart(); }).catch(function(error) { console.log(error); }); + d.salary.toFixed(2), ); // Update x-axis svg .select('.axis-x') .call(d3.axisBottom(xScale)) .selectAll('text') .attr('transform', 'rotate(-45)') .attr('dx', '-.8em') .attr('dy', '.15em') .style('text-anchor', 'end'); } // Event listeners for input changes d3.selectAll('input').on('input', function () { updateChart(); // Update min salary input value when the range slider is adjusted document.getElementById('minSalary').value = document.getElementById('salaryRange').value; }); d3.select('#sortBy').on('change', updateChart); // Initial chart rendering updateChart(); }) .catch(function (error) { console.log(error); }); nSalary").value = document.getElementById("salaryRange").value; }); d3.select("#sortBy").on("change", updateChart); // Initial chart rendering updateChart(); }).catch(function(error) { console.log(error); });

Salary Distribution by Job Title

Filters

Interactive Bar Chart Analysis

George Oyosa