Visit to San Francisco
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})
boundingbox = FileAttachment("BoundingBox.geojson").json()
d3 = require("d3@6")
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [50, 50, width - 150, height - 150]);
// 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("path2") //d3 geopath
.data(bklyns_street.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", '.5')
.style("stroke", "rgb(0,0,0)")
*/
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', '480')
.attr('y', '520')
.attr('font-family', 'Calibri')
.attr('font-size', '1.75em')
.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', '480')
.attr('y', '560')
.attr('font-family', 'Calibri')
.attr('font-size', '1.75em')
.attr('text-anchor', 'middle')
.attr('font-weight', 'bold')
.attr('fill' , 'rgb(184, 88, 88)')
.text('YOU ARE TOO FULL, STOP EATING')
}
return svg.node();
}
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.
