137 | {this.yearsFragment ? this.yearsFragment : "Since 2012"} the {this.UStateFragment} tech industry {this.yearsFragment ? "sponsored" : "has sponsored"} {format(this.props.data.length)} {this.jobTitleFragment}{this.previousYearFragment}. Most of them paid ${format(mean-deviation)} to ${format(mean+deviation)} per year. {this.countyFragment} 138 |
139 | ); 140 | } 141 | } 142 | 143 | export default Description; 144 | -------------------------------------------------------------------------------- /src/components/Meta/GraphDescription.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | 4 | class GraphDescription extends Component { 5 | get jobTitleFragment() { 6 | const { jobTitle } = this.props.filteredBy; 7 | let title; 8 | 9 | if (jobTitle === '*') { 10 | title = 'in tech'; 11 | }else{ 12 | if (jobTitle === "other") { 13 | title = "in tech"; 14 | }else{ 15 | title = `a Software ${jobTitle}`; 16 | } 17 | } 18 | 19 | return title; 20 | } 21 | 22 | render() { 23 | return ( 24 |
25 |
34 | )
35 | }
36 | }
37 |
38 | export default GraphDescription;
39 |
--------------------------------------------------------------------------------
/src/components/Meta/Title.js:
--------------------------------------------------------------------------------
1 |
2 | import React, { Component } from 'react';
3 | import { scaleLinear } from 'd3-scale';
4 | import { mean as d3mean, extent as d3extent } from 'd3-array';
5 |
6 | import USStatesMap from './USStatesMap';
7 |
8 | class Title extends Component {
9 | get yearsFragment() {
10 | const year = this.props.filteredBy.year;
11 |
12 | return year === '*' ? "" : `in ${year}`;
13 | }
14 |
15 | get USstateFragment() {
16 | const USstate = this.props.filteredBy.USstate;
17 |
18 | return USstate === '*' ? "" : USStatesMap[USstate.toUpperCase()];
19 | }
20 |
21 | get jobTitleFragment() {
22 | const { jobTitle, year } = this.props.filteredBy;
23 | let title = "";
24 |
25 | if (jobTitle === '*') {
26 | if (year === '*') {
27 | title = "The average H1B in tech pays";
28 | }else{
29 | title = "The average tech H1B paid";
30 | }
31 | }else{
32 | if (jobTitle === '*') {
33 | title = "H1Bs in tech pay";
34 | }else{
35 | title = `Software ${jobTitle}s on an H1B`;
36 |
37 | if (year === '*') {
38 | title += " make";
39 | }else{
40 | title += " made";
41 | }
42 | }
43 | }
44 |
45 | return title;
46 | }
47 |
48 | get format() {
49 | return scaleLinear()
50 | .domain(d3extent(this.props.data, d => d.base_salary))
51 | .tickFormat();
52 | }
53 |
54 | render() {
55 | const mean = this.format(d3mean(this.props.data, d => d.base_salary));
56 |
57 | let title;
58 |
59 | if (this.yearsFragment && this.USstateFragment) {
60 | title = (
61 |
26 |
and individual tech salary. Gray means lack of tech salary data. 28 |
29 | Best places to be {this.jobTitleFragment}
27 | Darker color means bigger difference between median household salaryand individual tech salary. Gray means lack of tech salary data. 28 |
30 |
33 | Salary distribution
31 | Histogram shows tech salary distribution compared to median household income, which is a good proxy for cost of living. 32 |62 | In {this.USstateFragment}, {this.jobTitleFragment} ${mean}/year {this.yearsFragment} 63 |
64 | ); 65 | }else{ 66 | title = ( 67 |68 | {this.jobTitleFragment} ${mean}/year {this.USstateFragment ? `in ${this.stateFragment}` : ''} {this.yearsFragment} 69 |
70 | ); 71 | } 72 | 73 | return title; 74 | } 75 | } 76 | 77 | export default Title; 78 | -------------------------------------------------------------------------------- /src/components/Meta/USStatesMap.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | "AL": "Alabama", 4 | "AK": "Alaska", 5 | "AS": "American Samoa", 6 | "AZ": "Arizona", 7 | "AR": "Arkansas", 8 | "CA": "California", 9 | "CO": "Colorado", 10 | "CT": "Connecticut", 11 | "DE": "Delaware", 12 | "DC": "District Of Columbia", 13 | "FM": "Federated States Of Micronesia", 14 | "FL": "Florida", 15 | "GA": "Georgia", 16 | "GU": "Guam", 17 | "HI": "Hawaii", 18 | "ID": "Idaho", 19 | "IL": "Illinois", 20 | "IN": "Indiana", 21 | "IA": "Iowa", 22 | "KS": "Kansas", 23 | "KY": "Kentucky", 24 | "LA": "Louisiana", 25 | "ME": "Maine", 26 | "MH": "Marshall Islands", 27 | "MD": "Maryland", 28 | "MA": "Massachusetts", 29 | "MI": "Michigan", 30 | "MN": "Minnesota", 31 | "MS": "Mississippi", 32 | "MO": "Missouri", 33 | "MT": "Montana", 34 | "NE": "Nebraska", 35 | "NV": "Nevada", 36 | "NH": "New Hampshire", 37 | "NJ": "New Jersey", 38 | "NM": "New Mexico", 39 | "NY": "New York", 40 | "NC": "North Carolina", 41 | "ND": "North Dakota", 42 | "MP": "Northern Mariana Islands", 43 | "OH": "Ohio", 44 | "OK": "Oklahoma", 45 | "OR": "Oregon", 46 | "PW": "Palau", 47 | "PA": "Pennsylvania", 48 | "PR": "Puerto Rico", 49 | "RI": "Rhode Island", 50 | "SC": "South Carolina", 51 | "SD": "South Dakota", 52 | "TN": "Tennessee", 53 | "TX": "Texas", 54 | "UT": "Utah", 55 | "VT": "Vermont", 56 | "VI": "Virgin Islands", 57 | "VA": "Virginia", 58 | "WA": "Washington", 59 | "WV": "West Virginia", 60 | "WI": "Wisconsin", 61 | "WY": "Wyoming" 62 | }; 63 | -------------------------------------------------------------------------------- /src/components/Meta/index.js: -------------------------------------------------------------------------------- 1 | 2 | export { default as Title } from './Title'; 3 | export { default as Description } from './Description'; 4 | export { default as GraphDescription } from './GraphDescription'; 5 | -------------------------------------------------------------------------------- /src/components/Preloader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import PreloaderImg from '../assets/preloading.png'; 4 | 5 | const Preloader = () => ( 6 |
7 | 
10 |
12 | );
13 |
14 | export default Preloader;
15 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import 'bootstrap/dist/css/bootstrap.css';
5 | import 'bootstrap/dist/css/bootstrap-theme.css';
6 |
7 | ReactDOM.render(
8 | The average H1B in tech pays $86,164/year
8 |Since 2012 the US tech industry has sponsored 176,075 H1B work visas. Most of them paid $60,660 to $111,668 per year (1 standard deviation). The best city for an H1B is Kirkland, WA with an average individual salary $39,465 above local household median. Median household salary is a good proxy for cost of living in an area.
9 |