const width = 1300,

height = 800;

const svg = d3.create("svg")

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

// Use Mercator projection

var projection = d3

.geoMercator()

.fitSize([width - 10, height - 40], DCbb);

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 path5 = d3.geoPath().projection(projection);

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

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

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

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

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

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

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

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

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

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

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

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

.attr('class','static')

.attr("d", path6) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

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

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

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

var Global = 56

function fillHideDot(d,i){

// console.log(Global) //

var color = 'none'

if(d.YEAR_ADDED <= Global) {color = 'white'}

return color

}

function fillHideStroke(d,i){

// console.log(Global) //

var color = 'none'

if(d.YEAR_ADDED <= Global) {color = 'black'}

return color

}

function filterClick(event,d){

var s = d

console.log(d)

Global = d

if(d=='1976'){

d3.selectAll('path.outlines').remove()

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

d3.selectAll('path.linehistory').remove()

svg.append('text')

.attr('class','lineInfo')

.attr('x','100')

.attr('y','580')

.attr('font-family','Tahoma')

.attr('font-size','1.2em')

.attr('fill','black')

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

.attr('font-weight','600')

.text('The opening day of Metrorail')

svg.append('text')

.attr('class','lineInfo')

.attr('x','100')

.attr('y','610')

.attr('font-family','Tahoma')

.attr('font-size','.8em')

.attr('fill','black')

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

.attr('font-weight','400')

.text('By the end of 1976, Metrorail had opened its first six stations on the Red Line between Farragut North and Rhode Island Ave.')

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

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

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

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

.attr('class','linehistory')

.attr("d", path6) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.attr('stroke',lineTypePast) // add function to control color by 'type'

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

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

}

if(d=='1978'){

d3.selectAll('path.outlines').remove()

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

d3.selectAll('path.tractshift').remove()

d3.selectAll('path.linehistory').remove()

svg.append('text')

.attr('class','lineInfo')

.attr('x','100')

.attr('y','580')

.attr('font-family','Tahoma')

.attr('font-size','1.2em')

.attr('fill','black')

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

.attr('font-weight','600')

.text('Red Line expands, Blue Line opens')

svg.append('text')

.attr('class','lineInfo')

.attr('x','100')

.attr('y','610')

.attr('font-family','Tahoma')

.attr('font-size','.8em')

.attr('fill','black')

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

.attr('font-weight','400')

.text('The next two years saw an extension of the Red Line northward to the Maryland suburb of Silver Spring, as well as the launch of the Blue Line linking the Capitol Hill region with Arlington, Virginia and Reagan National Airport. Metro Center was established as the primary interchange.')

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

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

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

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

.attr('class','linehistory')

.attr("d", path6) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.attr('stroke',lineTypePast) // add function to control color by 'type'

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

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

}

if(d=='1983'){

d3.selectAll('path.outlines').remove()

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

d3.selectAll('path.tractshift').remove()

d3.selectAll('path.linehistory').remove()

svg.append('text')

.attr('class','lineInfo')

.attr('x','100')

.attr('y','580')

.attr('font-family','Tahoma')

.attr('font-size','1.2em')

.attr('fill','black')

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

.attr('font-weight','600')

.text('Orange and Yellow lines open')

svg.append('text')

.attr('class','lineInfo')

.attr('x','100')

.attr('y','610')

.attr('font-family','Tahoma')

.attr('font-size','.8em')

.attr('fill','black')

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

.attr('font-weight','400')

.text('The Orange Line, which initially opened in late 1978 as a complement to the Blue Line, eventually detached and formed a second east-west linkage. The Red Line saw modest expansions to the northwest, and the launch of the Yellow Line in 1983 offered a direct line between the National Mall and Reagan National Airport.')

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

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

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

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

.attr('class','linehistory')

.attr("d", path6) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.attr('stroke',lineTypePast) // add function to control color by 'type'

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

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

}

if(d=='1991'){

d3.selectAll('path.outlines').remove()

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

d3.selectAll('path.tractshift').remove()

d3.selectAll('path.linehistory').remove()

svg.append('text')

.attr('class','lineInfo')

.attr('x','100')

.attr('y','580')

.attr('font-family','Tahoma')

.attr('font-size','1.2em')

.attr('fill','black')

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

.attr('font-weight','600')

.text('More growth and launch of Green Line')

svg.append('text')

.attr('class','lineInfo')

.attr('x','100')

.attr('y','610')

.attr('font-family','Tahoma')

.attr('font-size','.8em')

.attr('fill','black')

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

.attr('font-weight','400')

.text('Between 1983 and 1991, the Red Line saw major expansions into the Maryland suburbs at both ends of the line. The Orange Line also saw substantial expansion on its western end into the Virginia suburbs, while the Blue and Yellow lines had smaller growth. The opening of the Green Line marked the first Metro extension into Anacostia.')

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

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

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

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

.attr('class','linehistory')

.attr("d", path6) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.attr('stroke',lineTypePast) // add function to control color by 'type'

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

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

}

if(d=='2004'){

d3.selectAll('path.outlines').remove()

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

d3.selectAll('path.tractshift').remove()

d3.selectAll('path.linehistory').remove()

svg.append('text')

.attr('class','lineInfo')

.attr('x','100')

.attr('y','580')

.attr('font-family','Tahoma')

.attr('font-size','1.2em')

.attr('fill','black')

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

.attr('font-weight','600')

.text('Green Line expands')

svg.append('text')

.attr('class','lineInfo')

.attr('x','100')

.attr('y','610')

.attr('font-family','Tahoma')

.attr('font-size','.8em')

.attr('fill','black')

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

.attr('font-weight','400')

.text('The Green Line saw the most substantial expansion of any Metro line between 1991 and 2004, and now included a station at the University of Maryland campus in College Park.')

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

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

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

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

.attr('class','linehistory')

.attr("d", path6) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.attr('stroke',lineTypePast) // add function to control color by 'type'

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

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

}

function lineTypePast(d,i) {

var color = 'black'

if(d.properties.Text=='silver'){color = 'silver'}

if(d.properties.Text=='blue'){color = 'dodgerblue'}

if(d.properties.Text=='yellow'){color = 'gold'}

if(d.properties.Text=='green'){color = 'olivedrab'}

if(d.properties.Text=='red'){color = 'crimson'}

if(d.properties.Text=='orange'){color = 'peru'}

if(d.properties.Text=='purple'){color = 'rebeccapurple'}

if(d.properties.Text=='pink'){color = 'orchid'}

if(d.properties.Text=='teal'){color = 'mediumturquoise'}

return color

}

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

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

if(100<1000){

d3.selectAll('circle.stationDots').remove()

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

.data(DCstationsGROWTH.features)

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

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

.attr('class', 'outlines')

.attr("fill", d => Yearadded(d.properties.YEAR_ADDED))

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

function Yearadded(age){

var fill = 'grey'

if(Addedyear > d.YEAR_ADDED){

fill = 'black'

}

}

c.enter().append("circle") //d3 geopath

.data(DCstationsGROWTH)

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

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

.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('class','stationDots')

.attr('fill',fillHideDot)

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

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

.attr("stroke-width", "1.25")

.attr("stroke", fillHideStroke)

.on('mouseover', spotText)

.on('mouseout', removeSpotText)

function spotText(event,d){

d3.select(this)

.attr('fill','hotpink')

.attr('r',8)

.style("stroke", "lightpink")

.style("stroke-opacity",'.75')

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

svg.append('text')

.attr('class','spots')

.attr('x','1029')

.attr('y','69')

.attr('font-family','Tahoma')

.attr('font-size','0.9em')

.attr('fill','black')

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

.attr('font-weight','600')

.text(d.NAME)

svg.append('text')

.attr('class','spots')

.attr('x','1029')

.attr('y','89')

.attr('font-family','Tahoma')

.attr('font-size','0.7em')

.attr('fill', 'black')

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

.attr('font-weight','600')

.text(d.LINE)

svg.append('text')

.attr('class','spots')

.attr('x','1029')

.attr('y','109')

.attr('font-family','Tahoma')

.attr('font-size','0.7em')

.attr('fill','black')

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

.attr('font-weight','400')

.text(d.YEAR_ADDED)

svg.append('line')

.attr('class','spotLine')

.attr('x1','1011')

.attr('y1','69')

.attr('x2',projection([d.LONG,d.LAT])[0])

.attr('y2','69')

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

.style('stroke','black')

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

svg.append('line')

.attr('class','spotLine')

.attr('x1',projection([d.LONG,d.LAT])[0])

.attr('y1','69')

.attr('x2',projection([d.LONG,d.LAT])[0])

.attr('y2',projection([d.LONG,d.LAT])[1])

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

.style('stroke','black')

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

}

function removeSpotText(event,d) {

d3.select(this).attr('fill','white')

d3.select(this).style('fill-opacity','3')

d3.select(this).style("stroke", "rgb(0,0,0)")

d3.select(this).style('stroke-opacity','.6')

d3.select(this).style("stroke-width", "1.25")

d3.select(this).attr('r',3)

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

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

}

}

}

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

