Very simple tutorial example of D3.js not working

Question

I\'m kind of new to D3.js. I\'m reading Getting Started with D3 by Mike Dewar. I tried the very first example in the book, and it doesn\'t work. I\'ve been tearing

Answer 1

It might be your JSON. I did the same exercise, and it worked fine. Here is my js(I appended to a div, not body). I'm running a local web server.

d3.json("data/mta001.json", drawli);

function drawli(data) {
    "use strict";
    d3.select('#mta001')
      .append('ul')
      .selectAll('ul')
      .data(data)
      .enter()
      .append('li')
        .text(function (d) {
            return d.name + ': ' + d.status;
      });
    d3.selectAll('#mta001 li')
      .style('color', function (d) {
        if ( d.status == 'GOOD SERVICE') {
            return 'green';
        } else {
            return 'fuchsia';
        }
      });
}

and here is my JSON:

[
        {
          "name": "123",
          "status": "DELAYS",
          "text": "delay text",
          "Date": "12/08/2012",
          "Time": " 1:03PM"
        }
]

Answer 2

Have you checked your browser console to see if your XHR request was successful?

When I attempt to run the code on my machine, with a local version of d3 (v3) in VS 2012 Express, the XHR request comes back with an error message:

HTTP Error 404.3 - Not Found

However, when I change the extension of the "flare" file from .json to .txt or .js, as alluded to here: https://serverfault.com/questions/39989/iis-cant-serve-certain-file-extension, then the XHR request succeeds.

Answer 3

Well d.name and d.status are both arrays and should be just strings if you want to show their contents or yo should be accessing the 0 index value of those arrays; I.e., d.name[0] + ':' + d.status[0];

Answer 4

If you're using Chrome, it may prevent you from opening the file properly because of cross domain security restrictions. Try Firefox to see if that's the case (it will probably let you load the file correctly).

If that is the problem, you will want to install a local web server like WAMP (if you're running Windows) or follow instructions on the wiki page here: https://github.com/mbostock/d3/wiki

Good luck