[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_111":-5,"_63":16,"_112":-5,"_113":114,"_115":116},"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":73,"_90":73,"_44":91,"_92":-7,"_93":52,"_94":50,"_95":-5,"_96":97,"_98":16,"_99":100,"_101":102,"_103":43,"_104":-7,"_70":105,"_72":106,"_107":-5,"_108":69,"_109":110},"vizContent",{"_42":73,"_74":75,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":16,"_64":-7,"_65":41,"_66":67,"_68":69,"_70":71,"_72":71},"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/Abhiram6588/dfb0fe43e3ee44bf8562b5766cd5d9be","author","Abhiram6588","id","af4eae2518314efa99b9510ae9ed080e","title","React & D3 Starter","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-abhiram6588","accountType","user","email","abhiramjanagama123@gmail.com","displayName","Abhiram-Janagama","avatar","https://avatars.githubusercontent.com/u/184453618?v=4","oauthProvider","github","oauthId","184453618","isAdmin","stripeCustomerId","handle","handleNormalized","abhiram6588","lifecycleEmailsEnabled",true,"createdAt",1791690341593,"updatedAt","dfb0fe43e3ee44bf8562b5766cd5d9be","files",{"_76":77,"_78":79,"_80":81},"74362067",{"_82":88,"_84":89},"81587526",{"_82":86,"_84":87},"8dbc301e",{"_82":83,"_84":85},"name","index.html","text","\n\n \n \n International Talent Dashboard\n \n \n\n \n

International Talent in the U.S.

\n F-1 enrollment trends & H-1B sponsorship dynamics ·\n 2011–2017\n

\n\n

\n \n Overview\n \n \n \n \n

\n\n

\n\n Year:\n \n\n

\n\n

\n \n\n

\n \n

\n\n

