Cities cannot be obscured by a rotating globe

Question

Cities cannot be obscured by a rotating globe

In my latest project, I have created a jsfiddle showcasing a Bostock spinning globe implementation.

After successfully plotting a few city markers, I encountered a problem where not all cities were being displayed. Additionally, the script intended to hide markers that are not visible behind the globe was not functioning properly, causing the markers to move unexpectedly when scrolled out of view.

To view the fiddle and script in question, click here: http://jsfiddle.net/Guill84/jg3axLmx/1/

Below is the script used to position the cities and 'hide' them behind the globe:

function position_cities() {
   var centerPos = projection.invert([380,380]);
   var arc = d3.geo.greatArc();
   svg.selectAll(".cities")
     .style("fill", "blue")
     .attr("cx", function(d) {
       return projection([d.lon, d.lat])[0];
     })
     .attr("cy", function(d) {
       return projection([d.lon, d.lat])[1];
     })
     .style({
       "color": "#FFF",
       "display": function(d) { 
         var x = projection([d.lon, d.lat])[0];
         var y = projection([d.lon, d.lat])[1];
         var d = arc.distance({
           source: [d.lat, d.lon],
           target: centerPos
         });
         return (d > 1.57) ? 'none' : 'inline';
       }
     });
 }

Furthermore, I am seeking assistance on how to add labels to these markers and modify their shape to be square instead of circular.

A question similar to mine can be found here: Cannot hide labels 'behind' spinning D3 Globe

For example, the marker in Brazil is still visible in the image linked here: https://i.sstatic.net/WnSfq.png

javascript css d3.js

Answer 1

Answer №1

Close to the correct solution,

As mentioned in the feedback, the central point is located at 400,400:

var centerPos = projection.invert([400,400]);

There seems to be a mix-up in the order of latitude and longitude in the source coordinate provided:

var d = arc.distance({source: [d.lat, d.lon], target: centerPos});
  return (d > 1.57) ? 'none' : 'inline';

The correct order should be:

var d = arc.distance({source: [d.lon, d.lat], target: centerPos});
  return (d > 1.57) ? 'none' : 'inline';

Fiddle: http://jsfiddle.net/L51y3c1b/

Answer 2

Close to the correct solution,

As mentioned in the feedback, the central point is located at 400,400:

var centerPos = projection.invert([400,400]);

There seems to be a mix-up in the order of latitude and longitude in the source coordinate provided:

var d = arc.distance({source: [d.lat, d.lon], target: centerPos});
  return (d > 1.57) ? 'none' : 'inline';

The correct order should be:

var d = arc.distance({source: [d.lon, d.lat], target: centerPos});
  return (d > 1.57) ? 'none' : 'inline';

Fiddle: http://jsfiddle.net/L51y3c1b/

Answer 3

Answer №2

Allow me to address the following query:

Furthermore - do you happen to know how one could incorporate labels into these markers and change their shape from circular to square?

Instead of the current method on line 72:

      .append("circle")
        .attr("cx", function(d) {
           return projection([d.lon, d.lat])[0];
           })
        .attr("cy", function(d) {
           return projection([d.lon, d.lat])[1];
           })

Consider appending a "g" element as follows:

      .append("g")
        .attr("transform", function(d) {
           return "translate("+ 
                    projection([d.lon, d.lat])[0] +
                    "," +
                    projection([d.lon, d.lat])[1]+
                    ")";
           })

Next, add a circle to the "g" element:

     cities.append("circle") 
           .attr("cx", 0)
           .attr("cy", 0)

Followed by:

    cities.append("text").text("New York");

You can adjust the x and y coordinates of the text. Additionally, whenever you modify the cx and cy attributes of a city, update the "transform" attribute of the g element as demonstrated above.

In regard to your primary question, it's noteworthy that d3.geo.greatArc(); is no longer supported. It might be beneficial to explore alternative approaches for calculating arc distance on a global scale.

Answer 4

Allow me to address the following query:

Furthermore - do you happen to know how one could incorporate labels into these markers and change their shape from circular to square?

Instead of the current method on line 72:

      .append("circle")
        .attr("cx", function(d) {
           return projection([d.lon, d.lat])[0];
           })
        .attr("cy", function(d) {
           return projection([d.lon, d.lat])[1];
           })

Consider appending a "g" element as follows:

      .append("g")
        .attr("transform", function(d) {
           return "translate("+ 
                    projection([d.lon, d.lat])[0] +
                    "," +
                    projection([d.lon, d.lat])[1]+
                    ")";
           })

