D3 with CSV data

Question

I am trying to use D3 parcoords to create a parallel coordinates plot using CSV data but all the examples that seem to work online don't work locally on my laptop (tried both with Chrome and Safari).

This is the script loading the CSV data:

        d3.csv('datatest.csv', function(data) {
          pcz = d3.parcoords()("#example-zscore")
            .data(data)
            //.hideAxis(["name"])
            .composite("darker")
            .render()
            .alpha(0.35)
            .brushMode("1D-axes")  // enable brushing
            .interactive()  // command line mode

          change_color("weight (lb)");

          // click label to activate coloring
          pcz.svg.selectAll(".dimension")
            .on("click", change_color)
            .selectAll(".label")
            .style("font-size", "14px");
        });

Note that if I change .data(data) to:

.data([
  [0,-0,0,0,0,1],
  [1,-1,1,2,1,1],
  [2,-2,4,4,0.5,1],
  [3,-3,9,6,0.33,1],
  [4,-4,16,8,0.25,1]
])

then a graphic with this data is plotted.

My CSV looks like:

name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year
AMC Ambassador Brougham,13,8,360,175,3821,11,73
AMC Ambassador DPL,15,8,390,190,3850,8.5,70
AMC Ambassador SST,17,8,304,150,3672,11.5,72
AMC Concord DL 6,20.2,6,232,90,3265,18.2,79
AMC Concord DL,18.1,6,258,120,3410,15.1,78

Answer 1

The browser enforces security constraints when reading from a file, so you need to be accessing your index.html through a web server.

Python has a built in http server that is good for these purposes, so navigate to the directory where you are keeping your viz code, and run:

python -m SimpleHTTPServer

And you should be able to access the file at localhost:8000/index.html (assuming that's what your file is named, of course).