Victoria's Test Chunk - fleet edited
st3 = FileAttachment("square_test3.txt").tsv({array:true})
square_test = FileAttachment("square_test.txt").tsv({array:true})
chart = {
const width = 1000,
height = 1000;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var g = svg.append("g").attr("id", "paths");
/* var a = svg.selectAll("polyline")
.data(detail)
.enter()
.append()
.style("stroke","black")//style
.style("stroke-width","1px") */
var p = svg.selectAll("polyline") //d3 geopath
.data(outlines)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d.pts})//required attributes
.style("stroke","black")//style
.style("stroke-width","2px")
.style("fill","white")
.on("mouseover", polyHover)
.on("mouseout", polyHoverOut)
//////////////////////////////////////////////
/////////////////////i added the chunk below////////////
/////after the first polyline chunk, you have the use the line below to initiate following polylines
/////////////////////
//////////////now, if you use the python script that exports just lines, bring that data set in and replace outlines below w/ them
p.enter().append("polyline") //d3 geopath
.data(building1detailtest2)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d.pts})//required attributes
.style("stroke","black")//style
.style("stroke-width","2px")
.style("fill","white")
function polyHover(event,d) {
// console.log("Meow.")
svg
.append("text")
.attr("x","200")
.attr("y","500")
.style("stroke", "black")
.style("stroke-width", "1px")
.style("fill", "black")
.attr("class", "hoverText")
.text(d.Address)
.text(d.BuiltDate)
.text(d.AlterredDate)
//.text("meow.🐱 ")
d3.select(this).style("fill", "green")
}
function polyHoverOut(event,d) {
d3.select(this).style("fill", "white")
svg.selectAll("text.hoverText").remove()
}
return svg.node();
}
ass1testchunk3 = FileAttachment("Ass1testchunk3.txt").tsv({array:true})
outlines = {
var list = ass1testchunk3
var spreadsheet = buildingList
var cleanLines = []
for (let i = 0; i < list.length-1; i=i+2) {
var id = list[i+1][0]
var idNum = Number(id)
var Address
var BuiltDate
var AlterredDate
var Floors
var HousingUnits
var GrossSqFt
var LotSqfootage
var NumofWorkers
//i added this, the id of the
for (let k = 0; k < spreadsheet.length;k++) {
if(idNum==spreadsheet[k].ID){
console.log("match!!!!!!")
Address=spreadsheet[k].Address
BuiltDate=spreadsheet[k].BuiltDate
AlterredDate=spreadsheet[k].AlterredDate
Floors=spreadsheet[k].Floors
HousingUnits=spreadsheet[k].HousingUnits
GrossSqFt=spreadsheet[k].GrossSqFt
LotSqfootage=spreadsheet[k].LotSqfootage
NumofWorkers=spreadsheet[k].NumofWorkers
}
}
cleanLines.push({pts:list[i],id:idNum,Address:Address,BuiltDate:BuiltDate,AlterredDate:AlterredDate, Floors:Floors, HousingUnits: HousingUnits, GrossSqFt: GrossSqFt, LotSqfootage:LotSqfootage,NumofWorkers:NumofWorkers })//add features to our final list of objects
}
return cleanLines
}
buildingList_link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQHoEkOagG1XIqW81Mj254IM0GBmGAWX1ZrX7DkhI2lbHVTNv0FzsvRuG67M1U8PBW7-tz_QGGKRe49/pub?output=csv"
buildingList = d3.csv(buildingList_link,d3.autoType)
buildingadetail = FileAttachment("buildingAdetail.txt").tsv({array:true})
detail = {
var list = buildingadetail
var cleanLines= []
return cleanLines
}
building1detailtest2 = FileAttachment("building1detailtest2.txt").tsv({array:true})
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.
