javascript - D3 bar chart not reading JSON via PHP -

i'm trying create d3 bar chart based on this example. data i'm feeding d3 script in json, resides in php file. json data being echoed out json_encode.

here's snippet of what's being echoed out in php file:

[ {     "state": "alabama",     "amount": "4" }, {     "state": "arizona",     "amount": "1" }, {     "state": "arkansas",     "amount": "3" }, {     "state": "california",     "amount": "19" }, 

for reason, x-axis appearing nan (instead of each state's name) , have 1 huge bar chart instead of 25 bars supposed have...

this code:

  <script>   var margin = {top: 0, right: 20, bottom: 30, left: 40},       width = 960 - margin.left - margin.right,       height = 275 - margin.top - margin.bottom;    //var formatpercent = d3.format(".0%");    var x = d3.scale.ordinal()       .rangeroundbands([0, width], .1);    var y = d3.scale.linear()       .range([height, 0]);    var xaxis = d3.svg.axis()       .scale(x)       .orient("bottom");    var yaxis = d3.svg.axis()       .scale(y)       .orient("left");       //.tickformat(formatpercent);    var tip = d3.tip()     .attr('class', 'd3-tip')     .offset([-10, 0])     .html(function(d) {       return "<strong>amount:</strong> <span style='color:red'>" + d.amount + "</span>";     })    var svg = d3.select("#barchart").append("svg")       .attr("width", width + margin.left + margin.right)       .attr("height", height + margin.top + margin.bottom)     .append("g")       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    svg.call(tip);    d3.json("graphdata.php", function(error, data) {     data.foreach(function(d) {       d.state = +d.state;       d.amount = +d.amount;     });      x.domain(data.map(function(d) { return d.state; }));     y.domain([0, d3.max(data, function(d) { return d.amount; })]);      svg.append("g")         .attr("class", "x axis")         .attr("transform", "translate(0," + height + ")")         .call(xaxis);      svg.append("g")         .attr("class", "y axis")         .call(yaxis)       .append("text")         .attr("transform", "rotate(-90)")         .attr("y", 6)         .attr("dy", ".71em")         .style("text-anchor", "end")         .text("amount");      svg.selectall(".bar")         .data(data)       .enter().append("rect")         .attr("class", "bar")         .attr("x", function(d) { return x(d.state); })         .attr("width", x.rangeband())         .attr("y", function(d) { return y(d.amount); })         .attr("height", function(d) { return height - y(d.amount); })         .on('mouseover', tip.show)         .on('mouseout', tip.hide)    });    function type(d) {     d.amount = +d.amount;     return d;   }   </script> 

here's chart looks like:

thanks , help! appreciate it! :)