2f:T4c6,totalValues = {//calculate total cost and total happiness var totalCost = 0 var totalHappiness = 0 totalCost= totalCost + (hR[0].cost*PB) totalCost= totalCost + (hR[1].cost*IHB) totalCost= totalCost + (hR[2].cost*RS) totalCost= totalCost + (hR[3].cost*Westy) totalCost= totalCost + (hR[4].cost*LJ) totalCost= totalCost + (hR[5].cost*BC) totalCost= totalCost + (hR[6].cost*IHF) totalCost= totalCost + (hR[7].cost*Mem) totalCost= totalCost + (hR[8].cost*HH) totalCost= totalCost + (hR[9].cost*OBC) totalCost= totalCost + (hR[10].cost*CC) totalHappiness = totalHappiness+(hR[0].happiness*PB) totalHappiness = totalHappiness+(hR[1].happiness*IHB) totalHappiness = totalHappiness+(hR[2].happiness*RS) totalHappiness = totalHappiness+(hR[3].happiness*Westy) totalHappiness = totalHappiness+(hR[4].happiness*LJ) totalHappiness = totalHappiness+(hR[5].happiness*BC) totalHappiness = totalHappiness+(hR[6].happiness*IHF) totalHappiness = totalHappiness+(hR[7].happiness*Mem) totalHappiness = totalHappiness+(hR[8].happiness*HH) totalHappiness = totalHappiness+(hR[9].happiness*OBC) totalHappiness = totalHappiness+(hR[10].happiness*CC) return[totalCost,totalHappiness] }30:T1530,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 .geoMercator() .fitSize([width - 50, height - 50], sbox); var path1 = d3.geoPath().projection(projection); var path2 = d3.geoPath().projection(projection); var path3 = 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("path2") //d3 geopath .data(SStreets.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(slots_2.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") //d3 geopath .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',spotSize) .attr('fill',colorType) .style('fill-opacity','1') .style('stroke','black') .style('stroke-width','1') .on('mouseover',spotText) .on('mouseout',removeText) function colorType(d,i){//non-listebibg event functions pass the data, and then index var color = 'cyan' if(d.type=='Food'){color = 'rgb(255,255,'+Yellow+')'} if(d.type=='Sports'){color = 'magenta'} if(d.type=='Live Music'){color = 'cyan'} return color } //create an if statement that says if the budget is too high, text pops up that says it's to 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','120') .attr('y','115') .attr('font-family','Helvetica') .attr('font-size','.8em') .attr('font-weight','300') .attr('text-anchor','end') .text(totalValues[0]) svg.append("text") //.attr('class','spotInfo') .attr('x','65') .attr('y','115') .attr('font-family','Helvetica') .attr('font-size','.8em') .attr('font-weight','300') .attr('text-anchor','start') .text('cost:') svg.append("text") //.attr('class','spotInfo') .attr('x','130') .attr('y','125') .attr('font-family','Helvetica') .attr('font-size','.8em') .attr('font-weight','300') .attr('text-anchor','start') .text(totalValues[1]) svg.append("text") //.attr('class','spotInfo') .attr('x','130') .attr('y','125') .attr('font-family','Helvetica') .attr('font-size','.8em') .attr('font-weight','300') .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','75') .attr('y','100') .attr('font-family','Helvetica') .attr('font-size','.8em') .attr('font-weight','bold') .attr('text-anchor','start') .text(d.name) svg.append("text") .attr('class','spotInfo') .attr('x','75') .attr('y','100') .attr('font-family','Helvetica') .attr('font-size','.8em') .attr('font-weight','bold') .attr('text-anchor','start') .text(d.description) svg.append('line') .attr('class','spotLine') .attr('x1','100') .attr('y1','100') .attr('x2','100') .attr('y2',projection([d.long,d.lat])[1]) .attr('stroke-width','.5') .attr('stroke','black') .attr('stroke-array','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','100') .attr('y2',projection([d.long,d.lat])[1]) .attr('stroke-width','.5') .attr('stroke','black') .attr('stroke-array','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() } return svg.node(); } 31:[{"id":"79b70d12d1bede75741a62e7be1113d4fe4a9f8f71b17103e35334a26aea79012ff67a2c9cb36873dabf8fd0300c2bd183421ac134074ff0c845d6c7b9eed49d","href":"https://static.observableusercontent.com/files/79b70d12d1bede75741a62e7be1113d4fe4a9f8f71b17103e35334a26aea79012ff67a2c9cb36873dabf8fd0300c2bd183421ac134074ff0c845d6c7b9eed49d","name":"SimsburyBB.geojson","type":"application/geo+json","lastModified":1676439934487.769,"size":642},{"id":"5a41b84bb6cd3a9a29f0fae1c0940cc9d793ee49232450a1120f3e3f5058b405435088d7b7abd6a6ccb2f63fc27c097e480cd5faa64526400e428dcde0f4fa73","href":"https://static.observableusercontent.com/files/5a41b84bb6cd3a9a29f0fae1c0940cc9d793ee49232450a1120f3e3f5058b405435088d7b7abd6a6ccb2f63fc27c097e480cd5faa64526400e428dcde0f4fa73","name":"Simsbury Streets.geojson","type":"application/geo+json","lastModified":1676439934487.769,"size":1193412},{"id":"2048b01cd8d874eab0e8f3d69f660f43f0f14beb02c912870e402fd4199ea7a771419bc65b893ce72d5d0a18aed0bcbc8dba72c7e6ba3f2c10b0c9798fe4e6e9","href":"https://static.observableusercontent.com/files/2048b01cd8d874eab0e8f3d69f660f43f0f14beb02c912870e402fd4199ea7a771419bc65b893ce72d5d0a18aed0bcbc8dba72c7e6ba3f2c10b0c9798fe4e6e9","name":"SLots_2.geojson","type":"application/geo+json","lastModified":1676439934487.769,"size":38755925},{"id":"c31ee154db10c946078572575298b7a13361d096ac11cbdd4e33b26a98ca0c289e9765b78fd4ea98680a9d4a2f72ace428439a4255ecde61c31c6de2ce1749cd","href":"https://static.observableusercontent.com/files/c31ee154db10c946078572575298b7a13361d096ac11cbdd4e33b26a98ca0c289e9765b78fd4ea98680a9d4a2f72ace428439a4255ecde61c31c6de2ce1749cd","name":"Ln_test2.txt","type":"text/plain","lastModified":1676441340258.109,"size":253}] 2d:{"title":"Simsbury map_Dashboard Test","cells":[{"id":11,"value":"# Simsbury map_Dashboard Test","pinned":true,"hidden":false,"mode":"md"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof Yellow = Inputs.range([0, 255], {step: 1, label: \"Color Scale\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof spotSize = Inputs.radio([3, 4, 5, 6, 75], {label: \"Spot Size\",value:3})","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"hR = [//create cost and happiness dataset\n {name:\"PB\", cost:7, happiness:4},\n {name:\"IHB\", cost:5, happiness:8},\n {name:\"RS\", cost:8, happiness:3},\n {name:\"Westy\", cost:2, happiness:8},\n {name:\"LJ\", cost:12, happiness:6},\n {name:\"BC\", cost:4, happiness:9},\n {name:\"IHF\", cost:1, happiness:5},\n {name:\"Mem\", cost:2, happiness:9},\n {name:\"HH\", cost:5, happiness:9},\n {name:\"OBC\", cost:3, happiness:7},\n {name:\"CC\", cost:15, happiness:5},\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"viewof PB = Inputs.radio([0, 1, 2, 3, 4], {label: \"Plan B\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof IHB = Inputs.radio([0, 1, 2, 3, 4], {label: \"Iron Hourse Pub\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"viewof RS = Inputs.radio([0, 1, 2, 3, 4], {label: \"Red Stone\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"viewof Westy = Inputs.radio([0, 1, 2, 3, 4], {label: \"Westminster\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"viewof LJ = Inputs.radio([0, 1, 2, 3, 4], {label: \"La Jolla\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof BC = Inputs.radio([0, 1, 2, 3, 4], {label: \"Batting Cage\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"viewof IHF = Inputs.radio([0, 1, 2, 3, 4], {label: \"Iron Hourse fields\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"viewof Mem = Inputs.radio([0, 1, 2, 3, 4], {label: \"Memorial field\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof HH = Inputs.radio([0, 1, 2, 3, 4], {label: \"Hoops and Hops\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof OBC = Inputs.radio([0, 1, 2, 3, 4], {label: \"Old batting cage\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"viewof CC = Inputs.radio([0, 1, 2, 3, 4], {label: \"Hopmeadow Country Club\",value:0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"sbox = FileAttachment(\"SimsburyBB.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"ln_test2 = FileAttachment(\"Ln_test2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"dashboard = \n html`\n\n

\n ${border}\n

\n \n

\n${chart}\n

\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"border = {\n const width = 1200,\n height = 800;\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}\n\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"dashboard =\n\n html' \n\n

\n\n \n

\n ${border}\n

\n\n

\n ${chart}\n

\n\n\n

\n\n'","pinned":false,"hidden":false,"mode":"html"},{"id":70,"value":"SStreets = FileAttachment(\"Simsbury Streets.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"slots_2 = FileAttachment(\"SLots_2.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"Spotslink='https://docs.google.com/spreadsheets/d/e/2PACX-1vR8dhs849Ggmii4tks0JO-NJALueUMOidR7oMFO3PJZYQlSk2KJImyUTuwFbqRZUJdetQaD1eauZuhm/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"spots=d3.csv(Spotslink,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}