const width = 1200,

height = 1200;

const svg = d3.create("svg")

.attr("viewBox", [-150, 400, width-0, height-0]); //use in tandom to create a better square

var projection = d3

.geoMercator()

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

var path1 = d3.geoPath().projection(projection);//any path that comes from qgis

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");

var t = svg.selectAll('text')

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

.data(streets.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", '1')

.style("stroke", "red")

g.selectAll("path3")

.data(bldgs.features)

.enter()

.append("path")

.attr('class','outlines')

.attr("d", path3)

.style("fill", "rgb(240,240,240)")

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

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

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

.style("stroke", "black")

//Title...............................................................................................................................................

svg

.append("text")

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

.attr('y','425')

.style('font-family','helvetica')

.style('font-size','24px')

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

.text('Historic Troy')

svg

.append("text")

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

.attr('y','460')

.style('font-family','helvetica')

.style('font-size','18px')

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

.text('Building Description:')

svg

.append("line")

.attr('x1','-140')

.attr('y1','437')

.attr('x2','40')

.attr('y2','437')

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

.style("stroke", "rgb(0,0,0)")

//haunted locations start...........................................................................................................................

//RESET BUTTON HERE TOO

var p = svg.selectAll("polyline")

.data(ghostIconForMap)

.enter()

.append("polyline")

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

.attr('transform', 'translate(500,500)')

.style('fill', 'red')

//.style('stroke','black')

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

.style('stroke-fill', 'black')

.on('click',reset)

//resets to original map when the white barn is clicked on

function reset(){

d3.selectAll('polyline.selected').remove()

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

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

d3.selectAll('polyline.samIcon').remove()

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

}

p.enter().append("polyline")

.data(icon_list)

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

.append("polyline")

.attr('class','icon2')

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

.attr('transform',function(d){return 'translate('+projection([d.data.Long,d.data.Lat])[0]+','+projection([d.data.Long,d.data.Lat])[1]+')'})

.style('stroke','black')

.style('fill','white')

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

.on('mouseover',hauntedInfo)//listens for a mousover, and calls function

.on('mouseout', hauntedInfoOut)

function hauntedInfo(event,d){

d3.select(this).style('fill','cyan')

svg

.append('text')

.attr('class','hauntedText')

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

.attr('y','700')

.style("font-family", "Helvetica")

.style('font-size','1em')

.style('font-weight','10')

.style('fill','rgb(0,0,0)')

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

.text(d.data.Name)

svg

.append('text')

.attr('class','hauntedText')

.attr('x','500')

.attr('y','700')

.style("font-family", "Helvetica")

.style('font-size','.60em')

.style('fill','rgb(0,0,0)')

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

.text(d.data.Description)

//change where description text goes.............................................................................................................

svg

.append("text")

.attr('x','500')

.attr('y','700')

.attr('class','ghostIconForMap_position')

.style('font-family','helvetica')

.style('font-size','4px')

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

.text(d.properties.Name)

svg

.append("text")

.attr('x','500')

.attr('y','700')

.attr('class','ghostIconForMap_position')

.style('font-family','helvetica')

.style('font-size','4px')

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

.text(d.properties.Description)

//change number to see how far text can reach.........................................................................................................

var wrap = svg.selectAll("text.ghostIconForMap_position")

.each(function(d, i) { wrap_text(d3.select(this), 200) });

//Adds pointer line...................................................................................................................................

svg

.append("line")

.attr('x1','500')

.attr('y1','500')

.attr('x2', path1.centroid(d)[0])

.attr('y2', path1.centroid(d)[1])

.attr('class','hauntedLine')

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

.style("stroke", "black")

.style('stroke-dasharray', '6 4')

}

function hauntedInfoOut(event, d){

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

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

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

}

//start of Firehouse/historical data..............................................................................................................

var e = svg.selectAll("polyline")

.data(mypointsHistory)

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

.append('class','historypts')

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

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

.style('fill','green')

.style('stroke','black')

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

var c = svg.selectAll("polyline")

.data(ghostIconForMap)

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

.append("polyline")

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

.attr('transform','translate(1000,2000)')

.style('fill','yellow')

.style('stroke','black')

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

//Start of Clicker.....................................................................................................

c.enter().append("polyline")

.data(icon_list2)

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

.append("polyline")

.attr('class','icon')

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

.attr('transform',function(d){return 'translate('+projection([d.data.Long,d.data.Lat])[0]+','+projection([d.data.Long,d.data.Lat])[1]+')'})

.style('fill','white')

.style('stroke','black')

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

.on('mouseover',historictext)

.on('mouseout',removehistorictext)

.on('click', SamClick)

p.enter().append("polyline")

.data(samorigin)

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

.append("polyline")

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

.attr('class','samIcon')

.attr('transform','translate('+projection([currentLocation.Long,currentLocation.Lat])[0]+','+projection([currentLocation.Long,currentLocation.Lat])[1]+')')

.style('stroke','red')

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

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

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

.style('fill', 'white')

for (let i = 0; i < QuestionData.length; ++i) {//loop through question data

if(currentLocation.Name==QuestionData[i].Name){

t.enter().append('text')//this is the question

.data(QuestionData[i].Question)

.enter()

.append("text")

.attr('x','500')

.attr('y','450')

.attr('class','questionText')

.style('font-family','helvetica')

.style('font-size','20px')

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

.text(QuestionData[i].Question)

t.enter().append('text')//these are the answers

.data(QuestionData[i].Answers)

.enter()

.append("text")

.attr('x','500')

.attr('y',function(d,i){return 500+(i*20)})

.attr('class','questionText')

.style('font-family','helvetica')

.style('font-size','20px')

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

.text(QuestionData[i].Answers)

//add click function here - in the click function, we'll check d(the text your click on), against the correct answer

//compare if(d==QuestionData[i].CorrectAnswer){then display text of CurrentLocation.Destinations}

}

}

function SamClick(event,d){

console.log('SamClick')

d3.selectAll('polyline.samIcon').remove()

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

/*

p.enter().append("polyline")

.data(samorigin)

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

.append("polyline")

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

.attr('class','samIcon')

.attr('transform','translate('+projection([d.data.Long,d.data.Lat])[0]+','+projection([d.data.Long,d.data.Lat])[1]+')')

.style('stroke','red')

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

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

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

.style('fill', 'white')

*/

for (let i = 0; i < QuestionData.length; i=i+1) {

console.log(d.data.Name)

console.log(QuestionData[i].Name)

if(d.data.Name==QuestionData[i].Name){//match our clicked icon name w/ time scare name

console.log('match')

//write our time here:

t.enter().append('text')

.data(QuestionData[i].question)

.enter()

.append('text')

.attr('class','QuestionText')

.attr('x','550')

.attr('y',function(d,i){return 500+(i*20)})

.style("font-family", "Helvetica")

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

.style('fill','black')

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

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

// .on('click',haunt)

t.enter().append('text')

.data(QuestionData[i].question)

.enter()

.append('text')

.attr('class','QuestionText')

.attr('x','550')

.attr('y',function(d,i){return 500+(i*20)})

.style("font-family", "Helvetica")

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

.style('fill','black')

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

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

t.enter().append('text')

.data(QuestionData[i].question)

.enter()

.append('text')

.attr('class','QuestionText')

.attr('x','550')

.attr('y',function(d,i){return 500+(i*20)})

.style("font-family", "Helvetica")

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

.style('fill','black')

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

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

}

}

}

//remove any cow icon

d3.selectAll('polyline.selected').remove()

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

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

//draw cow icon at click

// c.enter().append("polyline")

// .data(selected)

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

//.append("polyline")

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

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

// .attr('transform','translate('+projection([d.data.Long,d.data.Lat])[0]+','+projection([d.data.Long,d.data.Lat])[1]+')')

// .style('fill','cyan')

//show images here

//information for removing text........................................................................................................................

function historictext(event,d){

console.log(d)

//change where description text goes..................................................................................................................

svg

.append("text")

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

.attr('y','490')

.attr('class','mypoints_position')

.style('font-family','helvetica')

.style('font-size','18px')

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

.text(d.data.Name)

svg

.append("text")

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

.attr('y','525')

.attr('class','mypoints_position')

.style('font-family','helvetica')

.style('font-size','18px')

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

.text(d.data.Description)

//change number to see how far text can reach.........................................................................................................

var wrap = svg.selectAll("text.mypoints_position")

.each(function(d, i) { wrap_text(d3.select(this), 200) });

//Adds pointer line...................................................................................................................................

svg

.append("line")

.attr('x1','-140')

.attr('y1','525')

.attr('x2', path1.centroid(d)[0])

.attr('y2', path1.centroid(d)[1])

.attr('class','fireLine')

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

.style("stroke", "black")

.style('stroke-dasharray', '6 4')

}

function removehistorictext(){

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

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

}

return svg.node();

}

