CASE Field Trip Game Dashboard / Mariam

Mariam

Workspace

Public

Edited

Feb 9, 2023

Fork of CASE Field Trip Game

•

1 fork

# CASE Field Trip Game Dashboard

boundingBox = FileAttachment("Bounding Box 2.geojson").json()

boroughBoundaries = FileAttachment("Borough Boundaries.geojson").json()

ferryLine = FileAttachment("Ferry Line.geojson").json()

parkWaters = FileAttachment("Park Waters.geojson").json()

parks2V2 = FileAttachment("Parks 2 v2.geojson").json()

parksV2 = FileAttachment("Parks v2.geojson").json()

waterfrontParks2 = FileAttachment("Waterfront Parks 2.geojson").json()

d3 = require("d3@6")

/* totalValues = {

var totalTime = 0

totalTime = totalTime +(triptime[0].time*cemetery)

totalTime = totalTime +(triptime[1].time*bat)

totalTime = totalTime +(triptime[2].time*ferry)

totalTime = totalTime +(triptime[3].time*rockawaybeach)

totalTime = totalTime +(triptime[4].time*twa)

var totalExperience = 0

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

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

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

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

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

return [totalTime,totalExperience]

}

tripemoji = [

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

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

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

]

totalEmotions = {

var totalEmoji = 0

totalEmoji = totalEmoji +(cemetery)

totalEmoji = totalEmoji +(bat)

totalEmoji = totalEmoji +(ferry)

totalEmoji = totalEmoji +(rockawaybeach)

totalEmoji = totalEmoji +(twa)

var totalFeeling = 0

totalFeeling = totalFeeling +(cemetery)

totalFeeling = totalFeeling +(bat)

totalFeeling = totalFeeling +(ferry)

totalFeeling = totalFeeling +(rockawaybeach)

totalFeeling = totalFeeling +(twa)

return [totalEmoji, totalFeeling]

}

//viewof emojis = tripemoji.select(["🤩", "🤷", "💩"])

triptime = [//create time to complete all field trip stops tt: trip time

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

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

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

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

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

]

totalValues = {

var totalTime = 0

totalTime = totalTime +(cemetery)

totalTime = totalTime +(bat)

totalTime = totalTime +(ferry)

totalTime = totalTime +(rockawaybeach)

totalTime = totalTime +(twa)

var totalExperience = 0

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

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

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

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

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

return [totalTime,totalExperience]

}

viewof emojis = Inputs.select(tripemoji, {label: "Rate the trip's vibe", format: x => x.emoji, value: tripemoji.find(s => s.emoji === "🤩")})

emojis.feeling

viewof cemetery = Inputs.range([0, 3], {step: .5, label: "Greenwood Cemetery", value:0})

viewof bat = Inputs.range([0, 3], {step: .5, label: "BAT", value:0})

viewof ferry = Inputs.range([0, 3], {step: .5, label: "Ferry", value:0})

viewof rockawaybeach = Inputs.range([0, 3], {step: .5, label: "Rockaway Beach", value:0})

viewof twa = Inputs.range([0, 3], {step: .5, label: "TWA Hotel", value:0})

underlay = {

const width = 700,

height = 700;

const svg = d3.create("svg")

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

// Use Mercator projectio

svg.append('image')

.attr('href',streetsUnderlay)

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

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

.attr('y','1')

.attr('width', 635)

.attr('height', 575)

return svg.node();

}

chart = {

const width = 700,

height = 700;

const svg = d3.create("svg")

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

// Use Mercator projection

var projection = d3

.geoMercator()

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

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

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

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

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

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

svg.append('image')

.attr('href',streetsUnderlay)

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

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

.attr('y','1')

.attr('width', 635)

.attr('height', 575)

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

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

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

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

.attr('class','outlines')

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

.style("fill", "none")

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

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

.style("stroke", "slategrey")

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

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

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

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

.attr('class','outlines')

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

.style("fill", "slategrey")

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

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

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

.style("stroke", "slategrey")

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

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

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

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

.attr('class','outlines')

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

.style("fill", "lightsteelblue")

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

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

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

.style("stroke", "lightsteelgrey")

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

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

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

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

.attr('class','outlines')

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

.style("fill", "none")

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

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

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

.style("stroke", "lightsteelgrey")

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

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

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

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

.attr('class','outlines')

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

.style("fill", "slategrey")

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

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

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

.style("stroke", "lightslategrey")

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

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

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

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

.attr('class','outlines')

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

.style("fill", "none")

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

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

.style("stroke", "black")

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

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

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

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

.attr('class','outlines')

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

.style("fill", "none")

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

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

.style("stroke", "dodgerblue")

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

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

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

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

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

.attr('class','outlines')

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

.style("fill", "none")

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

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

.style("stroke", "dodgerblue")

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

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

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

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

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

.attr('class','outlines')

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

.style("fill", "none")

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

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

.style("stroke", "dodgerblue")

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

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

.data(spots)

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

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

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

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

.attr('r',4)

.attr('fill',colorType)

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

.style('stroke','black')

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

.on('mouseover', spotText)

.on('mouseout', removespotText)

function colorType(d,i){

var color = 'steelblue'

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

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

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

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

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

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

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

return color

}

svg.append('text')

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

.attr('x','145')

.attr('y','585')

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

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

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

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

.text(totalValues[0])

svg.append('text')

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

.attr('x','40')

.attr('y','585')

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

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

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

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

.text('Total Hours: ')

svg.append('text')

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

.attr('x','190')

.attr('y','605')

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

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

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

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

.text(totalValues[1])

svg.append('text')

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

.attr('x','40')

.attr('y','605')

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

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

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

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

.text('Total Experience: ')

svg.append("rect")

.attr("x", 33)

.attr("y", 570)

.attr("width", 162)

.attr("height", 44)

.attr('fill', 'lightsteelblue')

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

.style('stroke', 'slategrey')

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

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

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

svg.append('text')

.attr('class','emojitexts')

.attr('x','110')

.attr('y','637')

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

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

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

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

.attr('fill', 'steelblue')

.text(tripemoji[0].feeling)

}

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

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

svg.append('text')

.attr('class','emojitexts')

.attr('x','120')

.attr('y','637')

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

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

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

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

.attr('fill', 'steelblue')

.text(tripemoji[1].feeling)

}

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

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

svg.append('text')

.attr('class','emojitexts')

.attr('x','100')

.attr('y','637')

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

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

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

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

.attr('fill', 'steelblue')

.text(tripemoji[2].feeling)

}

if(totalValues[0]>7){

svg.append('text')

.attr('class','spots')

.attr('x','350')

.attr('y','120')

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

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

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

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

.text('⌛TOO SLOW⌛')

}

if(totalValues[0]<5){

svg.append('text')

.attr('class','spots')

.attr('x','350')

.attr('y','120')

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

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

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

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

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

}

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

svg.append('text')

.attr('class','spots')

.attr('x','350')

.attr('y','120')

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

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

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

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

.text('💯 PERFECT TRIP 💯')

}

function spotText(event,d){

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

.attr('r', 6)

.style('stroke', 'dodgerblue')

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

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

svg.append('text')

.attr('class','spots')

.attr('x', '290')

.attr('y','547')

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

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

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

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

.text(d.name)

svg.append('text')

.attr('class','spots')

.attr('x', '290')

.attr('y','565')

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

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

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

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

.text(d.description)

svg.append('line')

.attr('class','spotLine')

.attr('x1', '290')

.attr('y1', '553')

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

.attr('y2', '553')

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

.style('stroke','black')

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

svg.append('line')

.attr('class','spotLine')

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

.attr('y1', '553')

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

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

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

.style('stroke','darkblue')

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

}

function removespotText(event,d){

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

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

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

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

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

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

}

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

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

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

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

.attr('class','outlines')

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

.style("fill", "slategrey")

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

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

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

.style("stroke", "lightslategrey")

.on('mouseover', spotImage3)

.on('mouseout', removespotImage3)

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

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

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

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

.attr('class','outlines')

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

.style("fill", "slategrey")

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

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

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

.style("stroke", "lightslategrey")

.on('mouseover', spotImage2)

.on('mouseout', removespotImage2)

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

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

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

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

.attr('class','outlines')

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

.style("fill", "slategrey")

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

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

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

.style("stroke", "lightslategrey")

.on('mouseover', spotImage1)

.on('mouseout', removespotImage1)

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

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

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

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

.attr('class','outlines')

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

.style("fill", "slategrey")

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

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

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

.style("stroke", "lightslategrey")

.on('mouseover', spotImage)

.on('mouseout', removespotImage)

function spotImage(event,d){

console.log("hello")

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

svg.append('image')

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

.attr('class','spotImage')

.attr('x', '210')

.attr('y','570')

.attr('width', 200)

.attr('height', 100)

}

function removespotImage(event,d){

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

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

}

function spotImage1(event,d){

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

svg.append('image')

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

.attr('class','spotImage1')

.attr('x', '210')

.attr('y','570')

.attr('width', 200)

.attr('height', 100)

console.log("hello")

}

function removespotImage1(event,d){

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

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

}

function spotImage2(event,d){

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

svg.append('image')

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

.attr('class','spotImage2')

.attr('x', '210')

.attr('y','570')

.attr('width', 200)

.attr('height', 100)

}

function removespotImage2(event,d){

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

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

}

function spotImage3(event,d){

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

svg.append('image')

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

.attr('class','spotImage3')

.attr('x', '210')

.attr('y','570')

.attr('width', 200)

.attr('height', 100)

}

function removespotImage3(event,d){

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

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

}

svg.append('image')

.attr('href',streetsUnderlay)

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

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

.attr('y','1')

.attr('width', 635)

.attr('height', 575)

return svg.node();

}

dahsboardFrame01 = FileAttachment("Dahsboard Frame 01.txt").tsv({array:true})

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

innerHeart = FileAttachment("inner heart.txt").tsv({array:true})

border = {

const width = 1200,

height = 800;

const svg = d3.create("svg")

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

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

var p = svg.selectAll('polyline')

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

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

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

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

.attr('class','outlines')

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

.style("fill", "steelblue")

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

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

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

.style("stroke", "slategrey")

var p = svg.selectAll('polyline')

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

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

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

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

.attr('class','outlines')

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

.style("fill", "steelblue")

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

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

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

.style("stroke", "slategrey")

var p = svg.selectAll('polyline')

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

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

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

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

.attr('class','outlines')

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

.style("fill", "white")

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

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

.style("stroke", "slategrey")

return svg.node();

}

dahsboardFrame02 = FileAttachment("Dahsboard Frame 02@1.txt").tsv({array:true})

dahsboardFrame03 = FileAttachment("Dahsboard Frame 03.txt").tsv({array:true})

emojisdropdown = {

var button = ' '

var e = emojis

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

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

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

return button

}

//copy this to the dahsboard code below

tripemoji[2].emoji

tripemoji[1].emoji

tripemoji[0].emoji

tripemoji[0].feeling

tripemoji[0]

dashboard =

html`

${border}

</div>

${md`CASE Brooklyn Field Trip`}

</div>

${md`This map is an overview of the Brooklyn destinations that we covered as a group during the field trip. As a group, we started the day at the Greenwood Cemetery and ended at the TWA Hotel. To complete our trip, we used a combination of transportation, including, the subway and the ferry.`}

</div>

${md`Goal`}

</div>

${md`Find the ideal time and feeling it took to have the ‘Perfect Trip’ as a collective group that day.`}

</div>

${md`Note`}

</div>

${md`(If you zoom through the trip or soak it in too much, you’ll miss out on the Perfect CASE Trip)`}

</div>

${md`Hours`}

</div>

${md`Location`}

</div>

${viewof cemetery}

${viewof bat}

${viewof ferry}

${viewof rockawaybeach}

${viewof twa}

</div>

${viewof emojis}

</div>

${emojisdropdown}

</div>

${underlay}

</div>

${chart}

</div>

streetsUnderlay = FileAttachment("Streets Underlay.png").url()

twaBoundary2 = FileAttachment("TWA boundary 2.geojson").json()

twaBoundary = FileAttachment("TWA boundary.geojson").json()

batBoundary = FileAttachment("BAT boundary@1.geojson").json()

cemeteryBoundary = FileAttachment("Cemetery boundary.geojson").json()

rockawayBeachBoundary = FileAttachment("Rockaway beach boundary.geojson").json()

park3 = FileAttachment("PARK 3.geojson").json()

trail1 = FileAttachment("trail 1.geojson").json()

trail2 = FileAttachment("trail 2.geojson").json()

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

parks3 = FileAttachment("Parks 3.geojson").json()

parks2V3 = FileAttachment("Parks 2 v3.geojson").json()

bboxHatch = FileAttachment("bbox hatch.geojson").json()

boroughs1 = FileAttachment("Boroughs 1.geojson").json()

boroughs2 = FileAttachment("Boroughs 2.geojson").json()

spotsLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQN7ElG8iTelk2n3jgGsf_pMAOFYfQoR7M9IB2GI1SmChla4frLqoHSFpg2eFHfu_NAL2sjlDEanA1v/pub?output=csv"

spots = d3.csv(spotsLink,d3.autoType)

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more