2f:T2443,chart = { const width = 350, height = 400; const svg = d3.create("svg") .attr("viewBox", [50, 30, width-100, height-100]); // Use Mercator projection var projection = d3 .geoMercator() .fitSize([width - 50, height - 50], BERbox); 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 g = svg.append("g").attr("id", "paths"); //i'm not using the boundary lines, so I'm going to comment them out /* g.selectAll("path1") //d3 geopath .data(boundary.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", path1) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", "none") .style('stroke-opacity','1') .style("stroke-width", '.5') .style("stroke", "rgb(0,0,0)") */ if(stops=="0"){ //then draw the first stop line segment } if(stops=="1"){ //then draw the first stop line segment } g.selectAll("path4") //d3 geopath .data(BERwater.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", path4) //The d attribute defines a path to be drawn, only applies to appended elements .style('fill', 'maroon') .style("fill-opacity", ".3") .style('stroke-opacity','.7') .style("stroke-width", '.1') .style('stroke', 'rosybrown') g.selectAll("path6") //d3 geopath .data(BERwall.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", path4) //The d attribute defines a path to be drawn, only applies to appended elements .style('stroke-opacity','.7') .style("stroke-width", '.5') .style('stroke', 'firebrick') .style('fill', 'lightblue') .style("fill-opacity", "0") g.selectAll("path7") //d3 geopath .data(BERbuildings.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", path3) //The d attribute defines a path to be drawn, only applies to appended elements .style('fill', 'tan') .style("fill-opacity", ".5") .style('stroke-opacity','.5') .style("stroke-width", '.1') .style('stroke', 'darkred') /* g.selectAll("path5") //d3 geopath .data(BERroads.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','.4') .style("stroke-width", '.3') .style('stroke', 'dodgerblue') */ g.selectAll("path7") //d3 geopath .data(BERtunnelicons.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", path3) //The d attribute defines a path to be drawn, only applies to appended elements .style('fill', 'black') .style("fill-opacity", ".9") var c = svg.selectAll("circle") //d3 geopath .data(BERspots) .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', 2) .attr('fill',colorType) // add function to control color by 'type' .attr('stroke-opacity','.65') .attr("stroke-width", ".2") .attr('stroke', 'pink') .style('fill-opacity','1') .on('mouseover', spotText) .on('mouseout', removeSpotText) function colorType(d,i) { var color = 'black' if(d.ActivityType=='club'){color = 'darkblue'} if(d.ActivityType=='club-event space'){color = 'darkslateblue'} if(d.ActivityType=='shop'){color = 'purple'} if(d.ActivityType=='museum'){color = 'slateblue'} if(d.ActivityType=='cafe'){color = 'indigo'} if(d.ActivityType=='culture'){color = 'mediumslateblue'} return color } function spotText(event,d){ d3.select(this) .attr('fill',colorType) .attr('r', 3.5) .style('stroke', 'pink') .style("stroke-opacity",'.65') .style("stroke-width", '.3') svg.append("rect") .attr('class','whitebox') .attr("x", 65) .attr("y", 127) .attr("height", 21) .attr("width", 59) .attr('stroke','black') .attr("stroke-width", '.5') .attr('stroke-opacity', '.4') .style("fill", 'white'); svg.append('text') .attr('class','spots') .attr('x','70') .attr('y','135') .attr('font-family','Helvetica') .attr('font-size','.22em') .attr('text-anchor','start') .attr('font-weight','bold') .text(d.Name) svg.append('text') .attr('class','spots') .attr('x','70') .attr('y','140') .attr('font-family','Helvetica') .attr('font-size','.15em') .attr('text-anchor','start') .attr('font-weight','normal') .attr('font-style','italic') .text(d.Neighborhood) svg.append('text') .attr('class','spots') .attr('x','70') .attr('y','143') .attr('font-family','Helvetica') .attr('font-size','.15em') .attr('text-anchor','start') .attr('font-weight','normal') .attr('font-style','italic') .text(d.ActivityType) svg.append('line') .attr('class','spotLine') .attr('x1','124') .attr('y1','137') .attr('x2',projection([d.Long,d.Lat])[0]) .attr('y2','137') .style('stroke-width','.3') .style('stroke','black') .style('stroke-dasharray','1 1') svg.append('line') .attr('class','spotLine') .attr('x1',projection([d.Long,d.Lat])[0]) .attr('y1','137') .attr('x2',projection([d.Long,d.Lat])[0]) .attr('y2',projection([d.Long,d.Lat])[1]) .style('stroke-width','.3') .style('stroke','black') .style('stroke-dasharray','1 1') } function removeSpotText(event,d) { d3.select(this).attr('fill', colorType) d3.select(this).attr('r', 2) d3.select(this).style('stroke', 'pink') d3.select(this).style('fill-opacity','1') d3.select(this).style('stroke-opacity','.65') d3.select(this).style('stroke-width', '.2') d3.selectAll('text.spots').remove() d3.selectAll('line.spotLine').remove() d3.selectAll('rect.whitebox').remove() var wrap = svg.selectAll("text.spots") .each(function(d,i) {wrap_text(d3.select(this), 100) } ); } /* c.enter.append('circle')// format to add additional circles .data(spots) .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr("cx", function(d) {return projection([d.longitude,d.latitude])[0]}) .attr("cy", function(d) {return projection([d.longitude,d.latitude])[1]}) .attr('r',3) .attr('fill','black') .style('fill-opacity','1') */ function walkText(event,d){ d3.select(this).style("stroke-width", '3'); d3.select(this).style("stroke-dasharray", '4 0'); svg .append('text') .attr('class','walkText') .attr('x','370') .attr('y','385') .attr("font-family", "Helvetica") .attr('font-size','.75em') .attr('fill','rgb(0,0,0)') .attr('text-anchor','end') //.attr('background-color', 'rgba(255, 0, 0)') .text(d.properties.Text) var wrap = svg.selectAll("text.walkText") .each(function(d, i) { wrap_text(d3.select(this), 100) }); } function walkErase(event,d){ d3.selectAll('path.walks').style('stroke-width','1') d3.selectAll('path.walks').style('stroke-dasharray','4 2') d3.selectAll('text.walkText').remove() } var p = svg.selectAll("polyline") .data(ampelmann) //get data to define path .enter() //there are more data than elements, this selects them .append("polyline") //appends path to data .attr('points', function(d){return d}) .style("fill", "black") .style('stroke-opacity','0') .style("stroke-width", '0') .style("stroke", "rgb(0,0,0)") .attr('transform',iconLocation) function iconLocation(){ var xVal = projection([walkingspotsFILE[stops].Long,walkingspotsFILE[stops].Lat])[0] var yVal = projection([walkingspotsFILE[stops].Long,walkingspotsFILE[stops].Lat])[1] //console.log(xVal) return "translate("+(xVal-20)+" "+(yVal-10)+")" } return svg.node(); }30:[{"id":"d88372876403a249fb837cc586aa1f299c497cf5782582b50542b0d74e590e82b9b1ad8d1437a767052670bd4527eb35bdf1f25945061d5ac629031cf5e69bad","href":"https://static.observableusercontent.com/files/d88372876403a249fb837cc586aa1f299c497cf5782582b50542b0d74e590e82b9b1ad8d1437a767052670bd4527eb35bdf1f25945061d5ac629031cf5e69bad","name":"tunnel.png","type":"image/png","lastModified":1679616510221.151,"size":821375},{"id":"db2965e63ae0e3ee36f7d611e25d15f1570b8ad5f04bb426c25c6d6939b94920ca23ec5efa4e7242a873242fa922ec9b8cd29608b286cf72c4c3578ea81af3d2","href":"https://static.observableusercontent.com/files/db2965e63ae0e3ee36f7d611e25d15f1570b8ad5f04bb426c25c6d6939b94920ca23ec5efa4e7242a873242fa922ec9b8cd29608b286cf72c4c3578ea81af3d2","name":"BER_buildingscropped_V2.geojson","type":"application/geo+json","lastModified":1679616510221.151,"size":20122210},{"id":"1d971bbdb91b080944fdb331494058401722ea4d5a15fceefd17dc640bfafc146774b3083759afa87abf077ad3475a734dce65315e900d71bd74f7e0aa8a32b2","href":"https://static.observableusercontent.com/files/1d971bbdb91b080944fdb331494058401722ea4d5a15fceefd17dc640bfafc146774b3083759afa87abf077ad3475a734dce65315e900d71bd74f7e0aa8a32b2","name":"BER_bb.geojson","type":"application/geo+json","lastModified":1679616510221.151,"size":631},{"id":"82f970714b65b3af098a1e5d98b157ccfab7fe2f89a91abd3a645192535005c1db14111e11e6dadeea92fdc8407dc1c7ff410baf7aa7b54bef88afc2fe0b0579","href":"https://static.observableusercontent.com/files/82f970714b65b3af098a1e5d98b157ccfab7fe2f89a91abd3a645192535005c1db14111e11e6dadeea92fdc8407dc1c7ff410baf7aa7b54bef88afc2fe0b0579","name":"BER_waterhatches_V1.geojson","type":"application/geo+json","lastModified":1679616510221.151,"size":2573827},{"id":"c73a7f9863426e01d09348c1a75f39154231b2e3d7dd73d9aca164f4f9481ae4648e24c182ed1408537b7009c0c1e8e72652503acc30ec8127f941e82fc591da","href":"https://static.observableusercontent.com/files/c73a7f9863426e01d09348c1a75f39154231b2e3d7dd73d9aca164f4f9481ae4648e24c182ed1408537b7009c0c1e8e72652503acc30ec8127f941e82fc591da","name":"BER_wall.geojson","type":"application/geo+json","lastModified":1679616510221.151,"size":125525},{"id":"317da918150df80db1149199687160ac5b2508cb0259eec600c359db020629983262849872875a1c7650c268f458441ad05866f33f18258719a14a19db4a0d7d","href":"https://static.observableusercontent.com/files/317da918150df80db1149199687160ac5b2508cb0259eec600c359db020629983262849872875a1c7650c268f458441ad05866f33f18258719a14a19db4a0d7d","name":"BER_railways_V1.geojson","type":"application/geo+json","lastModified":1679616510221.151,"size":4252384},{"id":"13a2a3aa90ce701f588e9ffe8332b23cb8ff5a30da6d4977aa91868031966659bfec23abaf398a6268ea510a473ef327a211ee823237f3d32c4ca59803e0ad01","href":"https://static.observableusercontent.com/files/13a2a3aa90ce701f588e9ffe8332b23cb8ff5a30da6d4977aa91868031966659bfec23abaf398a6268ea510a473ef327a211ee823237f3d32c4ca59803e0ad01","name":"BER_places_003.csv","type":"text/csv","lastModified":1679616510221.151,"size":2196},{"id":"63888d78d59326b1d1149fd6ad106c26025df3db88aaab87dd3c022f7e9fbcf05d76af1dfdcce1c426c5114eeba3b1b23fea93cbb87856046f355b5a2a38797a","href":"https://static.observableusercontent.com/files/63888d78d59326b1d1149fd6ad106c26025df3db88aaab87dd3c022f7e9fbcf05d76af1dfdcce1c426c5114eeba3b1b23fea93cbb87856046f355b5a2a38797a","name":"230220_BER Updated Dash@3.png","type":"image/png","lastModified":1679616510221.151,"size":5846801},{"id":"a61059fd5f03a5c1bf3bfd7eb4547dcf342d7dacaf1bd462943fa8e5ce8fbccb4fb3ef6a561b54db03002d6efbb6b904f31596ef874938ee3caf6ed413d89274","href":"https://static.observableusercontent.com/files/a61059fd5f03a5c1bf3bfd7eb4547dcf342d7dacaf1bd462943fa8e5ce8fbccb4fb3ef6a561b54db03002d6efbb6b904f31596ef874938ee3caf6ed413d89274","name":"concert choice dash-04.png","type":"image/png","lastModified":1679616510221.151,"size":696454},{"id":"0bcc87bb26e74c41a4accc448a023d6f9a412360158b0b4c62e2aa0ef6bedf76d4be2e8e889fa98a8a66d0a8260c5a2922d94bfb3fd840b37ae504e2403352f3","href":"https://static.observableusercontent.com/files/0bcc87bb26e74c41a4accc448a023d6f9a412360158b0b4c62e2aa0ef6bedf76d4be2e8e889fa98a8a66d0a8260c5a2922d94bfb3fd840b37ae504e2403352f3","name":"ampelmaennchen.txt","type":"text/plain","lastModified":1679616510221.151,"size":5787},{"id":"f6da9284d830adb2270018b073b0eae78e202031c7e94b96baee9766dd74caa9f308b1381382ef3c45532c8a606190f750954b8137075cdbd885496a4ff290fe","href":"https://static.observableusercontent.com/files/f6da9284d830adb2270018b073b0eae78e202031c7e94b96baee9766dd74caa9f308b1381382ef3c45532c8a606190f750954b8137075cdbd885496a4ff290fe","name":"walkingaround@7.csv","type":"text/csv","lastModified":1679616510221.151,"size":2939},{"id":"2896921a89334fd6c32744d0b8ea1408ef87f001cd7e716f4b608ce4bab39ec74f3351ceea0f15ffc64ec84832e1f196aeb313297bae7e3af7c52044e22ca7c5","href":"https://static.observableusercontent.com/files/2896921a89334fd6c32744d0b8ea1408ef87f001cd7e716f4b608ce4bab39ec74f3351ceea0f15ffc64ec84832e1f196aeb313297bae7e3af7c52044e22ca7c5","name":"tunnelspots.csv","type":"text/csv","lastModified":1679616741696.575,"size":311},{"id":"ed2dc571733cb870cffe00d808cb7e8546a2664a057b0ba21f41ef5adb6d71ae9684efa4738c5479d671ea4e06ff98ab9dbee360813706779b8582760e9ef6e4","href":"https://static.observableusercontent.com/files/ed2dc571733cb870cffe00d808cb7e8546a2664a057b0ba21f41ef5adb6d71ae9684efa4738c5479d671ea4e06ff98ab9dbee360813706779b8582760e9ef6e4","name":"BER_tunnelicons.geojson","type":"application/geo+json","lastModified":1679620108829.577,"size":76429}] 2d:{"title":"230323_Punk The Stasi w/ tunnel icons","cells":[{"id":11,"value":"# 230323_Punk The Stasi w/ tunnel icons","pinned":true,"hidden":false,"mode":"md"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"walkingspotsFILE = FileAttachment(\"walkingaround@7.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":836,"value":"ampelmann = FileAttachment(\"ampelmaennchen.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":823,"value":"viewof stops2 = Inputs.radio([\"0\", \"1\", \"2\", \"3\"], {value:\"0\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":678,"value":"dashboard =\n\n html`\n\n

\n ${chart}\n

\n\n

\n ${_berUpdatedDash3}\\\n\n

\n${pageDisplay}\n

\n\n

\n${time}\n${viewof startTimerButton}\n

\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"pageDisplay = {\n\n //this cell controls the content that goes into the dashboard depending on my 'stops' radio button\n \n var currentPage\n \n if(stops == \"0\"){//this is the initial step of the gam\n \n currentPage = html`\n\n ${walkingspotsFILE[stops].prompt}\n ${viewof gobutton}\n `\n set(viewof eyesOnly,\"i don't know what that means\")\n }\n\n if(stops == \"1\"){\n \n currentPage = html`\n ${walkingspotsFILE[stops].prompt}\n ${viewof walkType}\n `\n \n }\n\n if(stops == \"2\"){\n \n currentPage = html`\n ${walkingspotsFILE[stops].prompt}\n ${viewof parkStop}\n `\n set(viewof walkType,\"thinking...\")\n }\n\n if(stops == \"3\"){\n currentPage = html`\n ${walkingspotsFILE[stops].prompt}\n ${viewof eyesOnly}\n `\n set(viewof parkStop,\"thinking.....\")\n }\n\n\n return currentPage\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":799,"value":"viewof gobutton = Inputs.button(\"Let the night begin!\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"viewof walkType = Inputs.radio([\"To Berghain!\", \"Bandito Rosso?\", \"Maybe Coretex...\"], {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"viewof parkStop = Inputs.radio([\"Good idea!\", \"I'm not so sure about this...\", \"thinking.....\"], {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":793,"value":"viewof eyesOnly = Inputs.select(responses, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"responses = [\"Sure, let's give it a go\",\"Do you see a Stasi officer?\",\"I am lost in Berlin\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":789,"value":"mutable stops = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"viewof i = Inputs.input(100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":785,"value":"Inputs.bind(Inputs.radio([0, 100]), viewof i)","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"Inputs.bind(Inputs.radio([0, 100]), viewof i)","pinned":true,"hidden":false,"mode":"ojs"},{"id":781,"value":"i","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"//set(i,0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":777,"value":"{\n\n //this cell looks for correct answers from the input, and progresses to the next step when appropriate\n \n if(gobutton==1){\n mutable stops = 1 //change to next stop on the map3\n set(viewof gobutton,0)//reset button\n set(viewof walkType,null)\n }\n\n if(walkType == \"Bandito Rosso?\"){\n mutable stops = 2\n \n }\n\n if(parkStop == \"I'm not so sure about this...\"){\n mutable stops = 3\n \n }\n\n if(eyesOnly == \"Do you see a Stasi officer?\"){\n mutable stops = 0\n \n }\n\n \n if(stops == \"0\"){\n //viewof walkType = Inputs.input(\"nice walk\")\n //set(viewof walkType,null)\n //set(viewof parkStop,null)\n //set(viewof eyesOnly,null)\n }\n\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":803,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"viewof seconds = Inputs.range([0, 59], {value: 0, step:1, label: \"seconds\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":761,"value":"viewof minutes = Inputs.range([0, 59], {value: 2, step:1, label: \"minutes\", value:2})","pinned":true,"hidden":false,"mode":"ojs"},{"id":763,"value":"hours = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":765,"value":"function* timer(i = 0) {\n yield i;\n while (true) {\n yield Promises.tick(1000).then(() => i++);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":767,"value":"currentTime = {\n if(startTimerButton>0){\n return timer();\n }else{mutable stops = 0}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"countdownTime = {\n return minutes*60 + seconds;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"//mutable timesup = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":773,"value":"time = {\nlet result = countdownTime - currentTime;\n if (currentTime == undefined){result = 0} \nif ( result < 0 ){\n result = \"Time Up!\";\n\n \n}\nelse {\n const remainHours = \"\"+parseInt(result/3600);\n result = result - remainHours*3600;\n const remainMinutes = \"\"+parseInt(result/60);\n const remainSeconds = \"\"+parseInt(result%60);\n result = remainMinutes.padStart(2,\"0\") + \":\" + \n remainSeconds.padStart(2,\"0\") ;\n}\n\nreturn html`\n\n${result}\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":775,"value":"viewof startTimerButton = Inputs.button([\n [\"Start\", value => value + 1],\n [\"Reset\", value => 0]\n], {value: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"_berUpdatedDash3 = FileAttachment(\"230220_BER Updated Dash@3.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"viewof choices = Inputs.radio([\"Bandito Rosso\", \"SO36\", \"Dunckerclub\"], {label: \"Select a venue:\", value: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":698,"value":"_berConcertChoice = FileAttachment(\"concert choice dash-04.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"paperDash = FileAttachment(\"230220_BER Updated Dash@3.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"margin = ({top: 30, right: 20, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":876,"value":"image = FileAttachment(\"tunnel.png\").image({width: 50})","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"BERbuildings = FileAttachment(\"BER_buildingscropped_V2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"BERbox = FileAttachment(\"BER_bb.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"BERwater = FileAttachment(\"BER_waterhatches_V1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"BERwall = FileAttachment(\"BER_wall.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"BERrails = FileAttachment(\"BER_railways_V1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"BERspots = FileAttachment(\"BER_places_003.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":871,"value":"BERtunnelicons = FileAttachment(\"BER_tunnelicons.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background-color', 'white')\n .style('border-radius', '4px')\n .style('-webkit-border-radius', '10px')\n .style('-moz-border-radius', '10px')\n .style('-webkit-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')\n .style('-moz-box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')\n .style('box-shadow', '4px 4px 10px rgba(0, 0, 0, 0.4)')\n .style('color', 'white')\n .style('font-family','sans-serif')\n .text('a simple tooltip');","pinned":true,"hidden":false,"mode":"ojs"},{"id":849,"value":"tunnel = FileAttachment(\"tunnel.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":855,"value":"tunnelLink = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vR9bLMmaUr0Q9D0yNB3Hd0wPXSD1V0ifQt8IrHFlurS1VT-KRwQCCgfl5WsZAGTCmeE1-PwvQ9X78lE/pub?output=csv\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}