2f:T3f10,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.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() } */ return svg.node(); } 30:[{"id":"449b4ab938bf1c3f046786ac4fb33df84bbe7e0e16557b1d2258a9222f90d4e9d2d47262f7f08bd0fce5d3cf88bc68fd4f504639f9b45cc11d26e9cd9eea0303","href":"https://static.observableusercontent.com/files/449b4ab938bf1c3f046786ac4fb33df84bbe7e0e16557b1d2258a9222f90d4e9d2d47262f7f08bd0fce5d3cf88bc68fd4f504639f9b45cc11d26e9cd9eea0303","name":"DClinesFUTURE_5.geojson","type":"application/geo+json","lastModified":1671087194409.24,"size":1896539},{"id":"cfea37c647b537b4821824745538b4db9f4ba55e791a235001e38c33b27b61999e3e027be77be78f7db1956afaa9d61339502e6a9d054e5c2707ee11c1fe14a2","href":"https://static.observableusercontent.com/files/cfea37c647b537b4821824745538b4db9f4ba55e791a235001e38c33b27b61999e3e027be77be78f7db1956afaa9d61339502e6a9d054e5c2707ee11c1fe14a2","name":"DC_BB.geojson","type":"application/geo+json","lastModified":1671087194409.24,"size":634},{"id":"58d0804f2ba2fa7d937632526bf0f3c658d7e1e5c667d52f76c3b2cdcdaf8d6eebf501824dd481afce3baaaa9559c8f15e5f41952e39d43efce8def904bc570b","href":"https://static.observableusercontent.com/files/58d0804f2ba2fa7d937632526bf0f3c658d7e1e5c667d52f76c3b2cdcdaf8d6eebf501824dd481afce3baaaa9559c8f15e5f41952e39d43efce8def904bc570b","name":"DMV_stateboundaries.geojson","type":"application/geo+json","lastModified":1671087194409.24,"size":219964},{"id":"12447d1c223aa8d606703ea3cc201dee7938bfc3a6ccbb947014853c3090d04a3b3e3f2999d27f5cae81395aebd39a8df1674cae91919dcd24ae8ef4f18cf37b","href":"https://static.observableusercontent.com/files/12447d1c223aa8d606703ea3cc201dee7938bfc3a6ccbb947014853c3090d04a3b3e3f2999d27f5cae81395aebd39a8df1674cae91919dcd24ae8ef4f18cf37b","name":"DCnewlines6.csv","type":"text/csv","lastModified":1671087194409.24,"size":37124},{"id":"d0900a1bc8f7b5c83f17dfb0b5a3d26db5ae45a6298f8b2f5bc1d89f3775aed3f8592438a354d45bef7771740e9c15f8d1885342d00bce07dcfe27ca3cdf10e0","href":"https://static.observableusercontent.com/files/d0900a1bc8f7b5c83f17dfb0b5a3d26db5ae45a6298f8b2f5bc1d89f3775aed3f8592438a354d45bef7771740e9c15f8d1885342d00bce07dcfe27ca3cdf10e0","name":"221214_ResplitMetroLines_1.geojson","type":"application/geo+json","lastModified":1671087564166.232,"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":1671141741047.966,"size":1906747}] 2d:{"title":"221214_DC test slider thing","cells":[{"id":4,"value":"# 221214_DC test slider thing","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(\"DCnewlines6.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"DClinesT = FileAttachment(\"221214_ResplitMetroLines_1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"DClines = FileAttachment(\"test for resplit lines that get removed.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"}