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

height = 800;

const svg = d3.create("svg")

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

var p = svg.selectAll('polyline');

var t = svg.selectAll('text');

var l = svg.selectAll('line');

var c = svg.selectAll('circle');

//each export or each drawing here

var layer1lines = lineGraphics(windowunit1)

var layer2lines = lineGraphics(windowunit2)

var layer3lines = lineGraphics(windowunit3)

var layer4lines = lineGraphics(windowunit4)

var layer5lines = lineGraphics(windowunit5)

var layer6lines = lineGraphics(windowunit6)

var layer7lines = lineGraphics(windowunit7)

var layer8lines = lineGraphics(windowunit8)

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer1)

p.enter().append('polyline')

.data(tab2)

.enter()

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer2)

p.enter().append('polyline')

.data(tab3)

.enter()

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer3)

p.enter().append('polyline')

.data(tab4)

.enter()

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer4)

p.enter().append('polyline')

.data(tab5)

.enter()

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer5)

p.enter().append('polyline')

.data(tab6)

.enter()

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer6)

p.enter().append('polyline')

.data(tab7)

.enter()

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer7)

p.enter().append('polyline')

.data(tab8)

.enter()

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer8)

/////this is the static text for tool numbers

svg

.append('text')

.attr('x','50')

.attr('y','97')

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

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

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

.style('fill','grey')

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

.text("1.")

svg

.append('text')

.attr('x','50')

.attr('y','144.5')

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

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

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

.style('fill','grey')

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

.text("2.")

svg

.append('text')

.attr('x','50')

.attr('y','202.4')

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

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

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

.style('fill','grey')

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

.text("3.")

svg

.append('text')

.attr('x','50')

.attr('y','260.6')

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

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

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

.style('fill','grey')

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

.text("4.")

svg

.append('text')

.attr('x','50')

.attr('y','329.9')

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

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

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

.style('fill','grey')

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

.text("5. ")

svg

.append('text')

.attr('x','50')

.attr('y','391.6')

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

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

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

.style('fill','grey')

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

.text("6. ")

/////this is the static text for tab numbers

svg

.append('text')

.attr('x','38')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("1")

svg

.append('text')

.attr('x','78.1')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("2")

svg

.append('text')

.attr('x','118.2')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("3")

svg

.append('text')

.attr('x','158.3')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("4")

svg

.append('text')

.attr('x','198.4')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("5")

svg

.append('text')

.attr('x','238.5')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("6")

svg

.append('text')

.attr('x','280')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("7")

svg

.append('text')

.attr('x','320')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("8")

/////

svg

.append('text')

.attr('x','50')

.attr('y','600')

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

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

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

.style('fill','grey')

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

.text("1. Utility Knife")

svg

.append('text')

.attr('x','50')

.attr('y','620')

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

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

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

.style('fill','grey')

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

.text("2. Paint Sraper")

svg

.append('text')

.attr('x','50')

.attr('y','640')

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

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

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

.style('fill','grey')

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

.text("3. Screw Driver")

svg

.append('text')

.attr('x','50')

.attr('y','660')

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

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

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

.style('fill','grey')

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

.text("4. Safety First")

svg

.append('text')

.attr('x','50')

.attr('y','680')

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

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

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

.style('fill','grey')

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

.text("5. Rope Cutter")

svg

.append('text')

.attr('x','50')

.attr('y','700')

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

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

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

.style('fill','grey')

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

.text("6. Hammer")

//LAYER 1

function layer1(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 1.")

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Existing Window Assembly")

}

//LAYER 2

function layer2(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 2.")

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Remove and Disassemble Front Casing")

///////Anno

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','258')

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

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

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

.style('fill','grey')

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

.text("Head Casing")

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','348.7')

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

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

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

.style('fill','grey')

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

.text("Side Casing")

}

//LAYER 3

function layer3(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 3.")

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Remove Caulking and Disassemble Jamb Extension Frame")

///////Anno

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','258')

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

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

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

.style('fill','grey')

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

.text("Head Jamb")

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','270')

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

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

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

.style('fill','grey')

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

.text("Extension")

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','348.7')

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

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

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

.style('fill','grey')

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

.text("Side Jamb")

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','360')

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

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

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

.style('fill','grey')

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

.text("Extensions")

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','483')

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

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

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

.style('fill','grey')

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

.text("Stool")

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','498')

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

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

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

.style('fill','grey')

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

.text("Apron")

svg

.append('text')

.attr('class','lineText')

.attr('x','138')

.attr('y','550')

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

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

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

.style('fill','grey')

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

.text("Disassembled Components")

svg

.append('text')

.attr('class','lineText')

.attr('x','565')

.attr('y','582')

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

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

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

.style('fill','grey')

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

.text("2in galv. drywall screws ")

}

