2f:T1844,chart = { const width = 900, height = 900; const svg = d3.create("svg") .attr("viewBox", [25, 0, width-100, height-100]); // Use Mercator projection var projection = d3 .geoMercator() .fitSize([width - 50, height - 50], bbox1); 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 g = svg.append("g").attr("id", "paths"); svg .append("text") .attr('x','25') .attr('y','25') .style('font-family','garamond') .style('font-size','24px') .style('font-weight','bold') .text('London') svg .append("text") .attr('x','25') .attr('y','50') .style('font-family','garamond') .style('font-size','18px') .style('font-weight','bold') .text('Places To Visit:') svg .append("line") .attr('x1','25') .attr('y1','33') .attr('x2','142') .attr('y2','33') .style("stroke-width", '1') .style("stroke", "rgb(0,0,0)") g.selectAll("path2") //d3 geopath .data(underground.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','.5') .style("stroke-width", '.5') .style("stroke", "black") g.selectAll("path3") .data(base1.features) .enter() .append("path") .attr('class','outlines') .attr("d", path3) .style("fill", "rgb(245,245,245)") .style("fill-opacity", ".25") .style('stroke-opacity','.1') .style("stroke-width", '.5') .style("stroke", "black") g.selectAll("path3") .data(brownfields.features) .enter() .append("path") .attr('class','outlines') .attr("d", path3) .style("fill", "rgb(255,255,255)") .style("fill-opacity", "1") .style('stroke-opacity','.5') .style("stroke-width", '.25') .style("stroke", "black") g.selectAll("path3") .data(thames.features) .enter() .append("path") .attr('class','outlines') .attr("d", path3) .style("fill", "rgb(0,0,0)") .style("fill-opacity", ".65") .style('stroke-opacity','1') .style("stroke-width", '.1') .style("stroke", "white") // var c = svg.selectAll("circle") //d3 geopath // .data(Points) // .enter() //there are more data than elements, this selects them //.append("circle") //appends path to data //.attr('class','points') // .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('fill','none') // .style('fill-opacity','0') var p = svg.selectAll("polyline") .data(irons5) .enter() //there are more data than elements, this selects them .append("polyline") .attr('points',function(d){return d}) .attr('transform','translate(125,20)') .style('fill','black') .style('stroke','none') .style('stroke-width','.25') //.style('stroke-dasharray', '4,4,8,8') p.enter().append("polyline") .data(icon_list) .enter() //there are more data than elements, this selects them .append("polyline") .attr('class','icon') .attr('points',function(d){return d.pts}) .attr('transform',function(d){return 'translate('+projection([d.data.Long,d.data.Lat])[0]+','+projection([d.data.Long,d.data.Lat])[1]+')'}) .style('fill','fillColor') .style('stroke','none') .style('stroke-width','.25') .on('mouseover',pointsinfo)//listens for a mousover, and calls function .on('mouseout',pointsinfoout) function fillColor(d,i){ var color = 'rgb(0,0,0)' if(d.data.Rank==5){color = 'red' console.log("match")} if(d.data.Rank==4){color = 'red'} if(d.data.Rank==3){color = 'red'} if(d.data.Rank==2){color = 'red'} if(d.data.Rank==1){color = 'red'} return color } function pointsinfo(event,d){ d3.select(this).style('fill','black') svg.append('text') .attr('class','PointsText') .attr('x','25') .attr('y','75') .attr("font-family","Garamond") .style('font-weight','bold') .style('font-weight','bold') .attr("font-size","16px") .style('fill','black') .attr('text-anchor','left') .text(d.data.Name) svg.append('text') .attr('class','PointsText') .attr('x','25') .attr('y','100') .attr("font-family","Garamond") .style('font-weight','bold') .style('font-weight','bold') .attr("font-size","12px") .attr('fill','black') .attr('text-anchor','left') .text(d.data.Description) svg.append('line') .attr('class','PointLine') .attr('x1','30') .attr('y1','100') .attr('x2',projection([d.data.Long,d.data.Lat])[0]) .attr('y2',projection([d.data.Long,d.data.Lat])[1]) .style("stroke-width", '.5') .style("stroke", "black") .style('stroke-dasharray', '6 4') var ratingList = [] if(d.data.Rank==1){ratingList = [irons5]} if(d.data.Rank==2){ratingList = [irons5,irons5]} if(d.data.Rank==3){ratingList = [irons5,irons5,irons5]} if(d.data.Rank==4){ratingList = [irons5,irons5,irons5,irons5]} if(d.data.Rank==5){ratingList = [irons5,irons5,irons5,irons5,irons5]} p.enter().append("polyline") .data(ratingList) .enter() //there are more data than elements, this selects them .append("polyline") .attr('class','icon_rating') .attr('points',function(d){return d}) .attr('transform',function(d,i){return 'translate('+(35+(i*35))+',125)'}) .style('fill','black') .style('stroke','none') .style('stroke-width','.25') } function pointsinfoout(event,d){ d3.selectAll('polyline.icon').style('fill',fillColor) d3.selectAll('text.PointsText').remove() d3.selectAll('line.PointLine').remove() d3.selectAll('polyline.icon_rating').remove() } return svg.node(); }30:T495,dashboard = html`

${dashboardGraphics}

${chart}

${md`*Trip To London*`}

${viewof LS} ${viewof CPM} ${viewof SPC}

${md`Anticipated Enjoyment: **${calculatedValues[0]}** `}

${md`Anticipated Cost: **${calculatedValues[1]}** `}

${drawCastle}

`31:[{"id":"681bf16650d8a6f21bc0b98b1033f30cbcee85c2eb0f118e78fb9b29469f8eaae1c6901165410589b0533258a3a8808ba96c472d0da9fe7a261a0c1da795cc6b","href":"https://static.observableusercontent.com/files/681bf16650d8a6f21bc0b98b1033f30cbcee85c2eb0f118e78fb9b29469f8eaae1c6901165410589b0533258a3a8808ba96c472d0da9fe7a261a0c1da795cc6b","name":"Castle.txt","type":"text/plain","lastModified":1707226707135.262,"size":498},{"id":"c8afbb1947a10f4bf7a4cae1efaa71d3efbfb5c3f5b06f9b29f977de1f452a6916ec1c8ca8c6c9d532f9b068aaeb89f117f2639a5ac18c7dd6e821361b473b81","href":"https://static.observableusercontent.com/files/c8afbb1947a10f4bf7a4cae1efaa71d3efbfb5c3f5b06f9b29f977de1f452a6916ec1c8ca8c6c9d532f9b068aaeb89f117f2639a5ac18c7dd6e821361b473b81","name":"DashboardCastle.txt","type":"text/plain","lastModified":1707228089192.021,"size":522},{"id":"325f4acc8d029b858886d020b6a0eeb1cacd09482c0b4da2617f337635c0dda179bfe9b03d1182937d9beec12182ab885b12b63699b00d2b262fb63b2c7ef29c","href":"https://static.observableusercontent.com/files/325f4acc8d029b858886d020b6a0eeb1cacd09482c0b4da2617f337635c0dda179bfe9b03d1182937d9beec12182ab885b12b63699b00d2b262fb63b2c7ef29c","name":"Castle2.txt","type":"text/plain","lastModified":1707251168620.783,"size":540},{"id":"1bda402dc6be53298ecd0c3ed86fff4f3ca9f1d6e580037c687a38bd4c196100aa0ed7408c05f6845a33992c9a2533702f9f69ff0b48f446cee7ae92e2f16df8","href":"https://static.observableusercontent.com/files/1bda402dc6be53298ecd0c3ed86fff4f3ca9f1d6e580037c687a38bd4c196100aa0ed7408c05f6845a33992c9a2533702f9f69ff0b48f446cee7ae92e2f16df8","name":"irons4.txt","type":"text/plain","lastModified":1706811918117.844,"size":1781},{"id":"71d960c54acfb74982c71cfca296c26ffcb0ad1a901188a299d0b4ec53072e90c89a28ae3cebecd6e33819270d757c77bf51333e7c0c584c0be1c81718e76d52","href":"https://static.observableusercontent.com/files/71d960c54acfb74982c71cfca296c26ffcb0ad1a901188a299d0b4ec53072e90c89a28ae3cebecd6e33819270d757c77bf51333e7c0c584c0be1c81718e76d52","name":"irons5.txt","type":"text/plain","lastModified":1706812061141.899,"size":1774},{"id":"c73a48eae384303adc949dd903eb881d85b59cd109c5fe1c74be0ddb86a38e631bb604daa3ae232fe6d15006127cd7db3cc905ac37d539864c72ed04ae9c90d3","href":"https://static.observableusercontent.com/files/c73a48eae384303adc949dd903eb881d85b59cd109c5fe1c74be0ddb86a38e631bb604daa3ae232fe6d15006127cd7db3cc905ac37d539864c72ed04ae9c90d3","name":"irons2.txt","type":"text/plain","lastModified":1706564931502.852,"size":202},{"id":"e2fa1dc5cf145281da1a53806f490e6a40aa69d0f871fc483ace20d3c358885f57211a214d29ef96cc38822c6c8310a6208390e0539b15aa4eafe689f3394e0a","href":"https://static.observableusercontent.com/files/e2fa1dc5cf145281da1a53806f490e6a40aa69d0f871fc483ace20d3c358885f57211a214d29ef96cc38822c6c8310a6208390e0539b15aa4eafe689f3394e0a","name":"sub_stops.geojson","type":"application/geo+json","lastModified":1706564931502.852,"size":6135},{"id":"7b9a69a0561d7bd96aff56475982b168e21e12bbbd6ca016d05329e423d72f93ad414cd770e2b9b48d8f771668a2620609ccbc165eafa1f01f85356405aee2b6","href":"https://static.observableusercontent.com/files/7b9a69a0561d7bd96aff56475982b168e21e12bbbd6ca016d05329e423d72f93ad414cd770e2b9b48d8f771668a2620609ccbc165eafa1f01f85356405aee2b6","name":"bldgs.geojson","type":"application/geo+json","lastModified":1706564931502.852,"size":1529909},{"id":"41b37f63d4c4b7b23efb8a4c880ad732b5d0ef947234d2063fb96f69a043d25d1d410e4cbe4f586041adea987eaf28dbfd07b7a48c4bb18f7dcd1dc28bf0ccf7","href":"https://static.observableusercontent.com/files/41b37f63d4c4b7b23efb8a4c880ad732b5d0ef947234d2063fb96f69a043d25d1d410e4cbe4f586041adea987eaf28dbfd07b7a48c4bb18f7dcd1dc28bf0ccf7","name":"site_boundary.geojson","type":"application/geo+json","lastModified":1706564931502.852,"size":640},{"id":"773f31335d4336bc7f5ceb49cf5524786afb387f276742a3e1a87191808c7bf918126e31ed83c31ddc5264212eced77994319585fe0cf5085e418103095dccfc","href":"https://static.observableusercontent.com/files/773f31335d4336bc7f5ceb49cf5524786afb387f276742a3e1a87191808c7bf918126e31ed83c31ddc5264212eced77994319585fe0cf5085e418103095dccfc","name":"subway_lines.geojson","type":"application/geo+json","lastModified":1706564931502.852,"size":27570},{"id":"a9422f2f3853869d2db6375215fa7e1e902041e1db808531594f4b425d410b8932ec839851465af4aa561da13b3d1246df85a7d66c0ba2f2bc8fe7c5f84e9086","href":"https://static.observableusercontent.com/files/a9422f2f3853869d2db6375215fa7e1e902041e1db808531594f4b425d410b8932ec839851465af4aa561da13b3d1246df85a7d66c0ba2f2bc8fe7c5f84e9086","name":"Bbox.geojson","type":"application/geo+json","lastModified":1706564931502.852,"size":526},{"id":"62da2e54e490563fee107e5d416bf56b750cf4e47942db6dcbad2f575d2845815d22ac9e720acf2ce77d2e1e8e7ddf3674ee5e9968eddce31df23561f0ba2b74","href":"https://static.observableusercontent.com/files/62da2e54e490563fee107e5d416bf56b750cf4e47942db6dcbad2f575d2845815d22ac9e720acf2ce77d2e1e8e7ddf3674ee5e9968eddce31df23561f0ba2b74","name":"Base@1.geojson","type":"application/geo+json","lastModified":1706564931502.852,"size":3842597},{"id":"7eb40b0720972f3f5afa71391d0228aeab4337d5350150ad10eafe114b810023080cd8281e342a75d1cad73ce54cdd43487679917c63d9bfa5dbb87f4ff869b4","href":"https://static.observableusercontent.com/files/7eb40b0720972f3f5afa71391d0228aeab4337d5350150ad10eafe114b810023080cd8281e342a75d1cad73ce54cdd43487679917c63d9bfa5dbb87f4ff869b4","name":"Brownfields.geojson","type":"application/geo+json","lastModified":1706564931502.852,"size":1875296},{"id":"ab6034336d7b67dfce7b7856534bef6832a7620098c4ca47c5f594ccfc97aaf82134299273d1aaaf9490139f5978b4bab4837ca8087b7addb52475d43b698121","href":"https://static.observableusercontent.com/files/ab6034336d7b67dfce7b7856534bef6832a7620098c4ca47c5f594ccfc97aaf82134299273d1aaaf9490139f5978b4bab4837ca8087b7addb52475d43b698121","name":"Thames.geojson","type":"application/geo+json","lastModified":1706564931502.852,"size":4060401},{"id":"0a0fe92f7db3045e7b143d89de945bc4ca63a7624921bf8d2a7fb81a16b3b87be6519903a5e87353736a43472b678a5b770083b854a824c8388dd6122da71bb2","href":"https://static.observableusercontent.com/files/0a0fe92f7db3045e7b143d89de945bc4ca63a7624921bf8d2a7fb81a16b3b87be6519903a5e87353736a43472b678a5b770083b854a824c8388dd6122da71bb2","name":"Underground.geojson","type":"application/geo+json","lastModified":1706564931502.852,"size":437443},{"id":"e51e1a95c255cf1ccd1d0d433900784cda35210952bfd3a48ca7b0cf97250cf91d1626ec5c5cdde8642028330907c269cc7cad576639a9ddab48e74241cd9235","href":"https://static.observableusercontent.com/files/e51e1a95c255cf1ccd1d0d433900784cda35210952bfd3a48ca7b0cf97250cf91d1626ec5c5cdde8642028330907c269cc7cad576639a9ddab48e74241cd9235","name":"irons3.txt","type":"text/plain","lastModified":1706565902365.723,"size":731}] 2d:{"title":"base map - UD Spring 2024","cells":[{"id":11,"value":"# base map - UD Spring 2024","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":252,"value":"icon_list={\nvar list = []\n for (let i = 0; i < Points.length; i++) {\n \n list.push({data: Points[i],pts:irons})\n }\n\n return list\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"irons5 = FileAttachment(\"irons5.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"irons = FileAttachment(\"irons4.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"base1 = FileAttachment(\"Base@1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"subSts = FileAttachment(\"sub_stops.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"bldgs = FileAttachment(\"bldgs.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"bbox = FileAttachment(\"site_boundary.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"subLns = FileAttachment(\"subway_lines.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"bbox1 = FileAttachment(\"Bbox.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"brownfields = FileAttachment(\"Brownfields.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"thames = FileAttachment(\"Thames.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"underground = FileAttachment(\"Underground.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"Points_Link='https://docs.google.com/spreadsheets/d/e/2PACX-1vSQ9KUqX4lrd6tOMzRZvAnCzSWV6Q9FyqXDMHy95gWtd0lCSjMs7UK7Vi-VSNBwULa5tSxseLKQxbfC/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"Points=d3.csv(Points_Link,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"dashboardcastle = FileAttachment(\"DashboardCastle.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"dashboardGraphics = {\n\n const width = 900,\n height = 900;\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [25, 0, width-100, height-100]);\n\n var p = svg.selectAll(\"polyline\")\n .data(dashboardcastle)\n .enter() //there are more data than elements, this selects them\n .append(\"polyline\")\n .attr('points',function(d){return d})\n //.attr('transform','translate(125,20)')\n .style('fill','white')\n .style('stroke','black')\n .style('stroke-width','1')\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"drawCastle = {\n var icon = ' '\n if(calculatedValues[0]>12 && calculatedValues[1]<200){icon = castleIcon}\n\n\n return icon\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":432,"value":"viewof LS = Inputs.radio([\"0\",\"1\",\"2\"], {label: \"London Stadium\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"viewof CPM = Inputs.radio([\"0\",\"1\",\"2\"], {label: \"Crystal Palace Museum\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"viewof SPC = Inputs.radio([\"0\",\"1\",\"2\"], {label: \"St. Paul's Cathedral\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"LondonDatset = [\n {name:\"LS\",rating:5,cost:25},\n {name:\"CPM\",rating:4,cost:10},\n {name:\"SPC\",rating:3,cost:5}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"value":"calculatedValues = {\n\n var totalRating = 0\n var totalCost = 0\n\n \n totalRating = totalRating+LondonDatset[0].rating*LS\n totalRating = totalRating+LondonDatset[1].rating*CPM\n totalRating = totalRating+LondonDatset[2].rating*SPC\n\n totalCost = totalCost+LondonDatset[0].cost*LS\n totalCost = totalCost+LondonDatset[1].cost*CPM\n totalCost = totalCost+LondonDatset[2].cost*SPC\n\n return [totalRating,totalCost]\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"Castle2 = FileAttachment(\"Castle.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"castleIcon = {\n\n const width = 900,\n height = 900;\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [25, 0, width-100, height]);\n\n var p = svg.selectAll(\"polyline\")\n .data(Castle2)\n .enter() //there are more data than elements, this selects them\n .append(\"polyline\")\n .attr('points',function(d){return d})\n .style('fill','black')\n .style('stroke','black')\n .style('stroke-width','1')\n .style('fill-opacity','.5')\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}