base map - UD Spring 2024 - TroyV3 / Zach Stankovics's Workspace

Zach Stankovics's Workspace

Workspace

Public

Edited

Feb 21, 2024

Fork of base map - UD Spring 2024 - TroyV3

# base map - UD Spring 2024 - TroyV3

d3 = require("d3@6")

bbox = FileAttachment("boxerererer.geojson").json()

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

bldgs = FileAttachment("aa RensBuildingFP.geojson").json()

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

fire = FileAttachment("firre4.geojson").json()

mypoints = FileAttachment("troy-historic.geojson").json()

haunt = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQG8HcXWHsAAw44o2BILgcxKsaDuZx5dlKGLst82ViwY1fb_3X-t6qw0OSYQhdatnHiXJ8stmqsj5ip/pub?gid=2010654036&single=true&output=csv"

haunted = d3.csv(haunt,d3.autotype)

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

personal_spots = d3.csv(personal_spots_link,d3.autoType)

import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"

ghostIconForMap = FileAttachment("ghost icon for map.txt").tsv({array:true})

icon_list = {

////create empty list

var list = []

//// loop through google sheets list

for (let i = 0; i < haunted.length; i++) {

haunted[i]

//function to add items to a list

list.push({data:haunted[i],pts:ghostIconForMap})

}

////return list

return list

}

dashboard = FileAttachment("dashboard@2.txt").tsv({array:true})

dashboard2 = FileAttachment("dashboard 2.txt").tsv({array:true})

dashboard_graphics = {

const width = 35660,

height = 40000;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(dashboard)

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

.append("polyline")

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

.attr('transform', 'translate(1000,-10000)')

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

.style('fill', 'dark grey')

.style('stroke','black')

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

.style('stroke-fill', '4,4,8,8')

.style("stroke-opacity", "50")

return svg.node();

}

dashboard_graphics2 = {

const width = 35660,

height = 40000;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(dashboard2)

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

.append("polyline")

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

.attr('transform', 'translate(1000,-11250)')

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

.style('fill', 'white')

.style('stroke','black')

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

.style('stroke-fill', '4,4,8,8')

.style("stroke-opacity", "50")

return svg.node();

}

dashboard1 =

