2f:T419b,chart = { const width = 1300, height = 700; 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.NAME=='silver'){color = 'silver'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.NAME=='blue'){color = 'dodgerblue'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.NAME=='yellow'){color = 'gold'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.NAME=='green'){color = 'olivedrab'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.NAME=='red'){color = 'crimson'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.NAME=='orange'){color = 'peru'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.NAME=='purple'){color = 'rebeccapurple'} if(d.properties.LINE_ADDED <= Selectyear && d.properties.NAME=='pink'){color = 'orchid'} if(d.properties.LINE_ADDED <= 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','.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 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() } */ const zoom = d3.zoom() .scaleExtent([1, 9]) .translateExtent([[-(1.5 * width), -(1.5 * height)], [1.5 * width, 1.5 * height]]) .on("zoom", zoomed); svg.call(zoom); document.querySelectorAll("button") .forEach(function(btn) { btn.addEventListener("click", selectZoom); }); function selectZoom(e){ var text = e.target.textContent if (text === "+") { zoom.scaleBy(svg, 2); } else if (text === "-"){ zoom.scaleBy(svg, 1); } else{ svg.transition() .duration(1000) .call(zoom.transform, d3.zoomIdentity); } } function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return svg.node(); } 30:[{"id":"cfea37c647b537b4821824745538b4db9f4ba55e791a235001e38c33b27b61999e3e027be77be78f7db1956afaa9d61339502e6a9d054e5c2707ee11c1fe14a2","href":"https://static.observableusercontent.com/files/cfea37c647b537b4821824745538b4db9f4ba55e791a235001e38c33b27b61999e3e027be77be78f7db1956afaa9d61339502e6a9d054e5c2707ee11c1fe14a2","name":"DC_BB.geojson","type":"application/geo+json","lastModified":1671133671287.424,"size":634},{"id":"b271ccb6259949ce8f08df782cb6844c871fdadc61c481b4031a53d2fdc97ac58f81b2f8ba9e602127331be9c397675db6ec0651801fab93cbfc1c607220b720","href":"https://static.observableusercontent.com/files/b271ccb6259949ce8f08df782cb6844c871fdadc61c481b4031a53d2fdc97ac58f81b2f8ba9e602127331be9c397675db6ec0651801fab93cbfc1c607220b720","name":"1991lines_V2.geojson","type":"application/geo+json","lastModified":1671133671287.424,"size":577932},{"id":"99dbb0a7ae2bc1eae0a4ef5b0e20c624c3758fcee219fd2c15c27ce86942c3aa6df87b55b83a129b4c780bed0ec65ef5ea1753a8c87d5df8f4eea73d825312c6","href":"https://static.observableusercontent.com/files/99dbb0a7ae2bc1eae0a4ef5b0e20c624c3758fcee219fd2c15c27ce86942c3aa6df87b55b83a129b4c780bed0ec65ef5ea1753a8c87d5df8f4eea73d825312c6","name":"1983lines_V2.geojson","type":"application/geo+json","lastModified":1671133671287.424,"size":265651},{"id":"9794faa9628b47eb8b7c3cfe4778a1bcb4ae37b93ed3847ea2add2bddff8f762e39094d43a18f256e3659bce991133b76b775c6d1fef1c3bfd5514c993962c6d","href":"https://static.observableusercontent.com/files/9794faa9628b47eb8b7c3cfe4778a1bcb4ae37b93ed3847ea2add2bddff8f762e39094d43a18f256e3659bce991133b76b775c6d1fef1c3bfd5514c993962c6d","name":"2004lines_V2.geojson","type":"application/geo+json","lastModified":1671133671287.424,"size":672592},{"id":"b6b9a554c983651e4098a05145d72c1c1a46401fae256fec532595a535fc332c2977367ba501b32ca7fed1f065cc3e25568d0f1ec6a8f4f42c1f0d67c2b66186","href":"https://static.observableusercontent.com/files/b6b9a554c983651e4098a05145d72c1c1a46401fae256fec532595a535fc332c2977367ba501b32ca7fed1f065cc3e25568d0f1ec6a8f4f42c1f0d67c2b66186","name":"1978lines_V2.geojson","type":"application/geo+json","lastModified":1671133671287.424,"size":108201},{"id":"03730359a1c78978d1eaab097df8a534ae7c8823253f607b516c728a91ab473dc10614070f0160cb8810e54a6b6cffd34c014fe2d09b1b6b70079b77a1eb42d6","href":"https://static.observableusercontent.com/files/03730359a1c78978d1eaab097df8a534ae7c8823253f607b516c728a91ab473dc10614070f0160cb8810e54a6b6cffd34c014fe2d09b1b6b70079b77a1eb42d6","name":"1976lines_V2.geojson","type":"application/geo+json","lastModified":1671133671287.424,"size":19863},{"id":"58d0804f2ba2fa7d937632526bf0f3c658d7e1e5c667d52f76c3b2cdcdaf8d6eebf501824dd481afce3baaaa9559c8f15e5f41952e39d43efce8def904bc570b","href":"https://static.observableusercontent.com/files/58d0804f2ba2fa7d937632526bf0f3c658d7e1e5c667d52f76c3b2cdcdaf8d6eebf501824dd481afce3baaaa9559c8f15e5f41952e39d43efce8def904bc570b","name":"DMV_stateboundaries.geojson","type":"application/geo+json","lastModified":1671133671287.424,"size":219964},{"id":"12447d1c223aa8d606703ea3cc201dee7938bfc3a6ccbb947014853c3090d04a3b3e3f2999d27f5cae81395aebd39a8df1674cae91919dcd24ae8ef4f18cf37b","href":"https://static.observableusercontent.com/files/12447d1c223aa8d606703ea3cc201dee7938bfc3a6ccbb947014853c3090d04a3b3e3f2999d27f5cae81395aebd39a8df1674cae91919dcd24ae8ef4f18cf37b","name":"DCnewlines6.csv","type":"text/csv","lastModified":1671133671287.424,"size":37124},{"id":"d0900a1bc8f7b5c83f17dfb0b5a3d26db5ae45a6298f8b2f5bc1d89f3775aed3f8592438a354d45bef7771740e9c15f8d1885342d00bce07dcfe27ca3cdf10e0","href":"https://static.observableusercontent.com/files/d0900a1bc8f7b5c83f17dfb0b5a3d26db5ae45a6298f8b2f5bc1d89f3775aed3f8592438a354d45bef7771740e9c15f8d1885342d00bce07dcfe27ca3cdf10e0","name":"221214_ResplitMetroLines_1.geojson","type":"application/geo+json","lastModified":1671133671287.424,"size":1905964}] 2d:{"title":"221215_DC test slider WITH zooms 1","cells":[{"id":4,"value":"# 221215_DC test slider WITH zooms 1","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":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"viewof buttons = Inputs.button([\n [\"+\"],\n [\"-\"],\n [\"Reset\"]\n], {label: \"Zoom Effects\"})","pinned":false,"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(\"DCnewlines6.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"DClines = FileAttachment(\"221214_ResplitMetroLines_1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"lines1976 = FileAttachment(\"1976lines_V2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"lines1978 = FileAttachment(\"1978lines_V2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"lines1983 = FileAttachment(\"1983lines_V2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"lines1991 = FileAttachment(\"1991lines_V2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"lines2004 = FileAttachment(\"2004lines_V2.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":38,"value":"chronology = ['Current','1976','1978','1983','1991','2004','2022','2026','2028','2030']","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"}