SAFETY COPY 230412_Punk The Stasi here we go again / Anish De

# SAFETY COPY 230412_Punk The Stasi here we go again

d3 = require("d3@6")

concertSTOPS = FileAttachment("concertnight_004@2.csv").csv()

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

viewof stops2 = Inputs.radio(["0", "1", "2", "3"], {value:"0"})

border_01 = FileAttachment("border_01.png").url()

border_02 = FileAttachment("border_02@1.png").url()

border_03 = FileAttachment("border_03.png").url()

border_04 = FileAttachment("border_04.png").url()

stops

dashboard =

html`

${chart}

</div>

${pageDisplay}

</div>

${time}

${viewof startTimerButton}

</div>

`

pageDisplay = {

//this cell controls the content that goes into the dashboard depending on my 'stops' radio button

var currentPage

if(stops == "39"){//this is the initial step of the gam

currentPage = html`

${concertSTOPS[stops].message}

${viewof initial}

`

set(viewof caught001,"I think it's time to retire")

}

/*

if(stops == "BR"){

//have the br question, or some question on the way to br

}

*/

/*

if(stops == "BH"){

//have the berghaim question, or some question on the way to br

}

if(stops == "2"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof parkStop}

`

set(viewof initial,"thinking...")

}

if(stops == "3"){

currentPage = html`

${concertSTOPS[stops].prompt}//question from sheets file

${viewof eyesOnly}//this is the input, it contains the answers to the question

`

set(viewof parkStop,"thinking.....")// reset the previous input to a neutral value(you don't want the input to remain on the correct value)

}

*/

if(stops == "0"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof alpha}

`

set(viewof initial,"Let me think...")

}

if(stops == "1"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop001}

`

set(viewof alpha,"Let me think...")

}

if(stops == "2"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop002}

`

set(viewof alpha,"Let me think...")

}

if(stops == "3"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop003}

`

set(viewof bravo,"Let me think...")

}

if(stops == "4"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop004}

`

set(viewof bravo,"Let me think...")

}

if(stops == "5"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop005}

`

set(viewof charlie,"Let me think...")

}

if(stops == "6"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop006}

`

set(viewof charlie,"Let me think...")

}

if(stops == "7"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop007}

`

set(viewof delta,"Let me think...")

}

if(stops == "8"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop008}

`

set(viewof delta,"Let me think...")

}

if(stops == "9"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop009}

`

set(viewof echo,"Let me think...")

}

if(stops == "10"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop010}

`

set(viewof echo,"Let me think...")

}

if(stops == "11"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop011}

`

set(viewof foxtrot,"Let me think...")

}

if(stops == "12"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop012}

`

set(viewof foxtrot,"Let me think...")

}

if(stops == "13"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop013}

`

set(viewof golf,"Let me think...")

}

if(stops == "14"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop014}

`

set(viewof golf,"Let me think...")

}

if(stops == "15"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop015}

`

set(viewof hotel,"Let me think...")

}

if(stops == "16"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop016}

`

set(viewof hotel,"Let me think...")

}

if(stops == "17"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop017}

`

set(viewof india,"Let me think...")

}

if(stops == "18"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop018}

`

set(viewof juliet,"Let me think...")

}

if(stops == "19"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof stop019}

`

set(viewof juliet,"Let me think...")

}

if(stops == "20"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof bravo}

`

set(viewof stop001,"So what?")

}

if(stops == "21"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof charlie}

`

set(viewof stop002,"So what?")

}

if(stops == "22"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof delta}

`

set(viewof stop003,"So what?")

}

if(stops == "23"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof echo}

`

set(viewof stop004,"So what?")

}

if(stops == "24"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof foxtrot}

`

set(viewof stop005,"So what?")

}

if(stops == "25"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof golf}

`

set(viewof stop006,"So what?")

}

if(stops == "26"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof hotel}

`

set(viewof stop009,"So what?")

}

if(stops == "27"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof india}

`

set(viewof stop011,"So what?")

}

if(stops == "28"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof juliet}

