D3 Examples - PCA Projection

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
 
   .dot{
   stroke: #FFF;
    }
    
 graph
{
  margin: auto;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}
​
.axis text {
  font-family: sans-serif;
  font-size: 11px;
}
​
.tick line
{
  stroke: #59ADEB;
  opacity: 0.5;
}
​
g path.domain
{
  stroke: #4F4F4F;
}
  </style>
</head>
​
<body>
  
  <div id="graph"></div> 
  
  
  <script>
    // Set graph
    var width = 900,
            height = 700,
            padding = 50;
            
    // create an svg container
    var vis = d3.select("#graph")
    .append("svg:svg")
        .attr("width", width)
        .attr("height", height);
/*
    //Loading the CSV file
  d3.csv("cereal.csv",function(error,data){
    data.forEach(function(d){
      d.Calories = +d.Calories;
      d["Protein (g)"] = +d["Protein (g)"];
    })
    //drawing the dots
    d3.select("body").append("svg")
      
      .selectAll(".dot")
            .data(data)
            .enter().append("circle")
            .attr("class", "dot")
        .attr("r", 3.5)
            .attr("cx",xScale)
            .attr("cy",yScale)
            .style("fill","black")  
  });  
    
 */
    
    var xScale = d3.scale.linear().domain([1, -1]).range([width - padding, padding]);
    var yScale = d3.scale.linear().domain([-1, 1]).range([height - padding, padding]);
​
    // define the y axis
    var yAxis = d3.svg.axis()
            .orient("left")
            .scale(yScale);
    
    // define the y axis
    var xAxis = d3.svg.axis()
            .orient("bottom")
            .scale(xScale);
​
    var xAxisPlot = vis.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + (height/2) + ")")
            .call(xAxis.tickSize(-height, 0, 0));
​
    var yAxisPlot = vis.append("g")
        .attr("class", "axis axis--y")
        .attr("transform", "translate("+ (width/2) +",0)")
        .call(yAxis.tickSize(-width, 0, 0));
​
​
    xAxisPlot.selectAll(".tick line")
        .attr("y1", (width - (2*padding))/2 * -1)
        .attr("y2", (width - (2*padding))/2 * 1);
​
    yAxisPlot.selectAll(".tick line")
    .attr("x1", (width - (2*padding))/2 * -1)
        .attr("x2", (width - (2*padding))/2 * 1);
    
  </script>
</body>
​
    