Exploring the concept of calculating scaled distance in TopoJSON files

Question

Exploring the concept of calculating scaled distance in TopoJSON files

I have been exploring various methods to connect pixel space with real-world distances using a projection. I came across the following method which proved to be quite useful:

var actual_map_bounds = d3.geo.bounds(this_topojson);

    var radians = d3.geo.distance(actual_map_bounds[0], actual_map_bounds[1]);
    var earth_radius = 3959;  // miles
    var arc_length = earth_radius * radians;  // s = r * theta

    var projected_map_bounds = [
      this_projection(actual_map_bounds[0]),
      this_projection(actual_map_bounds[1])
    ];

    var projected_map_width = projected_map_bounds[1][0] - projected_map_bounds[0][0];
    var projected_map_height = projected_map_bounds[0][1] - projected_map_bounds[1][1];
    var projected_map_hypotenuse = Math.sqrt(
      (Math.pow(projected_map_width, 2)) + (Math.pow(projected_map_height, 2))
    );

    var pixels_per_mile = projected_map_hypotenuse / arc_length;
    var pixel_distance = pixels_per_mile * miles;

However, I believe my current application could benefit greatly from simplifying the calculation process. I am curious if there are any more straightforward or 'elegant' solutions that can be utilized by topojson developers?

javascript d3.js topojson

Answer 1

Answer №1

It seems like the main concern here lies in creating a reusable function in JavaScript without relying on global variables. The question at hand can be summed up as:

How can I create a function that avoids recalculating most of its values each time it runs, and instead maintains data for future use?

The solution to this is utilizing closures:

function pixelLength(this_topojson, this_projection) {

    var actual_map_bounds = d3.geo.bounds(this_topojson);

    var radians = d3.geo.distance(actual_map_bounds[0], actual_map_bounds[1]);
    var earth_radius = 3959;  // miles
    var arc_length = earth_radius * radians; 

    var projected_map_bounds = [
      this_projection(actual_map_bounds[0]),
      this_projection(actual_map_bounds[1])
    ];

    var projected_map_width = projected_map_bounds[1][0] - projected_map_bounds[0][0];
    var projected_map_height = projected_map_bounds[0][1] - projected_map_bounds[1][1];
    var projected_map_hypotenuse = Math.sqrt(
      (Math.pow(projected_map_width, 2)) + (Math.pow(projected_map_height, 2))
    );

    var pixels_per_mile = projected_map_hypotenuse / arc_length;

    return function(miles){
      var pixel_distance = pixels_per_mile * miles;
      return pixel_distance;
    }
  }

With this closure, you can now obtain a function from `pixelLength` that can repeatedly calculate pixel distances based on the same topojson and projection:

var pixelCalc = pixelLength(topojson.feature(data, data.objects['parishes']), projection4);

pixelCalc(1); // pixels for 1 mile
pixelCalc(100); // pixels for 100 miles

See it in action:

...

Answer 2

It seems like the main concern here lies in creating a reusable function in JavaScript without relying on global variables. The question at hand can be summed up as:

How can I create a function that avoids recalculating most of its values each time it runs, and instead maintains data for future use?

The solution to this is utilizing closures:

function pixelLength(this_topojson, this_projection) {

    var actual_map_bounds = d3.geo.bounds(this_topojson);

    var radians = d3.geo.distance(actual_map_bounds[0], actual_map_bounds[1]);
    var earth_radius = 3959;  // miles
    var arc_length = earth_radius * radians; 

    var projected_map_bounds = [
      this_projection(actual_map_bounds[0]),
      this_projection(actual_map_bounds[1])
    ];

    var projected_map_width = projected_map_bounds[1][0] - projected_map_bounds[0][0];
    var projected_map_height = projected_map_bounds[0][1] - projected_map_bounds[1][1];
    var projected_map_hypotenuse = Math.sqrt(
      (Math.pow(projected_map_width, 2)) + (Math.pow(projected_map_height, 2))
    );

    var pixels_per_mile = projected_map_hypotenuse / arc_length;

    return function(miles){
      var pixel_distance = pixels_per_mile * miles;
      return pixel_distance;
    }
  }

With this closure, you can now obtain a function from `pixelLength` that can repeatedly calculate pixel distances based on the same topojson and projection:

var pixelCalc = pixelLength(topojson.feature(data, data.objects['parishes']), projection4);

pixelCalc(1); // pixels for 1 mile
pixelCalc(100); // pixels for 100 miles

See it in action:

...

Exploring the concept of calculating scaled distance in TopoJSON files

Answer №1

Similar questions

Question from Student: Can a single function be created to manage all text fields, regardless of the number of fields present?

The functionality of sending a response to a client in Node.js Express seems to be malfunctioning

Guide to creating fog animations in three.js

What tools do Sketchfab and Thangs utilize to display 3D models?

To utilize a spread argument, it is essential for it to either be in tuple form or be supplied to a rest

Is there a way to automate the distribution of tasks to users in order to ensure that each user receives an equal number of assignments?

By utilizing // within the source of a <script>, one can efficiently reference external files without specifying the

Creating a web form with the ability to select multiple images using Javascript

Whenever I try to launch my React app using the `npm start` command in my command

Tips for toggling Bootstrap 5 tabs using JavaScript instead of the button version

Console.log() will not display any JSON duplicates

Guard your website against Backdoor/PHP.C99Shell, also known as Trojan.Script.224490

Sorting arrays with NaN values within objects will not result in a reordering when using the Array

Manipulating DropDownList Attributes in ASP.NET using JavaScript

Get the Zip file content using PushStreamContent JavaScript

Is it possible to create a basic calculator with Vue.js by incorporating v-model and possibly v-if?

JavaScript Filtering Techniques

Execute a Gulp task automatically following the installation of an NPM package, no need for

Modifying button text dynamically during save operation with AngularJS

The send_keys() function in Selenium version 3.141.0 works perfectly on Windows, but unfortunately, it is not functioning correctly on Linux Debian 11