{ emoji: "🤩", feeling: "(10/10 Highly recommend!)",},

{ emoji: "🤷", feeling: "(It is a one and done trip)" },

{ emoji: "💩", feeling: "(1/10 Not my rodeo)" }

]

var totalEmoji = 0

totalEmoji = totalEmoji +(cemetery)

totalEmoji = totalEmoji +(bat)

totalEmoji = totalEmoji +(ferry)

totalEmoji = totalEmoji +(rockawaybeach)

totalEmoji = totalEmoji +(twa)

var totalFeeling = 0

totalFeeling = totalFeeling +(cemetery)

totalFeeling = totalFeeling +(bat)

totalFeeling = totalFeeling +(ferry)

totalFeeling = totalFeeling +(rockawaybeach)

totalFeeling = totalFeeling +(twa)

return [totalEmoji, totalFeeling]

{name:"cemetery", time:2, experience:"60"},

{name:"bat", time:1.5, experience:"95"},

{name:"ferry", time:0.5, experience:"90"},

{name:"rockawaybeach", time:.5, experience:"85"},

{name:"twa", time:2, experience:"100"},

]

var totalTime = 0

totalTime = totalTime +(cemetery)

totalTime = totalTime +(bat)

totalTime = totalTime +(ferry)

totalTime = totalTime +(rockawaybeach)

totalTime = totalTime +(twa)

var totalExperience = 0

totalExperience = totalExperience +(triptime[0].experience*cemetery)

totalExperience = totalExperience +(triptime[1].experience*bat)

totalExperience = totalExperience +(triptime[2].experience*ferry)

totalExperience = totalExperience +(triptime[3].experience*rockawaybeach)

totalExperience = totalExperience +(triptime[4].experience*twa)

return [totalTime,totalExperience]

const width = 700,

height = 700;

const svg = d3.create("svg")

.attr("viewBox", [9, 68, width-100, height-80]);

// Use Mercator projectio

svg.append('image')

.attr('href',streetsUnderlay)

//.attr('class','spotImage')

.attr('x', '-9')

.attr('y','1')

.attr('width', 635)

.attr('height', 575)

return svg.node();

const width = 700,

height = 700;

const svg = d3.create("svg")

.attr("viewBox", [9, 68, width-100, height-80]);

// Use Mercator projection

var projection = d3

.geoMercator()

.fitSize([width - 60, height - 50], boundingBox);

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

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

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

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

var g = svg.append("g").attr("id", "paths");

g.selectAll("path3") //d3 geopath

