base map - UD Spring 2024 - Troy 4/24 / Urban Data Haunted Troy

# base map - UD Spring 2024 - Troy 4/24

d3 = require("d3@6")

mutable wallet = 100

chart = {

const width = 1500,

height = 1550;

const svg = d3.create("svg")

.attr("viewBox", [-350, 500, width-(-100), height-100]); //use in tandom to create a better square

var projection = d3

.geoMercator()

.fitSize([width - 100, height - 240], 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')

bottomText()//call text to get started

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','-350')

.attr('y','525')

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

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

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

.text('Historic Troy')

svg

.append("text")

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

.attr('y','560')

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

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

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

.text('Building Description:')

//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(1200,1875)')

.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()

mutable historyIndex = 0

}

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

.data(samorigin)

.enter()

.append("polyline")

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

.attr('class', 'health3')

.attr('transform', 'translate(1100,1875)')

.style('fill', 'cyan')

.style('stroke','black')

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

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

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')

function bottomText(){

d3.select('text.questionText').remove()

console.log(currentLocation.Name)

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

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

console.log(QuestionData[i].Question)

// change where the question text appears on map

svg

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

.data(QuestionData[i].Question)

.enter()

.append("text")

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

.attr('y','1820')

.attr('class','questionText')

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

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

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

.text(QuestionData[i].Question)

var wrap = svg.selectAll("questionText")

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

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

.data(QuestionData[i].Question)

.enter()

.append("text")

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

.attr('y','1850')

.attr('class','questionText')

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

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

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

.text(QuestionData[i].Answer1)

.on('click',checkAnswer1)

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

.data(QuestionData[i].Question)

.enter()

.append("text")

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

.attr('y','1875')

.attr('class','questionText')

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

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

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

.text(QuestionData[i].Answer2)

.on('click',checkAnswer2)

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

.data(QuestionData[i].Question)

.enter()

.append("text")

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

.attr('y','1900')

.attr('class','questionText')

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

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

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

.text(QuestionData[i].Answer3)

.on('click',checkAnswer3)

function checkAnswer1(){

if(QuestionData[i].Answer1==QuestionData[i].CorrectAnswer){

console.log('right!')

rightAnswer()

} else {

console.log('Wrong!')

d3.selectAll('.health3').remove();

svg.append("rect")

.attr("x", -3000)

.attr("y", -100)

.attr("width", 4250)

.attr("height",1850)

.style("fill", "red")

.style("fill-opacity", "0.75");

svg.append("text")

.attr("x", 200)

.attr("y", 1100)

.text("Wrong answer!")

.style("font-size", "75px")

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

.style("fill", "white")

.style("stroke", "black");

setTimeout(reset, 2000)

}

function checkAnswer2(){

if(QuestionData[i].Answer2==QuestionData[i].CorrectAnswer){

console.log('right!')

rightAnswer()

} else {

console.log('Wrong!')

d3.selectAll('.health3').remove();

svg.append("rect")

.attr("x", -3000)

.attr("y", -100)

.attr("width", 4250)

.attr("height",1850)

.style("fill", "red")

.style("fill-opacity", "0.75");

svg.append("text")

.attr("x", 200)

.attr("y", 1100)

.text("Wrong answer!")

.style("font-size", "75px")

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

.style("fill", "white")

.style("stroke", "black");

setTimeout(reset, 2000)

}

function checkAnswer3(){

if(QuestionData[i].Answer3==QuestionData[i].CorrectAnswer){

console.log('right!')

rightAnswer()

} else {

console.log('Wrong!')

d3.selectAll('.health3').remove();

svg.append("rect")

.attr("x", -3000)

.attr("y", -100)

.attr("width", 4250)

.attr("height",1850)

.style("fill", "red")

.style("fill-opacity", "0.75");

svg.append("text")

.attr("x", 200)

.attr("y", 1100)

.text("Wrong answer!")

.style("font-size", "75px")

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

.style("fill", "white")

.style("stroke", "black");

setTimeout(reset, 2000)

}

function rightAnswer(){

mutable historyIndex = historyIndex +1

mutable currentLocation = mypointsHistory[mutable historyIndex]

console.log(mutable currentLocation)

bottomText()

}

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','black')

.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','800')

.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','800')

.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','800')

.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','800')

.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...................................................................................................................................

}

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.....................................................................................................

//ALSO CHANGE THE COLOR OF GHOST IN THE FILL HERE

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','cyan')

.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){

function correctanswer(){

//console.log('correct')

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

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

//d3.selectAll('text.questionText').remove()

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

.data(samorigin)

.enter()

.append("polyline")

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

.attr('class', 'samIcon')

.attr('transform', function() {

if (QuestionData[i].CorrectAnswer === icon_list2[i].data.Name) {

return 'translate(' + projection([icon_list2[i].data.Long, icon_list2[i].data.Lat])[0] + ',' + projection([icon_list2[i].data.Long, icon_list2[i].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) {

//console.log(icon_list2[i].data.Name)

//console.log(QuestionData[i].Name)

if(icon_list2[i].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','-350')

.attr('y',function(d,i){return 1820+(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',correctanswer)

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

.data(QuestionData[i].Question)

.enter()

.append('text')

.attr('class','QuestionText')

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

.attr('y',function(d,i){return 1510+(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','-350')

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

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

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

.style('fill','black')

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

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

//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()

d3.selectall('text.questionText').remove()

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

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

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

.data(samorigin)

.enter()

.append("polyline")

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

.attr('class', 'samIcon2')

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

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

/*.attr('transform', function() {

if (QuestionData[i].CorrectAnswer === icon_list2[i].data.Name) {

return 'translate(' + projection([icon_list2[i].data.Long, icon_list2[i].data.Lat])[0] + ',' + projection([icon_list2[i].data.Long, icon_list2[i].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(icon_list2[i].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','-350')

.attr('y',function(d,i){return 1500+(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','-350')

.attr('y',function(d,i){return 1510+(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','-350')

.attr('y',function(d,i){return 1520+(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','-350')

.attr('y','590')

.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','-350')

.attr('y','625')

.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','-350')

.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();

}

bbox = FileAttachment("boxerererer.geojson").json()

streets = FileAttachment("Streets.geojson").json()

bldgs = FileAttachment("aa RensBuildingFP.geojson").json()

traffic = FileAttachment("traffic.geojson").json()

fire = FileAttachment("firre4.geojson").json()

mypoints = FileAttachment("troy-historic.geojson").json()

realhistory = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQG8HcXWHsAAw44o2BILgcxKsaDuZx5dlKGLst82ViwY1fb_3X-t6qw0OSYQhdatnHiXJ8stmqsj5ip/pub?gid=0&single=true&output=csv'

mutable currentLocation = mypointsHistory[historyIndex]

mutable historyIndex = 0

mypointsHistory = d3.csv(realhistory,d3.autotype)

haunt = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQG8HcXWHsAAw44o2BILgcxKsaDuZx5dlKGLst82ViwY1fb_3X-t6qw0OSYQhdatnHiXJ8stmqsj5ip/pub?gid=2010654036&single=true&output=csv"

haunted = d3.csv(haunt,d3.autotype)

personal_spots_link = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vStBhbhl6LHas8Euhs72kaCDN1uWQ0PfP8SWvAioLvAHJEgDj16BJcNpIDlb1rxB1aLDyoo4hR5VsQK/pub?output=csv'

personal_spots = d3.csv(personal_spots_link,d3.autoType)

import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"

ghostIconForMap = FileAttachment("ghost icon for map.txt").tsv({array:true})

selected = FileAttachment("whenselected@1.txt").tsv({array:true})

icon_list = {

////create empty list

var list = []

//// loop through google sheets 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

return list

}

icon_list2 = {

///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

}

dashboard = FileAttachment("dashboard@2.txt").tsv({array:true})

dashboard2 = FileAttachment("dashboard 2.txt").tsv({array:true})

dashboard3 = FileAttachment("dashboard3@6.txt").tsv({array:true})

dashboard3border = FileAttachment("dashboard3border.txt").tsv({array:true})

dashboardQuestions = FileAttachment("dashboard questions@2.txt").tsv({array:true})

dashboard3gamerules = FileAttachment("dashboard3gamerules.txt").tsv({array:true})

dashboard_graphics = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(blueHatchLines)

.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.5")

.style('fill', 'blue')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics1 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(purpleHatch)

.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.5")

.style('fill', 'purple')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics2 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(orangeHatch)

.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.5")

.style('fill', 'yellow')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics3 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(realOrangeHatch)

.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.5")

.style('fill', 'orange')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics4 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(realRedHatch)

.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.5")

.style('fill', 'red')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics5 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(realBlueUndercarHatch)

.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.5")

.style('fill', 'blue')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics6 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(white1)

.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.25")

.style('fill', 'white')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics7 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(white2)

.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.25")

.style('fill', 'white')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics8 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(white3)

.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.25")

.style('fill', 'white')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics9 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(detailing)

.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.25")

.style('fill', 'white')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics10 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(centerpanel1)

.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.25")

.style('fill', 'grey')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics11 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(centerpanel2)

.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.25")

.style('fill', 'grey')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics12 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(panelingbot)

.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.25")

.style('fill', 'black')

.style('stroke','black')

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

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

return svg.node();

}

dashboard_graphics13 = {

const width = 170,

height = 170;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(blackdetail)

.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.75")

.style('fill', 'black')

.style('stroke','black')

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

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

return svg.node();

}

dashboard1 =

html`

${dashboard_graphics}

</div>

${dashboard_graphics1}

</div>

${dashboard_graphics2}

</div>

${dashboard_graphics3}

</div>

${dashboard_graphics4}

</div>

${dashboard_graphics5}

</div>

${dashboard_graphics6}

</div>

${dashboard_graphics7}

</div>

${dashboard_graphics8}

</div>

${dashboard_graphics9}

</div>

${dashboard_graphics10}

</div>

${dashboard_graphics11}

</div>

${dashboard_graphics12}

</div>

${dashboard_graphics13}

</div>

${chart}

${viewof DES}

</div>

`

DrawGhostMap = {

var icon = ' '

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

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

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

return icon

}

viewof DES = html`<span style="font-family: Arial; font-size: 24px; fill: cyan;">Spectral Sam’s Back to the Future</span>`;

viewof NSBB = Inputs.radio(["1"], {label: "National State Bank Building?"})

viewof MCCB = Inputs.radio(["1"], {label: "McCarthy Building?"})

viewof IB = Inputs.radio(["1"], {label: "Ilium Building?"})

viewof WLE = Inputs.radio(["1"], {label: "W. & L.E. Gurley Building?"})

viewof CHC = Inputs.radio(["1"], {label: "Church of the Holy Cross?"})

viewof CCC = Inputs.radio(["1"], {label: "Chapel and Cultural Center?"})

viewof PO = Inputs.radio(["1"], {label: "U.S Post Office?"})

viewof WCL = Inputs.radio(["1"], {label: "Winslow Chemical Lab?"})

viewof TX = Inputs.radio(["1"], {label: "Theta Xi?"})

viewof BMH = Inputs.radio(["1"], {label: "Troy Savings Bank and Music Hall?"})

viewof SPC = Inputs.radio(["1"], {label: "St. Paul's Episcopal Church?"})

viewof PT = Inputs.radio(["1"], {label: "Proctor's Theater?"})

viewof FA = Inputs.radio(["1"], {label: "Fire Alarm, Telegraph, and Police Signaling Building?"})

viewof RSE = Inputs.radio(["1"], {label: "RSE?"})

viewof HCH = Inputs.radio(["1"], {label: "Hart-Cluett House?"})

viewof TPL = Inputs.radio(["1"], {label: "Troy Public Library?"})

viewof PH = Inputs.radio(["1"], {label: "Pumpkin House?"})

viewof PS = Inputs.radio(["1"], {label: "Public School No. 10?"})

HistoricDataset = [

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

]

Haunt1Dataset = [

{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},

]

Haunt2Dataset = [

{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},

]

Haunt3Dataset = [

{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},

]

calculatedValues = {

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]

}

calculatedValues[0,1,2]

drawghost = {

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

}

drawghost2 = {

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

}

drawghost3 = {

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

}

cannonbuilding = FileAttachment("CannonBuilding.jpg").url()

chapelculturalcenter = FileAttachment("ChapelCulturalCenter.jpg").url()

firealarmtelegraphandpolicesignalingbuilding = FileAttachment("FireAlarmTelegraphAndPoliceSignalingBuilding.jpg").url()

churchofHolycross = FileAttachment("Churchof HolyCross.jpg").url()

gurleybuilding = FileAttachment("GurleyBuilding.jpg").url()

hartcluett = FileAttachment("HartCluett.jpg").url()

mccarthybuilding = FileAttachment("McCarthyBuilding.jpeg").url()

illiumbuilding = FileAttachment("IlliumBuilding.jpg").url()

proctorStheater = FileAttachment("Proctor-sTheater.jpg").url()

nationalstatebankbuilding = FileAttachment("NationalStateBankBuilding.jpg").url()

pumpkinhouse = FileAttachment("PumpkinHouse.jpg").url()

rse = FileAttachment("RSE.jpg").url()

savingsbank = FileAttachment("SavingsBank.jpg").url()

stpauls = FileAttachment("StPauls.jpg").url()

thetaxi = FileAttachment("ThetaXi.jpg").url()

troypostoffice = FileAttachment("TroyPostOffice.jpg").url()

troypubliclibrary = FileAttachment("TroyPublicLibrary.jpg").url()

winslowchemicallab = FileAttachment("WinslowChemicalLab.webp").url()

school10 = FileAttachment("school10.jpg").url()

samorigin = FileAttachment("SamOrigin.txt").tsv({array:true})

SamIcon = {

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

}

QuestionData= {

var array = []

array.push({Name: "Cannon Building", Question:"Uncle Sam wants to visit a place for education and he hopes to find refuge in this familiar place from the ghost hunters.", Answer1: "Chapel and Cultural Center", Answer2: "Pumpkin House",Answer3: "Public School No. 10",CorrectAnswer: "Public School No. 10"})

array.push({Name: "Public School No. 10", Question:"Uncle Sam, saddened by his school's conversion to housing, sought comfort in RPI's religious building with inclusive signage.", Answer1: "Church of the Holy Cross", Answer2: "Proctor's Theatre",Answer3: "Chapel and Cultural Center",CorrectAnswer: "Chapel and Cultural Center"})

array.push({Name: "Chapel and Cultural Center", Question:"Panicked by the sleek modernity, he fled to his cherished gothic church in Troy, crafted by his beloved architect and friend, Richard Upjohn", Answer1: "Church of the Holy Cross", Answer2: "Proctor's Theatre",Answer3: "Hart-Cluett House",CorrectAnswer: "Church of the Holy Cross"})

array.push({Name: "Church of the Holy Cross", Question: "After finding solace in Upjohn's masterpiece and witnessing a growing congregation, Sam ventured to the site guarding Troy's safety.", Answer1: "Fire Alarm, Telegraph, and Police Signaling Building", Answer2: "Pumpkin House", Answer3: "McCarthy Building",CorrectAnswer: "Fire Alarm, Telegraph, and Police Signaling Building"})

array.push({Name: "Fire Alarm, Telegraph, and Police Signaling Building", Question: "Seeing crowds marvel at the emergency structure, Sam yearned for familiarity and the hardware store where he found comfort.", Answer1: "Hart-Cluett House", Answer2: "RSE", Answer3: "Ilium Building",CorrectAnswer: "Ilium Building"})

array.push({Name: "Ilium Building", Question: "Seeing how his sacred hardware store has been turned into another housing complex, he quickly hurried to his favorite home furnishing store.", Answer1: "Hart-Cluett House", Answer2: "RSE", Answer3: "McCarthy Building",CorrectAnswer: "McCarthy Building"})

array.push({Name: "McCarthy Building", Question: "Shocked by his favorite home furnishing store's disappearance, he hurried to Troy's stunning financial building to find calm.", Answer1: "National State Bank Building", Answer2: "Proctor's Theater", Answer3: "Theta Xi",CorrectAnswer: "National State Bank Building"})

array.push({Name: "National State Bank Building", Question: "Relieved that his favorite bank still stood, Sam hastened to the downtown theater, seeking aid.", Answer1: "Proctor's Theater", Answer2: "Troy Public Library", Answer3: "Troy Saving's Bank and Music Hall",CorrectAnswer: "Proctor's Theater"})

array.push({Name: "Proctor's Theater", Question: "Meeting some old ghost actors he used to watch, they told him to go towards the house with a fruit in the name.", Answer1: "Proctor's Theater", Answer2: "Pumpkin House", Answer3: "Troy Saving's Bank and Music Hall",CorrectAnswer: "Pumpkin House"})

array.push({Name: "Pumpkin House", Question: "After admiring the beauty of the pumpkin house, a pumpkin had a hint stating 'In Troy, RPI, I stand as one of many'. ", Answer1: "Proctor's Theater", Answer2: "Theta Xi", Answer3: "RSE",CorrectAnswer: "RSE"})

array.push({Name: "RSE", Question: "Upon arrival, Sam noticed a clue on a large flag along RSE: Visit the Episcopal church built in 1828 for the next clue.", Answer1: "US Post Office", Answer2: "Theta Xi", Answer3: "St. Paul's Episcopal Church",CorrectAnswer: "St. Paul's Episcopal Church"})

array.push({Name: "St. Paul's Episcopal Church", Question: "The church, unaltered since Sam's time and giving Sam Solace, displayed a message: Next clue at another RPI spot.", Answer1: "Winslow Chemical Lab", Answer2: "Theta Xi", Answer3: "Troy Public Library",CorrectAnswer: "Theta Xi"})

array.push({Name: "Theta Xi", Question: "Theta Xi was empty but a sign was left out stating 'the next clue is at a place that acts as a community hub and provides resources'", Answer1: "Winslow Chemical Lab", Answer2: "Troy Public Library", Answer3: "US Post Office",CorrectAnswer: "Troy Public Library"})

array.push({Name: "Troy Public Library", Question: "The Library retained its familiar charm. Beneath the staircase, a sign read: Next clue at the heart of Troy's art and life.", Answer1: "Winslow Chemical Lab", Answer2: "Troy Saving's Bank and Music Hall", Answer3: "US Post Office",CorrectAnswer: "Troy Saving's Bank and Music Hall"})

array.push({Name: "Troy Saving's Bank and Music Hall", Question: "The building remained unchanged. After admiring its beauty, he found another clue: Another central hub for communication lies ahead.", Answer1: "Winslow Chemical Lab", Answer2: "Hart-Cluett House", Answer3: "US Post Office",CorrectAnswer: "US Post Office"})

array.push({Name: "US Post Office", Question: "Discovering the familiar beauty of the structure. Inside, amid murals, he discovered a clue: Seek the site of cutting-edge surveying instruments.", Answer1: "Winslow Chemical Lab", Answer2: "W. & L.E. Gurley Building", Answer3: "Illium Building",CorrectAnswer: "W. & L.E. Gurley Building"})

array.push({Name: "W. & L.E. Gurley Building", Question: "The grand building, now housing, left Sam disheartened and clueless. He returned to RPI, seeking solace in a beloved academic building.", Answer1: "Winslow Chemical Lab", Answer2: "US Post Office", Answer3: "Theta Xi",CorrectAnswer: "Winslow Chemical Lab"})

array.push({Name: "Winslow Chemical Lab", Question: "After arriving and looking for guidance of where to hide, a note came down saying come to the place which holds all the history of Troy.", Answer1: "Hart-Cluett House", Answer2: "US Post Office", Answer3: "Cannon Building",CorrectAnswer: "Hart-Cluett House"})

array.push({Name: "Hart-Cluett House", Question: "After arriving, his old friends William Howard Hart and Clara Cluett invited him in giving him a place to stay.", Answer1: "You Win! Sam has made it to a safe location! Press the red ghost to reset and play the game again!"})

return array

}

latestui = FileAttachment("latestui@4.txt").tsv({array:true})

newui = FileAttachment("newUI.txt").tsv({array:true})

blueHatchLines = FileAttachment("blue hatch lines.txt").tsv({array:true})

purpleHatch = FileAttachment("PURPLE HATCH@2.txt").tsv({array:true})

orangeHatch = FileAttachment("orange hatch.txt").tsv({array:true})

realOrangeHatch = FileAttachment("real orange hatch@1.txt").tsv({array:true})

realRedHatch = FileAttachment("real red hatch.txt").tsv({array:true})

realBlueUndercarHatch = FileAttachment("real blue undercar hatch.txt").tsv({array:true})

white1 = FileAttachment("white1.txt").tsv({array:true})

white2 = FileAttachment("white2.txt").tsv({array:true})

white3 = FileAttachment("white3.txt").tsv({array:true})

detailing = FileAttachment("detailing.txt").tsv({array:true})

centerpanel1 = FileAttachment("centerpanel1.txt").tsv({array:true})

centerpanel2 = FileAttachment("centerpanel2.txt").tsv({array:true})

panelingbot = FileAttachment("panelingbot@1.txt").tsv({array:true})

blackdetail = FileAttachment("blackdetail@1.txt").tsv({array:true})

One platform to build and deploy the best data apps