Clinton-Epstein Flights / Aaron Brezel

Aaron Brezel

Workspace

Published

Edited

Sep 13, 2019

map = {

const mapMap = DOM.svg(SVGwidth, SVGheight);

const svg = d3.select(mapMap).attr("class", "mapSVG");

svg.style("background-color", "lightgrey")

var projection = d3.geoEqualEarth()

.translate([SVGwidth/2.3,1.8*SVGheight/2])

.scale(270);

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

svg.append("g")

.attr("class", "counties")

.selectAll("path")

.data(topojson.feature(world, world.objects.countries).features)

.enter().append("path")

.attr("d", path)

.style("fill", "white")

.style('fill-opacity', 0.8)

.style('stroke', 'black')

.style('stroke-width', '0.5px');

svg.selectAll(".departures") //write departure circles

.data(data)

.enter()

.append("circle")

.attr("class", "departures")

.attr("cx", function(d) {return projection([d.departure_longitude,d.departure_latitude])[0];})

.attr("cy", function(d) {return projection([d.departure_longitude,d.departure_latitude])[1];})

.attr("r", "6px")

.attr("fill", "black");

svg.selectAll(".arrivals")

.data(data)

.enter()

.append("circle")

.attr("class", "arrivals")

.attr("cx", function(d) {return projection([d.arrival_longitude,d.arrival_latitude])[0];})

.attr("cy", function(d) {return projection([d.arrival_longitude,d.arrival_latitude])[1];})

.attr("r", "6px")

.attr("fill", "black");

svg.selectAll(".departureCitiesNub") //creates the triangles for the city names

.data(data)

.enter()

.append("path")

.attr("d", function(d) {

let departure_cx = projection([d.departure_longitude,d.departure_latitude])[0];

let departure_cy = projection([d.departure_longitude,d.departure_latitude])[1];

return cityNub(departure_cx, departure_cy, d.departure_tooltip)

})

.attr("fill", "#003366")

.style("opacity", 0)

.attr("class", "departureCitiesNub");

svg.selectAll(".arrivalCitiesNub") //creates the triagles for the city names

.data(data)

.enter()

.append("path")

.attr("d", function(d) {

let arrival_cx = projection([d.arrival_longitude,d.arrival_latitude])[0];

let arrival_cy = projection([d.arrival_longitude,d.arrival_latitude])[1];

return cityNub(arrival_cx, arrival_cy, d.arrival_tooltip)

})

.attr("fill", "#003366")

.style("opacity", 0)

.attr("class", "arrivalCitiesNub");

const cityNameGroups = svg.append("g")

const departureCityNameGroups = cityNameGroups.selectAll("g.departureCityGroups") //A group to house text/rectangle pair for each city

.data(data)

.enter()

.append("g")

.attr("class", "departureCityGroups")

.attr("transform", function(d) {

//for the BR,TR, BL, TL positioning to go

let startingX = projection([d.departure_longitude,d.departure_latitude])[0] //center x of the circle

let startingY = projection([d.departure_longitude,d.departure_latitude])[1] //center y of the circle

return cityRect(startingX, startingY, d.departure_tooltip)

})

.style("opacity", 0);

departureCityNameGroups.append("rect")

.attr("width", 105)

.attr("height", 20)

.attr("fill", "#003366");

departureCityNameGroups.append("text")

.attr("x", 5)

.attr("y", 15)

.text(function(d){return d.departure_airport})

.attr("fill", "white");

// departureCityNameGroups.append("text")

const arrivalCityNameGroups = cityNameGroups.selectAll("g.arrivalCityGroups") //A group to house text/rectangle pair for each city

.data(data)

.enter()

.append("g")

.attr("class", "arrivalCityGroups")

.attr("transform", function(d) {

//for the BR,TR, BL, TL positioning to go

let startingX = projection([d.arrival_longitude,d.arrival_latitude])[0] //center x of the circle

let startingY = projection([d.arrival_longitude,d.arrival_latitude])[1] //center y of the circle

return cityRect(startingX, startingY, d.arrival_tooltip)

})

.style("opacity", 0);

arrivalCityNameGroups.append("rect")

.attr("width", 105)

.attr("height", 20)

.attr("fill", "#003366");

arrivalCityNameGroups.append("text")

.text(function(d){return d.arrival_airport})

.attr("x", 5)

.attr("y", 15)

.attr("fill", "white");

const flightPaths = svg.selectAll(".flightPaths")

.data(data)

.enter()

.append("path")

.attr("class", ".flightPaths")

.attr("d", function(d) {

let departureX = projection([d.departure_longitude,d.departure_latitude])[0]

let departureY = projection([d.departure_longitude,d.departure_latitude])[1]

let arrivalX = projection([d.arrival_longitude,d.arrival_latitude])[0]

let arrivalY = projection([d.arrival_longitude,d.arrival_latitude])[1]

const bezelPath = 'M' + departureX +','+ departureY + ' ' + arrivalX + ',' + arrivalY + ''

return bezelPath

})

.style('stroke', 'black')

.style('stroke-width', '0px')

let oldTripNodes = svg.selectAll(".arrivals, .departures") //selects all the cities for a specific trip