base map - UD Spring 2024 2/21 - fleet's version / Fleet Hower

Fleet Hower

Workspace

Public

Edited

Feb 28, 2024

Fork of base map - UD Spring 2024 1/24 - fleet's version

•

3 forks

# base map - UD Spring 2024 2/21 - fleet's version

d3 = require("d3@6")

dogPic = FileAttachment("IMG_7768.jpg").url()

mutable wallet = 100

chart = {

const width = 800,

height = 800;

const svg = d3.create("svg")

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

// Use Mercator projection

var projection = d3

.geoMercator()

.fitSize([width - 50, height - 50], bbox_01);

var path1 = d3.geoPath().projection(projection);

var path2 = d3.geoPath().projection(projection);

var path3 = d3.geoPath().projection(projection);

var path4 = d3.geoPath().projection(projection);

var g = svg.append("g").attr("id", "paths");

var t = svg.selectAll('text')

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

.data(helena_roads.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", '.35')

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

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

.data(trails.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", "none")

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

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

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

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

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

.data(streams.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", "none")

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

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

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

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

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

.data(steak)

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

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

.attr('class','steakPts')

.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)

.style('fill','black')

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

svg

.append('line')

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

.attr('x1','125')

.attr('y1','725')

.attr('x2','400')

.attr('y2','725')

.style('stroke','black')

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

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

var p = svg.selectAll("polyline")

.data(barn_test)

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

.append("polyline")

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

.attr('transform','translate(200,300)')

.style('fill','white')

.style('stroke','black')

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

.on('click',reset)

//resets to original map when the white barn is clicked on

function reset(){

d3.selectAll('polyline.cowIcon').remove()

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

d3.selectAll('image.dogImage').remove()

mutable wallet = 100

}

p.enter().append("polyline")

.data(cow_test)

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

.append("polyline")

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

.style('fill','red')

.style('stroke','black')

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

p.enter().append("polyline")

.data(icon_list)

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

.append("polyline")

.attr('class','icon')

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

.attr('transform',function(d){return 'translate('+projection([d.data.Long,d.data.Lat])[0]+','+projection([d.data.Long,d.data.Lat])[1]+')'})

.style('fill',fillColor)

.style('stroke','black')

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

.on('mouseover',steakInfo)//listens for a mousover, and calls function

.on('mouseout',steakInfoOut)

.on('click',steakClick)

function steakClick(event,d){

console.log('steak click')

//remove any cow icon

d3.selectAll('polyline.cowIcon').remove()

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

d3.selectAll('image.dogImage').remove()

//draw cow icon at click

p.enter().append("polyline")

.data(cow_origin)

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

.append("polyline")

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

.attr('class','cowIcon')

.attr('transform','translate('+projection([d.data.Long,d.data.Lat])[0]+','+projection([d.data.Long,d.data.Lat])[1]+')')

.style('fill','black')

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

//console.log(d.data.Name)

//console.log(menuData[i].name)

if(d.data.Name==menuData[i].name){//match our clicked icon name w/ menu restaurant name

//write our menu here:

t.enter().append('text')

.data(menuData[i].menu)

.enter()

.append('text')

.attr('class','menuText')

.attr('x','600')

.attr('y',function(d,i){return 500+(i*20)})

.style("font-family", "Helvetica")

.style('font-size','.75em')

.style('fill','rgb(0,00,0)')

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

.text(function(d){return d.order})

.on('click',buyFood)

function buyFood(event,d){

mutable wallet = mutable wallet -d.price

}

t.enter().append('text')

.data(menuData[i].menu)

.enter()

.append('text')

.attr('class','menuText')

.attr('x','700')

.attr('y',function(d,i){return 500+(i*20)})

.style("font-family", "Helvetica")

.style('font-size','.75em')

.style('font-weight','1000')

.style('fill','rgb(0,00,0)')

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

.text(function(d){return d.price})

////write prompt from google sheets

svg

.append('text')

.attr('class','menuText')

.attr('x','600')

.attr('y','425')

.style("font-family", "Helvetica")

.style('font-size','.75em')

.style('fill','rgb(0,0,0)')

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

.text(d.data.Prompt)

//show dog image here

svg.append('image')

.attr('xlink:href',d.data.Image)

.attr('class','dogImage')

.attr('x', '600')

.attr('y','600')

.attr('width', 100)

}

function fillColor(d,i){

var color = 'rgb(0,0,0)'

if(d.data.Rating==5){color = 'rgb(255,255,0)'

console.log("match")}

if(d.data.Rating==4){color = 'rgb(215,215,0)'}

if(d.data.Rating==3){color = 'rgb(175,175,0)'}

if(d.data.Rating==2){color = 'rgb(135,135,0)'}

if(d.data.Rating==1){color = 'rgb(95,95,0)'}

return color

}

function steakInfo(event,d){

d3.select(this).style('fill','red')

svg

.append('text')

.attr('class','steakText')

.attr('x','150')

.attr('y','700')

.style("font-family", "Helvetica")

.style('font-size','.75em')

.style('fill','rgb(0,200,0)')

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

.text(d.data.Name)

svg

.append('line')

.attr('class','steakLine')

.attr('x1','125')

.attr('y1','725')

.attr('x2','400')

.attr('y2','725')

.style('stroke','black')

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

///draw the rating icons

var ratingList = []

if(d.data.Rating==2){ratingList = [exclamation,exclamation]}

if(d.data.Rating==3){ratingList = [exclamation,exclamation,exclamation]}

if(d.data.Rating==4){ratingList = [exclamation,exclamation,exclamation,exclamation]}

if(d.data.Rating==5){ratingList = [exclamation,exclamation,exclamation,exclamation,exclamation]}

p.enter().append("polyline")

.data(ratingList)

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

.append("polyline")

.attr('class','icon_rating')

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

.attr('transform',function(d,i){return 'translate('+(150+(i*35))+',200)'})

.style('fill','black')

.style('stroke','none')

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

}

function steakInfoOut(event,d){

d3.selectAll('polyline.icon').style('fill',fillColor)

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

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

d3.selectAll('polyline.icon_rating').remove()

}

return svg.node();

}

menuData = {

var array = []

//add restaurants and menu items to array

array.push({name:"Montana City Grill and Saloon",menu:[{order:"Filet Mignon",price:'30'},{order:"Ribeye",price:'25'},{order:"TBone",price:'40'}]})

return array

}

subSts = FileAttachment("sub_stops.geojson").json()

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

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

subLns = FileAttachment("subway_lines.geojson").json()

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

helena_roads = FileAttachment("helena_roads_01.geojson").json()

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

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

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

steak_link = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vR8X-dzSRwsv4ASzWuzuXPAlKOb43hFdbmvxSKYyvZfWy0hoUUKntEsOZ-Jgfe0hLPG7v-ZFU6HDpuW/pub?output=csv'

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

cow_test = FileAttachment("cow_test.txt").tsv({array:true})

dashboard_graphics_01 = FileAttachment("dashboard_graphics_01.txt").tsv({array:true})

dashboardGraphics = {

const width = 1000,

height = 1000;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(dashboard_graphics_01)

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

.append("polyline")

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

.style('fill','black')

//.style('stroke','black')

//.style('stroke-width','3')

return svg.node();

}

dashboard =

html`

${dashboardGraphics}

</div>

${//chart}

</div>

${md`*Dinner Budget*`}

</div>

${wallet}

</div>

${md`*Montana Steak Adventure*`}

</div>

${viewof bbb}

${viewof scc}

${viewof mcgs}

</div>

${md`Anticipated Enjoment: **${calculatedValues[0]}** `}

</div>

${md`Anticipated Cost: **${calculatedValues[1]}** `}

</div>

${drawCow}

</div>

drawCow = {

var icon = ' '

if(calculatedValues[0]>12 && calculatedValues[1]<200){icon = cowIcon}

return icon

}

viewof bbb = Inputs.radio(["0", "1", "2"], {label: "Bad Betty's Barbecue"})

viewof scc = Inputs.radio(["0", "1", "2"], {label: "Shellie's Country Cafe"})

viewof mcgs = Inputs.radio(["0", "1", "2"], {label: "Montana City Grill and Saloon"})

bbb

steakDataset = [

{name:"bbb",rating:4,cost:12},

{name:"scc",rating:3,cost:8},

{name:"mcgs",rating:2,cost:20}

]

calculatedValues = {

var totalRating = 0

var totalCost = 0

totalRating = totalRating+steakDataset[0].rating*bbb

totalRating = totalRating+steakDataset[1].rating*scc

totalRating = totalRating+steakDataset[2].rating*mcgs

totalCost = totalCost+steakDataset[0].cost*bbb

totalCost = totalCost+steakDataset[1].cost*scc

totalCost = totalCost+steakDataset[2].cost*mcgs

return [totalRating,totalCost]

}

calculatedValues[1]//this is our total cost

cow_origin = FileAttachment("cow_origin.txt").tsv({array:true})

cowIcon = {

const width = 90,

height = 60;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(cow_origin)

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

.append("polyline")

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

.style('fill','black')

//.style('stroke','black')

//.style('stroke-width','3')

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