Next, add a circle to the "g" element:

     cities.append("circle") 
           .attr("cx", 0)
           .attr("cy", 0)

Followed by:

    cities.append("text").text("New York");

You can adjust the x and y coordinates of the text. Additionally, whenever you modify the cx and cy attributes of a city, update the "transform" attribute of the g element as demonstrated above.

In regard to your primary question, it's noteworthy that d3.geo.greatArc(); is no longer supported. It might be beneficial to explore alternative approaches for calculating arc distance on a global scale.

Answer 5

Answer №3

The code snippet you provided on the js fiddle shows that the cities are set once but never called again. In the startAnimation method, you need to update the cities display in the same way you update the labels. Otherwise, the display will rely on the initial load.

Regarding the shape change, you define it when creating the cities as shown below:

var cities = svg.selectAll("circle")
            .data([
            {"code":"RIO","city":"RIO DE JANEIRO","country":"BRAZIL","lat":-22.90,"lon":-43.24},
            {"code":"BSB","city":"BRASILIA","country":"BRAZIL","lat":-15.67,"lon":-47.43},
            {"code":"ZNZ","city":"ZANZIBAR","country":"TANZANIA","lat":-6.13,"lon":39.31},
            {"code":"TYO","city":"TOKYO","country":"JAPAN","lat":35.68,"lon":139.76}
            ])
            .enter()
            .append("circle")
            .attr("cx", function(d) {
               return projection([d.lon, d.lat])[0];
               })
            .attr("cy", function(d) {
               return projection([d.lon, d.lat])[1];
               })
            .attr("r", 3)
            .style("fill", "red")
            .attr("d", path)
            .attr("class", "cities")
            .attr("id", function(d){ return d.code})

The attributes like cx, cy are specific to an SVG circle shape and the circle tag. To create different shapes, you will need to modify the tag and attributes to suit the shape you desire.

Answer 6

The code snippet you provided on the js fiddle shows that the cities are set once but never called again. In the startAnimation method, you need to update the cities display in the same way you update the labels. Otherwise, the display will rely on the initial load.

Regarding the shape change, you define it when creating the cities as shown below:

var cities = svg.selectAll("circle")
            .data([
            {"code":"RIO","city":"RIO DE JANEIRO","country":"BRAZIL","lat":-22.90,"lon":-43.24},
            {"code":"BSB","city":"BRASILIA","country":"BRAZIL","lat":-15.67,"lon":-47.43},
            {"code":"ZNZ","city":"ZANZIBAR","country":"TANZANIA","lat":-6.13,"lon":39.31},
            {"code":"TYO","city":"TOKYO","country":"JAPAN","lat":35.68,"lon":139.76}
            ])
            .enter()
            .append("circle")
            .attr("cx", function(d) {
               return projection([d.lon, d.lat])[0];
               })
            .attr("cy", function(d) {
               return projection([d.lon, d.lat])[1];
               })
            .attr("r", 3)
            .style("fill", "red")
            .attr("d", path)
            .attr("class", "cities")
            .attr("id", function(d){ return d.code})

The attributes like cx, cy are specific to an SVG circle shape and the circle tag. To create different shapes, you will need to modify the tag and attributes to suit the shape you desire.

Cities cannot be obscured by a rotating globe

Answer №1

Answer №2

Answer №3

Similar questions

Step-by-Step Guide on Retrieving Filtered Data using React Context API

Is there a way to remove a value from the search bar while updating the table at the same time?

jquery counter is malfunctioning

Efficient method for managing complex JSON object updates using setState in React

Creating a uniform system for PHP and CSS that eliminates the need for string parsing

Utilizing Vue.js to set the instance global property as the default value for a component prop

Using JavaScript promises to handle connection pooling and query execution

Firefox 3 fails to utilize cache when an ajax request is made while the page is loading

Switching a material-ui input control instead of a textfield for materials-ui-datepicker: the ultimate guide

The click function operates only once

Unidentified function error triggered by jQuery when clicked

How can I create a custom AppBar transition using Material-UI?

The ng-change functionality of Angular radio buttons only functions correctly the first time it

Having difficulty positioning two elements within a button using bootstrap

Adaptive component transformation

Creating interactive carousel slides effortlessly with the power of Angular and the ngu-carousel module

Tips for preventing visual glitches caused by inaccurate world coordinates in WebGL

Chrome hanging after AJAX delete operation has been executed

Playing sound using jQuery when the body of the page is replaced

What causes CSS to fail to load in React but work normally in Next.js?