2f:Ta996,chart = { const width = 900, height = 700; const svg = d3.create("svg") .attr("viewBox", [50, 25, width-100, height-90]); // Use Mercator projection var projection = d3 .geoMercator() .fitSize([width - 80, 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.') 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(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','outlines') .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') /* var c = svg.selectAll("circle") //d3 geopath .data(DCstationsNEW) .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr("cx", function(d) {return projection([d.X,d.Y])[0]}) .attr("cy", function(d) {return projection([d.X,d.Y])[1]}) .attr('r',3) .attr('class','stationDots') .attr('fill','white') .style('fill-opacity','3') .attr('stroke-opacity','1') .attr("stroke-width", "1.25") .attr("stroke", "black") */ } if(d=='1983'){ 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('Orange and Yellow lines open') 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 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("path8") //d3 geopath .data(DCtracts1980.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", tractPop80) .style('fill-opacity','.6') .attr('stroke','black') // add function to control color by 'type' .style('stroke-opacity','.7') .style("stroke-width", '.1') function tractPop80(d,i) { var color = 'black' if(d.properties.C7L001 >= 8000){color = 'rgb(55, 175, 255)'} if(d.properties.C7L001 >= 7000 && d.properties.C7L001 <= 8000){color = 'rgb(82, 184, 255)'} if(d.properties.C7L001 >= 6000 && d.properties.C7L001 <= 7000){color = 'rgb(105, 193, 255)'} if(d.properties.C7L001 >= 5000 && d.properties.C7L001 <= 6000){color = 'rgb(125, 202, 254)'} if(d.properties.C7L001 >= 4000 && d.properties.C7L001 <= 5000){color = 'rgb(145, 211, 254)'} if(d.properties.C7L001 >= 3000 && d.properties.C7L001 <= 4000){color = 'rgb(164, 219, 254)'} if(d.properties.C7L001 >= 2000 && d.properties.C7L001 <= 3000){color = 'rgb(182, 227, 254)'} if(d.properties.C7L001 >= 1000 && d.properties.C7L001 <= 2000){color = 'rgb(201, 235, 254)'} if(d.properties.C7L001 <= 1000){color = 'rgb(220, 243, 255)'} return color } 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','outlines') .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(s=='1991'){ 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('Expansions and opening of the Green Line') 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('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("path8") //d3 geopath .data(DCtracts1990.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", tractPop90) .style('fill-opacity','.6') .attr('stroke','black') // add function to control color by 'type' .style('stroke-opacity','.7') .style("stroke-width", '.1') function tractPop90(d,i) { var color = 'black' if(d.properties.FULLTOTAL >= 8000){color = 'rgb(55, 175, 255)'} if(d.properties.FULLTOTAL >= 7000 && d.properties.FULLTOTAL <= 8000){color = 'rgb(82, 184, 255)'} if(d.properties.FULLTOTAL >= 6000 && d.properties.FULLTOTAL <= 7000){color = 'rgb(105, 193, 255)'} if(d.properties.FULLTOTAL >= 5000 && d.properties.FULLTOTAL <= 6000){color = 'rgb(125, 202, 254)'} if(d.properties.FULLTOTAL >= 4000 && d.properties.FULLTOTAL <= 5000){color = 'rgb(145, 211, 254)'} if(d.properties.FULLTOTAL >= 3000 && d.properties.FULLTOTAL <= 4000){color = 'rgb(164, 219, 254)'} if(d.properties.FULLTOTAL >= 2000 && d.properties.FULLTOTAL <= 3000){color = 'rgb(182, 227, 254)'} if(d.properties.FULLTOTAL >= 1000 && d.properties.FULLTOTAL <= 2000){color = 'rgb(201, 235, 254)'} if(d.properties.FULLTOTAL <= 1000){color = 'rgb(220, 243, 255)'} return color } 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','outlines') .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=='2004'){ 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('Growth of the Green Line') 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 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("path8") //d3 geopath .data(DCtracts2000.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", tractPop00) .style('fill-opacity','.6') .attr('stroke','black') // add function to control color by 'type' .style('stroke-opacity','.7') .style("stroke-width", '.1') function tractPop00(d,i) { var color = 'black' if(d.properties.TOTAL >= 8000){color = 'rgb(55, 175, 255)'} if(d.properties.TOTAL >= 7000 && d.properties.TOTAL <= 8000){color = 'rgb(82, 184, 255)'} if(d.properties.TOTAL >= 6000 && d.properties.TOTAL <= 7000){color = 'rgb(105, 193, 255)'} if(d.properties.TOTAL >= 5000 && d.properties.TOTAL <= 6000){color = 'rgb(125, 202, 254)'} if(d.properties.TOTAL >= 4000 && d.properties.TOTAL <= 5000){color = 'rgb(145, 211, 254)'} if(d.properties.TOTAL >= 3000 && d.properties.TOTAL <= 4000){color = 'rgb(164, 219, 254)'} if(d.properties.TOTAL >= 2000 && d.properties.TOTAL <= 3000){color = 'rgb(182, 227, 254)'} if(d.properties.TOTAL >= 1000 && d.properties.TOTAL <= 2000){color = 'rgb(201, 235, 254)'} if(d.properties.TOTAL <= 1000){color = 'rgb(220, 243, 255)'} return color } 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','outlines') .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') } var wrap = svg.selectAll("text.lineInfo") .each(function(d,i) { wrap_text(d3.select(this), 350) }); if(100<1000){ d3.selectAll('circle.stationDots').remove() c.enter().append("circle") //d3 geopath .data(DCstationsNEW) .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr("cx", function(d) {return projection([d.X,d.Y])[0]}) .attr("cy", function(d) {return projection([d.X,d.Y])[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','710') .attr('y','508') .attr('font-family','Tahoma') .attr('font-size','0.8em') .attr('fill','black') .attr('text-anchor','start') .attr('font-weight','600') .text(d.NAME) svg.append('text') .attr('class','spots') .attr('x','710') .attr('y','530') .attr('font-family','Tahoma') .attr('font-size','0.6em') .attr('fill', 'black') .attr('text-anchor','start') .attr('font-weight','600') .text(d.LINE) svg.append('text') .attr('class','spots') .attr('x','710') .attr('y','545') .attr('font-family','Tahoma') .attr('font-size','0.6em') .attr('fill','black') .attr('text-anchor','start') .attr('font-weight','400') .text(d.YEAR_ADDED) /* svg.append('text') .attr('class','spots') .attr('x','720') .attr('y','515') .attr('font-family','Helvetica') .attr('font-size','.5em') .attr('text-anchor','start') .attr('font-weight','normal') .attr('font-style','italic') .text(d.type) */ svg.append('line') .attr('class','spotLine') .attr('x1','700') .attr('y1','505') .attr('x2',projection([d.X,d.Y])[0]) .attr('y2','505') .style('stroke-width','1') .style('stroke','black') .style('stroke-dasharray','4 2') svg.append('line') .attr('class','spotLine') .attr('x1',projection([d.X,d.Y])[0]) .attr('y1','505') .attr('x2',projection([d.X,d.Y])[0]) .attr('y2',projection([d.X,d.Y])[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() } } } var t = svg.selectAll("text") .data(chronology) .enter() .append('text') .attr('x',160) .attr('y',function(d,i) {return 84+25*i}) .attr('font-family','Tahoma') .attr('font-size','0.6em') .attr('fill','black') .attr('text-anchor','start') .attr('font-weight','300') .text(function(d) {return d}) 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') function lineType(d,i) { var color = 'black' if(d.properties.NAME=='silver'){color = 'silver'} if(d.properties.NAME=='blue'){color = 'blue'} if(d.properties.NAME=='yellow'){color = 'yellow'} if(d.properties.NAME=='green'){color = 'green'} if(d.properties.NAME=='red'){color = 'red'} if(d.properties.NAME=='orange'){color = 'orange'} 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','outlines') .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') 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','outlines') .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') 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','outlines') .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') 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','outlines') .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') 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','outlines') .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') function lineType91(d,i) { var color = 'black' if(d.properties.Text=='silver'){color = 'silver'} if(d.properties.Text=='blue'){color = 'blue'} if(d.properties.Text=='yellow'){color = 'yellow'} if(d.properties.Text=='green'){color = 'green'} if(d.properties.Text=='red'){color = 'red'} if(d.properties.Text=='orange'){color = 'orange'} return color } var c = svg.selectAll("circle") //d3 geopath .data(DCstationsNEW) .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr("cx", function(d) {return projection([d.X,d.Y])[0]}) .attr("cy", function(d) {return projection([d.X,d.Y])[1]}) .attr('r',3) .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','710') .attr('y','508') .attr('font-family','Tahoma') .attr('font-size','0.8em') .attr('fill','black') .attr('text-anchor','start') .attr('font-weight','600') .text(d.NAME) svg.append('text') .attr('class','spots') .attr('x','710') .attr('y','530') .attr('font-family','Tahoma') .attr('font-size','0.6em') .attr('fill', 'black') .attr('text-anchor','start') .attr('font-weight','600') .text(d.LINE) svg.append('text') .attr('class','spots') .attr('x','710') .attr('y','545') .attr('font-family','Tahoma') .attr('font-size','0.6em') .attr('fill','black') .attr('text-anchor','start') .attr('font-weight','400') .text(d.YEAR_ADDED) /* svg.append('text') .attr('class','spots') .attr('x','720') .attr('y','515') .attr('font-family','Helvetica') .attr('font-size','.5em') .attr('text-anchor','start') .attr('font-weight','normal') .attr('font-style','italic') .text(d.type) */ svg.append('line') .attr('class','spotLine') .attr('x1','700') .attr('y1','505') .attr('x2',projection([d.X,d.Y])[0]) .attr('y2','505') .style('stroke-width','1') .style('stroke','black') .style('stroke-dasharray','4 2') svg.append('line') .attr('class','spotLine') .attr('x1',projection([d.X,d.Y])[0]) .attr('y1','505') .attr('x2',projection([d.X,d.Y])[0]) .attr('y2',projection([d.X,d.Y])[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() } c.enter().append('circle') //d3 geopath .data(chronology) .enter() .append('circle') .attr('cx',150) .attr('cy',function(d,i) {return 80+25*i}) .attr('r',4) .attr('fill','black') .on('click',filterClick) /* var c = svg.selectAll("path8") //d3 geopath .data(DCdata1970) //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", path8) //The d attribute defines a path to be drawn, only applies to appended elements .attr('fill','blue') .attr('stroke-opacity','.1') .attr("stroke-width", ".25") .attr("stroke", "rgb(86,86,86)") .style('fill-opacity','.1') */ /* g.selectAll("path8") //d3 geopath .data(DCtracts2010.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','city') .attr("d", path8) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", tractPop70) .style('fill-opacity','.3') .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 } */ /* svg.append('text') .attr('class','spots') .attr('x','720') .attr('y','515') .attr('font-family','Helvetica') .attr('font-size','.5em') .attr('text-anchor','start') .attr('font-weight','normal') .attr('font-style','italic') .text(d.type) */ /* c.enter.append('circle')// format to add additional circles .data(spots) .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr("cx", function(d) {return projection([d.longitude,d.latitude])[0]}) .attr("cy", function(d) {return projection([d.longitude,d.latitude])[1]}) .attr('r',3) .attr('fill','black') .style('fill-opacity','1') */ return svg.node(); }30:[{"id":"cfea37c647b537b4821824745538b4db9f4ba55e791a235001e38c33b27b61999e3e027be77be78f7db1956afaa9d61339502e6a9d054e5c2707ee11c1fe14a2","href":"https://static.observableusercontent.com/files/cfea37c647b537b4821824745538b4db9f4ba55e791a235001e38c33b27b61999e3e027be77be78f7db1956afaa9d61339502e6a9d054e5c2707ee11c1fe14a2","name":"DC_BB.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":634},{"id":"d2345394d78c47e6a05b3ceead0be224ec89c54b28b7b1dac23a448453e5e86069460bf9738d955be688ffc08c74c1ff1cc750c91f9018f83ad9ede869f94c57","href":"https://static.observableusercontent.com/files/d2345394d78c47e6a05b3ceead0be224ec89c54b28b7b1dac23a448453e5e86069460bf9738d955be688ffc08c74c1ff1cc750c91f9018f83ad9ede869f94c57","name":"2010tracts_V1.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":2098933},{"id":"b6b9a554c983651e4098a05145d72c1c1a46401fae256fec532595a535fc332c2977367ba501b32ca7fed1f065cc3e25568d0f1ec6a8f4f42c1f0d67c2b66186","href":"https://static.observableusercontent.com/files/b6b9a554c983651e4098a05145d72c1c1a46401fae256fec532595a535fc332c2977367ba501b32ca7fed1f065cc3e25568d0f1ec6a8f4f42c1f0d67c2b66186","name":"1978lines_V2.geojson","type":"application/geo+json","lastModified":1665641159614.231,"size":108201},{"id":"6c99e7483bcbc249b8ed1fd5b4c8bc9923fbde3b01c0c669de757ec5a8dde938430dbc99d2507bc0443ce9b0bf7f8fcb66082185031b3b4a09a999dbc11c1fdc","href":"https://static.observableusercontent.com/files/6c99e7483bcbc249b8ed1fd5b4c8bc9923fbde3b01c0c669de757ec5a8dde938430dbc99d2507bc0443ce9b0bf7f8fcb66082185031b3b4a09a999dbc11c1fdc","name":"1980tracts_V1.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":879939},{"id":"e95ea5aa0ac85079abb4dfd696471e104c6f21727f313575e15e23f67c4d82c2d6e1d9ad2fa072048bcf1bb5e57a323abd90da06a13894d695005391c96cf8fe","href":"https://static.observableusercontent.com/files/e95ea5aa0ac85079abb4dfd696471e104c6f21727f313575e15e23f67c4d82c2d6e1d9ad2fa072048bcf1bb5e57a323abd90da06a13894d695005391c96cf8fe","name":"2000tracts_V1.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":3127075},{"id":"a052bdd09082a845b22db54a8510a3ef97de1fecbea142a04bc40cd5cf879202c5678d85d42ae28405f050d09b900efe25a0a8eb0b717d3e144be7e986c09859","href":"https://static.observableusercontent.com/files/a052bdd09082a845b22db54a8510a3ef97de1fecbea142a04bc40cd5cf879202c5678d85d42ae28405f050d09b900efe25a0a8eb0b717d3e144be7e986c09859","name":"1990tracts_V1.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":3178727},{"id":"8501eee9e854e18c5f947b383d939aa09928f373e5e16ad783000c3c06832496aba36ab0041ccb41d14fbed11ee02cd16850e92d13e3088781343f232abee928","href":"https://static.observableusercontent.com/files/8501eee9e854e18c5f947b383d939aa09928f373e5e16ad783000c3c06832496aba36ab0041ccb41d14fbed11ee02cd16850e92d13e3088781343f232abee928","name":"DClines.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":788803},{"id":"b271ccb6259949ce8f08df782cb6844c871fdadc61c481b4031a53d2fdc97ac58f81b2f8ba9e602127331be9c397675db6ec0651801fab93cbfc1c607220b720","href":"https://static.observableusercontent.com/files/b271ccb6259949ce8f08df782cb6844c871fdadc61c481b4031a53d2fdc97ac58f81b2f8ba9e602127331be9c397675db6ec0651801fab93cbfc1c607220b720","name":"1991lines_V2.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":577932},{"id":"00c24cc4b620d64ee6412f937f90f5f52e840ecd264cf57badb8d35c599a5041ffcfb49ca88d79532623732fdcf3734499a7034be68854eb7add0a0842357fc1","href":"https://static.observableusercontent.com/files/00c24cc4b620d64ee6412f937f90f5f52e840ecd264cf57badb8d35c599a5041ffcfb49ca88d79532623732fdcf3734499a7034be68854eb7add0a0842357fc1","name":"DCchesapeake.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":1517393},{"id":"ba8bf407590cdfc2e9ebdbd8155dd51ffd5bd6b1366654cf3aad14420e974b4b29e87ecb6e229d8d57f867e98e31b80a98522e8f72585d3b688ad27184d54076","href":"https://static.observableusercontent.com/files/ba8bf407590cdfc2e9ebdbd8155dd51ffd5bd6b1366654cf3aad14420e974b4b29e87ecb6e229d8d57f867e98e31b80a98522e8f72585d3b688ad27184d54076","name":"DC_potomac.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":2995915},{"id":"9474f1868a35312aca3da7c984b8dae44b72107e00ecd0dcdbd96330bf2c08a7200ea8fd1007337f39bb04f553dd135cebadadd75b0e7f1403244607917f3daa","href":"https://static.observableusercontent.com/files/9474f1868a35312aca3da7c984b8dae44b72107e00ecd0dcdbd96330bf2c08a7200ea8fd1007337f39bb04f553dd135cebadadd75b0e7f1403244607917f3daa","name":"Metro_Stations_Regional.csv","type":"text/csv","lastModified":1665622413588.063,"size":32279},{"id":"4bdd3c4bce05aeb6cc54177f1e667069e9fd2601f2d58efe925c50a728e2dd0e5a0e61f1e804df69bc8b6b4c1c985798c3eefeeb9810450b3a16fc08743312c0","href":"https://static.observableusercontent.com/files/4bdd3c4bce05aeb6cc54177f1e667069e9fd2601f2d58efe925c50a728e2dd0e5a0e61f1e804df69bc8b6b4c1c985798c3eefeeb9810450b3a16fc08743312c0","name":"1970tracts_V1.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":821986},{"id":"9794faa9628b47eb8b7c3cfe4778a1bcb4ae37b93ed3847ea2add2bddff8f762e39094d43a18f256e3659bce991133b76b775c6d1fef1c3bfd5514c993962c6d","href":"https://static.observableusercontent.com/files/9794faa9628b47eb8b7c3cfe4778a1bcb4ae37b93ed3847ea2add2bddff8f762e39094d43a18f256e3659bce991133b76b775c6d1fef1c3bfd5514c993962c6d","name":"2004lines_V2.geojson","type":"application/geo+json","lastModified":1665641625804.988,"size":672592},{"id":"2fe95b97151cba6f99966f3a8975d64a1eb9da876ceb3f52ccc0d632f8050cf50e69d367c0b95548d8f4d30795734411f35d32d2e0287f46a781556caeecee85","href":"https://static.observableusercontent.com/files/2fe95b97151cba6f99966f3a8975d64a1eb9da876ceb3f52ccc0d632f8050cf50e69d367c0b95548d8f4d30795734411f35d32d2e0287f46a781556caeecee85","name":"MD_tracts2010_simp.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":3396487},{"id":"7e744cee27bf5b956f55576e3ce56b72c45a401ae36f3a1ba33222d68e9efee42323614f57e8c2e1626b101efd3ba794615b02473cc0ed97d48095be89baa0be","href":"https://static.observableusercontent.com/files/7e744cee27bf5b956f55576e3ce56b72c45a401ae36f3a1ba33222d68e9efee42323614f57e8c2e1626b101efd3ba794615b02473cc0ed97d48095be89baa0be","name":"DC_tracts2010.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":2102779},{"id":"799e94ff8399ace9c8e94dc6302df91e3a04aa407ab8cca29291e4a065d1d7ac14370995e05d6b7b72ce499f63acfccb143fea1db51634faad7a57c8f37ce137","href":"https://static.observableusercontent.com/files/799e94ff8399ace9c8e94dc6302df91e3a04aa407ab8cca29291e4a065d1d7ac14370995e05d6b7b72ce499f63acfccb143fea1db51634faad7a57c8f37ce137","name":"VA_tracts2010_simp.geojson","type":"application/geo+json","lastModified":1665622413588.063,"size":2202184},{"id":"99dbb0a7ae2bc1eae0a4ef5b0e20c624c3758fcee219fd2c15c27ce86942c3aa6df87b55b83a129b4c780bed0ec65ef5ea1753a8c87d5df8f4eea73d825312c6","href":"https://static.observableusercontent.com/files/99dbb0a7ae2bc1eae0a4ef5b0e20c624c3758fcee219fd2c15c27ce86942c3aa6df87b55b83a129b4c780bed0ec65ef5ea1753a8c87d5df8f4eea73d825312c6","name":"1983lines_V2.geojson","type":"application/geo+json","lastModified":1665641625208.197,"size":265651},{"id":"03730359a1c78978d1eaab097df8a534ae7c8823253f607b516c728a91ab473dc10614070f0160cb8810e54a6b6cffd34c014fe2d09b1b6b70079b77a1eb42d6","href":"https://static.observableusercontent.com/files/03730359a1c78978d1eaab097df8a534ae7c8823253f607b516c728a91ab473dc10614070f0160cb8810e54a6b6cffd34c014fe2d09b1b6b70079b77a1eb42d6","name":"1976lines_V2.geojson","type":"application/geo+json","lastModified":1665641624265.966,"size":19863},{"id":"8f83fd1434187c0b67e20d7425fdf6483f81e92b021b0041d9279a93d9689c973bdd849802e88dcf323df3c1cf7afafeb535bc6023bd62266993ccd0bb7e53d7","href":"https://static.observableusercontent.com/files/8f83fd1434187c0b67e20d7425fdf6483f81e92b021b0041d9279a93d9689c973bdd849802e88dcf323df3c1cf7afafeb535bc6023bd62266993ccd0bb7e53d7","name":"Metro_Stations_Regional_DATED.csv","type":"text/csv","lastModified":1665637078086.186,"size":31915},{"id":"58d0804f2ba2fa7d937632526bf0f3c658d7e1e5c667d52f76c3b2cdcdaf8d6eebf501824dd481afce3baaaa9559c8f15e5f41952e39d43efce8def904bc570b","href":"https://static.observableusercontent.com/files/58d0804f2ba2fa7d937632526bf0f3c658d7e1e5c667d52f76c3b2cdcdaf8d6eebf501824dd481afce3baaaa9559c8f15e5f41952e39d43efce8def904bc570b","name":"DMV_stateboundaries.geojson","type":"application/geo+json","lastModified":1665623844288.793,"size":219964}] 2d:{"title":"221013_DC WMATA Mapping_V2","cells":[{"id":11,"value":"# 221013_DC WMATA Mapping_V2","pinned":true,"hidden":false,"mode":"md"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"/* \n\nmidtownBL = FileAttachment(\"midtown_build4.geojson\").json()\n\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"DCbb = FileAttachment(\"DC_BB.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"DMV_stateboundaries = FileAttachment(\"DMV_stateboundaries.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"DCpotomac = FileAttachment(\"DC_potomac.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"DCchesapeake = FileAttachment(\"DCchesapeake.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"DCstationsCSV = FileAttachment(\"Metro_Stations_Regional.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"DCstationsNEW = FileAttachment(\"Metro_Stations_Regional_DATED.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"DClines = FileAttachment(\"DClines.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"lines1976 = FileAttachment(\"1976lines_V2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"lines1978 = FileAttachment(\"1978lines_V2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"lines1983 = FileAttachment(\"1983lines_V2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"lines1991 = FileAttachment(\"1991lines_V2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":518,"value":"lines2004 = FileAttachment(\"2004lines_V2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":469,"value":"DCtracts1970 = FileAttachment(\"1970tracts_V1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"DCtracts1980 = FileAttachment(\"1980tracts_V1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"DCtracts1990 = FileAttachment(\"1990tracts_V1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"DCtracts2000 = FileAttachment(\"2000tracts_V1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"DCtracts2010 = FileAttachment(\"2010tracts_V1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"newtracts2010_DC = FileAttachment(\"DC_tracts2010.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":643,"value":"newtracts2010_MD = FileAttachment(\"MD_tracts2010_simp.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"newtracts2010_VA = FileAttachment(\"VA_tracts2010_simp.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"chronology = ['Current','1976','1978','1983','1991','2004']","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"/*\n \naslnywalk = FileAttachment(\"aslnywalk2_line.geojson\").json()\n\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"/*\n\nsbpwalk = FileAttachment(\"sbpwalk2_line.geojson\").json()\n\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"/*\n \nmidspotsLink = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSfFSxkNWWXRZrl2ZHNV4KSffLCmGDQHrVFVY_Krd-oq79HD87A4msP9V3BamXxS04GnoGvR2y8vjke/pub?gid=1670605220&single=true&output=csv\"\n\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"/* \n\nspots=d3.csv(midspotsLink,d3.autoType)\n\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"color = d3.scaleQuantize([1, 30000], d3.schemeBlues[9])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}