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

Zach Stankovics's Workspace

Workspace

Public

Edited

Feb 7, 2024

Fork of base map - UD Spring 2024

# base map - UD Spring 2024

d3 = require("d3@6")

chart = {

const width = 900,

height = 900;

const svg = d3.create("svg")

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

// Use Mercator projection

var projection = d3

.geoMercator()

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

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");

svg

.append("text")

.attr('x','25')

.attr('y','25')

.style('font-family','garamond')

.style('font-size','24px')

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

.text('London')

svg

.append("text")

.attr('x','25')

.attr('y','50')

.style('font-family','garamond')

.style('font-size','18px')

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

.text('Places To Visit:')

svg

.append("line")

.attr('x1','25')

.attr('y1','33')

.attr('x2','142')

.attr('y2','33')

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

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

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

.data(underground.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','.5')

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

.style("stroke", "black")

g.selectAll("path3")

.data(base1.features)

.enter()

.append("path")

.attr('class','outlines')

.attr("d", path3)

.style("fill", "rgb(245,245,245)")

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

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

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

.style("stroke", "black")

g.selectAll("path3")

.data(brownfields.features)

.enter()

.append("path")

.attr('class','outlines')

.attr("d", path3)

.style("fill", "rgb(255,255,255)")

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

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

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

.style("stroke", "black")

g.selectAll("path3")

.data(thames.features)

.enter()

.append("path")

.attr('class','outlines')

.attr("d", path3)

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

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

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

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

.style("stroke", "white")

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

// .data(Points)

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

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

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

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

// .style('fill-opacity','0')

var p = svg.selectAll("polyline")

.data(irons5)

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

.append("polyline")

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

.attr('transform','translate(125,20)')

.style('fill','black')

.style('stroke','none')

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

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

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','none')

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

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

.on('mouseout',pointsinfoout)

function fillColor(d,i){

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

if(d.data.Rank==5){color = 'red'

console.log("match")}

if(d.data.Rank==4){color = 'red'}

if(d.data.Rank==3){color = 'red'}

if(d.data.Rank==2){color = 'red'}

if(d.data.Rank==1){color = 'red'}

return color

}

function pointsinfo(event,d){

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

svg.append('text')

.attr('class','PointsText')

.attr('x','25')

.attr('y','75')

.attr("font-family","Garamond")

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

.attr("font-size","16px")

.style('fill','black')

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

.text(d.data.Name)

svg.append('text')

.attr('class','PointsText')

.attr('x','25')

.attr('y','100')

.attr("font-family","Garamond")

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

.attr("font-size","12px")

.attr('fill','black')

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

.text(d.data.Description)

svg.append('line')

.attr('class','PointLine')

.attr('x1','30')

.attr('y1','100')

.attr('x2',projection([d.data.Long,d.data.Lat])[0])

.attr('y2',projection([d.data.Long,d.data.Lat])[1])

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

.style("stroke", "black")

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

var ratingList = []

if(d.data.Rank==1){ratingList = [irons5]}

if(d.data.Rank==2){ratingList = [irons5,irons5]}

if(d.data.Rank==3){ratingList = [irons5,irons5,irons5]}

if(d.data.Rank==4){ratingList = [irons5,irons5,irons5,irons5]}

if(d.data.Rank==5){ratingList = [irons5,irons5,irons5,irons5,irons5]}

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('+(35+(i*35))+',125)'})

.style('fill','black')

.style('stroke','none')

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

}

function pointsinfoout(event,d){

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

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

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

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

}

return svg.node();

}

icon_list={

var list = []

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

list.push({data: Points[i],pts:irons})

}

return list

}

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

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

base1 = FileAttachment("Base@1.geojson").json()

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

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

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

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

bbox1 = FileAttachment("Bbox.geojson").json()

brownfields = FileAttachment("Brownfields.geojson").json()

thames = FileAttachment("Thames.geojson").json()

underground = FileAttachment("Underground.geojson").json()

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

Points=d3.csv(Points_Link,d3.autoType)

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

dashboardGraphics = {

const width = 900,

height = 900;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(dashboardcastle)

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

.append("polyline")

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

//.attr('transform','translate(125,20)')

.style('fill','white')

.style('stroke','black')

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

return svg.node();

}

dashboard =

html`

${dashboardGraphics}

</div>

${chart}

</div>

${md`*Trip To London*`}

</div>

${viewof LS}

${viewof CPM}

${viewof SPC}

</div>

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

</div>

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

</div>

${drawCastle}

</div>

drawCastle = {

var icon = ' '

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

return icon

}

viewof LS = Inputs.radio(["0","1","2"], {label: "London Stadium"})

viewof CPM = Inputs.radio(["0","1","2"], {label: "Crystal Palace Museum"})

viewof SPC = Inputs.radio(["0","1","2"], {label: "St. Paul's Cathedral"})

LondonDatset = [

{name:"LS",rating:5,cost:25},

{name:"CPM",rating:4,cost:10},

{name:"SPC",rating:3,cost:5}

]

calculatedValues = {

var totalRating = 0

var totalCost = 0

totalRating = totalRating+LondonDatset[0].rating*LS

totalRating = totalRating+LondonDatset[1].rating*CPM

totalRating = totalRating+LondonDatset[2].rating*SPC

totalCost = totalCost+LondonDatset[0].cost*LS

totalCost = totalCost+LondonDatset[1].cost*CPM

totalCost = totalCost+LondonDatset[2].cost*SPC

return [totalRating,totalCost]

}

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

castleIcon = {

const width = 900,

height = 900;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

.data(Castle2)

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

.style('fill-opacity','.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