big ass iso / s_25_domination

s_25_domination

Workspace

Public

Edited

Apr 17

Fork of NeighborhoodScale

bigassisochart = {

const width = 1600,//pixel size of the map

height = 4000;

const svg = d3.create("svg")

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

// PNG GOES HERE

svg.append("image")

.attr("href", bigAssIso.src)

.attr("x", 0)

.attr("y", 0)

.attr("width", width)

.attr("height", height);

var c = svg.selectAll('circle')

var p = svg.selectAll('polyline')

var t = svg.selectAll('text')

//outlines

polyline(combineData(newImport,isotextdata),'white','.5','1','2','grey')

function polyline1(data, pfill, pOpac, sOpac, sWght, stroke,pclass,dash){ //these are static lines

p.enter().append("polyline") //this line designates that we're making a polyline

.data(data) //get data to define path

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

.append('polyline')

.attr('class',pclass)

.attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", pfill)

.style("fill-opacity", pOpac)

.style('stroke-opacity',sOpac)

.style("stroke-width", sWght)

.style("stroke-dasharray", dash)

.style("stroke", stroke)

}

function polyline(data, pfill, pOpac, sOpac, sWght, stroke){

p.enter().append("polyline") //this line designates that we're making a polyline

.data(data) //get data to define path

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

.append('polyline')

.attr("points", function(d){return d.pts}) //The d attribute defines a path to be drawn, only applies to appended elements

.attr("class", 'outline')

.style("fill", pfill)

.style("fill-opacity", pOpac)

.style('stroke-opacity',sOpac)

.style("stroke-width", sWght)

.style("stroke", stroke)

.on('click',details)

//.on('mouseout',removeDetails)

}

var txtData = combineData(newImport,isotextdata)

//this description goes with one of the clicks, you need to figure out which one it is - list ordering when you import a spreadsheet is a little unpredictable. you can create the others by referencing other item numbers in txtData, make sure you use the same item number for description and class - the class is that allows it to change on click.

//phase

staticText("PHASE 1",1220,1270,'helvetica',24,'rgb(150,150,150)','1000','start','c'+txtData[2].id)

staticText("PHASE 2",1220,1740,'helvetica',24,'rgb(150,150,150)','1000','start','c'+txtData[1].id)

staticText("PHASE 3",1220,2210,'helvetica',24,'rgb(150,150,150)','1000','start','c'+txtData[0].id)

staticText("PHASE 4",1220,2680,'helvetica',24,'rgb(150,150,150)','1000','start','c'+txtData[4].id)

staticText(txtData[2].subtitle,1220,1300,'helvetica',20,'rgb(150,150,150)','1000','start','c'+txtData[2].id)

staticText(txtData[1].subtitle,1220,1770,'helvetica',20,'rgb(150,150,150)','1000','start','c'+txtData[1].id)

staticText(txtData[0].subtitle,1220,2240,'helvetica',20,'rgb(150,150,150)','1000','start','c'+txtData[0].id)

staticText(txtData[4].subtitle,1220,2710,'helvetica',20,'rgb(150,150,150)','1000','start','c'+txtData[4].id)

//description

staticText(txtData[2].description,1220,1350,'helvetica',18,'rgb(150,150,150)','500','start','c'+txtData[2].id)

staticText(txtData[1].description,1220,1820,'helvetica',18,'rgb(150,150,150)','500','start','c'+txtData[1].id)

staticText(txtData[0].description,1220,2290,'helvetica',18,'rgb(150,150,150)','500','start','c'+txtData[0].id)

staticText(txtData[4].description,1220,2760,'helvetica',18,'rgb(150,150,150)','500','start','c'+txtData[4].id)

//you text positions aren't matching the polgons, you need to rearrange the x and ys of the text

function staticText(text,xVal,yVal,font,fSize,ffill,fWeight,fAnchor,textClass){

svg

.append('text')

.attr('class',textClass)

.attr('x',xVal)//this function causes its contents to be applied to each circle

.attr("y",yVal)

.attr("font-size",fSize)

.attr("font-family",font)

.attr("font-weight",fWeight)

.attr("text-anchor",fAnchor)

.style('fill', ffill)

.text(text)

}

function details(event,d){

//first remove text and make everything white

svg.selectAll('text').style("fill", 'rgb(150,150,150)')

svg.selectAll('polyline.outline').style("fill", 'white')

svg.selectAll('polyline.anoline').remove()

svg.selectAll('text.anotext').remove()

console.log(d.description)

//var element = d3.select("#element");

//var centroid = path.centroid(element.datum());

//console.log(centroid)

d3.select(this).style("fill", 'none')

svg.selectAll('text.c'+d.id).style("fill", 'black')

console.log('text.c'+d.id)

if(d.id==2){

polyline1(annophase1, 'none', '1', '1', '1', 'black','anoline','5 5')

staticText("Typical Interior Wall",1060,1140,'helvetica',16,'black','500','start','anotext')

staticText("Underutilized Office Spaces",980,1550,'helvetica',16,'black','500','start','anotext')

staticText("Cannot be Reconfigured",200,1450,'helvetica',16,'black','500','start','anotext')

}

if(d.id==3){

polyline1(annophase2, 'none', '1', '1', '1', 'black','anoline','5 5')

staticText("Studs for Reuse",1060,1610,'helvetica',16,'black','500','start','anotext')

staticText("Drywall Collection",980,2020,'helvetica',16,'black','500','start','anotext')

staticText("Material Sort",200,1920,'helvetica',16,'black','500','start','anotext')

}

if(d.id==4){

polyline1(annophase3, 'none', '1', '1', '1', 'black','anoline','5 5')

staticText("Corner Connections",1060,2080,'helvetica',16,'black','500','start','anotext')

staticText("Panels Attach without Tools",980,2490,'helvetica',16,'black','500','start','anotext')

staticText("New Panels",200,2390,'helvetica',16,'black','500','start','anotext')

}

if(d.id==5){

polyline1(annophase4, 'none', '1', '1', '1', 'black','anoline','5 5')

staticText("Infinitely Reconfigurable Units",1060,2550,'helvetica',16,'black','500','start','anotext')

staticText("Cooperative Style Shared Living Space",200,2860,'helvetica',16,'black','500','start','anotext')

}

var wrap = svg.selectAll("text.anotext")

.each(function(d, i) { wrap_text(d3.select(this), 100) })

}

function removeDetails(){

svg.selectAll('text.detailText').remove()

d3.select(this).style("fill", 'white')

}

//you don't have to write all of these text blocks, you can simply write lines to use the staticText function, like above....

function combineData(lines,data){

var list = newImport //lines from rhino

var spreadsheet = data//name of spreadsheet

var cleanLines = []

for (let i = 0; i < lines.length; i=i+1) {//loop thought txt of lines

var id = lines[i].id

//var polygon = list[i][0].split(" ")

//polygon = polygon.slice(0,polygon.length-1)

var verts = lines[i].pts

var center = lines[i].center

//for (let p = 0; p < polygon.length; p++) {

//verts.push([Number(polygon[p].split(",")[0]),Number(polygon[p].split(",")[1])])

//}

var idNum = id

var description

var subtitle

//if you want to add more information, create a variable for it

//i added this, the id of the

for (let k = 0; k < spreadsheet.length;k++) {

if(idNum==spreadsheet[k].rhino_id){

//console.log("match!!!!!!")

description=spreadsheet[k].description

subtitle=spreadsheet[k].subtitle//this name is taken straight from the spreadsheet

//take variable from above, and set equal to spreadsheet[k].(name of column in spreadsheet)

}

cleanLines.push({pts:verts,id:idNum,description:description,subtitle:subtitle,

verts:verts})//to add more data, make new field, like pts, id, Zone, etc, and set the variable you created above equal to it//// verts(the last attribute), should stay for other dataset - it allows us to find the centroid of the rhino lines.

}

return cleanLines

}

var wrap = svg.selectAll("text.c1")