Brooklyn Chinatown / Franky Liang

# Brooklyn Chinatown

boundingbox = FileAttachment("boundingbox@1.geojson").json()

buildings1 = FileAttachment("buildings.geojson").json()

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

d3 = require("d3@6")

hR = [

{name:"pts", cost:10, fitfactor:2},

{name:"tl", cost:15, fitfactor:3},

{name:"pf", cost:13, fitfactor:4},

{name:"mm", cost:9, fitfactor:1},

{name:"ss", cost:20, fitfactor:3},

{name:"lh", cost:30, fitfactor:4},

{name:"df", cost:20, fitfactor:5},

{name:"doc", cost:8, fitfactor:4},

{name:"jm", cost:16, fitfactor:3}

]

totalValues = {

var totalCost = 0

var totalFitfactor = 0

totalCost = totalCost + (hR[0].cost*pts) + (hR[1].cost*tl) + (hR[2].cost*pf) + (hR[3].cost*mm) + (hR[4].cost*ss) + (hR[5].cost*lh) + (hR[6].cost*df) + (hR[7].cost*doc) + (hR[8].cost*jm)

totalFitfactor = totalFitfactor + (hR[0].fitfactor*pts) + (hR[1].fitfactor*tl) + (hR[2].fitfactor*pf) + (hR[3].fitfactor*mm) + (hR[4].fitfactor*ss) + (hR[5].fitfactor*lh) + (hR[6].fitfactor*df) + (hR[7].fitfactor*doc) + (hR[8].fitfactor*jm)

return[totalCost, totalFitfactor]

}

viewof pts = Inputs.radio([0, 1, 2], {label: "Prince Tea House", value:0})

viewof tl = Inputs.radio([0, 1, 2], {label: "Teso Life", value:0})

viewof pf = Inputs.radio([0, 1, 2, 3, 4], {label: "Planet Fitness", value:0})

viewof mm = Inputs.radio([0, 1, 2], {label: "Mango Mango", value:0})

viewof ss = Inputs.radio([0, 1, 2, 3, 4], {label: "Sake Sushi", value:0})

viewof lh = Inputs.radio([0, 1, 2, 3, 4], {label: "Laojie Hotpot", value:0})

viewof df = Inputs.radio([0, 1, 2, 3, 4], {label: "Dolphin Fitness", value:0})

viewof doc = Inputs.radio([0, 1], {label: "Doctor's Office", value:0})

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

chart = {

const width = 960,

height = 800;

const svg = d3.create("svg")

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

// Use Mercator projection

var projection = d3

.geoMercator()

.fitSize([width - 50, height - 50],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)")

*/

svg.append("rect")

.attr("x", 52)

.attr("y", 52)

.attr("width", 100)

.attr("height", 88)

.attr('fill', 'white')

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

.style('stroke', 'black')

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

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

.data(buildings1.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", "rgb(240,240,240)")

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

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

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

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

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

.data(streetlines.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", '.75')

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

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.long,d.lat])[0]})

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

.attr('r',3)

.attr('fill',colorType)

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

.style('stroke', 'black')

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

.on('mouseover', spotText)

.on('mouseout', removespotText)

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

.attr("cx",65)

.attr("cy",65)

.attr('r',6)

.attr('fill', 'cyan')

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

.style('stroke', 'black')

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

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

.attr("cx",65)

.attr("cy",85)

.attr('r',6)

.attr('fill', 'blue')

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

.style('stroke', 'black')

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

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

.attr("cx",65)

.attr("cy",105)

.attr('r',6)

.attr('fill', 'green')

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

.style('stroke', 'black')

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

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

.attr("cx",65)

.attr("cy",125)

.attr('r',6)

.attr('fill', 'red')

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

.style('stroke', 'black')

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

svg.append('text')

.attr('x', '75')

.attr('y', '129')

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

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

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

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

.text("Home")

svg.append('text')

.attr('x', '75')

