[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":-5,"_62":16,"_111":-5,"_112":113,"_114":115},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":72,"_89":72,"_44":90,"_91":-7,"_92":52,"_93":50,"_94":-5,"_95":96,"_97":16,"_98":99,"_100":101,"_102":43,"_103":-7,"_69":104,"_71":105,"_106":-5,"_107":68,"_108":109},"vizContent",{"_42":72,"_73":74,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":16,"_63":-7,"_64":41,"_65":66,"_67":68,"_69":70,"_71":70},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":47,"_48":49},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/AsheshPinisetti/1ce2f09f4ee94c138f3b45a6eaf67206","author","AsheshPinisetti","id","86a75dc8bdbe4965ba353a79d4bd44c8","title","Hello VizHub","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-asheshpinisetti","accountType","user","email","asheshpinisetti@my.unt.edu","displayName","avatar","https://avatars.githubusercontent.com/u/143632065?v=4","oauthProvider","github","oauthId","143632065","isAdmin","stripeCustomerId","handle","handleNormalized","asheshpinisetti","lifecycleEmailsEnabled",true,"createdAt",1791491416172,"updatedAt","1ce2f09f4ee94c138f3b45a6eaf67206","files",{"_75":76,"_77":78,"_79":80},"270fdb6c",{"_81":87,"_83":88},"8dbc301e",{"_81":85,"_83":86},"b809c858",{"_81":82,"_83":84},"name","styles.css","text","body {\n font-family: Arial, sans-serif;\n}\n\nh1 {\n text-align: center;\n}\n\n#chart-container {\n margin: 0 auto;\n width: 800px;\n height: 600px;\n}\n","index.html","\n\n \n \n \n Data Scientist Salary Comparison\n \n \n \n

Data Scientist Salary Comparison

\n\n \n \n \n\n","index.js","// Set up dimensions for the chart\nconst margin = {\n top: 20,\n right: 30,\n bottom: 40,\n left: 100,\n};\nconst width = 800 - margin.left - margin.right;\nconst height = 400 - margin.top - margin.bottom;\n\n// Append SVG to the chart container\nconst svg = d3\n .select('#chart-container')\n .append('svg')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom)\n .append('g')\n .attr(\n 'transform',\n `translate(${margin.left},${margin.top})`,\n );\n\n// Load data from CSV file\nd3.csv(\n 'https://gist.githubusercontent.com/AsheshPinisetti/ed9b0f37f188b480a6318223bde6978a/raw/3df499fa457dab7571db918e743bd328e68bfd11/salaries.csv',\n)\n .then((data) => {\n // Group data by experience level and employment type, calculate average salary\n const nestedData = d3.group(\n data,\n (d) => d.experience_level + '|' + d.employment_type,\n );\n const averages = Array.from(\n nestedData,\n ([key, values]) => ({\n key,\n averageSalary: d3.mean(\n values,\n (d) => +d.salary_in_usd,\n ),\n employmentType: key.split('|')[1],\n }),\n );\n\n // Sort data by employment type\n averages.sort((a, b) =>\n d3.ascending(a.employmentType, b.employmentType),\n );\n\n // Define color scale for employment types\n const color = d3\n .scaleOrdinal()\n .domain(data.map((d) => d.employment_type))\n .range(d3.schemeCategory10);\n\n // Define x scale\n const x = d3\n .scaleLinear()\n .domain([0, d3.max(averages, (d) => d.averageSalary)])\n .range([0, width]);\n\n // Define y scale\n const y = d3\n .scaleBand()\n .domain(averages.map((d) => d.key))\n .range([0, height])\n .padding(0.1);\n\n // Append bars to the SVG\n svg\n .selectAll('.bar')\n .data(averages)\n .enter()\n .append('rect')\n .attr('class', 'bar')\n .attr('x', 0)\n .attr('y', (d) => y(d.key))\n .attr('width', (d) => x(d.averageSalary))\n .attr('height', y.bandwidth())\n .attr('fill', (d) => color(d.employmentType));\n\n // Append y-axis\n svg\n .append('g')\n .attr('class', 'y-axis')\n .call(d3.axisLeft(y));\n\n // Append x-axis\n svg\n .append('g')\n .attr('class', 'x-axis')\n .attr('transform', `translate(0,${height})`)\n .call(d3.axisBottom(x));\n\n // Append legend\n const legend = svg\n .selectAll('.legend')\n .data(data.map((d) => d.employment_type))\n .enter()\n .append('g')\n .attr('class', 'legend')\n .attr(\n 'transform',\n (d, i) => `translate(0,${i * 20})`,\n );\n\n legend\n .append('rect')\n .attr('x', width + 10)\n .attr('width', 18)\n .attr('height', 18)\n .style('fill', color);\n\n legend\n .append('text')\n .attr('x', width + 35)\n .attr('y', 9)\n .attr('dy', '.35em')\n .style('text-anchor', 'start')\n .text((d) => d);\n })\n .catch((error) =>\n console.error('Error loading the data:', error),\n );\n","slug","Compare Avg sal by exp","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","374a0f026fe94572aaae5da06d110886","startCommitId","4b88f3940906490896d87c5a53159534","forkedFrom","forkedFromVisibility",1714093250000,1714191201000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]