2f:T4516,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.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() } */ 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":1671166404832.692,"size":634},{"id":"58d0804f2ba2fa7d937632526bf0f3c658d7e1e5c667d52f76c3b2cdcdaf8d6eebf501824dd481afce3baaaa9559c8f15e5f41952e39d43efce8def904bc570b","href":"https://static.observableusercontent.com/files/58d0804f2ba2fa7d937632526bf0f3c658d7e1e5c667d52f76c3b2cdcdaf8d6eebf501824dd481afce3baaaa9559c8f15e5f41952e39d43efce8def904bc570b","name":"DMV_stateboundaries.geojson","type":"application/geo+json","lastModified":1671166404832.692,"size":219964},{"id":"1118fc5ab9479e955989d4e410487961b6c29c223a104aac837d6d13abb97f126d8e0976623511bb1583eac98549497fce46b5e664b251d83db9b5979806445c","href":"https://static.observableusercontent.com/files/1118fc5ab9479e955989d4e410487961b6c29c223a104aac837d6d13abb97f126d8e0976623511bb1583eac98549497fce46b5e664b251d83db9b5979806445c","name":"DCnewlines10.csv","type":"text/csv","lastModified":1671166404832.692,"size":37124},{"id":"4f866919734a7828cd7b98bad75a46467204f24d6d88185d5032e36c5636dab740edd1ce1dbc228b5b83134ee786ef1319a5ec8bf6f788a882f9e66c502126a6","href":"https://static.observableusercontent.com/files/4f866919734a7828cd7b98bad75a46467204f24d6d88185d5032e36c5636dab740edd1ce1dbc228b5b83134ee786ef1319a5ec8bf6f788a882f9e66c502126a6","name":"DClines_FutureExpansion_final_4.geojson","type":"application/geo+json","lastModified":1671166404832.692,"size":1669650}] 2d:{"title":"F22 Urban Data - DC Metro Final Map","cells":[{"id":4,"value":"# F22 Urban Data - DC Metro Final Map\nChristiana Bevilacqua, Darnell Clement, Anish De","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"viewof Selectyear = Inputs.range([1976, 2036], {step: 1, label: \"DC Metro network in\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"viewof buttons = Inputs.button([\n [\"+\"],\n [\"-\"],\n [\"Reset\"]\n], {label: \"Map Zoom\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"DCbb = FileAttachment(\"DC_BB.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"DMV_stateboundaries = FileAttachment(\"DMV_stateboundaries.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"DCstationsGROWTH = FileAttachment(\"DCnewlines10.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"DClines = FileAttachment(\"DClines_FutureExpansion_final_4.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"color = d3.scaleQuantize([1, 30000], d3.schemeBlues[9])","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}