US Immigrants and Impact on Economy

                                    Impact of US Immigrants on US Economy

People migrate to US in hunt of opportunities given that the US economy is prosperous and provides ample of opportunities for everyone to grow. The number of immigrants have been increasing over years. They gain from US economy, however, more interesting is to see the contribution of these immigrants to the US economy. Subjective to data availability, I chose Mean Salary of US as a measure to evaluate the impact. Also, a split of the number of immigrants and mean US salary is taken over age groups with an intention to pick the groups which contribute more to the economy. Tracking the movement over time is the key to the problem. This analysis will be used to provide evidence for a potential relationship between number of immigrants and economy across age groups. My hypothesis is that the mean salary and number of immigrants will have a relationship with the magnitude of the effect increasing over time. Also, I hypothesize that the age groups 25-45 will have the maximum increase in number and mean salary over time. It is just the first step to arrive to my objective. It is necessary to isolate the impact of immigrants on mean salary and conduct causal analysis to arrive at a conclusion. Also other measure such as contribution to GDP can be considered. I hope that the results of the full fledged analysis are positive and then they can serve as a factual ground for the US citizens to nurture a welcoming attitude towards immigrants.

The visualization is a hybrid author-reader approach which shows movement of number of immigrants of different age groups and corresponding mean salary over time. The movement can be seen in by choosing Play option on the slider. The user can choose to see the statistics for a particular year as well.

Data Source -

Immigrants Data: http://www.un.org/en/development/desa/population/migration/data/estimates2/estimates15.shtml

Salary Info: http://www.census.gov/hhes/www/income/data/historical/household/index.html

Visualization Link: /sbhargava24/cae9d0da96ab786ea14e24b2a08f1b40

<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title> US Immigrants and Salary Relation </title>
</head>
<style>
	html {
		min-height: 1000px;
	}

input[type='range'] {
		-webkit-appearance: none !important;
		-webkit-border-radius: 5px;
		/*-webkit-box-shadow: inset 0 0 5px #333;*/
		background-color: rgb(53, 135, 212);
		height: 10px;
		width: 200px;
		margin: 20px;
		/*position: relative;
		 left: 10%;*/

}

input[type='range']::-webkit-slider-thumb {
		-webkit-appearance: none !important;
		-webkit-border-radius: 15px;
		background-color: #bbb;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#888));
		border: 1px solid #000;
		height: 25px;
		width: 25px;
	}

body {
		font: 10px sans-serif;
    
	}
  h2.title {
    color: black;
    text-align: center;
  }
	.axis path, .axis line {
		fill: none;
		stroke: #000;
		shape-rendering: crispEdges;
	}

.dot {
		stroke: #000;
		stroke-width: 1;
	}

.dot:hover {
		stroke: #bbb;
	}

#range {
		font: 15px sans-serif;
	}

input[type=range] {
	}

div.tooltip {
		position: absolute;
		text-align: left;
		padding: 2px;
		font: 12px sans-serif;
		background: #EDEDED;
		border: 0px;
		border-radius: 8px;
		pointer-events: none;
	}

table {
		border-collapse: collapse;
		width: 400px;
		margin-left: 0px;
	}

td {
		text-align: left;
		border-bottom: 2px solid #bbb;
	}

th {
		padding-top: 10px;
		text-align: left;
		/*padding-left: 20px;*/
	}

h3 {
		text-align: center;
		margin-bottom: 0px;
		font-size: 12pt;
	}
	h4	{
		text-align: center;
	}

.chart {
		width: 100%;
		height: 500px;
	}

@media only screen and (min-width: 481px) {
		.chart {
			width: 100%;
			height: 500px;
		}
		table{
			width:500px;
			margin-left: 10%;
		}
		h3, h4{
			margin-left: 20%;
		}
		h3{
			font-size: 16pt;
		}
		
	}
	@media only screen and (min-width: 769px) {
		.chart {
			width: 100%;
			height: 600px;
		}
		
		table{
			width:700px;
			left: -20px;
			margin-left: 15%;
		}
		h3, h4{
			margin-left: 20%;
		}
		h3{
			font-size: 16pt;
		}
		
	}

button {
		width: 4em;
		height: 2em;
		background: rgb(53, 135, 212);
		border: 1px solid rgb(53, 135, 212);
		border-radius: 4px;
		color: white;
		font-size: 1.5em;
	}

h4 {
		text-align: center;
		margin-bottom: .5em;
		margin-top: .5em;
	}

.label {
		font-size: 1.2em;
	}

#schoolinfo {
		position: absolute;
	}

</style>
<body>
	<input id="slider" type="range" min="1990" max="2015" value="1990" step="1" />
	
	<span id="range">1990</span>

