Distance Vs Duration Scatter

Scatter plot between Haversign Distance and the Trip Duration from the Google Analytics Course. Trip duration is given in seconds. While the Haversign distance is calculated from the lattitude and longitude coordinates.

Before deciding on Haversign distance, I planned to use the Google maps api to get exact distance between the two coordinates. Additional steps through the API felt unnecessary at the beginning of the analysis. Searched Stack overflow and found Haversign Distance function

Pseudo Code

Representing the distance and duration makes the data very physical in nature, because of the involvement of time and distance dimensions. Lets dive into the Pseudo code of bringing the scatter plot on to the svg.

Visual Pseudo

Create g elements to hold the axes. Append the g elements to the svg by selecting the id = "scatter"
Build x, y linear scales with the range set between the margins.
Creating the marks as circles with center coordinates mapped to the tripDuration and haversign Distance.
Ridetype is identified with the color that assigned to the circle with the Ordinal scales.
Learning about the data point is made easy by the tool tip that populates on the chart left corner.

Chart

Svg Resize

Data Format

Three variables are used for building chart. To get the haversign distance lattitude and longitude coordinates are passed into the haversign function and final data is returned. Simple map() function is used for this purpose. Following that the plotting function is called to render the chart.

The Haversign Function

function rad(x) {return x*Math.PI/180;}

function distHaversine(p1, p2) {
    var R = 6371; // earth's mean radius in km
    var dLat  = rad(p2[0] - p1[0]);
    var dLong = rad(p2[1] - p1[1]);
  
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(rad(p1[0])) * Math.cos(rad(p2[0])) * Math.sin(dLong/2) * Math.sin(dLong/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var dist = R * c;
  
    return dist.toFixed(3);
  }

Code

scatterData = data.map((d) => {
    return {
        rideableType: d.rideable_type,
        member: d.member_casual == "member"? "yes" : "no",
        tripDuration: +d.tripduration / 60,
        startStn: d.start_station_name,
        endStn: d.end_station_name, 
        haversignDist : +distHaversine([d.start_lat,d.start_lng],[d.end_lat,d.end_lng])
    }
})