D3.js shows nothing on the screen

Asked

Viewed 189 times

1

I’m trying to use D3.js but I’m not getting it. I have the code below, but it doesn’t print the map of Brazil. The screen shows no error, what could it be? my file "meso.json" is in topojSON format but it turns the topojSON into Geojson already in D3.js code:

<html>
    <head>
        <title>D3.js</title>
        <meta charset="utf-8" />
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://d3js.org/queue.v1.min.js"></script>
        <script src="http://d3js.org/topojson.v1.min.js"></script>

        <script>

            var width = 900,
                height = 650;

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

            var projection = d3.geo.mercator()
            .center([55,10])
            .scale(750);

            var path = d3.geo.path()
            .projection(projection);

            queue()
            .defer(d3.json, "topo/meso.json")
            .await(ready);

            function ready(error, br_mesos){

                if(error) return console.error(error);

                var mesos = topojson.feature(br_mesos, br_mesos.objects.meso);

                svg.append("path")
                .datum(mesos)
                .attr('d', path)
                .attr('class', 'mesos');

            }
        </script>
    </head>

    <body>
    </body>
</html>
javascript d3.js maps

  • See if there are any errors in the console. I could not simulate due to "topo/meso.json". You’d help us if you could provide it.

  • is a folder called "top" that has this json file.

1 answer

1


If "meso.json" contains only the map of Brazil, it is likely that it is appearing yes, but outside the viewing area.

By the geographical coordinates you are using (latitude 10, longitude 55) the center is in the northern and eastern hemisphere (probably Africa, Asia, India or somewhere in the middle of the Indian Ocean. Brazil is between latitudes +5 and -34 and longitudes -34 to -74 and therefore should not be appearing on the map.

To check this, reduce the scale to 150 (which fits the whole world) and see if the map appears.

I imagine you must have switched signals, because [-55,-10] (instead of [55,10]) is a good center for the map of Brazil.

Exchange for .center([-55,-10]) and see if the map appears.

I played your code on a [Jsfiddle][https://jsfiddle.net/mg2rq15x/] where you can experiment with a map of the world, and then switch to the map you are using. I commented your code in two places to use this example.

Browser other questions tagged javascript d3.js maps

You are not signed in. Login or sign up in order to post.