html`

${dashboard_graphics}

</div>

${dashboard_graphics2}

</div>

${chart}

${viewof NSBB}

</div>

${viewof MCCB}

</div>

${viewof IB}

</div>

${viewof WLE}

</div>

${viewof CHC}

</div>

${viewof CCC}

</div>

${viewof PO}

</div>

${viewof WCL}

</div>

${viewof TX}

</div>

${viewof BMH}

</div>

${viewof SPC}

</div>

${viewof PT}

</div>

${viewof FA}

</div>

${viewof RSE}

</div>

${viewof HCH}

</div>

${viewof TPL}

</div>

${viewof PH}

</div>

${viewof PS}

</div>

${md`Ghost Option 1: **${calculatedValues[0]}** `}

</div>

${DrawGhostMap}

</div>

${md`Ghost Option 2: **${calculatedValues[1]}** `}

</div>

${DrawGhostMap}

</div>

${md`Ghost Option 3: **${calculatedValues[2]}** `}

</div>

${DrawGhostMap}

</div>

DrawGhostMap = {

var icon = ' '

if(calculatedValues[0]>=5) {icon = drawghost}

if(calculatedValues[1]>=4) {icon = drawghost2}

if(calculatedValues[2]>=6) {icon = drawghost3}

return icon

}

viewof NSBB = Inputs.radio(["1"], {label: "National State Bank Building?"})

viewof MCCB = Inputs.radio(["1"], {label: "McCarthy Building?"})

viewof IB = Inputs.radio(["1"], {label: "Ilium Building?"})

viewof WLE = Inputs.radio(["1"], {label: "W. & L.E. Gurley Building?"})

viewof CHC = Inputs.radio(["1"], {label: "Church of the Holy Cross?"})

viewof CCC = Inputs.radio(["1"], {label: "Chapel and Cultural Center?"})

viewof PO = Inputs.radio(["1"], {label: "U.S Post Office?"})

viewof WCL = Inputs.radio(["1"], {label: "Winslow Chemical Lab?"})

viewof TX = Inputs.radio(["1"], {label: "Theta Xi?"})

viewof BMH = Inputs.radio(["1"], {label: "Troy Savings Bank and Music Hall?"})

viewof SPC = Inputs.radio(["1"], {label: "St. Paul's Episcopal Church?"})

viewof PT = Inputs.radio(["1"], {label: "Proctor's Theater?"})

viewof FA = Inputs.radio(["1"], {label: "Fire Alarm, Telegraph, and Police Signaling Building?"})

viewof RSE = Inputs.radio(["1"], {label: "RSE?"})

viewof HCH = Inputs.radio(["1"], {label: "Hart-Cluett House?"})

viewof TPL = Inputs.radio(["1"], {label: "Troy Public Library?"})

viewof PH = Inputs.radio(["1"], {label: "Pumpkin House?"})

viewof PS = Inputs.radio(["1"], {label: "Public School No. 10?"})

HistoricDataset = [

{name:"NSBB",haunt: 1},

]

Haunt1Dataset = [

{name:"NSBB",haunt: 0},

{name:"MCCB",haunt: 0},

{name:"IB",haunt: 1},

{name:"WLE",haunt: 0},

{name:"CHC",haunt: 0},

{name:"CCC",haunt: 0},

{name:"PO",haunt: 0},

{name:"WCL",haunt: 1},

{name:"TX",haunt: 1},

{name:"BMH",haunt: 1},

{name:"SPC",haunt: 0},

{name:"PT",haunt: 0},

{name:"FA",haunt: 0},

{name:"RSE",haunt: 0},

{name:"HCH",haunt: 0},

{name:"TPL",haunt: 0},

{name:"PH",haunt: 1},

{name:"PS",haunt: 0},

]

Haunt2Dataset = [

{name:"NSBB",haunt: 0},

{name:"MCCB",haunt: 0},

{name:"IB",haunt: 0},

{name:"WLE",haunt: 0},

{name:"CHC",haunt: 0},

{name:"CCC",haunt: 0},

{name:"PO",haunt: 0},

{name:"WCL",haunt: 0},

{name:"TX",haunt: 0},

{name:"BMH",haunt: 0},

{name:"SPC",haunt: 1},

{name:"PT",haunt: 1},

{name:"FA",haunt: 0},

{name:"RSE",haunt: 0},

{name:"HCH",haunt: 1},

{name:"TPL",haunt: 0},

{name:"PH",haunt: 0},

{name:"PS",haunt: 1},

]

Haunt3Dataset = [

{name:"NSBB",haunt: 1},

{name:"MCCB",haunt: 0},

{name:"IB",haunt: 0},

{name:"WLE",haunt: 1},

{name:"CHC",haunt: 1},

{name:"CCC",haunt: 0},

{name:"PO",haunt: 1},

{name:"WCL",haunt: 0},

{name:"TX",haunt: 0},

{name:"BMH",haunt: 0},

{name:"SPC",haunt: 0},

{name:"PT",haunt: 0},

{name:"FA",haunt: 0},

{name:"RSE",haunt: 0},

{name:"HCH",haunt: 1},

{name:"TPL",haunt: 1},

{name:"PH",haunt: 0},

{name:"PS",haunt: 0},

]

calculatedValues = {

var haunt1 = 0

var haunt2 = 0

var haunt3 = 0

haunt1 = haunt1+Haunt1Dataset[0].haunt*NSBB

haunt1 = haunt1+Haunt1Dataset[1].haunt*MCCB

haunt1 = haunt1+Haunt1Dataset[2].haunt*IB

haunt1 = haunt1+Haunt1Dataset[3].haunt*WLE

haunt1 = haunt1+Haunt1Dataset[4].haunt*CHC

haunt1 = haunt1+Haunt1Dataset[5].haunt*CCC

haunt1 = haunt1+Haunt1Dataset[6].haunt*PO

haunt1 = haunt1+Haunt1Dataset[7].haunt*WCL

haunt1 = haunt1+Haunt1Dataset[8].haunt*TX

haunt1 = haunt1+Haunt1Dataset[9].haunt*BMH

haunt1 = haunt1+Haunt1Dataset[10].haunt*SPC

haunt1 = haunt1+Haunt1Dataset[11].haunt*PT

haunt1 = haunt1+Haunt1Dataset[12].haunt*FA

haunt1 = haunt1+Haunt1Dataset[13].haunt*RSE

haunt1 = haunt1+Haunt1Dataset[14].haunt*HCH

haunt1 = haunt1+Haunt1Dataset[15].haunt*TPL

haunt1 = haunt1+Haunt1Dataset[16].haunt*PH

haunt1 = haunt1+Haunt1Dataset[17].haunt*PS

haunt2 = haunt2+Haunt2Dataset[0].haunt*NSBB

haunt2 = haunt2+Haunt2Dataset[1].haunt*MCCB

haunt2 = haunt2+Haunt2Dataset[2].haunt*IB

haunt2 = haunt2+Haunt2Dataset[3].haunt*WLE

haunt2 = haunt2+Haunt2Dataset[4].haunt*CHC

haunt2 = haunt2+Haunt2Dataset[5].haunt*CCC

haunt2 = haunt2+Haunt2Dataset[6].haunt*PO

haunt2 = haunt2+Haunt2Dataset[7].haunt*WCL

haunt2 = haunt2+Haunt2Dataset[8].haunt*TX

haunt2 = haunt2+Haunt2Dataset[9].haunt*BMH

haunt2 = haunt2+Haunt2Dataset[10].haunt*SPC

haunt2 = haunt2+Haunt2Dataset[11].haunt*PT

haunt2 = haunt2+Haunt2Dataset[12].haunt*FA

haunt2 = haunt2+Haunt2Dataset[13].haunt*RSE

haunt2 = haunt2+Haunt2Dataset[14].haunt*HCH

haunt2 = haunt2+Haunt2Dataset[15].haunt*TPL

haunt2 = haunt2+Haunt2Dataset[16].haunt*PH

haunt2 = haunt2+Haunt2Dataset[17].haunt*PS

haunt3 = haunt3+Haunt3Dataset[0].haunt*NSBB

haunt3 = haunt3+Haunt3Dataset[1].haunt*MCCB

haunt3 = haunt3+Haunt3Dataset[2].haunt*IB

haunt3 = haunt3+Haunt3Dataset[3].haunt*WLE

haunt3 = haunt3+Haunt3Dataset[4].haunt*CHC

haunt3 = haunt3+Haunt3Dataset[5].haunt*CCC

haunt3 = haunt3+Haunt3Dataset[6].haunt*PO

haunt3 = haunt3+Haunt3Dataset[7].haunt*WCL

haunt3 = haunt3+Haunt3Dataset[8].haunt*TX

haunt3 = haunt3+Haunt3Dataset[9].haunt*BMH

haunt3 = haunt3+Haunt3Dataset[10].haunt*SPC

haunt3 = haunt3+Haunt3Dataset[11].haunt*PT

haunt3 = haunt3+Haunt3Dataset[12].haunt*FA

haunt3 = haunt3+Haunt3Dataset[13].haunt*RSE

haunt3 = haunt3+Haunt3Dataset[14].haunt*HCH

haunt3 = haunt3+Haunt3Dataset[15].haunt*TPL

haunt3 = haunt3+Haunt3Dataset[16].haunt*PH

haunt3 = haunt3+Haunt3Dataset[17].haunt*PS

return [haunt1, haunt2, haunt3]

}

calculatedValues[0,1,2]

drawghost = {

const width = 90,

height = 60;

const svg = d3.create("svg")

.attr("viewBox", [-40, -30, width, height]);

var p = svg.selectAll("polyline")

.data(ghostIconForMap)

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

.append("polyline")

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

.style('fill','cyan')

.style('stroke','black')

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

return svg.node();

}

drawghost2 = {

const width = 90,

height = 60;

const svg = d3.create("svg")

.attr("viewBox", [-40, -30, width, height]);

var p = svg.selectAll("polyline")

.data(ghostIconForMap)

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

.append("polyline")

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

.style('fill','white')

.style('stroke','black')

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

return svg.node();

}

drawghost3 = {

const width = 90,

height = 60;

const svg = d3.create("svg")

.attr("viewBox", [-40, -30, width, height]);

var p = svg.selectAll("polyline")

.data(ghostIconForMap)

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

.append("polyline")

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

.style('fill','yellow')

.style('stroke','black')

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

return svg.node();

}

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