2f:T6e3,choicemenu = html`

${chart}

${_berConcertChoice}

${md` **Time to choose your next concert venue!** `}

${md` **Bandito Rosso** A relatively small club that's a safe distance from Stasi patrolmen, but draws a pretty average-sized crowd.`}

${md` **SO36** At this speakeasy-style bar, you can play to a medium-sized crowd at one of Berlin's oldest punk scenes.`}

${md` **Dunckerclub** This underground hall will give you a night you won't forget with a large crowd, but watch out for frequent Stasi raids!`}

${viewof choices}

${popUpTest7}

${bandito_rosso_obs}

${so36_obs}

`30:T1c61,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)") */ 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') */ 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') */ return svg.node(); }31:[{"id":"db2965e63ae0e3ee36f7d611e25d15f1570b8ad5f04bb426c25c6d6939b94920ca23ec5efa4e7242a873242fa922ec9b8cd29608b286cf72c4c3578ea81af3d2","href":"https://static.observableusercontent.com/files/db2965e63ae0e3ee36f7d611e25d15f1570b8ad5f04bb426c25c6d6939b94920ca23ec5efa4e7242a873242fa922ec9b8cd29608b286cf72c4c3578ea81af3d2","name":"BER_buildingscropped_V2.geojson","type":"application/geo+json","lastModified":1679592654921.892,"size":20122210},{"id":"1d971bbdb91b080944fdb331494058401722ea4d5a15fceefd17dc640bfafc146774b3083759afa87abf077ad3475a734dce65315e900d71bd74f7e0aa8a32b2","href":"https://static.observableusercontent.com/files/1d971bbdb91b080944fdb331494058401722ea4d5a15fceefd17dc640bfafc146774b3083759afa87abf077ad3475a734dce65315e900d71bd74f7e0aa8a32b2","name":"BER_bb.geojson","type":"application/geo+json","lastModified":1679592654921.892,"size":631},{"id":"82f970714b65b3af098a1e5d98b157ccfab7fe2f89a91abd3a645192535005c1db14111e11e6dadeea92fdc8407dc1c7ff410baf7aa7b54bef88afc2fe0b0579","href":"https://static.observableusercontent.com/files/82f970714b65b3af098a1e5d98b157ccfab7fe2f89a91abd3a645192535005c1db14111e11e6dadeea92fdc8407dc1c7ff410baf7aa7b54bef88afc2fe0b0579","name":"BER_waterhatches_V1.geojson","type":"application/geo+json","lastModified":1679592654921.892,"size":2573827},{"id":"c73a7f9863426e01d09348c1a75f39154231b2e3d7dd73d9aca164f4f9481ae4648e24c182ed1408537b7009c0c1e8e72652503acc30ec8127f941e82fc591da","href":"https://static.observableusercontent.com/files/c73a7f9863426e01d09348c1a75f39154231b2e3d7dd73d9aca164f4f9481ae4648e24c182ed1408537b7009c0c1e8e72652503acc30ec8127f941e82fc591da","name":"BER_wall.geojson","type":"application/geo+json","lastModified":1679592654921.892,"size":125525},{"id":"317da918150df80db1149199687160ac5b2508cb0259eec600c359db020629983262849872875a1c7650c268f458441ad05866f33f18258719a14a19db4a0d7d","href":"https://static.observableusercontent.com/files/317da918150df80db1149199687160ac5b2508cb0259eec600c359db020629983262849872875a1c7650c268f458441ad05866f33f18258719a14a19db4a0d7d","name":"BER_railways_V1.geojson","type":"application/geo+json","lastModified":1679592654921.892,"size":4252384},{"id":"13a2a3aa90ce701f588e9ffe8332b23cb8ff5a30da6d4977aa91868031966659bfec23abaf398a6268ea510a473ef327a211ee823237f3d32c4ca59803e0ad01","href":"https://static.observableusercontent.com/files/13a2a3aa90ce701f588e9ffe8332b23cb8ff5a30da6d4977aa91868031966659bfec23abaf398a6268ea510a473ef327a211ee823237f3d32c4ca59803e0ad01","name":"BER_places_003.csv","type":"text/csv","lastModified":1679592654921.892,"size":2196},{"id":"63888d78d59326b1d1149fd6ad106c26025df3db88aaab87dd3c022f7e9fbcf05d76af1dfdcce1c426c5114eeba3b1b23fea93cbb87856046f355b5a2a38797a","href":"https://static.observableusercontent.com/files/63888d78d59326b1d1149fd6ad106c26025df3db88aaab87dd3c022f7e9fbcf05d76af1dfdcce1c426c5114eeba3b1b23fea93cbb87856046f355b5a2a38797a","name":"230220_BER Updated Dash@3.png","type":"image/png","lastModified":1679592654921.892,"size":5846801},{"id":"a61059fd5f03a5c1bf3bfd7eb4547dcf342d7dacaf1bd462943fa8e5ce8fbccb4fb3ef6a561b54db03002d6efbb6b904f31596ef874938ee3caf6ed413d89274","href":"https://static.observableusercontent.com/files/a61059fd5f03a5c1bf3bfd7eb4547dcf342d7dacaf1bd462943fa8e5ce8fbccb4fb3ef6a561b54db03002d6efbb6b904f31596ef874938ee3caf6ed413d89274","name":"concert choice dash-04.png","type":"image/png","lastModified":1679592654921.892,"size":696454},{"id":"2b38f15b03d0a2f091f7e6edbdf91229384200deff4f4d51a2ae15fa2eea0e128e127382d59712fc3e8316fb6bc8f8d70415c28ba4add7bdaa5f43a6f02b5032","href":"https://static.observableusercontent.com/files/2b38f15b03d0a2f091f7e6edbdf91229384200deff4f4d51a2ae15fa2eea0e128e127382d59712fc3e8316fb6bc8f8d70415c28ba4add7bdaa5f43a6f02b5032","name":"Popup_test7.png","type":"image/png","lastModified":1679594654728.825,"size":44563},{"id":"877b3ed5cf852088aa16fb4a01208077c8746355f333b9f86281309a1916322a2451484f24314f18ae850f13fb7699bf57f33b0bd2709f3fe992bb01c2346786","href":"https://static.observableusercontent.com/files/877b3ed5cf852088aa16fb4a01208077c8746355f333b9f86281309a1916322a2451484f24314f18ae850f13fb7699bf57f33b0bd2709f3fe992bb01c2346786","name":"Bandito_Rosso_Obs.png","type":"image/png","lastModified":1679598421223.558,"size":81796},{"id":"76272977eed3d2974e580a21906fe8b6596b399915f2c20375e8c0f4567165dfafc497a52c2e5c5af55e63de62635853b159aefe7a58abe806b7d7f6189bacba","href":"https://static.observableusercontent.com/files/76272977eed3d2974e580a21906fe8b6596b399915f2c20375e8c0f4567165dfafc497a52c2e5c5af55e63de62635853b159aefe7a58abe806b7d7f6189bacba","name":"SO36_obs.png","type":"image/png","lastModified":1679600969502.863,"size":72051}] 2d:{"title":"Punk The Stasi_Pop us","cells":[{"id":11,"value":"# Punk The Stasi_Pop us","pinned":true,"hidden":false,"mode":"md"},{"id":747,"value":"popUpTest = FileAttachment(\"Popup_test7.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@6\")","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\n`","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":700,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":762,"value":"so36_obs = FileAttachment(\"SO36_obs.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":760,"value":"bandito_rosso_obs = FileAttachment(\"Bandito_Rosso_Obs.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":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"paperDash = FileAttachment(\"230220_BER Updated Dash@1.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":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":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"}],"files":"$W31","stdlib":"1","titling":"auto"}