`

set(viewof stop013,"So what?")

}

if(stops == "29"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof caught001}

`

set(viewof stop007,"So what?")

}

if(stops == "30"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof caught002}

`

set(viewof stop015,"So what?")

}

if(stops == "31"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof caught003}

`

set(viewof stop018,"So what?")

}

if(stops == "32"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof esc001}

`

set(viewof stop008,"So what?")

}

if(stops == "33"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof esc002}

`

set(viewof stop010,"So what?")

}

if(stops == "34"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof esc003}

`

set(viewof stop012,"So what?")

}

if(stops == "35"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof esc004}

`

set(viewof stop014,"So what?")

}

if(stops == "36"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof esc005}

`

set(viewof stop016,"So what?")

}

if(stops == "37"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof esc006}

`

set(viewof stop017,"So what?")

}

if(stops == "38"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof esc007}

`

set(viewof stop019,"So what?")

}

/*

if(stops == "39"){

currentPage = html`

${concertSTOPS[stops].message}

${viewof initial}

`

set(viewof esc001,"I think it's time to retire") // this somehow needs to be applied to all of the endings

}

*/

return currentPage

}

viewof initial = Inputs.button("Let the night begin!")

viewof alpha = Inputs.radio(["Roadrunner's Paradise!", "How about Berghain?","Let me think..."], {})

viewof bravo = Inputs.radio(["Schokoladen sounds good!", "Let's try FRANNZ Club...", "Let me think..."], {})

viewof charlie = Inputs.radio(["Rock & Viking Bar!", "Let's go to Supamolly!", "Let me think..."], {})

viewof delta = Inputs.radio(["To FRANNZ Club we go!", "Let's play it safe and escape", "Let me think..."], {})

viewof echo = Inputs.radio(["Time for Dunckerclub!", "Maybe we head out now...", "Let me think..."], {})

viewof foxtrot = Inputs.radio(["Supamolly sounds good!", "I think we should go now...", "Let me think..."], {})

viewof golf = Inputs.radio(["Let's go to Rock & Viking!", "We better head west now...", "Let me think..."], {})

viewof hotel = Inputs.radio(["Let's hit up Rock & Viking...", "Perhaps we should escape?", "Let me think..."], {})

viewof india = Inputs.radio(["To West Berlin we go!", "Let me think..."], {})

viewof juliet = Inputs.radio(["Let's try Dunckerclub...", "Maybe it's time to go?", "Let me think..."], {})

viewof stop001 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop002 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop003 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop004 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop005 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop006 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop007 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop008 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop009 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop010 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop011 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop012 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop013 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop014 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop015 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop016 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop017 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop018 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof stop019 = Inputs.radio(["Cool, thanks!", "So what?"], {})

viewof caught001 = Inputs.radio(["Damn...let's try again!","I think it's time to retire"], {})

viewof caught002 = Inputs.radio(["Damn...let's try again!","I think it's time to retire"], {})

viewof caught003 = Inputs.radio(["Damn...let's try again!","I think it's time to retire"], {})

viewof esc001 = Inputs.radio(["Okay, I think we can do it!","I think it's time to retire"], {})

viewof esc002 = Inputs.radio(["Okay, I think we can do it!","I think it's time to retire"], {})

viewof esc003 = Inputs.radio(["Okay, I think we can do it!","I think it's time to retire"], {})

viewof esc004 = Inputs.radio(["Okay, I think we can do it!","I think it's time to retire"], {})

viewof esc005 = Inputs.radio(["Nice! Let's do it again!","I think it's time to retire"], {})

viewof esc006 = Inputs.radio(["Nice! Let's do it again!","I think it's time to retire"], {})

viewof esc007 = Inputs.radio(["Nice! Let's do it again!","I think it's time to retire"], {})

viewof eyesOnly = Inputs.select(responses, {})

responses = ["Sure, let's give it a go","Do you see a Stasi officer?","I am lost in Berlin"]

mutable stops = 0

viewof i = Inputs.input(100)

Inputs.bind(Inputs.radio([0, 100]), viewof i)

i

//set(i,0)

{

//this cell looks for correct answers from the input, and progresses to the next step when appropriate

if(initial==1){

mutable stops = 1 //change to next stop on the map3

set(viewof initial,0)//reset button

set(viewof alpha,null)

}

if(alpha == "Roadrunner's Paradise!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "1"

}

if(alpha == "How about Berghain?"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "2"

}

if(bravo == "Schokoladen sounds good!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "3"

}

if(bravo == "Let's try FRANNZ Club..."){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "4"

}

if(charlie == "Rock & Viking Bar!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "5"

}

if(charlie == "Let's go to Supamolly!"){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "6"

}

if(delta == "To FRANNZ Club we go!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "7"

}

if(delta == "Let's play it safe and escape"){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "8"

}

if(echo == "Time for Dunckerclub!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "9"

}

if(echo == "Maybe we head out now..."){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "10"

}

if(foxtrot == "Supamolly sounds good!"){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "11"

}

if(foxtrot == "I think we should go now..."){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "12"

}

if(golf == "Let's go to Rock & Viking!"){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "13"

}

if(golf == "We better head west now..."){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "14"

}

if(hotel == "Let's hit up Rock & Viking..."){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "15"

}

if(hotel == "Perhaps we should escape?"){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "16"

}

if(india == "To West Berlin we go!"){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "17"

}

if(juliet == "Let's try Dunckerclub..."){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "18"

}

if(juliet == "Maybe it's time to go?"){//these if statements allow us to continue the game

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "19"

}

if(stop001 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "20"

}

if(stop002 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "21"

}

if(stop003 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "22"

}

if(stop004 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "23"

}

if(stop005 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "24"

}

if(stop006 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "25"

}

if(stop007 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "29"

}

if(stop008 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "32"

}

if(stop009 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "26"

}

if(stop010 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "33"

}

if(stop011 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "27"

}

if(stop012 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "34"

}

if(stop013 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "28"

}

if(stop014 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "35"

}

if(stop015 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "30"

}

if(stop016 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "36"

}

if(stop017 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "37"

}

if(stop018 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "31"

} if(stop019 == "Cool, thanks!"){//these if statements allow us to move the game to the next location

//mutable stops = "BR" //if correct answer = bandito rosso, move to stop BR

mutable stops = "38"

}

if(caught001 == "Damn...let's try again!"){//these if statements allow us to move the game to the next location

mutable stops = "39"

}

if(caught002 == "Damn...let's try again!"){//these if statements allow us to move the game to the next location

mutable stops = "39"

}

if(caught003 == "Damn...let's try again!"){//these if statements allow us to move the game to the next location

mutable stops = "39"

}

if(esc001 == "Okay, I think we can do it!"){//these if statements allow us to move the game to the next location

mutable stops = "39"

}

if(esc002 == "Okay, I think we can do it!"){//these if statements allow us to move the game to the next location

mutable stops = "39"

}

if(esc003 == "Okay, I think we can do it!"){//these if statements allow us to move the game to the next location

mutable stops = "39"

}

if(esc004 == "Okay, I think we can do it!"){//these if statements allow us to move the game to the next location

mutable stops = "39"

}

if(esc005 == "Nice! Let's do it again!"){//these if statements allow us to move the game to the next location

mutable stops = "39"

}

if(esc006 == "Nice! Let's do it again!"){//these if statements allow us to move the game to the next location

mutable stops = "39"

}

if(esc007 == "Nice! Let's do it again!"){//these if statements allow us to move the game to the next location

mutable stops = "39"

}

if(initial == "Let the night begin!"){//these if statements allow us to move the game to the next location

mutable stops = "0"

}

if(eyesOnly == "Do you see a Stasi officer?"){

mutable stops = 0

}

if(stops == "0"){

//viewof initial = Inputs.input("nice walk")

//set(viewof initial,null)

//set(viewof parkStop,null)

//set(viewof eyesOnly,null)

}

function set(input, value) {

input.value = value;

input.dispatchEvent(new Event("input", {bubbles: true}));

}

viewof seconds = Inputs.range([0, 59], {value: 0, step:1, label: "seconds"})

viewof minutes = Inputs.range([0, 59], {value: 2, step:1, label: "minutes", value:2})

hours = 0

function* timer(i = 0) {

yield i;

while (true) {

yield Promises.tick(1000).then(() => i++);

}

currentTime = {

if(startTimerButton>0){

return timer();

}else{mutable stops = 0}

}

countdownTime = {

return minutes*60 + seconds;

}

//mutable timesup = 0

time = {

let result = countdownTime - currentTime;

if (currentTime == undefined){result = 0}

if ( result < 0 ){

result = "Time Up!";

}

else {

const remainHours = ""+parseInt(result/3600);

result = result - remainHours*3600;

const remainMinutes = ""+parseInt(result/60);

const remainSeconds = ""+parseInt(result%60);

result = remainMinutes.padStart(2,"0") + ":" +

remainSeconds.padStart(2,"0") ;

}

return html`

