221103_DC WMATA Future / Anish De

Anish De

Workspace

Public

Edited

Nov 8, 2022

Fork of 221013_DC WMATA Mapping_V2

# 221103_DC WMATA Future

d3 = require("d3@6")

chart = {

const width = 1225,

height = 700;

const svg = d3.create("svg")

.attr("viewBox", [50, 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");

//i'm not using the boundary lines, so I'm going to comment them out

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

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

.style("fill", "none")

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

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

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

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

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

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

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

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

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

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

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

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

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

.style("fill", "rgb(242,234,233)")

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

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

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

.style("stroke", "rgb(99,48,64)")

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

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

.style("fill", "rgb(242,234,233)")

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

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

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

.style("stroke", "rgb(99,48,64)")

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

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

.style("fill", "rgb(242,234,233)")

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

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

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

.style("stroke", "rgb(99,48,64)")

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

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

.style("fill", "none")

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

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

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

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=='Current'){

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

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

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

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

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

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

.attr('class','tractshift')

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

.style("fill", d => color(d.properties.DENSITY))

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

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

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

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

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

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

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

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

.attr('class','tractshift')

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

.style("fill", d => color(d.properties.PSQM))

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

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

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

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

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

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

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

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

.attr('class','tractshift')

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

.style("fill", d => color(d.properties.POP10_SQMI))

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

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

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

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

svg.append('text')

.attr('class','lineInfo')

.attr('x','520')

.attr('y','80')

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

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

.attr('fill','black')

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

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

.text('Present-day Washington Metro map')

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", '2')

}

if(d=='1976'){

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

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

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

svg.append('text')

.attr('class','lineInfo')

.attr('x','520')

.attr('y','80')

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

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

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

.attr('y','100')

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

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

.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("path8") //d3 geopath

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

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

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

.attr('class','tractshift')

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

.style("fill", tractPop70)

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

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

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

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

function tractPop70(d,i) {

var color = 'black'

if(d.properties.CY7001 >= 8000){color = 'rgb(55, 175, 255)'}

if(d.properties.CY7001 >= 7000 && d.properties.CY7001 <= 8000){color = 'rgb(82, 184, 255)'}

if(d.properties.CY7001 >= 6000 && d.properties.CY7001 <= 7000){color = 'rgb(105, 193, 255)'}

if(d.properties.CY7001 >= 5000 && d.properties.CY7001 <= 6000){color = 'rgb(125, 202, 254)'}

if(d.properties.CY7001 >= 4000 && d.properties.CY7001 <= 5000){color = 'rgb(145, 211, 254)'}

if(d.properties.CY7001 >= 3000 && d.properties.CY7001 <= 4000){color = 'rgb(164, 219, 254)'}

if(d.properties.CY7001 >= 2000 && d.properties.CY7001 <= 3000){color = 'rgb(182, 227, 254)'}

if(d.properties.CY7001 >= 1000 && d.properties.CY7001 <= 2000){color = 'rgb(201, 235, 254)'}

if(d.properties.CY7001 <= 1000){color = 'rgb(220, 243, 255)'}

return color

}

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

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

.style("fill", "none")

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

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

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

}

if(d=='1978'){

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

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

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

svg.append('text')

.attr('class','lineInfo')

.attr('x','520')

.attr('y','80')

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

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

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

.attr('y','100')

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

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

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