SimpleHTTPServer code 404, message File not found

javascript python json apache d3.js

19,599

From what I understand you have set-up a python simple server in a directory and in that directory you have a html file which display's in the browser. However, when you try to run the js code and load a json file you get a 404 error.

The error say's that it's looking for the json file in a directory called D3, however, you code is looking for the json in the root directory. Try changing the

D3.json("sample.json", function(error, graph)

line to

d3.json("D3/sample.json", function(error, graph).

Also, inside the function call place console.log(graph) like this:

d3.json("sample.json", function(error, graph) {
    console.log(graph)

This send output to your console so you can check what's being read in (apologies if you already knew that).

19,599

Author by

Moe

Updated on June 16, 2022

Comments

Moe almost 2 years

I am trying to run a simple d3 Javascript program to visualise a graph. I also have a JSON file for this graph. In order to get the program run, I was told that I should follow the following steps:

1- On the terminal, I go to the folder where the project is.
2- I insert the following command: python -m SimpleHTTPServer 8888 &
3- On the Web Browser (Firefox), I add this: http://localhost:8888

When I do the third step, the terminal shows me the following error message:

localhost - - [11/Nov/2013 08:07:23] code 404, message File not found
localhost - - [11/Nov/2013 08:07:23] "GET /D3/sample.json HTTP/1.1" 404 -

Here is my HTML file for d3 Javascript graph:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>

.node {
   stroke: #fff;
   stroke-width: 1.5px;
}

.link {
   stroke: #999;
   stroke-opacity: .6; 
}

</style> 
<body>
<p> Paragraph !!! </p>
<script type="text/javascript" src="d3.v3.js"></script>
<script>

var width = 960,
height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

d3.json("sample.json", function(error, graph) {
force
  .nodes(graph.nodes)
  .links(graph.links)
  .start();

var link = svg.selectAll(".link")
  .data(graph.links)
  .enter().append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
  .data(graph.nodes)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", function(d) { return color(d.group); })
  .call(force.drag);

node.append("title")
  .text(function(d) { return d.name; });

force.on("tick", function() {
   link.attr("x1", function(d) { return d.source.x; })
   .attr("y1", function(d) { return d.source.y; })
   .attr("x2", function(d) { return d.target.x; })
   .attr("y2", function(d) { return d.target.y; });

node.attr("cx", function(d) { return d.x; })
   .attr("cy", function(d) { return d.y; });
});
});

</script>
</body>
</html>

It seems that the JSON file sample.json can not be read as what message above displays. Could anyone please help me how to get that program run and get the json file read using the command I have provided above. If I add a header and paragraphs in that HTML file, they will appear but cant manage to display the graph. Is there any problem with the location of the JSON file or is there something wrong with the d3.v3.js file? Thank you for your assistance in advance.