2f:T4228,chart = { 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') function fillHideDot(d,i){ // console.log(Global) // var color = 'none' if(d.YEAR_ADDED <= Selectyear) {color = 'white'} return color } function fillHideStroke(d,i){ // console.log(Global) // var color = 'none' if(d.YEAR_ADDED <= Selectyear) {color = 'black'} return color } function fillHideTrain(d,i){ // console.log(Global) // var color = 'none' if(d.properties.LINE_ADDED <= Selectyear && d.properties.LINE_REMOVED > Selectyear && d.properties.NAME=='silver'){color = 'silver'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.LINE_REMOVED > Selectyear && d.properties.NAME=='blue'){color = 'dodgerblue'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.LINE_REMOVED > Selectyear && d.properties.NAME=='yellow'){color = 'gold'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.LINE_REMOVED > Selectyear && d.properties.NAME=='green'){color = 'olivedrab'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.LINE_REMOVED > Selectyear && d.properties.NAME=='red'){color = 'crimson'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.LINE_REMOVED > Selectyear && d.properties.NAME=='orange'){color = 'peru'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.LINE_REMOVED > Selectyear && d.properties.NAME=='pink'){color = 'orchid'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.LINE_REMOVED > Selectyear && d.properties.NAME=='purple'){color = 'rebeccapurple'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.LINE_REMOVED > Selectyear && d.properties.NAME=='teal'){color = 'mediumturquoise'} return color } 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', fillHideTrain) // 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',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','1') 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 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() } */ return svg.node(); } 30:[{"id":"cfea37c647b537b4821824745538b4db9f4ba55e791a235001e38c33b27b61999e3e027be77be78f7db1956afaa9d61339502e6a9d054e5c2707ee11c1fe14a2","href":"https://static.observableusercontent.com/files/cfea37c647b537b4821824745538b4db9f4ba55e791a235001e38c33b27b61999e3e027be77be78f7db1956afaa9d61339502e6a9d054e5c2707ee11c1fe14a2","name":"DC_BB.geojson","type":"application/geo+json","lastModified":1671149284040.503,"size":634},{"id":"58d0804f2ba2fa7d937632526bf0f3c658d7e1e5c667d52f76c3b2cdcdaf8d6eebf501824dd481afce3baaaa9559c8f15e5f41952e39d43efce8def904bc570b","href":"https://static.observableusercontent.com/files/58d0804f2ba2fa7d937632526bf0f3c658d7e1e5c667d52f76c3b2cdcdaf8d6eebf501824dd481afce3baaaa9559c8f15e5f41952e39d43efce8def904bc570b","name":"DMV_stateboundaries.geojson","type":"application/geo+json","lastModified":1671149284040.503,"size":219964},{"id":"12447d1c223aa8d606703ea3cc201dee7938bfc3a6ccbb947014853c3090d04a3b3e3f2999d27f5cae81395aebd39a8df1674cae91919dcd24ae8ef4f18cf37b","href":"https://static.observableusercontent.com/files/12447d1c223aa8d606703ea3cc201dee7938bfc3a6ccbb947014853c3090d04a3b3e3f2999d27f5cae81395aebd39a8df1674cae91919dcd24ae8ef4f18cf37b","name":"DCnewlines6.csv","type":"text/csv","lastModified":1671149284040.503,"size":37124},{"id":"d0900a1bc8f7b5c83f17dfb0b5a3d26db5ae45a6298f8b2f5bc1d89f3775aed3f8592438a354d45bef7771740e9c15f8d1885342d00bce07dcfe27ca3cdf10e0","href":"https://static.observableusercontent.com/files/d0900a1bc8f7b5c83f17dfb0b5a3d26db5ae45a6298f8b2f5bc1d89f3775aed3f8592438a354d45bef7771740e9c15f8d1885342d00bce07dcfe27ca3cdf10e0","name":"221214_ResplitMetroLines_1.geojson","type":"application/geo+json","lastModified":1671149284040.503,"size":1905964},{"id":"9a14751c70b143b98986ca5a5202c40108094ca98b9ed530499c347166ec13561ee6fa65398666d0de4c7e083759d9a5d6ad5526ad5be468fccd7e9e93d296db","href":"https://static.observableusercontent.com/files/9a14751c70b143b98986ca5a5202c40108094ca98b9ed530499c347166ec13561ee6fa65398666d0de4c7e083759d9a5d6ad5526ad5be468fccd7e9e93d296db","name":"test for resplit lines that get removed.geojson","type":"application/geo+json","lastModified":1671149284040.503,"size":1906747},{"id":"3172672a8d601842c0e7ba874c51e8e7ebcf15d9a949cccacd1ffc52fe1a729b4f593d427c484175a4ebbdcfa8f36eb5551eed2e77bd9a155fdab532e60d69cf","href":"https://static.observableusercontent.com/files/3172672a8d601842c0e7ba874c51e8e7ebcf15d9a949cccacd1ffc52fe1a729b4f593d427c484175a4ebbdcfa8f36eb5551eed2e77bd9a155fdab532e60d69cf","name":"DClines_FutureExpansion_final.geojson","type":"application/geo+json","lastModified":1671163197616.094,"size":1669404},{"id":"23a83b5111ec48ff3b932f0773aed17baa97952c034dfe3598cbf71684dff6757c3282925ce091e2ad911d2b513f1dfed9bc93aa6c834dd0ecf8ace20d0cf344","href":"https://static.observableusercontent.com/files/23a83b5111ec48ff3b932f0773aed17baa97952c034dfe3598cbf71684dff6757c3282925ce091e2ad911d2b513f1dfed9bc93aa6c834dd0ecf8ace20d0cf344","name":"DClines_FutureExpansion_final_2.geojson","type":"application/geo+json","lastModified":1671164582936.153,"size":1669406},{"id":"6cd14b752887e2f8563422e2a918d5dbe02b1ffca24cc9bfa83602461b2bde147ef9b9e34ff7d2a12e8b7de2a69e9347a768bb31f712e18c11415577fbde7597","href":"https://static.observableusercontent.com/files/6cd14b752887e2f8563422e2a918d5dbe02b1ffca24cc9bfa83602461b2bde147ef9b9e34ff7d2a12e8b7de2a69e9347a768bb31f712e18c11415577fbde7597","name":"DClines_FutureExpansion_final_3.geojson","type":"application/geo+json","lastModified":1671164714986.179,"size":1669406},{"id":"b9b0435bc5c52ff226e3da42b647fd26160be7e3b5929f90b8391ae2e30b7d3e04f4d12af9cd0dc99953b6a1c0a2f8e031c3252c748466a614b89390c1f4a501","href":"https://static.observableusercontent.com/files/b9b0435bc5c52ff226e3da42b647fd26160be7e3b5929f90b8391ae2e30b7d3e04f4d12af9cd0dc99953b6a1c0a2f8e031c3252c748466a614b89390c1f4a501","name":"DCnewlines7.csv","type":"text/csv","lastModified":1671165257255.942,"size":37124},{"id":"4f866919734a7828cd7b98bad75a46467204f24d6d88185d5032e36c5636dab740edd1ce1dbc228b5b83134ee786ef1319a5ec8bf6f788a882f9e66c502126a6","href":"https://static.observableusercontent.com/files/4f866919734a7828cd7b98bad75a46467204f24d6d88185d5032e36c5636dab740edd1ce1dbc228b5b83134ee786ef1319a5ec8bf6f788a882f9e66c502126a6","name":"DClines_FutureExpansion_final_4.geojson","type":"application/geo+json","lastModified":1671165798419.542,"size":1669650},{"id":"39351ddc8b3eb392f00aac77a980c3f0cd2194f25c6b620e97a854a900928a7cd01b97d572b9e52c94706d6c93e0c156488fa1a53ad602683759de33055be28b","href":"https://static.observableusercontent.com/files/39351ddc8b3eb392f00aac77a980c3f0cd2194f25c6b620e97a854a900928a7cd01b97d572b9e52c94706d6c93e0c156488fa1a53ad602683759de33055be28b","name":"DCnewlines8.csv","type":"text/csv","lastModified":1671165846031.095,"size":37124},{"id":"d2dd6831e08d6830db23de6b76f0f03359a3801f99c1ee6e6f5ba52bb3fa19f60a1ce75709a76bf6eca716897b8817489437fe45822f8821ba2d888c51ee4712","href":"https://static.observableusercontent.com/files/d2dd6831e08d6830db23de6b76f0f03359a3801f99c1ee6e6f5ba52bb3fa19f60a1ce75709a76bf6eca716897b8817489437fe45822f8821ba2d888c51ee4712","name":"DCnewlines9.csv","type":"text/csv","lastModified":1671166194468.582,"size":37124},{"id":"1118fc5ab9479e955989d4e410487961b6c29c223a104aac837d6d13abb97f126d8e0976623511bb1583eac98549497fce46b5e664b251d83db9b5979806445c","href":"https://static.observableusercontent.com/files/1118fc5ab9479e955989d4e410487961b6c29c223a104aac837d6d13abb97f126d8e0976623511bb1583eac98549497fce46b5e664b251d83db9b5979806445c","name":"DCnewlines10.csv","type":"text/csv","lastModified":1671166367711.155,"size":37124}] 2d:{"title":"221215_DC test slider adv 3","cells":[{"id":4,"value":"# 221215_DC test slider adv 3","pinned":true,"hidden":false,"mode":"md"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"viewof Selectyear = Inputs.range([1976, 2036], {step: 1, label: \"DC Metro network in\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"DCbb = FileAttachment(\"DC_BB.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"DMV_stateboundaries = FileAttachment(\"DMV_stateboundaries.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"DCstationsGROWTH = FileAttachment(\"DCnewlines10.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"DClines = FileAttachment(\"DClines_FutureExpansion_final_4.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"color = d3.scaleQuantize([1, 30000], d3.schemeBlues[9])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}