//LAYER 4

function layer4(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 4.")

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Score Paint and Remove Window Stop")

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','258')

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

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

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

.style('fill','grey')

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

.text("Window Stop")

}

//LAYER 5

function layer5(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 5.")

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Pop out First Sash and Cut Associated Pulley System")

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','415')

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

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

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

.style('fill','grey')

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

.text("First Sash")

}

//LAYER 6

function layer6(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 6.")

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Pop out Parting Bead and Detach from Frame")

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','352')

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

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

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

.style('fill','grey')

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

.text("Parting Bead")

}

//LAYER 7

function layer7(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 7.")

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Pop out Second Sash and Cut Associated Pulley System")

svg

.append('text')

.attr('class','lineText')

.attr('x','331.5')

.attr('y','300')

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

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

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

.style('fill','grey')

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

.text("Second Sash")

}

//LAYER 8

function layer8(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

.style('fill-opacity',function(d){return d.fillopac})

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 8.")

svg

.append('text')

.attr('class','lineText')

.attr('x','180')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Separate Glass Panes from Sash ")

}

//line styles here for each lineweight

function lineGraphics(rhino){

var list = rhino

var cleanLines = []

//var counter = 0

for (let n = 1; n < 10; n=n+1) {//copy this line

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

if(list[i+1][0]==n){//copy this line

var id = list[i+1][0]

var sw

var str

var dash

var opac

var fill

var fOpac

//to add attribute, add var here

if(id==1){

sw = .8

str = 'black'

dash = '1 0'

opac = 1

fill = 'none'

//to add attribute, add value here, and on all of the text number

}

if(id==2){

sw = .5

str = 'lightgrey'

dash = '1 0'

opac = 1

fill = 'none'

}

if(id==3){

sw = .25

str = 'grey'

dash = '4 2'

opac = 1

fill = 'none'

}

if(id==4){

sw = 0

str = 'black'

dash = '1 0'

opac = 1

fill = 'black'

}

if(id==5){

sw = .25

str = 'grey'

dash = '1 0'

opac = 1

fill = 'none'

}

if(id==6){

sw = .8

str = 'black'

dash = '1 0'

opac = 1

fill = 'none'

}

if(id==7){

sw = .25

str = 'grey'

dash = '1 0'

opac = 1

fill = 'grey'

}

if(id==8){

sw = 0

str = 'lightgrey'

dash = '1 0'

fOpac = .05

fill = 'grey'

}

cleanLines.push({pts:list[i],id:id,sw:sw,str:str,dash:dash,opac:opac,fill:fill,fillopac:fOpac})//to add more data, make new field, like pts, id, Zone, etc, and set the variable you created above equal to it

}

}///--

}////

cleanLines.reverse()////

return cleanLines

}

return svg.node();

}

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

height = 800;

const svg = d3.create("svg")

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

var p = svg.selectAll('polyline');

var t = svg.selectAll('text');

var l = svg.selectAll('line');

var c = svg.selectAll('circle');

//each export or each drawing here

var layer1lines = lineGraphics(stud_1)

var layer2lines = lineGraphics(stud_2)

var layer3lines = lineGraphics(stud_3)

var layer4lines = lineGraphics(stud_4)

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer1)

p.enter().append('polyline')

.data(tab2)

.enter()

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer2)

p.enter().append('polyline')

.data(tab3)

.enter()

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer3)

p.enter().append('polyline')

.data(tab4)

.enter()

.append('polyline')

.attr('class','tab')

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

.style("fill", 'lightgrey')

.on('click', layer4)

/////this is the static text for tool numbers

svg

.append('text')

.attr('x','682')

.attr('y','97')

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

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

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

.style('fill','grey')

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

.text("1.")

svg

.append('text')

.attr('x','682')

.attr('y','150')

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

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

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

.style('fill','grey')

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

.text("2.")

svg

.append('text')

.attr('x','682')

.attr('y','203')

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

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

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

.style('fill','grey')

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

.text("3.")

svg

.append('text')

.attr('x','682')

.attr('y','256')

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

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

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

.style('fill','grey')

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

.text("4.")

svg

.append('text')

.attr('x','682')

.attr('y','309')

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

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

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

.style('fill','grey')

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

.text("5. ")

/////this is the static text for tab numbers

svg

.append('text')

.attr('x','38')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("1")

svg

.append('text')

.attr('x','78.1')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("2")

svg

.append('text')

.attr('x','118.2')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("3")

svg

.append('text')

.attr('x','158.3')

.attr('y','25')

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

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

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

.style('fill','white')

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

.text("4")

/////

svg

.append('text')

.attr('x','682')

.attr('y','600')

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

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

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

.style('fill','grey')

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

.text("1. Screwdriver")

svg

