Accepted answer

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:

Good luck


Well 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.,[0] + ':' + d.status[0];


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";'#mta001')
        .text(function (d) {
            return + ': ' + 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"


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:, then the XHR request succeeds.

More Query from same tag