.data(boroughs1.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','1')

.style("stroke-width", '1.25')

.style("stroke", "slategrey")

g.selectAll("path3") //d3 geopath

.data(boroughs2.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".1")

.style('stroke-opacity','1')

.style("stroke-width", '.5')

.style("stroke", "slategrey")

g.selectAll("path3") //d3 geopath

.data(parks2V2.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "lightsteelblue")

.style("fill-opacity", ".5")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightsteelgrey")

g.selectAll("path3") //d3 geopath

.data(parks3.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style("fill-opacity", ".5")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightsteelgrey")

g.selectAll("path3") //d3 geopath

.data(waterfrontParks2.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".1")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightslategrey")

g.selectAll("path3") //d3 geopath

.data(parkWaters.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "black")

g.selectAll("path2") //d3 geopath

.data(ferryLine.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','1')

.style("stroke-width", '2')

.style("stroke", "dodgerblue")

.style('stroke-dasharray','2 2')

g.selectAll("path2") //d3 geopath

.data(trail1.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','1')

.style("stroke-width", '2')

.style("stroke", "dodgerblue")

.style('stroke-dasharray','2 2')

g.selectAll("path2") //d3 geopath

.data(trail2.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','1')

.style("stroke-width", '2')

.style("stroke", "dodgerblue")

.style('stroke-dasharray','2 2')

var c = svg.selectAll("circle") //d3 geopath

.data(spots)

.enter() //there are more data than elements, this selects them

.append("circle") //appends path to data

.attr("cx", function(d) {return projection([d.longitude, d.latitude])[0]})

.attr("cy", function(d) {return projection([d.longitude, d.latitude])[1]})

.attr('r',4)

.attr('fill',colorType)

.style('fill-opacity','2')

.style('stroke','black')

.style('stroke-width','.8')

.on('mouseover', spotText)

.on('mouseout', removespotText)

function colorType(d,i){

var color = 'steelblue'

if(d.type=='Food'){color = 'steelblue'}

if(d.type=='Academics'){color = 'steelblue'}

if(d.type=='House'){color = 'steelblue'}

if(d.type=='Sports Facility'){color = 'steelblue'}

if(d.type=='Social Facility'){color = 'steelblue'}

if(d.type=='Market'){color = 'steelblue'}

if(d.type=='Field'){color = 'steelblue'}

return color

}

svg.append('text')

//.attr('class','spotInfo')

.attr('x','145')

.attr('y','585')

.attr('font-family','Helvetica')

.attr('font-size','.8em')

.attr('font-weight','light')

.attr('text-anchor','end')

.text(totalValues[0])

svg.append('text')

//.attr('class','spotInfo')

.attr('x','40')

.attr('y','585')

.attr('font-family','Helvetica')

.attr('font-size','.8em')

.attr('font-weight','bold')

.attr('text-anchor','start')

.text('Total Hours: ')

svg.append('text')

//.attr('class','spotInfo')

.attr('x','190')

.attr('y','605')

.attr('font-family','Helvetica')

.attr('font-size','.8em')

.attr('font-weight','light')

.attr('text-anchor','end')

.text(totalValues[1])

svg.append('text')

//.attr('class','spotInfo')

.attr('x','40')

.attr('y','605')

.attr('font-family','Helvetica')

.attr('font-size','.8em')

.attr('font-weight','bold')

.attr('text-anchor','start')

.text('Total Experience: ')

svg.append("rect")

.attr("x", 33)

.attr("y", 570)

.attr("width", 162)

.attr("height", 44)

.attr('fill', 'lightsteelblue')

.style('fill-opacity','.1')

.style('stroke', 'slategrey')

.style('stroke-width', '0.75')cirlce

if(emojis.feeling == "(10/10 Highly recommend!)"){

svg.selectAll('text.emojitexts').remove()

svg.append('text')

.attr('class','emojitexts')

.attr('x','110')

.attr('y','637')

.attr('font-family','Helvetica')

.attr('font-size','.75em')

.attr('text-anchor','middle')

.attr('font-weight','bold')

.attr('fill', 'steelblue')

.text(tripemoji[0].feeling)

}

if(emojis.feeling == "(It is a one and done trip)"){

svg.selectAll('text.emojitexts').remove()

svg.append('text')

.attr('class','emojitexts')

.attr('x','120')

.attr('y','637')

.attr('font-family','Helvetica')

.attr('font-size','.75em')

.attr('text-anchor','middle')

.attr('font-weight','bold')

.attr('fill', 'steelblue')

.text(tripemoji[1].feeling)

}

if(emojis.feeling == "(1/10 Not my rodeo)"){

svg.selectAll('text.emojitexts').remove()

svg.append('text')

.attr('class','emojitexts')

.attr('x','100')

.attr('y','637')

.attr('font-family','Helvetica')

.attr('font-size','.75em')

.attr('text-anchor','middle')

.attr('font-weight','bold')

.attr('fill', 'steelblue')

.text(tripemoji[2].feeling)

}

if(totalValues[0]>7){

svg.append('text')

.attr('class','spots')

.attr('x','350')

.attr('y','120')

.attr('font-family','Helvetica')

.attr('font-size','1.4em')

.attr('text-anchor','middle')

.attr('font-weight','bold')

.text('⌛TOO SLOW⌛')

}

if(totalValues[0]<5){

svg.append('text')

.attr('class','spots')

.attr('x','350')

.attr('y','120')

.attr('font-family','Helvetica')

.attr('font-size','1.4em')

.attr('text-anchor','middle')

.attr('font-weight','bold')

.text('🏃🏻TOO RUSHED🏃🏻')

}

if(totalValues[0]<7 && totalValues[1]>450 ){

svg.append('text')

.attr('class','spots')

.attr('x','350')

.attr('y','120')

.attr('font-family','Helvetica')

.attr('font-size','1.4em')

.attr('text-anchor','middle')

.attr('font-weight','bold')

.text('💯 PERFECT TRIP 💯')

}

function spotText(event,d){

d3.select(this).attr('fill','dodgerblue')

.attr('r', 6)

.style('stroke', 'dodgerblue')

.style("stroke-opacity",'.5')

.style("stroke-width", '5')

svg.append('text')

.attr('class','spots')

.attr('x', '290')

.attr('y','547')

.attr('font-family','Helvetica')

.attr('font-size', '.7em')

.attr('text.anchor','start')

.attr('font-weight', 'bold')

.text(d.name)

svg.append('text')

.attr('class','spots')

.attr('x', '290')

.attr('y','565')

.attr('font-family','Helvetica')

.attr('font-size', '.65em')

.attr('text.anchor','start')

.attr('font-weight', 'normal')

.text(d.description)

svg.append('line')

.attr('class','spotLine')

.attr('x1', '290')

.attr('y1', '553')

.attr('x2', projection([d.longitude, d.latitude])[0])

.attr('y2', '553')

.style('stroke-width','.5')

.style('stroke','black')

.style('stroke-dasharray','2 2')

svg.append('line')

.attr('class','spotLine')

.attr('x1', projection([d.longitude, d.latitude])[0])

.attr('y1', '553')

.attr('x2', projection([d.longitude, d.latitude])[0])

.attr('y2', projection([d.longitude, d.latitude])[1])

.style('stroke-width','.7')

.style('stroke','darkblue')

.style('stroke-dasharray','2 2')

}

function removespotText(event,d){

d3.select(this).attr('fill',colorType)

d3.select(this).attr('r', 4)

d3.select(this).style('stroke-opacity','.65')

d3.select(this).style('stroke-width', '1')

d3.selectAll('text.spots').remove()

d3.selectAll('line.spotLine').remove()

}

g.selectAll("path2") //d3 geopath

.data(batBoundary.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".3")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightslategrey")

.on('mouseover', spotImage3)

.on('mouseout', removespotImage3)

g.selectAll("path2") //d3 geopath

.data(rockawayBeachBoundary.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".3")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightslategrey")

.on('mouseover', spotImage2)

.on('mouseout', removespotImage2)

g.selectAll("path2") //d3 geopath

.data(cemeteryBoundary.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".3")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightslategrey")

.on('mouseover', spotImage1)

.on('mouseout', removespotImage1)

g.selectAll("path4") //d3 geopath

.data(twaBoundary2.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path4) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".3")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightslategrey")

.on('mouseover', spotImage)

.on('mouseout', removespotImage)

function spotImage(event,d){

console.log("hello")

d3.select(this).attr('fill','lavenderblush')

svg.append('image')

.attr('xlink:href','https://api.time.com/wp-content/uploads/2019/08/twa-hotel-queens-new-york.jpg')

.attr('class','spotImage')

.attr('x', '210')

.attr('y','570')

.attr('width', 200)

.attr('height', 100)

}

function removespotImage(event,d){

d3.select(this).attr('fill',colorType)

d3.selectAll('image.spotImage').remove()

}

function spotImage1(event,d){

d3.select(this).attr('fill','lavenderblush')

svg.append('image')

.attr('xlink:href','https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Green-Wood_Cemetery_gate_%2853784p%29_cropped.jpg/1200px-Green-Wood_Cemetery_gate_%2853784p%29_cropped.jpg')

.attr('class','spotImage1')

.attr('x', '210')

.attr('y','570')

.attr('width', 200)

.attr('height', 100)

console.log("hello")

}

function removespotImage1(event,d){

d3.select(this).attr('fill',colorType)

d3.selectAll('image.spotImage1').remove()

}

function spotImage2(event,d){

d3.select(this).attr('fill','lavenderblush')

svg.append('image')

.attr('xlink:href','https://media.timeout.com/images/103881813/750/562/image.jpg')

.attr('class','spotImage2')

.attr('x', '210')

.attr('y','570')

.attr('width', 200)

.attr('height', 100)

}

function removespotImage2(event,d){

d3.select(this).attr('fill',colorType)

d3.selectAll('image.spotImage2').remove()

}

function spotImage3(event,d){

d3.select(this).attr('fill','lavenderblush')

svg.append('image')

.attr('xlink:href','https://www.nycgo.com/images/venues/30801/brooklyn-army-terminal-sunset-park-manhattan-nyc-freightnyc_july_2018-071__large.jpg')

.attr('class','spotImage3')

.attr('x', '210')

.attr('y','570')

.attr('width', 200)

.attr('height', 100)

}

function removespotImage3(event,d){

d3.select(this).attr('fill',colorType)

d3.selectAll('image.spotImage3').remove()

}

/*

svg.append('image')

.attr('href',streetsUnderlay)

//.attr('class','spotImage')

.attr('x', '-9')

.attr('y','1')

.attr('width', 635)

.attr('height', 575)

*/

return svg.node();

}

const width = 1200,

height = 800;

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

var g = svg.append("g").attr("id", "paths");

var p = svg.selectAll('polyline')

g.selectAll("path3") //d3 geopath

.data(dahsboardFrame01) //get data to define path

.enter() //there are more data than elements, this selects them

.append('polyline') //appends path to data

.attr('class','outlines')

.attr('points', function(d) {return d})

.style("fill", "steelblue")

.style("fill-opacity", '.7')

.style('stroke-opacity','1')

.style("stroke-width", '2')

.style("stroke", "slategrey")

var p = svg.selectAll('polyline')

g.selectAll("path3") //d3 geopath

.data(dahsboardFrame02) //get data to define path

.enter() //there are more data than elements, this selects them

.append('polyline') //appends path to data

.attr('class','outlines')

.attr('points', function(d) {return d})

.style("fill", "steelblue")

.style("fill-opacity", '.1')

.style('stroke-opacity','1')

.style("stroke-width", '2')

.style("stroke", "slategrey")

var p = svg.selectAll('polyline')

g.selectAll("path3") //d3 geopath

.data(dahsboardFrame03) //get data to define path

.enter() //there are more data than elements, this selects them

.append('polyline') //appends path to data

.attr('class','outlines')

.attr('points', function(d) {return d})

.style("fill", "white")

.style('stroke-opacity','1')

.style("stroke-width", '2')

.style("stroke", "slategrey")

return svg.node();

var button = ' '

var e = emojis

if(e == '🤩')(button = '(10/10 Highly recommend!)')

if(e == '🤷')(button = '(It is a one and done kinda trip)')

if(e == '💩')(button = '(1/10 Not my rodeo)')

return button

${viewof cemetery}

${viewof bat}

${viewof ferry}

${viewof rockawaybeach}

${viewof twa}

${viewof emojis}