.append('text')

.attr('x','682')

.attr('y','620')

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

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

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

.style('fill','grey')

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

.text("2. Cat's Paw")

svg

.append('text')

.attr('x','682')

.attr('y','640')

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

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

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

.style('fill','grey')

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

.text("3. Pry Tool")

svg

.append('text')

.attr('x','682')

.attr('y','660')

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

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

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

.style('fill','grey')

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

.text("4. Hammer")

svg

.append('text')

.attr('x','682')

.attr('y','680')

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

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

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

.style('fill','grey')

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

.text("5. Safety Glasses")

//LAYER 1

function layer1(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

svg

.append('text')

.attr('class','lineText')

.attr('x','60')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 1.")

svg

.append('text')

.attr('class','lineText')

.attr('x','60')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Existing Stud And Drywall Wall")

}

//LAYER 2

function layer2(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

svg

.append('text')

.attr('class','lineText')

.attr('x','60')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 2.")

svg

.append('text')

.attr('class','lineText')

.attr('x','60')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Remove Door, Door Trim, Door Frame, Salvaging All For Reuse")

}

//LAYER 3

function layer3(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

svg

.append('text')

.attr('class','lineText')

.attr('x','60')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 3.")

svg

.append('text')

.attr('class','lineText')

.attr('x','60')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Demolish Drywall Collecting For Recycling")

}

//LAYER 4

function layer4(event,d){

svg.selectAll('polyline.tab').style('fill','lightgrey')

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

svg.selectAll("polyline.assembly").remove()

svg.selectAll("text.lineText").remove()

p.enter().append('polyline')

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

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

.append('polyline')

.attr('class','assembly')

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

.style("fill", function(d){return d.fill})

.style('stroke-opacity',function(d){return d.opac})

.style('stroke-dasharray',function(d){return d.dash})

.style("stroke-width", function(d){return d.sw})

.style("stroke", function(d){return d.str})

svg

.append('text')

.attr('class','lineText')

.attr('x','60')

.attr('y','100')

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

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

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

.style('fill','grey')

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

.text("STEP 4.")

svg

.append('text')

.attr('class','lineText')

.attr('x','60')

.attr('y','125')

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

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

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

.style('fill','grey')

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

.text("Use Prybar To Disassemble Studs Saved For Reuse")

}

//line styles here for each lineweight

function lineGraphics(rhino){

var list = rhino

var cleanLines = []

//var counter = 0

for (let n = 1; n < 10; n=n+1) {//copy this line

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

if(list[i+1][0]==n){//copy this line

var id = list[i+1][0]

var sw

var str

var dash

var opac

var fill

//to add attribute, add var here

if(id==1){

sw = .8

str = 'black'

dash = '1 0'

opac = 1

fill = 'none'

//to add attribute, add value here, and on all of the text number

}

if(id==2){

sw = .5

str = 'lightgrey'

dash = '1 0'

opac = 1

fill = 'none'

}

if(id==3){

sw = .25

str = 'grey'

dash = '4 2'

opac = 1

fill = 'none'

}

if(id==4){

sw = 0

str = 'black'

dash = '1 0'

opac = 1

fill = 'black'

}

if(id==5){

sw = .25

str = 'grey'

dash = '1 0'

opac = 1

fill = 'none'

}

if(id==6){

sw = .8

str = 'black'

dash = '1 0'

opac = 1

fill = 'none'

}

if(id==7){

sw = .25

str = 'grey'

dash = '1 0'

opac = 1

fill = 'grey'

}

cleanLines.push({pts:list[i],id:id,sw:sw,str:str,dash:dash,opac:opac,fill:fill})//to add more data, make new field, like pts, id, Zone, etc, and set the variable you created above equal to it

}

}///

}////

cleanLines.reverse()////

return cleanLines

}

return svg.node();

}

var list = rhino

var cleanLines = []

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

var id = list[i+1][0]

var sw

var str

var dash

var opac

var fill

if(id==1){

sw = .2

str = 'red'

dash = '1 0'

opac = 1

fill = 'none'

}

if(id==2){

sw = .1

str = 'black'

dash = '1 0'

opac = 1

fill = 'none'

}

if(id==3){

sw = 3

str = 'black'

dash = '1 0'

opac = 1

fill = 'none'

}

if(id==4){

sw = 2

str = 'black'

dash = '1 0'

opac = 1

fill = 'none'

}

if(id==5){

sw = 1

str = 'black'

dash = '1 0'

opac = 1

fill = 'none'

}

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

//i added this, the id of the

cleanLines.push({pts:list[i],id:id,sw:sw,str:str,dash:dash,opac:opac,fill:fill})//to add more data, make new field, like pts, id, Zone, etc, and set the variable you created above equal to it

}

return cleanLines