import { select, group, mean } from 'd3'; import './styles.css'; import { viz } from './viz.js'; import { data } from '@Sreelikhith/jobs_in_datascience'; export const main = (container) => { const filtersButtonContainer = select(container) .append('div') .attr('class', 'filters-button-container'); const filtersButton = filtersButtonContainer .append('button') .text('Filters') .attr('class', 'btn btn-primary toggle-filters') .on('click', function() { filtersContainer.style('display', filtersContainer.style('display') === 'none' ? 'flex' : 'none'); }); const filtersContainer = select(container) .append('div') .attr('class', 'filters-container') .style('display', 'none') .style('flex-wrap', 'wrap') .style('justify-content', 'space-around'); const addFilter = (labelText, filterId, dataMapFunc, defaultOption) => { const selectMenu = filtersContainer .append('div') .attr('class', 'filter') .append('label') .attr('for', filterId) .text(labelText + ': ') .append('select') .attr('id', filterId) .attr('class', 'form-control dropdown') .on('change', function() { updateChart(); }); selectMenu .selectAll('option') .data([defaultOption, ...Array.from(new Set(data.map(dataMapFunc))).sort()]) .join('option') .text((d) => d); }; addFilter('Company Size', 'company-size-dropdown', (d) => d.company_size, 'All Sizes'); addFilter('Experience', 'experience-dropdown', (d) => d.experience_level, 'Any Experience'); addFilter('Job Category', 'category-dropdown', (d) => d.job_category, 'All Categories'); addFilter('Employment Type', 'employment-dropdown', (d) => d.employment_type, 'Any Type'); addFilter('Work Setting', 'work-setting-dropdown', (d) => d.work_setting, 'Any Setting'); addFilter('Employee Residence', 'employee-residence-dropdown', (d) => d.employee_residence, 'Any Residence'); const svgContainer = select(container).append('div') .attr('class', 'svg-container') .style('width', '100%') .style('height', '95%'); const svg = svgContainer .append('svg') .attr('width', '100%') .attr('height', '100%') .attr('viewBox', `0 0 ${container.clientWidth} ${container.clientHeight}`) .attr('preserveAspectRatio', 'xMidYMid meet'); const updateChart = () => { const selectedCategory = select('#category-dropdown').property('value'); const selectedLevel = select('#experience-dropdown').property('value'); const selectedEmploymentType = select('#employment-dropdown').property('value'); const selectedWorkSetting = select('#work-setting-dropdown').property('value'); const selectedResidence = select('#employee-residence-dropdown').property('value'); const selectedCompanySize = select('#company-size-dropdown').property('value'); let filteredData = data.filter(d => (selectedCategory === 'All Categories' || d.job_category === selectedCategory) && (selectedLevel === 'Any Experience' || d.experience_level === selectedLevel) && (selectedEmploymentType === 'Any Type' || d.employment_type === selectedEmploymentType) && (selectedWorkSetting === 'Any Setting' || d.work_setting === selectedWorkSetting) && (selectedResidence === 'Any Residence' || d.employee_residence === selectedResidence) && (selectedCompanySize === 'All Sizes' || d.company_size === selectedCompanySize)); let groupedData = group(filteredData, d => d.job_title); let avgSalaryData = Array.from(groupedData, ([key, value]) => ({ key: key, avgSalary: mean(value, v => v.salary_in_usd), })).sort((a, b) => b.avgSalary - a.avgSalary); viz(svg, { data: avgSalaryData, xValue: d => d.key, yValue: d => d.avgSalary, xAxisLabelText: 'Job Titles', yAxisLabelText: 'Average Salary in USD', marginLeft: 100, marginTop: 20, marginRight: 20, marginBottom: 160, width: parseInt(svg.style('width')), height: parseInt(svg.style('height')), innerRectFill: '#f8f9fa', }); }; window.addEventListener('resize', () => { svg.attr('viewBox', `0 0 ${container.clientWidth} ${container.clientHeight}`); updateChart(); }); updateChart(); }; main(document.body);