first map_midtown nyc_dashboard / Joy Okafor

Joy Okafor

Workspace

Public

Edited

Feb 8, 2023

Fork of first map_midtown nyc

# first map_midtown nyc_dashboard

d3 = require("d3@6")

hR = [

{name:"MD", ambiance:10, happiness:10},

{name:"RCMH", ambiance:50, happiness:7},

{name:"WFM", ambiance:15, happiness:6},

{name:"TrumpTower", ambiance:10, happiness:1},

{name:"EMHK", ambiance:13, happiness:3},

{name:"Omni", ambiance:20, happiness:10},

{name:"LaMesseria", ambiance:20, happiness:8},

]

totalValues = {

var totalAmbiance = 0

var totalHappiness = 0

totalAmbiance = totalAmbiance +(hR[0].ambiance*MD)

totalAmbiance = totalAmbiance +(hR[1].ambiance*RCMH)

totalAmbiance = totalAmbiance +(hR[2].ambiance*WFM)

totalAmbiance = totalAmbiance +(hR[3].ambiance*TrumpTower)

totalAmbiance = totalAmbiance +(hR[4].ambiance*EMHK)

totalAmbiance = totalAmbiance +(hR[5].ambiance*Omni)

totalAmbiance = totalAmbiance +(hR[6].ambiance*LaMesseria)

totalHappiness = totalHappiness +(hR[0].happiness*MD)

totalHappiness = totalHappiness +(hR[1].happiness*RCMH)

totalHappiness = totalHappiness +(hR[2].happiness*WFM)

totalHappiness = totalHappiness +(hR[3].happiness*TrumpTower)

totalHappiness = totalHappiness +(hR[4].happiness*EMHK)

totalHappiness = totalHappiness +(hR[5].happiness*Omni)

totalHappiness = totalHappiness +(hR[6].happiness*LaMesseria)

return[totalAmbiance,totalHappiness]

}

viewof y = Inputs.range([0, 255], {step: 1, label: "Favorite number",value:0})

viewof placesRadius = Inputs.radio([1,3,5,7,9], {label: "Places Radius"})

viewof MD = Inputs.radio([0,1,2,3,4], {label: "McDonald's",value:0})

viewof RCMH = Inputs.radio([0,1,2,3,4], {label: "Radio City Music Hall",value:0})

viewof WFM = Inputs.radio([0,1,2,3,4], {label: "Whole Foods Market",value:0})

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

viewof EMHK = Inputs.radio([0,1,2,3,4], {label: "Empanada Mama Hell's Kitchen",value:0})

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

viewof LaMesseria = Inputs.radio([0,1,2,3,4], {label: "La Messeria NY",value:0})

chart = {

const width = 700,

height = 700;

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], site_bounding2);

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("path2") //d3 geopath

.data(streets.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)")

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

.data(buildings.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(200,200,200)")

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

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

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

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

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

.data(places)

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

.attr('fill',colorType)

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

.on('mouseover',placesText)

.on('mouseout',removeText)

function colorType(d,i) {

var color = 'cyan'

if(d.Type=='food'){color='rgb(255,255,'+y+')'}

if(d.Type=='grocery'){color='rgb(64,57,47)'}

return color

}

if(totalValues[0]>400)

svg.append('text')

.attr('class','spots')

.attr('x','480')

.attr('y','400')

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

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

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

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

.text('A LITTLE CRAZY THERE')

if(totalValues[0]>150 && totalValues[1]>100)

svg.append('text')

.attr('class','spots')

.attr('x','480')

.attr('y','450')

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

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

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

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

.text('GOOD BALANCE')

svg.append("text")

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

.attr('x','570')

.attr('y','215')

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

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

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

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

//.text(totalValues[0])

svg.append("text")

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

.attr('x','520')

.attr('y','215')

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

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

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

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

//.text('Ambiance:')

svg.append("text")

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

.attr('x','570')

.attr('y','200')

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

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

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

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

//.text(totalValues[1])

svg.append("text")

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

.attr('x','520')

.attr('y','200')

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

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

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

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

//.text('Happiness')

function placesText(i,d){

svg.append("text")

.attr('class','placesInfo')

.attr('x','500')

.attr('y','240')

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

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

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

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

.text(d.Name)

svg.append("text")

.attr('class','placesInfo')

.attr('x','500')

.attr('y','250')

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

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

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

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

.text(d.Description)

svg.append('line')

.attr('class','placesLine')

.attr('x1','600')

.attr('y1','265')

.attr('x2','600')

.attr('y2',projection([d.Longitude,d.Latitude])[1])

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

.attr('stroke','black')

.attr('stroke-dasharray','3 3')

svg.append('line')

.attr('class','placesLine')

.attr('x1',projection([d.Longitude,d.Latitude])[0])

.attr('y1',projection([d.Longitude,d.Latitude])[1])

.attr('x2','600')

.attr('y2',projection([d.Longitude,d.Latitude])[1])

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

.attr('stroke','black')

.attr('stroke-dasharray','3 3')

}

function removeText(i,d){

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

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

}

return svg.node();

}

dbT1 = FileAttachment("db t1.txt").tsv({array:true})

border = {

const width = 1200,

height = 800;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

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

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

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

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

.style("fill", "black")

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

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

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

return svg.node();

}

dashboard =

html`

${border}

</div>

${md` **Happiness:**${totalValues[0]} `}

</div>

${md` **Ambiance:**${totalValues[1]} `}

</div>

${md` **A Night Out on the Town** `}

</div>

${chart}

</div>

${viewof MD}

${viewof RCMH}

${viewof WFM}

${viewof TrumpTower}

${viewof EMHK}

${viewof Omni}

${viewof LaMesseria}

</div>

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

site_bounding2 = FileAttachment("bounding2@2.geojson").json()

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

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

places = d3.csv(placeslink,d3.autoType)

bounding = FileAttachment("bounding.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