\n\n \n \n\n","script.js","import Chart from 'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/auto/+esm';\nimport * as d3 from 'https://cdn.jsdelivr.net/npm/d3@7/+esm';\nimport * as topojson from 'https://cdn.jsdelivr.net/npm/topojson-client@3/+esm';\n\nChart.defaults.animation = false;\nChart.defaults.responsive = true;\nChart.defaults.maintainAspectRatio = false;\nChart.defaults.devicePixelRatio = 1;\n\nconst YEARLY_URL =\n 'https://raw.githubusercontent.com/Abhiram6588/h1b-dashboard-data/refs/heads/main/h1b_yearly_summary.csv';\n\nconst STATE_URL =\n 'https://raw.githubusercontent.com/Abhiram6588/h1b-dashboard-data/refs/heads/main/h1b_state_summary.csv';\n\nlet yearly = [];\nlet top10 = [];\nlet stateData2017 = {};\nlet charts = {};\nlet years = [];\n\nconst stateAbbr = {\n Alabama: 'AL',\n Alaska: 'AK',\n Arizona: 'AZ',\n Arkansas: 'AR',\n California: 'CA',\n Colorado: 'CO',\n Connecticut: 'CT',\n Delaware: 'DE',\n Florida: 'FL',\n Georgia: 'GA',\n Hawaii: 'HI',\n Idaho: 'ID',\n Illinois: 'IL',\n Indiana: 'IN',\n Iowa: 'IA',\n Kansas: 'KS',\n Kentucky: 'KY',\n Louisiana: 'LA',\n Maine: 'ME',\n Maryland: 'MD',\n Massachusetts: 'MA',\n Michigan: 'MI',\n Minnesota: 'MN',\n Mississippi: 'MS',\n Missouri: 'MO',\n Montana: 'MT',\n Nebraska: 'NE',\n Nevada: 'NV',\n 'New Hampshire': 'NH',\n 'New Jersey': 'NJ',\n 'New Mexico': 'NM',\n 'New York': 'NY',\n 'North Carolina': 'NC',\n 'North Dakota': 'ND',\n Ohio: 'OH',\n Oklahoma: 'OK',\n Oregon: 'OR',\n Pennsylvania: 'PA',\n 'Rhode Island': 'RI',\n 'South Carolina': 'SC',\n 'South Dakota': 'SD',\n Tennessee: 'TN',\n Texas: 'TX',\n Utah: 'UT',\n Vermont: 'VT',\n Virginia: 'VA',\n Washington: 'WA',\n 'West Virginia': 'WV',\n Wisconsin: 'WI',\n Wyoming: 'WY',\n};\n\nconst stateNames = {\n '01': 'Alabama',\n '02': 'Alaska',\n '04': 'Arizona',\n '05': 'Arkansas',\n '06': 'California',\n '08': 'Colorado',\n '09': 'Connecticut',\n 10: 'Delaware',\n 11: 'District of Columbia',\n 12: 'Florida',\n 13: 'Georgia',\n 15: 'Hawaii',\n 16: 'Idaho',\n 17: 'Illinois',\n 18: 'Indiana',\n 19: 'Iowa',\n 20: 'Kansas',\n 21: 'Kentucky',\n 22: 'Louisiana',\n 23: 'Maine',\n 24: 'Maryland',\n 25: 'Massachusetts',\n 26: 'Michigan',\n 27: 'Minnesota',\n 28: 'Mississippi',\n 29: 'Missouri',\n 30: 'Montana',\n 31: 'Nebraska',\n 32: 'Nevada',\n 33: 'New Hampshire',\n 34: 'New Jersey',\n 35: 'New Mexico',\n 36: 'New York',\n 37: 'North Carolina',\n 38: 'North Dakota',\n 39: 'Ohio',\n 40: 'Oklahoma',\n 41: 'Oregon',\n 42: 'Pennsylvania',\n 44: 'Rhode Island',\n 45: 'South Carolina',\n 46: 'South Dakota',\n 47: 'Tennessee',\n 48: 'Texas',\n 49: 'Utah',\n 50: 'Vermont',\n 51: 'Virginia',\n 53: 'Washington',\n 54: 'West Virginia',\n 55: 'Wisconsin',\n 56: 'Wyoming',\n};\n\nfunction fmt(n) {\n if (n === null || n === undefined || isNaN(n)) return '0';\n if (n >= 1000000) return (n / 1000000).toFixed(2) + 'M';\n if (n >= 1000) return (n / 1000).toFixed(0) + 'K';\n return n;\n}\n\nfunction chartOptions(extra = {}) {\n return {\n responsive: true,\n maintainAspectRatio: false,\n animation: false,\n resizeDelay: 200,\n devicePixelRatio: 1,\n plugins: {\n legend: {\n display: false,\n },\n },\n ...extra,\n };\n}\n\nasync function loadDataFromGitHub() {\n yearly = await d3.csv(YEARLY_URL, (d) => ({\n year: +d.year,\n total: +d.h1b_total_petitions,\n certified: +d.h1b_certified,\n denied: +d.h1b_denied,\n wage: +d.h1b_avg_wage,\n f1_enrolled: +d.f1_enrolled_intl,\n f1_opt: +d.f1_opt_students,\n f1_total: +d.f1_total_intl,\n rate: +d.h1b_approval_rate,\n }));\n\n yearly = yearly.sort((a, b) => a.year - b.year);\n years = yearly.map((d) => d.year);\n\n const stateRows = await d3.csv(STATE_URL, (d) => ({\n year: +d.year,\n state: d.work_state,\n total: +d.h1b_total,\n certified: +d.h1b_certified,\n denied: +d.h1b_denied,\n wage: +d.h1b_avg_wage,\n rate: +d.approval_rate,\n }));\n\n stateData2017 = {};\n\n stateRows\n .filter((d) => d.year === 2017)\n .forEach((d) => {\n stateData2017[d.state] = {\n total: d.total,\n certified: d.certified,\n denied: d.denied,\n wage: d.wage,\n rate: d.rate,\n };\n });\n\n top10 = stateRows\n .filter((d) => d.year === 2017)\n .sort((a, b) => b.total - a.total)\n .slice(0, 10);\n}\n\nfunction showTab(tab) {\n document\n .querySelectorAll('.tab')\n .forEach((t) => t.classList.remove('active'));\n document\n .querySelectorAll('.panel')\n .forEach((p) => p.classList.remove('active'));\n\n document\n .querySelector(`[onclick=\"showTab('${tab}')\"]`)\n .classList.add('active');\n document.getElementById(tab).classList.add('active');\n\n if (tab === 'map' && !window.mapLoaded) {\n loadMap();\n }\n}\n\nfunction buildYearFilter() {\n const sel = document.getElementById('yearFilter');\n sel.innerHTML = '';\n\n years.forEach((y) => {\n const option = document.createElement('option');\n option.value = y;\n option.textContent = y;\n sel.appendChild(option);\n });\n\n sel.value = 2017;\n}\n\nfunction updateOverview() {\n const yr = parseInt(\n document.getElementById('yearFilter').value,\n );\n const d = yearly.find((x) => x.year === yr);\n\n if (!d) return;\n\n document.getElementById('overviewMetrics').innerHTML = `\n

Total petitions

${fmt(d.total)}

${yr}

\n\n

Certified

${fmt(d.certified)}

${d.rate}% approval

\n\n

Denied

${fmt(d.denied)}

\n\n

Avg wage

$${fmt(d.wage)}

\n\n

F-1 total

${fmt(d.f1_total)}

\n `;\n}\n\nfunction initOverviewChart() {\n if (charts.overview) charts.overview.destroy();\n\n charts.overview = new Chart(\n document.getElementById('overviewChart'),\n {\n type: 'bar',\n data: {\n labels: years,\n datasets: [\n {\n label: 'Certified',\n data: yearly.map((d) => d.certified),\n backgroundColor: '#378ADD',\n stack: 'a',\n },\n {\n label: 'Denied',\n data: yearly.map((d) => d.denied),\n backgroundColor: '#E24B4A',\n stack: 'a',\n },\n ],\n },\n options: chartOptions({\n scales: {\n x: {\n stacked: true,\n grid: { display: false },\n },\n y: {\n stacked: true,\n ticks: {\n callback: (value) => fmt(value),\n },\n },\n },\n }),\n },\n );\n\n if (charts.f1) charts.f1.destroy();\n\n charts.f1 = new Chart(\n document.getElementById('f1Chart'),\n {\n type: 'line',\n data: {\n labels: years,\n datasets: [\n {\n label: 'F-1 Enrolled',\n data: yearly.map((d) => d.f1_enrolled),\n borderColor: '#1D9E75',\n backgroundColor: 'rgba(29,158,117,0.08)',\n tension: 0.3,\n fill: true,\n pointRadius: 3,\n },\n {\n label: 'OPT Students',\n data: yearly.map((d) => d.f1_opt),\n borderColor: '#BA7517',\n backgroundColor: 'rgba(186,117,23,0.08)',\n borderDash: [4, 3],\n tension: 0.3,\n fill: true,\n pointRadius: 3,\n },\n ],\n },\n options: chartOptions({\n scales: {\n y: {\n ticks: {\n callback: (value) => fmt(value),\n },\n },\n },\n }),\n },\n );\n}\n\nfunction initTrendsCharts() {\n const first = yearly[0];\n const last = yearly[yearly.length - 1];\n\n document.getElementById('trendsMetrics').innerHTML = `\n

Approval rate 2011

${first.rate}%

\n\n

Approval rate 2017

${last.rate}%

+${(last.rate - first.rate).toFixed(2)}pp

\n\n

Wage 2011

$${fmt(first.wage)}

\n\n

Wage 2017

$${fmt(last.wage)}

\n `;\n\n if (charts.trends) charts.trends.destroy();\n\n charts.trends = new Chart(\n document.getElementById('trendsChart'),\n {\n type: 'line',\n data: {\n labels: years,\n datasets: [\n {\n label: 'Approval rate (%)',\n data: yearly.map((d) => d.rate),\n borderColor: '#378ADD',\n tension: 0.3,\n yAxisID: 'y',\n pointRadius: 3,\n },\n {\n label: 'Avg wage ($K)',\n data: yearly.map((d) =>\n Math.round(d.wage / 1000),\n ),\n borderColor: '#BA7517',\n borderDash: [5, 3],\n tension: 0.3,\n yAxisID: 'y2',\n pointRadius: 3,\n },\n ],\n },\n options: chartOptions({\n scales: {\n y: {\n min: 85,\n ticks: {\n callback: (value) => value + '%',\n },\n },\n y2: {\n position: 'right',\n grid: {\n display: false,\n },\n ticks: {\n callback: (value) => '$' + value + 'K',\n },\n },\n },\n }),\n },\n );\n\n const growth = yearly.map((d, i) => {\n if (i === 0) return { f1: null, h1b: null };\n\n const prev = yearly[i - 1];\n\n return {\n f1: +(\n ((d.f1_total - prev.f1_total) / prev.f1_total) *\n 100\n ).toFixed(1),\n h1b: +(\n ((d.certified - prev.certified) / prev.certified) *\n 100\n ).toFixed(1),\n };\n });\n\n if (charts.growth) charts.growth.destroy();\n\n charts.growth = new Chart(\n document.getElementById('growthChart'),\n {\n type: 'line',\n data: {\n labels: years.slice(1),\n datasets: [\n {\n label: 'F-1 % change',\n data: growth.slice(1).map((d) => d.f1),\n borderColor: '#1D9E75',\n tension: 0.3,\n pointRadius: 3,\n },\n {\n label: 'H-1B certified % change',\n data: growth.slice(1).map((d) => d.h1b),\n borderColor: '#7F77DD',\n borderDash: [5, 3],\n tension: 0.3,\n pointRadius: 3,\n },\n ],\n },\n options: chartOptions({\n scales: {\n y: {\n ticks: {\n callback: (value) => value + '%',\n },\n },\n },\n }),\n },\n );\n}\n\nfunction initTopStates() {\n if (charts.states) charts.states.destroy();\n\n charts.states = new Chart(\n document.getElementById('statesChart'),\n {\n type: 'bar',\n data: {\n labels: top10.map((d) => d.state),\n datasets: [\n {\n label: 'Certified',\n data: top10.map((d) => d.certified),\n backgroundColor: '#378ADD',\n },\n {\n label: 'Denied',\n data: top10.map((d) => d.denied),\n backgroundColor: '#E24B4A',\n },\n ],\n },\n options: chartOptions({\n indexAxis: 'y',\n scales: {\n x: {\n stacked: true,\n ticks: {\n callback: (value) => fmt(value),\n },\n },\n y: {\n stacked: true,\n },\n },\n }),\n },\n );\n\n if (charts.wage) charts.wage.destroy();\n\n charts.wage = new Chart(\n document.getElementById('wageChart'),\n {\n type: 'bar',\n data: {\n labels: top10.map((d) => d.state),\n datasets: [\n {\n label: 'Average wage',\n data: top10.map((d) => d.wage),\n backgroundColor: '#378ADD',\n },\n ],\n },\n options: chartOptions({\n scales: {\n y: {\n ticks: {\n callback: (value) => '$' + fmt(value),\n },\n },\n },\n }),\n },\n );\n}\n\nwindow.mapLoaded = false;\n\nfunction loadMap() {\n window.mapLoaded = true;\n\n d3.json(\n 'https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json',\n ).then((us) => {\n window.usTopoData = us;\n renderMap();\n });\n}\n\nfunction renderMap() {\n if (!window.usTopoData) return;\n\n const metric = document.getElementById('mapMetric').value;\n const svg = d3.select('#mapSvg');\n\n svg.selectAll('*').remove();\n\n const vals = Object.values(stateData2017)\n .map((d) => d[metric])\n .filter((v) => !isNaN(v));\n\n const colorScheme =\n metric === 'rate'\n ? d3.schemeGreens[6]\n : metric === 'wage'\n ? d3.schemeOranges[6]\n : d3.schemeBlues[6];\n\n const color = d3.scaleQuantize(\n [Math.min(...vals), Math.max(...vals)],\n colorScheme,\n );\n\n const projection = d3\n .geoAlbersUsa()\n .scale(1100)\n .translate([480, 300]);\n const path = d3.geoPath(projection);\n\n const tip = document.getElementById('mapTip');\n const container = document.querySelector(\n '.map-container',\n );\n\n svg\n .selectAll('path')\n .data(\n topojson.feature(\n window.usTopoData,\n window.usTopoData.objects.states,\n ).features,\n )\n .join('path')\n .attr('d', path)\n .attr('stroke', '#ffffff')\n .attr('fill', (d) => {\n const id = String(d.id).padStart(2, '0');\n const name = stateNames[id];\n const abbr = stateAbbr[name];\n const info = stateData2017[abbr];\n\n return info ? color(info[metric]) : '#ddd';\n })\n .on('mousemove', function (event, d) {\n const id = String(d.id).padStart(2, '0');\n const name = stateNames[id];\n const abbr = stateAbbr[name];\n const info = stateData2017[abbr];\n\n if (!info) {\n tip.style.display = 'none';\n return;\n }\n\n const rect = container.getBoundingClientRect();\n\n tip.style.display = 'block';\n tip.style.left =\n Math.min(\n event.clientX - rect.left + 10,\n rect.width - 190,\n ) + 'px';\n tip.style.top =\n Math.max(event.clientY - rect.top - 10, 0) + 'px';\n\n tip.innerHTML = `\n ${name}\n Petitions: ${info.total.toLocaleString()}
\n Certified: ${info.certified.toLocaleString()}
\n Denied: ${info.denied.toLocaleString()}
\n Approval rate: ${info.rate}%
\n Avg wage: $${info.wage.toLocaleString()}\n `;\n })\n .on('mouseleave', () => {\n tip.style.display = 'none';\n });\n\n document.getElementById('mapLegendBar').innerHTML =\n colorScheme\n .map(\n (c) =>\n ``,\n )\n .join('');\n\n document.getElementById('mapLegendLabel').textContent =\n metric === 'total'\n ? 'Petition volume'\n : metric === 'rate'\n ? 'Approval rate'\n : 'Average wage';\n}\n\nwindow.showTab = showTab;\nwindow.updateOverview = updateOverview;\nwindow.renderMap = renderMap;\n\nloadDataFromGitHub().then(() => {\n buildYearFilter();\n updateOverview();\n initOverviewChart();\n initTrendsCharts();\n initTopStates();\n});\n","style.css","* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml,\nbody {\n width: 100%;\n min-height: 100%;\n}\n\nbody {\n font-family: Arial, sans-serif;\n background: #ffffff;\n color: #111111;\n padding: 20px;\n overflow-x: hidden;\n}\n\n.dash {\n width: 100%;\n max-width: 1150px;\n margin: 0 auto;\n}\n\n.dash-title {\n font-size: 20px;\n font-weight: 700;\n}\n\n.dash-sub {\n font-size: 13px;\n color: #666;\n margin-bottom: 18px;\n}\n\n.tabs {\n display: flex;\n gap: 8px;\n margin-bottom: 24px;\n flex-wrap: wrap;\n}\n\n.tab {\n padding: 8px 16px;\n border: 1px solid #ccc;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n font-size: 13px;\n}\n\n.tab.active {\n background: #000;\n color: white;\n}\n\n.panel {\n display: none;\n}\n\n.panel.active {\n display: block;\n}\n\n.metrics {\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(150px, 1fr)\n );\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.metric {\n background: #f4f4f4;\n padding: 14px;\n border-radius: 8px;\n}\n\n.metric-label {\n font-size: 11px;\n color: #666;\n text-transform: uppercase;\n margin-bottom: 4px;\n}\n\n.metric-val {\n font-size: 22px;\n font-weight: 700;\n}\n\n.metric-sub {\n font-size: 11px;\n color: #666;\n}\n\n.filter-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.filter-label {\n font-size: 12px;\n color: #555;\n}\n\nselect {\n padding: 5px 10px;\n border: 1px solid #ccc;\n border-radius: 6px;\n}\n\n.legend {\n display: flex;\n gap: 14px;\n margin-bottom: 10px;\n font-size: 12px;\n color: #555;\n flex-wrap: wrap;\n}\n\n.legend span {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.legend-dot {\n width: 10px;\n height: 10px;\n border-radius: 2px;\n}\n\n.circle {\n border-radius: 50%;\n}\n\n.blue {\n background: #378add;\n}\n\n.red {\n background: #e24b4a;\n}\n\n.green {\n background: #1d9e75;\n}\n\n.orange {\n background: #ba7517;\n}\n\n.purple {\n background: #7f77dd;\n}\n\n.chart-wrap {\n position: relative;\n width: 100%;\n max-width: 100%;\n margin-bottom: 22px;\n}\n\n.chart-small {\n height: 260px;\n}\n\n.chart-medium {\n height: 320px;\n}\n\n.chart-large {\n height: 460px;\n}\n\ncanvas {\n max-width: 100% !important;\n max-height: 100% !important;\n}\n\n.section-gap {\n margin-top: 28px;\n}\n\n.chart-label {\n font-size: 13px;\n color: #555;\n margin-bottom: 10px;\n}\n\n.map-container {\n position: relative;\n width: 100%;\n max-width: 960px;\n margin: 0 auto;\n}\n\n#mapSvg {\n width: 100%;\n height: auto;\n display: block;\n max-height: 620px;\n}\n\n#mapSvg path {\n cursor: pointer;\n stroke-width: 0.5;\n}\n\n#mapSvg path:hover {\n opacity: 0.75;\n}\n\n.map-tooltip {\n position: absolute;\n display: none;\n background: white;\n border: 1px solid #ccc;\n border-radius: 6px;\n padding: 8px 12px;\n font-size: 12px;\n pointer-events: none;\n z-index: 10;\n min-width: 170px;\n}\n\n.map-tooltip strong {\n display: block;\n margin-bottom: 4px;\n}\n\n.map-legend {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 11px;\n color: #666;\n margin-top: 8px;\n max-width: 960px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.map-legend-bar {\n display: flex;\n height: 8px;\n border-radius: 2px;\n overflow: hidden;\n flex: 1;\n max-width: 220px;\n}\n\n#mapLegendLabel {\n font-weight: 600;\n}\n\n@media (max-width: 700px) {\n body {\n padding: 12px;\n }\n\n .chart-small {\n height: 230px;\n }\n\n .chart-medium {\n height: 270px;\n }\n\n .chart-large {\n height: 380px;\n }\n\n .metric-val {\n font-size: 18px;\n }\n}\n","slug","Fork of React & D3 Starter","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","77f77303f8984306a00856875fa76c15","startCommitId","727a3babe9624f8db83752aed739cd96","forkedFrom","forkedFromVisibility",1777264808000,1777266464000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]