PCA D3

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/Caged/d3-tip/master/index.js"></script>
<link rel="stylesheet" href="//rawgit.com/Caged/d3-tip/master/examples/example-styles.css">
<script src="//www.protobi.com/examples/pca/pca.js"></script>
<svg></svg>

JavaScript

var margin = {top: 20, right: 20, bottom: 20, left: 20};
var width = 500 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var angle = Math.PI * 0;
var color = d3.scale.category10();

var x = d3.scale.linear().range([width, 0]); // switch to match how R biplot shows it
var y = d3.scale.linear().range([height, 0]);

x.domain([-3.5,3.5]).nice()
y.domain([-3.5,3.5]).nice()

var data = [{"ATTRIBUTE":"Early/First line","Z":0.05,"A":0.17,"X":0,"GENERIC":0,"Y":0,"B":0},{"ATTRIBUTE":"Refractory/late-line","Z":0.32,"A":0.29,"X":0.13,"GENERIC":0.03,"Y":0.03,"B":0.04},{"ATTRIBUTE":"General use","Z":0.18,"A":0.24,"X":0.13,"GENERIC":0.2,"Y":0.15,"B":0.28},{"ATTRIBUTE":"Convenient","Z":0.12,"A":0,"X":0,"GENERIC":0,"Y":0,"B":0},{"ATTRIBUTE":"Unfamiliar","Z":0.13,"A":0.02,"X":0,"GENERIC":0,"Y":0,"B":0},{"ATTRIBUTE":"Non-compliant","Z":0.12,"A":0,"X":0.03,"GENERIC":0.04,"Y":0.23,"B":0.06},{"ATTRIBUTE":"Physical symptoms","Z":0,"A":0.03,"X":0,"GENERIC":0.14,"Y":0.11,"B":0.03},{"ATTRIBUTE":"Cognitive symptoms","Z":0.01,"A":0,"X":0.02,"GENERIC":0.33,"Y":0.02,"B":0.02}] 


var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select("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(csv_url, function(error, data) {


  var matrix = data.map(function(d){
    return d3.values(d).slice(1,d.length).map(parseFloat);
  });

  var pca = new PCA();
  matrix = pca.scale(matrix,true,true);

  pc = pca.pca(matrix,2)

  var A = pc[0];  // this is the U matrix from SVD
  var B = pc[1];  // this is the dV matrix from SVD

  var brand_names = Object.keys(data[0]);  // first row of data file ["ATTRIBUTE", "BRAND A", "BRAND B", "BRAND C", ...]
  brand_names.shift(); // drop the first column label, e.g. "ATTRIBUTE"

 ...