D3 Examples - COMPSCI590V: Data Visualization And Exploration - Educational Attainment in the United States: 2015

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <!-- <script src="https://d3js.org/d3.v4.min.js"></script> -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:10;right:10;bottom:0;left:0; }
    text{
      font-size:12;
      fill:#000000;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
    
    .label{
      font-size:12;
    }
  </style>
</head>
​
<body>
    
  <script>
    var W = 700;
    var H = 400;
    
    var margin = { left: 150, top: 150, right: 50, bottom: 150 };
    
    var plot_w = W  - margin.left - margin.right;
    var plot_h = H - margin.top  - margin.bottom;
    
    
    var svg = d3.select("body").append("svg")
      .attr("width", W)
      .attr("height", H);
    
    var xAxisLabelText = "Number of People with Bachelors (in thousands)";
    var xAxisLabelOffset = 40;
    var yAxisLabelText = "Number of People with Masters (in thousands)";
    var yAxisLabelOffset = 0;
    
    var plot_area = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var xAxisGroup = plot_area.append("g")
        .attr("transform", "translate(0," + plot_h + ")")
        .attr("class", "x axis");
    var xAxisLabel = xAxisGroup.append("text")
        .style("text-anchor", "middle")
        .attr("x", plot_w / 2)
        .attr("y", xAxisLabelOffset)
        .attr("class", "label")
        .text(xAxisLabelText);
    var yAxisGroup = plot_area.append("g")
        .attr("class", "y axis");
    var yAxisLabel = yAxisGroup.append("text")
        .style("text-anchor", "middle")
        .attr("y", -35) //plot_h / 2)
        .attr("x", -plot_h / 2)
        .attr("class", "label")
        .attr("transform", "rotate(-90)")
        .text(yAxisLabelText);
​
    
    
    var xscale = d3.scale.linear()
         .domain([0, 2400])   // Data space
         .range([0, plot_w]); // Pixel space
    
    var yscale = d3.scale.linear()
         .domain([0, 400])   // Data space
         .range([plot_h, 0]); // Pixel space
    
    var colorScale = d3.scale.ordinal().range(["#00ea1f", "#19d032", "#2cbe3f", "#48a154", "#599160", "#4b7b51", "#436e48", "#3e6542", "#325235", "#3b493c", "#313e32", "#2d2d2d"]);
    
    
    var xAxis = d3.svg.axis().scale(xscale).orient("bottom");
    var yAxis = d3.svg.axis().scale(yscale).orient("left");
    
         
    
    function render_points(data){
      
        
      
        xAxisGroup.call(xAxis);
        yAxisGroup.call(yAxis);
      
        // Regression Line
        plot_area.append("line")
          .attr("x1", xscale(0))
          .attr("y1", yscale(6.35428633805))
          .attr("x2", xscale(2400))
          .attr("y2", yscale(430.3425411804499))
          .attr("opacity", "0.3")
          .attr("stroke", "#066269")
          .attr("stroke-width", "3px");
      
        // masters mean
        plot_area.append("line")
          .attr("x1", xscale(0))
          .attr("y1", yscale(281))
          .attr("x2", xscale(2400))
          .attr("y2", yscale(281))
          .attr("stroke", "black")
          .attr("stroke-width", "0.5px");
      
        // masters stdv +
        plot_area.append("line")
          .attr("x1", xscale(0))
          .attr("y1", yscale(281+101))
          .attr("x2", xscale(2400))
          .attr("y2", yscale(281+101))
          .attr("stroke", "black")
          .attr("stroke-width", "0.5px")
          .style("stroke-dasharray", ("3, 3"));
      
        // masters stdv -
        plot_area.append("line")
          .attr("x1", xscale(0))
          .attr("y1", yscale(281-101))
          .attr("x2", xscale(2400))
          .attr("y2", yscale(281-101))
          .attr("stroke", "black")
          .attr("stroke-width", "0.5px")
          .style("stroke-dasharray", ("3, 3"));
      
      
        // bachelors mean
        plot_area.append("line")
          .attr("x1", xscale(1557.0))
          .attr("y1", yscale(0))
          .attr("x2", xscale(1557.0))
          .attr("y2", yscale(400))
          .attr("stroke", "black")
          .attr("stroke-width", "0.5px");
      
        // bachelors stdv +
        plot_area.append("line")
          .attr("x1", xscale(1557+533))
          .attr("y1", yscale(0))
          .attr("x2", xscale(1557+533))
          .attr("y2", yscale(400))
          .attr("stroke", "black")
          .attr("stroke-width", "0.5px")
          .style("stroke-dasharray", ("3, 3"));
      
        // bachelors stdv -
        plot_area.append("line")
          .attr("x1", xscale(1557-533))
          .attr("y1", yscale(0))
          .attr("x2", xscale(1557-533))
          .attr("y2", yscale(400))
          .attr("stroke", "black")
          .attr("stroke-width", "0.5px")
          .style("stroke-dasharray", ("3, 3"));
​
        // Bind data
        var circles = plot_area.selectAll("circle").data(data);
        
        // Enter
        circles.enter().append("circle")
          .attr("opacity", "0.2")
          .attr("r", "10")
          .attr("stroke", "#066269")
          .attr("stroke-width", "2px");
​
        // Update
        circles
          .attr("cx", function (d){ return xscale(d.BA); })
          .attr("cy", function (d){ return yscale(d.MA); })
          .attr("fill", function(d){return colorScale(d.age); });
​
        // Exit
        circles.exit().remove();
      }
    
​
    function toNumbers(d){
        d.BA = +d.BA.replace(',','');
        d.MA = +d.MA.replace(',','');
        return d;
    }
    
    d3.csv("Bachelors_vs_Masters_All.csv", toNumbers, render_points);
    
​
​
​
  </script>
</body>
​
    