d3, matrix, csv, please help

[vrnova]

Hello,

May I have some help on using d3.js to display a matrix saved in CSV file? I have checked the miserables example (http://bost.ocks.org/mike/miserables/) and the shuffle example (http://bost.ocks.org/mike/shuffle/compare.html). But I am not sure how to load a csv file into a matrix (2d array?) in d3. Especially the following code in the miserables example:

zero = d3.range(n).map(function() { return 0; }),

matrix = zero.map(function() { return zero.slice(); });

My guess is that zero is a 1d array generated from range with all 0 values. Then the 1d array is mapped again to create a 2d array? But what is zero.slice()? I didn't find related reference in d3 API reference.

Also, how do I create a matrix from a csv file (comma separated) ?

Thanks ahead,

Yanling

[Chris Viau]

Zero is indeed an array filled with n zeros, then matrix contains n copies of this same array of zeros. So it is a fancy way to generate a square matrix with zeros. Slice() is a method often used in javascript to clone an array, so you don't pass a reference to the same zero array but a copy of it.

The last example of one of my d3 tutorials shows one way to do what you want:

d3.text("auto_mpg_tmp.csv", function(datasetText) { var parsedCSV = d3.csv.parseRows(datasetText); var sampleHTML = d3.select("#viz") .append("table") .style("border-collapse", "collapse") .style("border", "2px black solid") .selectAll("tr") .data(parsedCSV) .enter().append("tr") .selectAll("td") .data(function(d){return d;}) .enter().append("td") .style("border", "1px black solid") .style("padding", "5px") .on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")}) .on("mouseout", function(){d3.select(this).style("background-color", "white")}) .text(function(d){return d;}) .style("font-size", "12px"); });