<style>

.countdown{ font-size: 40px;font-family:helvetica;font-weight:800 }

</style>

<span class="countdown">${result}</span>

`

}

viewof startTimerButton = Inputs.button([

["Start", value => value + 1],

["Reset", value => 0]

], {value: 0})

_berUpdatedDash3 = FileAttachment("230220_BER Updated Dash@3.png").image()

viewof choices = Inputs.radio(["Bandito Rosso", "SO36", "Dunckerclub"], {label: "Select a venue:", value: 0})

_berConcertChoice = FileAttachment("concert choice dash-04.png").image()

chart = {

const width = 400,

height = 350;

const svg = d3.create("svg")

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

// Use Mercator projection

var projection = d3

.geoMercator()

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

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 path5 = d3.geoPath().projection(projection);

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

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

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

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

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

//i'm not using the boundary lines, so I'm going to comment them out

/*

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

.data(boundary.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", path1) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

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

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

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

*/

if(stops=="0"){

//then draw the first stop line segment

}

if(stops=="1"){

//then draw the first stop line segment

}

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

.data(BERwater.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', 'maroon')

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

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

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

.style('stroke', 'rosybrown')

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

.data(BERwall.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('stroke-opacity','.7')

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

.style('stroke', 'firebrick')

.style('fill', 'lightblue')

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

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

.data(BERbuildings.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', 'tan')

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

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

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

.style('stroke', 'darkred')

/*

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

.data(BERroads.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','.4')

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

.style('stroke', 'dodgerblue')

*/

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

.data(BERspots)

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

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

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

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

.attr('r', 3)

.attr('fill',colorType) // add function to control color by 'type'

.attr('stroke-opacity','.65')

.attr("stroke-width", ".2")

.attr('stroke', 'pink')

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

.on('mouseover', spotText)

.on('mouseout', removeSpotText)

function colorType(d,i) {

var color = 'black'

if(d.Sector=='east'){color = 'maroon'}

if(d.Sector=='west'){color = 'lightslategrey'}

return color

}

function spotText(event,d){

d3.select(this)

.attr('fill',colorType)

.attr('r', 5)

.style('stroke', 'pink')

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

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

svg.append("rect")

.attr('class','whitebox')

.attr("x", 65)

.attr("y", 127)

.attr("height", 21)

.attr("width", 59)

.attr('stroke','black')

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

.attr('stroke-opacity', '.4')

.style("fill", 'white');

svg.append('text')

.attr('class','spots')

.attr('x','70')

.attr('y','135')

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

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

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

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

.text(d.Name)

svg.append('text')

.attr('class','spots')

.attr('x','70')

.attr('y','140')

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

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

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

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

.attr('font-style','italic')

.text(d.Neighborhood)

svg.append('text')

.attr('class','spots')

.attr('x','70')

.attr('y','143')

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

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

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

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

.attr('font-style','italic')

.text(d.ActivityType)

svg.append('line')

.attr('class','spotLine')

.attr('x1','124')

.attr('y1','137')

.attr('x2',projection([d.Long,d.Lat])[0])

.attr('y2','137')

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

.style('stroke','black')

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

svg.append('line')

.attr('class','spotLine')

.attr('x1',projection([d.Long,d.Lat])[0])

.attr('y1','137')

.attr('x2',projection([d.Long,d.Lat])[0])

.attr('y2',projection([d.Long,d.Lat])[1])

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

.style('stroke','black')

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

}

function removeSpotText(event,d) {

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

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

d3.select(this).style('stroke', 'pink')

d3.select(this).style('fill-opacity','1')

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

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

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

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

d3.selectAll('rect.whitebox').remove()

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

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

}

/*

c.enter.append('circle')// format to add additional circles

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

.attr('fill','black')

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

*/

function walkText(event,d){

d3.select(this).style("stroke-width", '3');

d3.select(this).style("stroke-dasharray", '4 0');

svg

.append('text')

.attr('class','walkText')

.attr('x','370')

.attr('y','385')

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

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

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

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

//.attr('background-color', 'rgba(255, 0, 0)')

.text(d.properties.Text)

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

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

}

function walkErase(event,d){

d3.selectAll('path.walks').style('stroke-width','1')

d3.selectAll('path.walks').style('stroke-dasharray','4 2')

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

}

var p = svg.selectAll("polyline")

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

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

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

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

.style("fill", "black")

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

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

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

.attr('transform',iconLocation)

function iconLocation(){

var xVal = projection([concertSTOPS[stops].Long,concertSTOPS[stops].Lat])[0]

var yVal = projection([concertSTOPS[stops].Long,concertSTOPS[stops].Lat])[1]

//console.log(xVal)

return "translate("+(xVal-5)+" "+(yVal+5)+")"

}

/*

svg

.append("image")

attr('x','0')

.attr('y','0')

.attr('width','100')

.attr('height','100')

.attr('href',tunnel)

*/

//if(showTunnels=="yes"){

var i = svg.selectAll("image")

.data(tunnelPng)//the key is that this dataset has both the image url and the lat/long

.enter()

.append("image")

.attr('x','0')

.attr('y','0')

.attr('width','14')

.attr('height','14')

.attr('href',function(d){return d.image})

.attr("transform", movePng)

function movePng(d,i){

var xVal = projection([d.Long, d.Lat])[0]-7

var yVal = projection([d.Long, d.Lat])[1]-7

return "translate("+xVal+" "+yVal+")"

}

//}

return svg.node();

}

paperDash = FileAttachment("230220_BER Updated Dash@1.png").image()

margin = ({top: 30, right: 20, bottom: 30, left: 40})

BERbuildings = FileAttachment("BER_buildingscropped_V2.geojson").json()

BERbox = FileAttachment("BER_bb.geojson").json()

BERwater = FileAttachment("BER_waterhatches_V1.geojson").json()

BERwall = FileAttachment("BER_wall.geojson").json()

tunnelPng = {//this cell combines the locations of the tunnels with the tunnel png.

var tunnelList = []

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

tunnelList.push({Lat:tunnelLoc[i].Lat,Long:tunnelLoc[i].Long,type:"unclear",image:tunnel})

}

return tunnelList

}

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

tooltip = d3

.select('body')

.append('div')

.attr('class', 'tooltip')

.style('position', 'absolute')

.style('z-index', '10')

.style('visibility', 'hidden')

.style('padding', '10px')

.style('background-color', 'white')

.style('border-radius', '4px')

.style('-webkit-border-radius', '10px')

.style('-moz-border-radius', '10px')

.style('-webkit-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('-moz-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')

.style('color', 'white')

.style('font-family','sans-serif')

.text('a simple tooltip');

tunnel = FileAttachment("tunnel.png").url()

tunnelLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vR9bLMmaUr0Q9D0yNB3Hd0wPXSD1V0ifQt8IrHFlurS1VT-KRwQCCgfl5WsZAGTCmeE1-PwvQ9X78lE/pub?output=csv"

tunnelLoc = d3.csv(tunnelLink,d3.autoType)

One platform to build and deploy the best data apps