D3 Examples - Approved Versus Received H-1B Visa petition

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        font: 14px sans-serif;
    }
​
    .axis path,
    .axis line {
        fill: none;
        stroke: #2b2b2b;
        shape-rendering: crispEdges;
    }
​
    .x.axis path {
        display: none;
    }
​
    .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 3.46px;
    }
</style>
<body>
    <script src="https://d3js.org/d3.v3.js"></script>
    <script>
​
        var margin = { top: 20, right: 175, bottom: 30, left: 61 },
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
​
        var parseDate = d3.time.format("%Y").parse;
​
        var x = d3.time.scale()
            .range([0, width]);
​
        var y = d3.scale.linear()
            .range([height, 0]);
​
        var color = d3.scale.category10();
​
        var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");
​
        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");
​
        var line = d3.svg.line()
            .x(function (d) { return x(d.Year); })
            .y(function (d) { return y(d.count); });
​
        var svg = d3.select("body").append("svg")
            .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("Approved.csv", function (error, data) {
            color.domain(d3.keys(data[0]).filter(function (key) { return key !== "Year"; }));
​
            data.forEach(function (d) {
                d.Year = parseDate(d.Year);
            });
​
            var cases = color.domain().map(function (name) {
                return {
                    name: name,
                    values: data.map(function (d) {
                        return { Year: d.Year, count: +d[name] };
                    })
                };
            });
​
            x.domain(d3.extent(data, function (d) { return d.Year; }));
          
            y.domain([d3.min(cases, function (c) { return d3.min(c.values, function (v) { return v.count; }); }),
              d3.max(cases, function (c) { return d3.max(c.values, function (v) { return v.count; }); })
            ]);
​
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
​
            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
              .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 4)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("H1-B count");
​
            var city = svg.selectAll(".case")
                .data(cases)
              .enter().append("g")
                .attr("class", "case");
​
            city.append("path")
                .attr("class", "line")
                .attr("d", function (d) { return line(d.values); })
                .style("stroke", function (d) { return color(d.name); });
​
            city.append("text")
                .datum(function (d) { return { name: d.name, value: d.values[d.values.length - 1] }; })
                .attr("transform", function (d) { return "translate(" + x(d.value.Year) + "," + y(d.value.count) + ")"; })
                .attr("x", 3)
                .attr("dy", ".35em")
                .text(function (d) { return d.name; });
​
            city.selectAll("circle")
              .data(function (d) { return d.values })
              .enter()
              .append("circle")
              .attr("r", 3)
              .attr("cx", function (d) { return x(d.Year); })
              .attr("cy", function (d) { return y(d.count); })
              .style("fill", function (d, i, j) { return color(cases[j].name); });
​
        });
​
    </script>
  <div style="position:absolute;left:10%;">
        <h3>Line Graph:Approved H-1B petition Vs recieved H-1b Petition applications</h3>
    <p><b>Approvals</b> are the numberof H-1B visa got approved by the Governmant</p>
    <p><b>Receipts</b> are the number of H-1B Appplications recived in the duration</p>
    <p><b>Analysis:</b>In the year 2017,due to the changes made in the Employment eligibility rule,the approved H1-B visa number decreased.</p>
        <p>The number of employment-based immigrant visas statutorily allocated per year has remained unchanged since the passage of the Immigration Act of 1990.
         In the intervening 25 years, the country's economy has expanded dramatically.
         The size of the U.S. economy, as measured by U.S. gross domestic product (GDP), increased by about 83 percent since 1990, rising from $8.955 trillion in 1990 to $16.397 trillion in 2015.
         Over the same period, GDP per capita increased by just over 42 percent, rising from $35,794 in 1990 to $50,970 in 2015.</p>
        <!--<h4>Question:How is the growth of Approved H1-B petiton Vs Recieved H1-B aaplications?</h4>
        <h4>Inference made:In the year 2017,due to the changes made in the Employment eligibility rule,the approved H1-B visa number decreased. </h4>-->
    <p>Source data: <a href="https://www.uscis.gov/tools/reports-studies/immigration-forms-data">USCIS data set</a></P>
    </div>
  
​
    