var array = []

//add restaurants and menu items to array

array.push({name:"National State Bank Building",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"McCarthy Building",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Llium Building",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Church of the Holy Cross",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Chapel and Cultural Center",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Winslow Chemical Lab",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Theta Xi",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Troy Savings Bank and Music Hall",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Proctor's Theater",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"W. & L.E. Gurley Building",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Hart-Cluett House",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Troy Public Library",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Pumpkin House",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Public School No. 10",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"St. Paul's Episcopal Church",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"U.S Post Office",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"RSE",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

array.push({name:"Fire Alarm, Telegraph, and Police Signaling Building",clue:[{hours:"1",scare:'30'},{hours:"2",scare:'40'},{hours:"3",scare:'60'}]})

return array

////create empty list

var list = []

for (let i = 0; i < haunted.length; i++) {

//function to add items to a list

list.push({data:haunted[i],pts:ghostIconForMap})

}

return list

///create empty list

var list = []

///loop through google sheets list

for (let i = 0; i < mypointsHistory.length; i++) {

//function to add item to a list

list.push({data:mypointsHistory[i],pts:ghostIconForMap})

}

//add icon points to each google sheet item

////addd combined data to empty list

//return new list

return list

const width = 1200,

height = 1200;

const svg = d3.create("svg")

.attr("viewBox",[-175,375,width,height]);

var p = svg.selectAll("polyline")

.data(dashboard3gamerules)

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

.append("polyline")

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

.attr('transform', 'translate(0,0)')

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

.style('fill', 'white')

.style('stroke','black')

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

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

return svg.node();

html`

<div class='inputs' style='position:absolute;width:1500px;top:275px;left:910px'>

${viewof WCL}

</div>

<div class='inputs' style='position:absolute;width:1500px;top:315px;left:910px'>

${viewof TX}

</div>

<div class='inputs' style='position:absolute;width:1500px;top:335px;left:910px'>

${viewof BMH}

</div>

<div class='inputs' style='position:absolute;width:1500px;top:375px;left:910px'>

${viewof SPC}

</div>

<div class='inputs' style='position:absolute;width:1500px;top:415px;left:910px'>

${viewof PT}

</div>

<div class='inputs' style='position:absolute;width:1500px;top:435px;left:910px'>

${viewof FA}

</div>

<div class='inputs' style='position:absolute;width:1500px;top:505px;left:910px'>

${viewof RSE}

</div>

<div class='inputs' style='position:absolute;width:1500px;top:525px;left:910px'>

${viewof HCH}

</div>

<div class='inputs' style='position:absolute;width:1500px;top:555px;left:910px'>

${viewof TPL}

</div>

<div class='inputs' style='position:absolute;width:1500px;top:580px;left:910px'>

${viewof PH}

</div>

<div class='inputs' style='position:absolute;width:1500px;top:605px;left:910px'>

${viewof PS}

</div>

<div class='text' style='position:absolute;top:650px;left:900px;font-family:helvetica;font-size:12px'>

${md`Ghost Option 1: **${calculatedValues[0]}** `}

</div>

<div class='star' style='position:absolute;width:500px;top:700px;left:950px'>

${DrawGhostMap}

</div>

<div class='text' style='position:absolute;top:650px;left:950px;font-family:helvetica;font-size:12px'>

${md`Ghost Option 2: **${calculatedValues[1]}** `}

</div>

<div class='star' style='position:absolute;width:200px;top:700px;left:950px'>

${DrawGhostMap}

</div>

<div class='text' style='position:absolute;top:650px;left:1000px;font-family:helvetica;font-size:12px'>

${md`Ghost Option 3: **${calculatedValues[2]}** `}

</div>

<div class='star' style='position:absolute;width:200px;top:700px;left:950px'>

${DrawGhostMap}

</div>

</div>

`

var icon = ' '

if(calculatedValues[0]>=5) {icon = drawghost}

if(calculatedValues[1]>=4) {icon = drawghost2}

if(calculatedValues[2]>=6) {icon = drawghost3}

return icon

{name:"NSBB",haunt: 1},

]

{name:"NSBB",haunt: 0},

{name:"MCCB",haunt: 0},

{name:"IB",haunt: 1},

{name:"WLE",haunt: 0},

{name:"CHC",haunt: 0},

{name:"CCC",haunt: 0},

{name:"PO",haunt: 0},

{name:"WCL",haunt: 1},

{name:"TX",haunt: 1},

{name:"BMH",haunt: 1},

{name:"SPC",haunt: 0},

{name:"PT",haunt: 0},

{name:"FA",haunt: 0},

{name:"RSE",haunt: 0},

{name:"HCH",haunt: 0},

{name:"TPL",haunt: 0},

{name:"PH",haunt: 1},

{name:"PS",haunt: 0},

{name:"NSBB",haunt: 0},

{name:"MCCB",haunt: 0},

{name:"IB",haunt: 0},

{name:"WLE",haunt: 0},

{name:"CHC",haunt: 0},

{name:"CCC",haunt: 0},

{name:"PO",haunt: 0},

{name:"WCL",haunt: 0},

{name:"TX",haunt: 0},

{name:"BMH",haunt: 0},

{name:"SPC",haunt: 1},

{name:"PT",haunt: 1},

{name:"FA",haunt: 0},

{name:"RSE",haunt: 0},

{name:"HCH",haunt: 1},

{name:"TPL",haunt: 0},

{name:"PH",haunt: 0},

{name:"PS",haunt: 1},

{name:"NSBB",haunt: 1},

{name:"MCCB",haunt: 0},

{name:"IB",haunt: 0},

{name:"WLE",haunt: 1},

{name:"CHC",haunt: 1},

{name:"CCC",haunt: 0},

{name:"PO",haunt: 1},

{name:"WCL",haunt: 0},

{name:"TX",haunt: 0},

{name:"BMH",haunt: 0},

{name:"SPC",haunt: 0},

{name:"PT",haunt: 0},

{name:"FA",haunt: 0},

{name:"RSE",haunt: 0},

{name:"HCH",haunt: 1},

{name:"TPL",haunt: 1},

{name:"PH",haunt: 0},

{name:"PS",haunt: 0},

var haunt1 = 0

var haunt2 = 0

var haunt3 = 0

haunt1 = haunt1+Haunt1Dataset[0].haunt*NSBB

haunt1 = haunt1+Haunt1Dataset[1].haunt*MCCB

haunt1 = haunt1+Haunt1Dataset[2].haunt*IB

haunt1 = haunt1+Haunt1Dataset[3].haunt*WLE

haunt1 = haunt1+Haunt1Dataset[4].haunt*CHC

haunt1 = haunt1+Haunt1Dataset[5].haunt*CCC

haunt1 = haunt1+Haunt1Dataset[6].haunt*PO

haunt1 = haunt1+Haunt1Dataset[7].haunt*WCL

haunt1 = haunt1+Haunt1Dataset[8].haunt*TX

haunt1 = haunt1+Haunt1Dataset[9].haunt*BMH

haunt1 = haunt1+Haunt1Dataset[10].haunt*SPC

haunt1 = haunt1+Haunt1Dataset[11].haunt*PT

haunt1 = haunt1+Haunt1Dataset[12].haunt*FA

haunt1 = haunt1+Haunt1Dataset[13].haunt*RSE

haunt1 = haunt1+Haunt1Dataset[14].haunt*HCH

haunt1 = haunt1+Haunt1Dataset[15].haunt*TPL

haunt1 = haunt1+Haunt1Dataset[16].haunt*PH

haunt1 = haunt1+Haunt1Dataset[17].haunt*PS

haunt2 = haunt2+Haunt2Dataset[0].haunt*NSBB

haunt2 = haunt2+Haunt2Dataset[1].haunt*MCCB

haunt2 = haunt2+Haunt2Dataset[2].haunt*IB

haunt2 = haunt2+Haunt2Dataset[3].haunt*WLE

haunt2 = haunt2+Haunt2Dataset[4].haunt*CHC

haunt2 = haunt2+Haunt2Dataset[5].haunt*CCC

haunt2 = haunt2+Haunt2Dataset[6].haunt*PO

haunt2 = haunt2+Haunt2Dataset[7].haunt*WCL

haunt2 = haunt2+Haunt2Dataset[8].haunt*TX

haunt2 = haunt2+Haunt2Dataset[9].haunt*BMH

haunt2 = haunt2+Haunt2Dataset[10].haunt*SPC

haunt2 = haunt2+Haunt2Dataset[11].haunt*PT

haunt2 = haunt2+Haunt2Dataset[12].haunt*FA

haunt2 = haunt2+Haunt2Dataset[13].haunt*RSE

haunt2 = haunt2+Haunt2Dataset[14].haunt*HCH

haunt2 = haunt2+Haunt2Dataset[15].haunt*TPL

haunt2 = haunt2+Haunt2Dataset[16].haunt*PH

haunt2 = haunt2+Haunt2Dataset[17].haunt*PS

haunt3 = haunt3+Haunt3Dataset[0].haunt*NSBB

haunt3 = haunt3+Haunt3Dataset[1].haunt*MCCB

haunt3 = haunt3+Haunt3Dataset[2].haunt*IB

haunt3 = haunt3+Haunt3Dataset[3].haunt*WLE

haunt3 = haunt3+Haunt3Dataset[4].haunt*CHC

haunt3 = haunt3+Haunt3Dataset[5].haunt*CCC

haunt3 = haunt3+Haunt3Dataset[6].haunt*PO

haunt3 = haunt3+Haunt3Dataset[7].haunt*WCL

haunt3 = haunt3+Haunt3Dataset[8].haunt*TX

haunt3 = haunt3+Haunt3Dataset[9].haunt*BMH

haunt3 = haunt3+Haunt3Dataset[10].haunt*SPC

haunt3 = haunt3+Haunt3Dataset[11].haunt*PT

haunt3 = haunt3+Haunt3Dataset[12].haunt*FA

haunt3 = haunt3+Haunt3Dataset[13].haunt*RSE

haunt3 = haunt3+Haunt3Dataset[14].haunt*HCH

haunt3 = haunt3+Haunt3Dataset[15].haunt*TPL

haunt3 = haunt3+Haunt3Dataset[16].haunt*PH

haunt3 = haunt3+Haunt3Dataset[17].haunt*PS

return [haunt1, haunt2, haunt3]

const width = 90,

height = 60;

const svg = d3.create("svg")

.attr("viewBox", [-40, -30, width, height]);

var p = svg.selectAll("polyline")

.data(ghostIconForMap)

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

.append("polyline")

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

.style('fill','cyan')

.style('stroke','black')

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

return svg.node();

const width = 90,

height = 60;

const svg = d3.create("svg")

.attr("viewBox", [-40, -30, width, height]);

var p = svg.selectAll("polyline")

.data(ghostIconForMap)

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

.append("polyline")

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

.style('fill','white')

.style('stroke','black')

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

return svg.node();

const width = 90,

height = 60;

const svg = d3.create("svg")

.attr("viewBox", [-40, -30, width, height]);

var p = svg.selectAll("polyline")

.data(ghostIconForMap)

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

.append("polyline")

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

.style('fill','yellow')

.style('stroke','black')

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

return svg.node();

const width = 100,

height = 100;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(samorigin)

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

.append("polyline")

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

.attr('transform', 'translate(0,0)')

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

.style('fill', 'red')

.style('stroke','red')

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

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

return svg.node();

var array = []

array.push({Name: "Public School No. 10", Question:"this is a question",Answers:[{Answer1: "St. Barnabas Episcopal Church"},{Answer2: "Troy Public Library"},{Answer3: "Troy's Waste Manufacturing Company Building"}],CorrectAnswer:"Troy Public Library"} )

array.push({Name: "Troy Public Library", Question:"this is a question",Answers:[{Answer1: "Pumpkin House"},{Answer2: "Oakwood Ave Presbyterian Church"},{Answer3: "Van Zandt Collar and Cuff Factory"}],CorrectAnswer:"Pumpkin House"} )

array.push({Name: "Pumpkin House", Question:"this is a question",Answers:[{Answer1: "Esek Bussey Firehouse"},{Answer2: "Fire Alarm, Telegraph, and Police Signaling Building"},{Answer3: "Gardner Earl Memorial Chapel"}],CorrectAnswer:"Fire Alarm, Telegraph, and Police Signaling Building"} )

array.push({Name: "Fire Alarm, Telegraph, and Police Signaling Building", Question:"this is a question",Answers:[{Answer1: "Jacob H. Patten House"},{Answer2: "Powers House"},{Answer3: "Proctor's Theater"}],CorrectAnswer:"Proctor's Theater"} )

array.push({Name: "Proctor's Theater", Question:"this is a question",Answers:[{Answer1: "Troy Saving's Bank and Music Hall"},{Answer2: "Kate Mullany House"},{Answer3: "Herman Melville House"}],CorrectAnswer:"Troy Saving's Bank and Music Hall"} )

array.push({Name: "Troy Saving's Bank and Music Hall", Question:"this is a question",Answers:[{Answer1: "Lion Factory"},{Answer2: "Trinity Church"},{Answer3: "St. Paul's Episcopal Church"}],CorrectAnswer:"St. Paul's Episcopal Church"} )

array.push({Name: "St. Paul's Episcopal Church", Question:"this is a question",Answers:[{Answer1: "Lansingburgh Village Cemetery"},{Answer2: "McCarthy Building"},{Answer3: "Internation Shirt and Collar Company"}],CorrectAnswer:"McCarthy Building"} )

array.push({Name: "McCarthy Building", Question:"this is a question",Answers:[{Answer1: "Lansingburgh Academy"},{Answer2: "Henry Koon House"},{Answer3: "National State Bank Building"}],CorrectAnswer:"National State Bank Building"} )

array.push({Name: "National State Bank Building", Question:"this is a question",Answers:[{Answer: "Hart-Cluett House"},{Answer: "RSE"},{Answer: "W. & L.E. Gurley Building"}],CorrectAnswer:"W. & L.E. Gurley Building"} )