first map_midtown nyc
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([1,2,3,4], {label: "McDonald's",value:0})
viewof RCMH = Inputs.radio([1,2,3,4], {label: "Radio City Music Hall",value:0})
viewof WFM = Inputs.radio([1,2,3,4], {label: "Whole Foods Market",value:0})
viewof TrumpTower = Inputs.radio([1,2,3,4], {label: "Trump Tower",value:0})
viewof EMHK = Inputs.radio([1,2,3,4], {label: "Empanada Mama Hell's Kitchen",value:0})
viewof Omni = Inputs.radio([1,2,3,4], {label: "Omni Berkshire Place",value:0})
viewof LaMesseria = Inputs.radio([1,2,3,4], {label: "La Messeria NY",value:0})
chart = {
const width = 960,
height = 900;
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','240')
.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','240')
.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','255')
.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','255')
.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','600')
.attr('y','250')
.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','600')
.attr('y','260')
.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();
}
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.
