Show data on map using D3

Question

I want to show data on a map using D3. I have the map working with this code :

var jMap = $(".map"),
    height = jMap.height(),
    width = jMap.width(),
    mapJsonUrl = 'https://ucarecdn.com/8e1027ea-dafd-4d6c-bf1e-698d305d4760/world110m2.json',
   svg = d3.select(".map").append("svg")
    .attr("width", width)
    .attr("height", height);

var getProjection = function(worldJson) {
    // create a first guess for the projection
 var scale = 1,
     offset = [ width / 2, height / 2 ],
     projection = d3.geoEquirectangular().scale( scale ).rotate( [0,0] ).center([0,5]).translate( offset ),
     bounds = mercatorBounds( projection ),
     scaleExtent;

    scale = width / (bounds[ 1 ][ 0 ] - bounds[ 0 ][ 0 ]);
    scaleExtent = [ scale, 10 * scale ];

    projection
      .scale( scaleExtent[ 0 ] );

  return projection;
},

mercatorBounds = function(projection) {
  // find the top left and bottom right of current projection
  var maxlat = 83,
      yaw = projection.rotate()[ 0 ],
      xymax = projection( [ -yaw + 180 - 1e-6, -maxlat ] ),
      xymin = projection( [ -yaw - 180 + 1e-6, maxlat ] );

   return [ xymin, xymax ];
};


d3.json(mapJsonUrl, function (error, worldJson) {
    if (error) throw error;

  var projection = getProjection(),
      path = d3.geoPath().projection( projection );

  svg.selectAll( 'path.land' )
      .data( topojson.feature( worldJson, worldJson.objects.countries ).features )
      .enter().append( 'path' )
      .attr( 'class', 'land' )
      .attr( 'd', path );
});

This is my javascript file.

<body>

    <div class="map"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/2.2.0/topojson.min.js"></script>
    <script src="assets/js/index.js"></script>

  </body>

And this is my HTML file.

The map is working correct as you can see in the image :

So what I want to do now is add data to the map. This is what the data looks like :

[{
    "date": "1425168000000",
    "values": [{
        "name": "US",
        "value": 70421276
    }, {
        "name": "DE",
        "value": 5179869
    }, {
        "name": "GB",
        "value": 4515529
    }, {
        "name": "CN",
        "value": 2862945
    }]

So I have different json files with this data for each country. For example I want this data on the map with yellow dots, the higer the value the more dots I want to show on the map.

Is this possible with the data and map I have and how do I start with it?

Answer 1

How about first getting a list of the location of capitals ( here for instance) and then using the projection method to convert lat/lon coordinates to SVG coordinates (as shown in this example):

svg.selectAll("circle")
        .data(yourData).enter()
        .append("circle")
        .attr("cx", function (d) { return projection(latLon)[0]; })
        .attr("cy", function (d) { return projection(latLon)[1]; })
        .attr("r", function(d) { return d.size; })
        .attr("fill", "yellow");

Assuming that you converted the XLS file to a JSON array (by using a CSV file for instance) and having latLon property for each capital as an array. And d.size contains the values appropriately scaled for the SVG.

Show data on map using D3

Question

1 answers

solution1
0 2019-01-10 13:17:19

Show data on map using D3

Question

1 answers

solution1 0 2019-01-10 13:17:19

solution1
0 2019-01-10 13:17:19