D3 graph not loading.. Showing blank page D3.Js and python

Question

I am new to D3js and python. I am trying to load data from postgresql and pass the JSON to D3js and draw a line chart. I am receiving error

  <anonymous> hello:61
  d3.json/<() d3.v2.js:2950
  ready() d3.v2.js:2940
  d3.xhr/req.onreadystatechange().

Below is my D3 js call.

d3.json ("http://104.131.191.213/books/",function (error,data) {
if (error) return console.error(error);
console.log(data);
data.forEach(function(d) {
d.year = parseDate(d.year.toString);
d.buys = +d.buys;
});

My parsedate function below:

var parseDate = d3.time.format("%y").parse;

JSON:

{
"data": [
{
  "buys": 5841, 
  "year": "1986"
}, 
{
  "buys": 54, 
  "year": "1954"
}, 
{
  "buys": 176, 
  "year": "1967"
}, 
{
  "buys": 9389, 
  "year": "1991"
},

My full code below:

<!DOCTYPE html>
meta charset="utf-8">
<title> flask+D3 hello </title>
<style>

body {
font: 10px sans-serif;
}

.axis path,
.axis line {
 fill: none;
 stroke: #000;
 shape-rendering: crispEdges;
 }
.x.axis path {
display: none;
}

.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}

</style>
<body>
<script type="text/javascript"  src="http://mbostock.github.com/d3/d3.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%y").parse;

var x = d3.time.scale()
 .range([0, width]);

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");

var line = d3.svg.line()
 .x(function(d) { return x(d.year); })
 .y(function(d) { return y(d.buys); });

var svg=d3.select ("body").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 + ")");
    d3.json ("http://104.131.191.213/books/",function (error,data) {
    if (error) return console.error(error);
      console.log(data);
      data.forEach(function(d) {
      d.year = parseDate(d.year.toString);
      d.buys = +d.buys;
    });
   x.domain(d3.extent(data, function(d) { return d.year; }));
   y.domain(d3.extent(data, function(d) { return d.buys; }));

   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("Price ($)");

   svg.append("path")
     .datum(data)
     .attr("class", "line")
     .attr("d", line);

      });

    </script>

May i know where i am going wrong?

score 0 · Answer 1 · edited May 23 '17 at 10:33

from d3.parseDate Error cannot read property 'forEach' of undefined:

d3.json(url[, callback])

Creates a request for the JSON file at the specified url with the mime type "application/json". If a callback is specified, the request is immediately issued with the GET method, and the callback will be invoked asynchronously when the file is loaded or the request fails; the callback is invoked with two arguments: the error, if any, and the parsed JSON. The parsed JSON is undefined if an error occurs. If no callback is specified, the returned request can be issued using xhr.get or similar, and handled using xhr.on.

so print the error and double check the url.

Hi. I printed the error and changed the URL. Still the page is not loading. I am getting a different error. Have updated the thread above. Pls assist — user3881010, Dec 25 '14 at 16:55

D3 graph not loading.. Showing blank page D3.Js and python

1 Answers1