D3 – Reading from .json and attempting to plot points – nothing displayed

I’ve been following various tutorials from over the past few years (seems D3 has gone through a bunch of changes) but cannot seem to nail this basic task down. Loading data in from MonthySales.json and trying to plot the points. Blank screen, but no errors at all in console.

    var h=100;
    var w=400;
    
    d3.json("MonthlySales.json", function(error, data) { 

        var dataset = data
    
        var line = d3.line()
        .x(function (d) {return ((d.month-20130001)/3.25)})
        .y(function (d) {return h-d.sales; })
    
        var svg = d3.select("body").append("svg").attr("width",w).attr("height",h)
    
        svg.append("path").datum(dataset).attr("class","line").attr("d",line)
           .attr("fill","none").attr("stroke","purple").attr("stroke-width","2")

        });

JSON is set up in the form:

[
{"month":20130101, "sales":38},
{"month":20130201, "sales":35},
{"month":20130301, "sales":24},
{"month":20130401, "sales":21},
{"month":20130501, "sales":34},
{"month":20130601, "sales":45},
{"month":20130701, "sales":67},
{"month":20130801, "sales":1},
{"month":20130901, "sales":54},
{"month":20131001, "sales":10},
{"month":20131101, "sales":20},
{"month":20131201, "sales":30}
]

54 thoughts on “D3 – Reading from .json and attempting to plot points – nothing displayed”

Leave a Comment