Visit to San Francisco_DASHBOARD / Sandra

Sandra

Workspace

Public

Edited

Apr 25, 2023

Fork of Visit to San Francisco

# Visit to San Francisco_DASHBOARD

hR = [//create cost and happiness dataset

{name: "mgolf", joy: 6, fullness: -4},

{name: "pbake", joy: 8, fullness: 5},

{name: "gpark", joy: 5, fullness: -7},

{name: "p39", joy: 4, fullness: -5},

{name: "mmaiko", joy: 10, fullness: 4},

{name: "izu", joy: 7, fullness: 8},

{name: "hkclay", joy: 10, fullness: 10},

{name: "bcream", joy: 7, fullness: 3},

]

totalValues = {//calculate total cost and happiness

var totalJoy = 0

var totalFullness = 0

totalJoy = totalJoy + (hR[0].joy * mgolf)

totalJoy = totalJoy + (hR[1].joy * pbake)

totalJoy = totalJoy + (hR[2].joy * gpark)

totalJoy = totalJoy + (hR[3].joy * p39)

totalJoy = totalJoy + (hR[4].joy * mmaiko)

totalJoy = totalJoy + (hR[5].joy * izu)

totalJoy = totalJoy + (hR[6].joy * hkclay)

totalJoy = totalJoy + (hR[7].joy * bcream)

totalFullness = totalFullness + (hR[0].fullness * mgolf)

totalFullness = totalFullness + (hR[1].fullness * pbake)

totalFullness = totalFullness + (hR[2].fullness * gpark)

totalFullness = totalFullness + (hR[3].fullness * p39)

totalFullness = totalFullness + (hR[4].fullness * mmaiko)

totalFullness = totalFullness + (hR[5].fullness * izu)

totalFullness = totalFullness + (hR[6].fullness * hkclay)

totalFullness = totalFullness + (hR[7].fullness * bcream)

return [totalJoy, totalFullness]

}

viewof mgolf = Inputs.radio([0,1,2,3,4], {label: "Subpar Miniature Golf", value: 0})

viewof pbake = Inputs.radio([0,1,2,3,4], {label: "Pineapple King Bakery", value: 0})

viewof gpark = Inputs.radio([0,1,2,3,4], {label: "Golden Gate Park", value: 0})

viewof p39 = Inputs.radio([0,1,2,3,4], {label: "Pier 39", value: 0})

viewof mmaiko = Inputs.radio([0,1,2,3,4], {label: "Matcha Cafe Maiko", value: 0})

viewof izu = Inputs.radio([0,1,2,3,4], {label: "Izumiya Restaurant", value: 0})

viewof hkclay = Inputs.radio([0,1,2,3,4], {label: "Hong Kong Clay Pot Restaurant", value: 0})

viewof bcream = Inputs.radio([0,1,2,3,4], {label: "Bi-Rite Creamery", value: 0})

viewof setups = Inputs.radio(['Start','Help'], {value:'Help'})

setups

boundingbox = FileAttachment("BoundingBox.geojson").json()

d3 = require("d3@6")

chart = {

const width = 700,

height = 700;

const svg = d3.create("svg")

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

// Use Mercator projection

var projection = d3

.geoMercator()

.fitSize([width - 20, height - 20], boundingbox);

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

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

var path3 = 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)")

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