.attr('y', '69')

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

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

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

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

.text("Food")

svg.append('text')

.attr('x', '75')

.attr('y', '89')

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

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

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

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

.text("Services")

svg.append('text')

.attr('x', '75')

.attr('y', '109')

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

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

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

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

.text("Shops")

svg.append('text')

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

.attr('x', '155')

.attr('y', '720')

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

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

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

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

.attr('fill',costColor)

.text(totalValues[0])

svg.append('text')

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

.attr('x', '155')

.attr('y', '740')

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

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

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

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

.attr('fill', fitColor)

.text(totalValues[1])

svg.append('text')

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

.attr('x', '150')

.attr('y', '720')

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

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

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

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

.text('Cost :')

svg.append('text')

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

.attr('x', '150')

.attr('y', '740')

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

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

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

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

.text('Fit Factor :')

if(totalValues[1] < 50){

svg.append('text')

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

.attr('x', '243')

.attr('y', '740')

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

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

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

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

.attr('fill', 'red')

.text('Not Fit')

}else{

svg.append('text')

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

.attr('x', '190')

.attr('y', '740')

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

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

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

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

.attr('fill', 'green')

.text('Fit')

}

if(totalValues[0] < 200){

svg.append('text')

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

.attr('x', '267')

.attr('y', '720')

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

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

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

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

.attr('fill', 'green')

.text('Enough $')

}else{

svg.append('text')

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

.attr('x', '190')

.attr('y', '720')

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

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

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

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

.attr('fill', 'red')

.text('Not Enough $')

}

if(totalValues[0] < 200){

if(totalValues[1] >= 50){

svg.append('text')

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

.attr('x', '280')

.attr('y', '400')

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

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

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

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

.attr('fill', 'green')

.text('Fit & Not Broke')

}

//console.log (fitColor)

function fitColor(d,i){

var color = 'black'

if(totalValues[1] < 50){color = 'red'}

if(totalValues[1] > 50){color = 'green'}

if(totalValues[1] == 50){color = 'green'}

return color

}

function costColor(d,i){

var color = 'black'

if(totalValues[0] < 200){color = 'green'}

if(totalValues[0] > 200){color = 'red'}

if(totalValues[0] == 200){color = 'red'}

return color

}

//console.log (totalValues[1])

function colorType(d,i){

var color = 'black'

if(d.type == 'home'){color = 'red'}

if(d.type == 'food'){color = 'cyan'}

if(d.type == 'services'){color = 'blue'}

if(d.type == 'shops'){color = 'green'}

return color

}

function spotText(event,d){

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

svg.append("rect")

.attr('class', 'spots')

.attr("x", 55)

.attr("y", 715)

.attr("width", 205)

.attr("height", 35)

.attr('fill', 'white')

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

.style('stroke', 'black')

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

svg.append('text')

.attr('class', 'spots')

.attr('x', '60')

.attr('y', '732')

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

.attr('y', '732')

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

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

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

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

.text()

svg.append('text')

.attr('class', 'spots')

.attr('x', '60')

.attr('y', '745')

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

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

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

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

.text(d.description)

svg.append('line')

.attr('class', 'spotLine')

.attr('x1', '85')

.attr('y1', '715')

.attr('x2', '85')

.attr('y2', projection([d.long, d.lat])[1])

.style('stroke', 'black')

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

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

svg.append('line')

.attr('class', 'spotLine')

.attr('x1', '85')

.attr('y1', projection([d.long, d.lat])[1])

.attr('x2', projection([d.long, d.lat])[0])

.attr('y2', projection([d.long, d.lat])[1])

.style('stroke', 'black')

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

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

}

function removespotText(event,d){

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

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

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

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

}

return svg.node();

}

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

gbox = FileAttachment("CT Bounding Box.geojson").json()

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

streets = FileAttachment("street lines.geojson").json()

buildings = FileAttachment("CT buildings.geojson").json()

Purpose-built for displays of data