将.data文件导入D3js？

Question

So I've been given the task of importing some data to visualize. This to be specific:

http://archive.ics.uci.edu/ml/machine-learning-databases/auto-mpg/auto-mpg.data

However, I have not a clue on how to import a .data file. Furthermore, there is no header line in order to actually organise the file.

I have tried to import as text and the use csv.parseRows() which led to arrays with a length of one just containing one long string:

I have tried to import as d3.tsv(). Every technique ends up importing a row as one long string like below.

    "18.0   8   307.0      130.0      3504.      12.0   70  1   "chevrolet chevelle malibu""

I have never dealt with .data files and resources on using them with D3 are scarce. Any help on dealing with this would be greatly appreciated as always. You people are awesome.

Thanks.

Answer 1

You could use a regular expression to parse the string:

/("[^"]+"|[^\s]+)\s*/g

With this regular expression, you turn

18.0   8   307.0      130.0      3504.      12.0   70  1    "chevrolet chevelle malibu"

into

[
  "18.0",
  "8",
  "307.0",
  "130.0",
  "3504.",
  "12.0",
  "70",
  "1",
  "\"chevrolet chevelle malibu\""
]

You can do this for every line by splitting the contents of the data file by each newline, and then mapping each line to the regular expression:

d3.text("http://archive.ics.uci.edu/ml/machine-learning-databases/auto-mpg/auto-mpg.data", function(data) {
    var lines = data.split('\n');
    var results = data.map(function (d) {
      var match = d.match(regex);
      return match.slice(1).map(function (d) { return d.trim(); });
    });
});

Here is a quick fiddle showing this applied on one row: http://jsfiddle.net/tftdepL4/1/