.data(sanfran_county.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", "white")

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

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

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

.style("stroke", "gray")

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

.data(sanfran_park.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", "green")

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

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

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

.style("stroke", "gray")

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

.data(sanfran_footprint.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", "gray")

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

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

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

.style("stroke", "white")

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

.data(sanfran_selfootprint.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", "gray")

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

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

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

.style("stroke", "white")

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

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

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

.style('stroke','gray')

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

.on('mouseover', spotText) //listening event watching your mouse and waits for something to happen

.on('mouseout', removeSpotText)

function colorType(d,i){

var color = 'gray'

if(d.type=='food'){color = "rgb(174, 132, 126)"}

if(d.type=='activity'){color = "rgb(159, 194, 179)"}

if(d.type=='sight-see'){color = "rgb(84, 86, 67)"}

return color

}

svg.append('text')

.attr('class', 'meter')

.attr('x', '150')

.attr('y', '150')

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

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

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

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

.text('JOY: ' + totalValues[0])

svg.append('text')

.attr('class', 'meter')

.attr('x', '150')

.attr('y', '160')

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

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

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

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

.text('FULLNESS: ' + totalValues[1])

//() in the parenthesis are arguments; default event type and data of object

function spotText(event, d){

//'this' refers to whatever caused the thing to happen; function knows which circle fired the function

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

svg.append('text')

.attr('class', 'spots')

.attr('x', '450')

.attr('y', '150')

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

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

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

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

.text(d.name)

svg.append('text')

.attr('class', 'spots')

.attr('x', '450')

.attr('y', '160')

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

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

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

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

.text(d.description)

svg.append('line')

.attr('class', 'spotsLine')

.attr('x1', '455')

.attr('y1', '147')

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

.attr('y2', 147)

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

.style('stroke', 'black')

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

svg.append('line')

.attr('class', 'spotsLine')

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

.attr('y1', '147')

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

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

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

.style('stroke', 'black')

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

}

function removeSpotText(event, d){

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

d3.selectAll('text.spots').remove() //data type and class

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

}

if (totalValues[0] > 150){

svg.append('text')

.attr('class', 'meter')

.attr('x', '325')

.attr('y', '390')

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

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

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

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

.attr('fill' , 'rgb(184, 88, 88)')

.text('YOU HAVE HAD A GOOD TIME, NOW GO HOME')

}

if (totalValues[1] > 70){

svg.append('text')

.attr('class', 'meter')

.attr('x', '325')

.attr('y', '420')

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

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

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

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

.attr('fill' , 'rgb(184, 88, 88)')

.text('YOU ARE TOO FULL, STOP EATING')

}

return svg.node();

}

border1 = {

const width = 1200,

height = 800;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(outline3) //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})

.attr('class','outlines')

.style("fill", "gray")

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

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

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

.style("stroke", "gray")

return svg.node();

}

border2 = {

const width = 1200,

height = 800;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(outline4) //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})

.attr('class','outlines')

.style("fill", "none")

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

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

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

.style("stroke", "gray")

return svg.node();

}

border3 = {

const width = 1200,

height = 800;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(outline5) //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})

.attr('class','outlines')

.style("fill", "white")

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

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

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

.style("stroke", "gray")

return svg.node();

}

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

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

icecream = {

const width = 30.182,

height = 32.891;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(cup) //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})

.attr('class','outlines')

.style("fill", "gray")

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

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

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

.style("stroke", "gray")

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

.data(swirl) //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})

.attr('class','outlines')

.style("fill", "green")

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

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

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

.style("stroke", "none")

return svg.node();

}

rules =

html`

${md` HOW TO PLAY: Determine what spots to go to and how many <br> times in order to reach both satisfactory happiness and fullness.`}

</div>

bool = {

var icon = ' '

if (mmaiko > 0){icon = icecream}

return icon

}

start = {

var button = ''

//if (setups = 'Start'){button = chart}

var s = setups

if (s == 'Start'){button = chart}

if (s == 'Help'){button = rules}

return button

}

dashboard =

html`

${border1}

</div>

${border2}

</div>

${bool}

</div>

${md` A TRIP TO SAN FRANCISCO`}

</div>

${md` This is a map of San Francisco that highlights a number of fun and tasty spots in the area. Take a look at the highlighted spots and decide where you want to go and how many times you want to visit. `}

</div>

${md` *A note will pop up when you’ve had too much fun or when you are too full and should try other activities other than eating.* `}

</div>

${md` JOY = ${totalValues[0]}`}

</div>

${md` FULLNESS = ${totalValues[1]} `}

</div>

${start}

</div>

${viewof mgolf}

${viewof pbake}

${viewof gpark}

${viewof p39}

${viewof mmaiko}

${viewof izu}

${viewof hkclay}

${viewof bcream}

${viewof setups}

</div>

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

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

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

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

sanfran_park = FileAttachment("SanFran_Park.geojson").json()

sanfran_selfootprint = FileAttachment("SanFran_SelFootprint.geojson").json()

sanfran_footprint = FileAttachment("SanFran_Footprint_Light.geojson").json()

sanfran_county = FileAttachment("SanFran_County.geojson").json()

bklyns_parks = FileAttachment("park.geojson").json()

bklyns_bounding

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

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

gbox = FileAttachment("border_box.geojson").json()

spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRZIPnvSj8W-jD0zlXEFLwqoHOubf-aNqIOYy4SwuX299Dyvd19jd2aTB0MXHTCoDQDhKodCi4Y3_zG/pub?output=csv'

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

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

bklyns_building= FileAttachment("bklyns_building_DISSOLVED.geojson").json()

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