.data(DClines.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", path6) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.attr('stroke',lineType) // add function to control color by 'type'

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

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

function lineType(d,i) {

var color = 'black'

if(d.properties.NAME=='silver'){color = 'silver'}

if(d.properties.NAME=='blue'){color = 'dodgerblue'}

if(d.properties.NAME=='yellow'){color = 'gold'}

if(d.properties.NAME=='green'){color = 'olivedrab'}

if(d.properties.NAME=='red'){color = 'crimson'}

if(d.properties.NAME=='orange'){color = 'peru'}

if(d.properties.NAME=='purple'){color = 'rebeccapurple'}

if(d.properties.NAME=='pink'){color = 'orchid'}

if(d.properties.NAME=='teal'){color = 'mediumturquoise'}

return color

}

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

.data(DCstationsGROWTH)

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

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

.attr("cx", function(d) {return projection([d.LONG,d.LAT])[0]})

.attr("cy", function(d) {return projection([d.LONG,d.LAT])[1]})

.attr('r',4)

.attr('class','stationDots')

.attr('fill','white')

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

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

.attr("stroke-width", "1.25")

.attr("stroke", "black")

.on('mouseover', spotText)

.on('mouseout', removeSpotText)

function spotText(event,d){

d3.select(this)

.attr('fill','hotpink')

.attr('r',8)

.style("stroke", "lightpink")

.style("stroke-opacity",'.75')

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

svg.append('text')

.attr('class','spots')

.attr('x','1029')

.attr('y','69')

.attr('font-family','Tahoma')

.attr('font-size','0.9em')

.attr('fill','black')

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

.attr('font-weight','600')

.text(d.NAME)

svg.append('text')

.attr('class','spots')

.attr('x','1029')

.attr('y','89')

.attr('font-family','Tahoma')

.attr('font-size','0.7em')

.attr('fill', 'black')

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

.attr('font-weight','600')

.text(d.LINE)

svg.append('text')

.attr('class','spots')

.attr('x','1029')

.attr('y','109')

.attr('font-family','Tahoma')

.attr('font-size','0.7em')

.attr('fill','black')

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

.attr('font-weight','400')

.text(d.YEAR_ADDED)

svg.append('line')

.attr('class','spotLine')

.attr('x1','1011')

.attr('y1','69')

.attr('x2',projection([d.LONG,d.LAT])[0])

.attr('y2','69')

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

.style('stroke','black')

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

svg.append('line')

.attr('class','spotLine')

.attr('x1',projection([d.LONG,d.LAT])[0])

.attr('y1','69')

.attr('x2',projection([d.LONG,d.LAT])[0])

.attr('y2',projection([d.LONG,d.LAT])[1])

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

.style('stroke','black')

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

}

function removeSpotText(event,d) {

d3.select(this).attr('fill','white')

d3.select(this).style('fill-opacity','3')

d3.select(this).style("stroke", "rgb(0,0,0)")

d3.select(this).style('stroke-opacity','1')

d3.select(this).style("stroke-width", "1.25")

d3.select(this).attr('r',4)

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

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

}

var t = svg.selectAll("text")

.data(chronology)

.enter()

.append('text')

.attr('x',1171)

.attr('y',function(d,i) {return 284+35*i})

.attr('font-family','Tahoma')

.attr('font-size','0.8em')

.attr('fill','black')

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

.attr('font-weight','300')

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

c.enter().append('circle') //d3 geopath

.data(chronology)

.enter()

.append('circle')

.attr('cx',1151)

.attr('cy',function(d,i) {return 280+35*i})

.attr('r',6)

.attr('fill','black')

.on('click',filterClick)

return svg.node();

}