1

I'm starting to learn D3 and it seems like a powerful framework. I'm trying load the data from json. I can see data but nothing happen after loading data into D3 library. There are no error messages in the JavaScript console.

Here's my code:

<html>  
  <head>  
        <meta charset="utf-8">  
        <title>Map</title>  
  </head> 
<style>

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    var width  = 1000;
    var height = 1000;

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




    var color = d3.scale.category20();


    d3.json("examples/us.json", function(error, root) {
        console.log('read');
        if (error) 
            return console.error(error);
        console.log(root);
         var group = svg.selectAll("g")
            .data(root)
            .enter()
            .append("g")    

          var projection = d3.geo.mercator(); //.scale(7300).translate([0,1980]);
          var path = d3.geo.path().projection(projection);

          var areas = group.append("path")
            .attr("d", path)
            .attr("class", "area")
            .attr("fill", "steelblue")

    });

</script>

</body>  
</html>  

Plunker : http://plnkr.co/edit/wHIsaB?p=preview

  • As plnkr appears to be down, perhaps you could post us.json, as it is impossible to debug otherwise. Also, there is an error, console.error(error) is an error, ironically :-) – John Powell Dec 22 '15 at 8:35
1

I think you do need to add that scale and translate, otherwise your data ends up in a far corner. Try playing around with the numbers. Did you try to check the element explorer in de debugger? (F12 -> elements -> search for your svg). Here you can see how far of your features are on the screen.

P.S. Plunker seems dead at the moment, so couldn't look at the data.

  • Good points, though possibly better as a comment. Plunker is still down, which does make it challenging to give a proper answer, I agree. – John Powell Dec 22 '15 at 10:40
  • Hi tilt, I have tried to check that but no error message. I find any problem. I have plunker. it has no problem. It cannot show map. plnkr.co/edit/wHIsaB?p=info – Hu Kenneth Dec 23 '15 at 9:41
  • With the plunker you just gave I see only one problem: the path is very small. It's on the right side of your screen. When you change the data to usa.geojson you will see more results. – tilt Dec 23 '15 at 10:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.