2f:T19d8,chart = { const width = 700, height = 700; const svg = d3.create("svg") .attr("viewBox", [50, 50, width-100, height-100]); // Use Mercator projection var projection = d3 .geoAlbersUsa() .fitSize([width - 50, height - 50], gbox); var path1 = d3.geoPath().projection(projection);//use different path variable for each set of line data 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 g = svg.append("g").attr("id", "paths"); var clicks =[] //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("path2") //d3 geopath .data(streets.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','1') .style("stroke-width", '.75') .style("stroke", "rgb(0,0,0)") g.selectAll("path3") //d3 geopath .data(gbldgs.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", "rgb(240,240,240)") .style("fill-opacity", ".5") .style('stroke-opacity','.4') .style("stroke-width", '.5') .style("stroke", "rgb(0,0,0)") var c = svg.selectAll("circle") //circle .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.long,d.lat])[0]}) .attr("cy", function(d) {return projection([d.long,d.lat])[1]}) .attr('r',spotRadius) .attr('fill',colorType)//add function to control color by 'type' .style('fill-opacity','1') .style('stroke','black') .style('stroke-width','1') .on('mouseover',spotText) .on('mouseout',removeText) function colorType(d,i){//non-listening event functions pass the data, and then index var color = 'cyan' //if the type is live, make the color yellow if(d.type=='live'){color = 'rgb(255,255,'+y+')'} if(d.type=='film'){color = 'magenta'} return color } //create and if statement that says if the budget is too high, text pops up that says it's too high //create if statement that says if happiness is above a certain lever, and budget is below a certain level, you win! svg.append("text") //.attr('class','spotInfo') .attr('x','550') .attr('y','390') .attr('font-family','Helvetica') .attr('font-size','.6em') .attr('font-weight','bold') .attr('text-anchor','start') //.text(totalValues[0]) svg.append("text") //.attr('class','spotInfo') .attr('x','550') .attr('y','390') .attr('font-family','Helvetica') .attr('font-size','.6em') .attr('font-weight','500') .attr('text-anchor','end') //.text('cost:') svg.append("text") //.attr('class','spotInfo') .attr('x','550') .attr('y','380') .attr('font-family','Helvetica') .attr('font-size','.6em') .attr('font-weight','bold') .attr('text-anchor','start') //.text(totalValues[1]) svg.append("text") //.attr('class','spotInfo') .attr('x','550') .attr('y','380') .attr('font-family','Helvetica') .attr('font-size','.6em') .attr('font-weight','500') .attr('text-anchor','end') //.text('happiness:') function spotText(i,d){ //this is where we write what we want to happen when we mouseover the spot //d.name is the name of what I'm mousing over svg.append("text") .attr('class','spotInfo') .attr('x','460') .attr('y','350') .attr('font-family','Helvetica') .attr('font-size','.6em') .attr('font-weight','bold') .attr('text-anchor','start') .text(d.name) svg.append("text") .attr('class','spotInfo') .attr('x','460') .attr('y','360') .attr('font-family','Helvetica') .attr('font-size','.6em') .attr('font-weight','300') .attr('text-anchor','start') .text(d.description) svg.append('line') .attr('class','spotLine') .attr('x1','455') .attr('y1','350') .attr('x2','455') .attr('y2',projection([d.long,d.lat])[1]) .attr('stroke-width','.5') .attr('stroke','black') .attr('stroke-dasharray','4 4') svg.append('line') .attr('class','spotLine') .attr('x1',projection([d.long,d.lat])[0]) .attr('y1',projection([d.long,d.lat])[1]) .attr('x2','455') .attr('y2',projection([d.long,d.lat])[1]) .attr('stroke-width','.5') .attr('stroke','black') .attr('stroke-dasharray','4 4') } function removeText(i,d){ d3.selectAll('text.spotInfo').remove()//to remove a class of objects, state the object type, then class name d3.selectAll('line.spotLine').remove() } var t = svg.selectAll('text') .data(transportation) .enter() .append('text') .attr('x','200') .attr('y',function(d,i){return 200+(i*20)}) .attr('font-family','Helvetica') .attr('font-size','.6em') .attr('text-anchor','start') .attr('font-weight','bold') .text(function(d) {return d}) /* c.enter.append('circle')//format to add additional circles .data(trees) .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('fill','black') .style('fill-opacity','1') */ return svg.node(); }30:T415,dashboard = html`

${border}

${md` Happiness Index: **${totalValues[1]}** `}

${md` Monthly Cost: **$${totalValues[0]}** `}

${md` **Monthly Social Plan** `}

${bool}

${chart}

${viewof ss} ${viewof hs} ${viewof bnj} ${viewof cc}

`31:[{"id":"d9e76243fe7a939f6505c83436d90029c8243e0762edbe85bb592aa6c74613444e57cccf00ac8d832f9072516bb0d491be636b380e05e87c0da765ca47400279","href":"https://static.observableusercontent.com/files/d9e76243fe7a939f6505c83436d90029c8243e0762edbe85bb592aa6c74613444e57cccf00ac8d832f9072516bb0d491be636b380e05e87c0da765ca47400279","name":"stein_handle@1.txt","type":"text/plain","lastModified":1677057638327.099,"size":2046},{"id":"6b331102b0030294f3506802883081de23cc6f62ac929196036581449e39af27209d86ab48261937857cc697ad01b0ee3a1123b10f12bbbe3606ac299c33ba4b","href":"https://static.observableusercontent.com/files/6b331102b0030294f3506802883081de23cc6f62ac929196036581449e39af27209d86ab48261937857cc697ad01b0ee3a1123b10f12bbbe3606ac299c33ba4b","name":"stein_outline@1.txt","type":"text/plain","lastModified":1677057638327.099,"size":1350},{"id":"583de114964ff078723d8da083a90a2d4b95fd777d8485d6c59b92b00688f69c0fcf7642fda9060b7e2e7efbb482700917da82ca842aef009a338e9ec2f4bb4e","href":"https://static.observableusercontent.com/files/583de114964ff078723d8da083a90a2d4b95fd777d8485d6c59b92b00688f69c0fcf7642fda9060b7e2e7efbb482700917da82ca842aef009a338e9ec2f4bb4e","name":"gbldgs.geojson","type":"application/geo+json","lastModified":1677057638327.099,"size":8034032},{"id":"5f03f4b819a767af74ce2185ff2726f365371cdedeafa10d4a408509b739d41f6e1e932af8382fcb48ddec90dd8dec75bfc0e13cfb7483b942a980bb45c0e6d7","href":"https://static.observableusercontent.com/files/5f03f4b819a767af74ce2185ff2726f365371cdedeafa10d4a408509b739d41f6e1e932af8382fcb48ddec90dd8dec75bfc0e13cfb7483b942a980bb45c0e6d7","name":"greenwich_bb.geojson","type":"application/geo+json","lastModified":1677057638327.099,"size":643},{"id":"e1b9bc1363a2e4a44b7b1d7f0baa3d8b18185fefcf2da9c254fea5be222809a7bf05482769787aafc6fd2a84390c5a34046a55f81f3fc7b3ff70c509e30a304e","href":"https://static.observableusercontent.com/files/e1b9bc1363a2e4a44b7b1d7f0baa3d8b18185fefcf2da9c254fea5be222809a7bf05482769787aafc6fd2a84390c5a34046a55f81f3fc7b3ff70c509e30a304e","name":"greenwich_streets.geojson","type":"application/geo+json","lastModified":1677057638327.099,"size":1178161},{"id":"3de70ffc9002f4064c945f777e3f725a2ba3bf24917c06056cbe2145523d1c8f9cfdc33c21de57c050d4cab1ba44b47f43881c8f1bcb0f78fbab457b7f117c0d","href":"https://static.observableusercontent.com/files/3de70ffc9002f4064c945f777e3f725a2ba3bf24917c06056cbe2145523d1c8f9cfdc33c21de57c050d4cab1ba44b47f43881c8f1bcb0f78fbab457b7f117c0d","name":"ln_test_09.txt","type":"text/plain","lastModified":1677057638327.099,"size":211},{"id":"c31ee154db10c946078572575298b7a13361d096ac11cbdd4e33b26a98ca0c289e9765b78fd4ea98680a9d4a2f72ace428439a4255ecde61c31c6de2ce1749cd","href":"https://static.observableusercontent.com/files/c31ee154db10c946078572575298b7a13361d096ac11cbdd4e33b26a98ca0c289e9765b78fd4ea98680a9d4a2f72ace428439a4255ecde61c31c6de2ce1749cd","name":"Ln_test2.txt","type":"text/plain","lastModified":1677057884852.686,"size":253}] 2d:{"title":"greenwich village culture spots - dashboard test","cells":[{"id":11,"value":"# greenwich village culture spots - dashboard test","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"fruit = ['apples','peaches','watermelon','dragonfruit']","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"transportation","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"hR = [//create cost and happiness dataset\n {name:\"ss\", cost:10, happiness:2},\n {name:\"hs\", cost:8, happiness:1},\n {name:\"bnj\", cost:15, happiness:2},\n {name:\"cc\", cost:14, happiness:5},\n {name:\"lpr\", cost:10, happiness:1},\n {name:\"ifc\", cost:11, happiness:5},\n {name:\"ff\", cost:14, happiness:4},\n {name:\"at\", cost:9, happiness:1}\n \n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"totalValues = {//calculate total cost and total happiness\n var totalCost = 0\n var totalHappiness = 0\n totalCost = totalCost +(hR[0].cost*ss)\n totalCost = totalCost +(hR[1].cost*hs)\n totalCost = totalCost +(hR[2].cost*bnj)\n totalCost = totalCost +(hR[3].cost*cc)\n\n totalHappiness = totalHappiness+(hR[0].happiness*ss)\n totalHappiness = totalHappiness+(hR[1].happiness*hs)\n totalHappiness = totalHappiness+(hR[2].happiness*bnj)\n totalHappiness = totalHappiness+(hR[3].happiness*cc)\n\n\n return[totalCost,totalHappiness]\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"viewof transportation = Inputs.checkbox([\"subway\", \"taxi\", \"citibike\", \"revel\", \"bus\"], {label: \"NYC Transport\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"viewof y = Inputs.range([0, 255], {step: 1, label: \"Favorite number\", value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"viewof spotRadius = Inputs.radio([2, 4, 6, 8], {label: \"Radius\",value:4})","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"viewof ss = Inputs.radio([0,1, 2, 3, 4], {label: \"Saigon Shack\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"viewof hs = Inputs.radio([0,1, 2, 3, 4], {label: \"Hello Saigon\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"viewof bnj = Inputs.radio([0,1, 2, 3, 4], {label: \"Blue Note Jass\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"viewof cc = Inputs.radio([0,1, 2, 3, 4], {label: \"Comedy Cellar\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"ln_test_07 = FileAttachment(\"ln_test_09.txt\").tsv({array:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"stein_outline = FileAttachment(\"stein_outline@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"stein_handle = FileAttachment(\"stein_handle@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"stein = {\n const width = 62,\n height = 92;\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n\n var p = svg.selectAll(\"polyline\")\n .data(stein_outline) //get data to define path\n .enter() //there are more data than elements, this selects them\n .append(\"polyline\") //appends path to data\n .attr('points', function(d){return d})\n .style(\"fill\", \"magenta\")\n .style('stroke-opacity','1')\n .style(\"stroke-width\", '1')\n .style(\"stroke\", \"rgb(0,0,0)\")\n\n p.enter().append(\"polyline\") //use this append method after creating the initial variable - in this case 'p'\n .data(stein_handle) //get data to define path\n .enter() //there are more data than elements, this selects them\n .append(\"polyline\") //appends path to data\n .attr('points', function(d){return d})\n .style(\"fill\", \"white\")\n .style('stroke-opacity','1')\n .style(\"stroke-width\", '1')\n .style(\"stroke\", \"rgb(0,0,0)\")\n\n \n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"border = {\n const width = 1200,\n height = 808;\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n\n var p = svg.selectAll(\"polyline\")\n .data(ln_test2) //get data to define path\n .enter() //there are more data than elements, this selects them\n .append(\"polyline\") //appends path to data\n .attr('points', function(d){return d})\n .style(\"fill\", \"magenta\")\n .style('stroke-opacity','1')\n .style(\"stroke-width\", '2')\n .style(\"stroke\", \"rgb(0,0,0)\")\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"bool = {\n var icon = ' '\n\n if(totalValues[0]>120){icon = stein}\n\n\n return icon \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"gbldgs = FileAttachment(\"gbldgs.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"gbox = FileAttachment(\"greenwich_bb.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"streets = FileAttachment(\"greenwich_streets.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSYHez6n-WUuxPzD2kv9rwlmQQJL78nRg06lBvVoMGsL5he7jOhxXVRbL7XOZPyY1rv3vNFPgtzCrsM/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"spots = d3.csv(spotsLink,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":530,"value":"ln_test2 = FileAttachment(\"Ln_test2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}