<button name="play" id="play">Play</button>
	
	<div id="chart"></div>
	
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/fryn/html5slider/gh-pages/html5slider.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script src="script.js"></script>
	<script type="text/javascript">
		
	var margin = {
		top : 20,
		right : 20,
		bottom : 30,
		left : 40
	}, width = 725 - margin.left - margin.right, height = 600 - margin.top - margin.bottom;

var x = d3.scale.linear()
		.range([0, width]);
	
	var y = d3.scale.linear()
		.range([height, 0]);

var color = d3.scale.ordinal()
		.domain([1, 2, 3, 4, 5, 6])
		.range(["rgb(53,135,212)", "rgb(77, 175, 74)", "rgb(228, 26, 28)", "rgb(229,226,25)","rgb(134,25,229)","rgb(25,229,209)"  ]);

var xAxis = d3.svg.axis()
		.scale(x)
		.orient("bottom")
    .tickFormat(d3.format(".2s"));;

var yAxis = d3.svg.axis()
		.scale(y)
		.orient("left")
    .tickFormat(d3.format(".2s"));;

var svg = d3.select("#chart")
		.append("svg")
			.attr("class", "chart")
			.attr("viewBox", "0 0 725 600")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
		.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("immisalarydata.csv", function(error, data) {

x.domain([0, 90000]).nice();
		y.domain([0, 10000000]).nice();

//x axis
		svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0," + height + ")")
			.call(xAxis)
			.append("text")
				.attr("class", "label")
				.attr("x", width)
				.attr("y", -6)
				.style("text-anchor", "end")
				.text("Mean Salary($)");

//y axis
		svg.append("g")
			.attr("class", "y axis")
			.call(yAxis)
			.append("text")
				.attr("class", "label")
				.attr("transform", "rotate(-90)")
				.attr("y", 6)
				.attr("dy", ".71em")
				.style("text-anchor", "end")
				.text("Number of Immigrants")

//legend y position
		var LYP = 300, 
			LXP = 570;
	svg.append("text").attr("class", "title").attr("x", LXP-400 ).attr("y", LYP - 290).text("US Immigrants and Impact on Economy").style("font-weight", "bold").style("font-size","25px");

svg.append("text").attr("class", "label").attr("x", LXP - 5).attr("y", LYP).text("Age Group").style("font-weight", "bold");

//color legend
		svg.append("circle").attr("cx", LXP).attr("cy", LYP + 20).attr("r", 12).style("fill", "rgb(53, 135, 212)").attr("stroke", "#000");
		svg.append("text").attr("class", "label").attr("x", LXP + 15).attr("y", LYP + 25).style("text-anchor", "start").text(function(d) {
			return "15-24";
		});
		svg.append("circle").attr("cx", LXP).attr("cy", LYP + 50).attr("r", 12).style("fill", "rgb(77, 175, 74)").attr("stroke", "#000");
		svg.append("text").attr("class", "label").attr("x", LXP + 15).attr("y", LYP + 55).style("text-anchor", "start").text(function(d) {
			return "25-34";
		});
		svg.append("circle").attr("cx", LXP).attr("cy", LYP + 80).attr("r", 12).style("fill", "rgb(228, 26, 28)").attr("stroke", "#000");
		svg.append("text").attr("class", "label").attr("x", LXP + 15).attr("y", LYP + 85).style("text-anchor", "start").text(function(d) {
			return "35-44";
		});
    svg.append("circle").attr("cx", LXP).attr("cy", LYP + 110).attr("r", 12).style("fill", "rgb(229,226,25)").attr("stroke", "#000");
		svg.append("text").attr("class", "label").attr("x", LXP + 15).attr("y", LYP + 115).style("text-anchor", "start").text(function(d) {
			return "45-54";
		});
        svg.append("circle").attr("cx", LXP).attr("cy", LYP + 140).attr("r", 12).style("fill", "rgb(134,25,229)").attr("stroke", "#000");
		svg.append("text").attr("class", "label").attr("x", LXP + 15).attr("y", LYP + 145).style("text-anchor", "start").text(function(d) {
			return "55-64";
		});
     svg.append("circle").attr("cx", LXP).attr("cy", LYP + 170).attr("r", 12).style("fill", "rgb(25,229,209)").attr("stroke", "#000");
		svg.append("text").attr("class", "label").attr("x", LXP + 15).attr("y", LYP + 175).style("text-anchor", "start").text(function(d) {
			return "65+";
		});

//circles
		svg.selectAll(".dot")
			.data(data)
			.enter()
			.append("circle")
				.attr("class", "dot")
				.attr("r", 12)
				.attr("cx", 
					function(d) {
						return x(d.S1990);
					})
				.attr("cy", 
					function(d) {
						return y(d.I1990);
					})
				.style("fill", 
					function(d) {
						if (d.Age_Group == 6) {
							return "rgb(25,229,209)";
						} else if (d.Age_Group == 5) {
							return "rgb(134,25,229)";
						} else if (d.Age_Group == 4) {
							return "rgb(229,226,25)";
            } else if (d.Age_Group == 3) {
							return "rgb(228, 26, 28)";
            } else if (d.Age_Group == 2) {
							return "rgb(77, 175, 74)";
            } else {
							return "rgb(53, 135, 212)";
						}
					});
				
		var running = false;
		var timer;
		
		$("button").on("click", function() {
		
			var duration = 1000,
				maxstep = 2015,
				minstep = 1990;
			
			if (running == true) {
			
				$("button").html("Play");
				running = false;
				clearInterval(timer);
				
			} 
			/*
else if (running == true && $("#slider").val() == maxstep) {
				 running = true;
				 $("button").html("Play1");
				 
			
			} 
*/
			else if (running == false) {
			
				$("button").html("Pause");
				
				sliderValue = $("#slider").val();
				
				timer = setInterval( function(){
						if (sliderValue < maxstep){
							sliderValue++;
							console.log(sliderValue);
							$("#slider").val(sliderValue);
							$('#range').html(sliderValue);
						}
						$("#slider").val(sliderValue);
						update();
					
				}, duration);
				running = true;
				
				
			}

});
	
		$("#slider").on("change", function(){
			update();
			$("#range").html($("#slider").val());
			clearInterval(timer);
			$("button").html("Play");
		});
	
		update = function() {
		
			d3.selectAll(".dot")
				.transition()
				.duration(1000)
				.attr("cy", function(d) {
					console.log($('#slider').val())
			
					switch ($("#slider").val()) {
						case "1990":
							return y(d.I1990);
							break;
						case "1991":
							return y(d.I1990);
							break;
						case "1992":
							return y(d.I1990);
							break;
						case "1993":
							return y(d.I1990);
							break;
						case "1994":
							return y(d.I1990);
							break;
						case "1995":
							return y(d.I1990);
							break;
						case "1996":
							return y(d.I1990);
							break;
						case "1997":
							return y(d.I1990);
							break;
						case "1998":
							return y(d.I1990);
							break;
						case "1999":
							return y(d.I1990);
							break;
						case "2000":
							return y(d.I2000);
							break;
						case "2001":
							return y(d.I2000);
							break;
						case "2002":
							return y(d.I2000);
							break;
						case "2003":
							return y(d.I2000);
							break;
						case "2004":
							return y(d.I2000);
							break;
						case "2005":
							return y(d.I2000);
							break;
						case "2006":
							return y(d.I2000);
							break;
						case "2007":
							return y(d.I2000);
							break;
						case "2008":
							return y(d.I2000);
							break;
						case "2009":
							return y(d.I2000);
							break;
						case "2010":
							return y(d.I2010);
							break;
						case "2011":
							return y(d.I2010);
							break;
						case "2012":
							return y(d.I2010);
							break;
						case "2013":
							return y(d.I2010);
							break;
						case "2014":
							return y(d.I2014);
							break;
						case "2015":
							return y(d.I2014);
							break;

}
				})
				.transition()
				.duration(1000)
				.attr("cx", function(d) {
					switch ($("#slider").val()) {
						case "1990":
							return x(d.S1990);
							break;
						case "1991":
							return x(d.S1990);
							break;
						case "1992":
							return x(d.S1990);
							break;
						case "1993":
							return x(d.S1990);
							break;
						case "1994":
							return x(d.S1990);
							break;
						case "1995":
							return x(d.S1990);
							break;
						case "1996":
							return x(d.S1990);
							break;
						case "1997":
							return x(d.S1990);
							break;
						case "1998":
							return x(d.S1990);
							break;
						case "1999":
							return x(d.S1990);
							break;
						case "2000":
							return x(d.S2000);
							break;
						case "2001":
							return x(d.S2000);
							break;
						case "2002":
							return x(d.S2000);
							break;
						case "2003":
							return x(d.S2000);
							break;
						case "2004":
							return x(d.S2000);
							break;
						case "2005":
							return x(d.S2000);
							break;
						case "2006":
							return x(d.S2000);
							break;
						case "2007":
							return x(d.S2000);
							break;
						case "2008":
							return x(d.S2000);
							break;
						case "2009":
							return x(d.S2000);
							break;
						case "2010":
							return x(d.S2010);
							break;
						case "2011":
							return x(d.S2010);
							break;
						case "2012":
							return x(d.S2010);
							break;
						case "2013":
							return x(d.S2010);
							break;
						case "2014":
							return x(d.S2010);
							break;
						case "2015":
							return x(d.S2014);
							break;

}
				});
		};
		
	});

</script>
	 </body>

Modified http://d3js.org/d3.v3.min.js to a secure url

Updated missing url https://raw.github.com/fryn/html5slider/gh-pages/html5slider.js to https://cdn.jsdelivr.net/gh/fryn/html5slider/gh-pages/html5slider.js

Modified http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://raw.github.com/fryn/html5slider/gh-pages/html5slider.js

https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js