2f:T16a3,chart = { const width = 800, height = 800; const svg = d3.create("svg") .attr("viewBox", [0, 0, width+50, height+50]); // Use Mercator projection var projection = d3 .geoMercator() .fitSize([width - 50, height - 50], bbox_01); 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"); g.selectAll("path2") //d3 geopath .data(helena_roads.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", '.35') .style("stroke", "rgb(200,200,200)") g.selectAll("path3") //d3 geopath .data(trails.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", "none") .style("fill-opacity", ".5") .style('stroke-opacity','1') .style("stroke-width", '.4') .style("stroke", "rgb(0,0,0)") g.selectAll("path4") //d3 geopath .data(streams.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", "none") .style("fill-opacity", ".5") .style('stroke-opacity','1') .style("stroke-width", '.5') .style("stroke", "rgb(0,0,100)") var c = svg.selectAll("circle") //d3 geopath .data(steak) .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr('class','steakPts') .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) .style('fill','black') .style('fill-opacity','1') svg .append('line') //.attr('class','steakLine') .attr('x1','125') .attr('y1','725') .attr('x2','400') .attr('y2','725') .style('stroke','black') .style('stroke-width','1') .style('stroke-dasharray', '4,4,8,8') var p = svg.selectAll("polyline") .data(barn_test) .enter() //there are more data than elements, this selects them .append("polyline") .attr('points',function(d){return d}) .attr('transform','translate(200,300)') .style('fill','white') .style('stroke','black') .style('stroke-width','.5') //.style('stroke-dasharray', '4,4,8,8') p.enter().append("polyline") .data(cow_test) .enter() //there are more data than elements, this selects them .append("polyline") .attr('points',function(d){return d}) .style('fill','red') .style('stroke','black') .style('stroke-width','.5') 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','black') .style('stroke-width','.5') .on('mouseover',steakInfo)//listens for a mousover, and calls function .on('mouseout',steakInfoOut) function fillColor(d,i){ var color = 'rgb(0,0,0)' if(d.data.Rating==5){color = 'rgb(255,255,0)' console.log("match")} if(d.data.Rating==4){color = 'rgb(215,215,0)'} if(d.data.Rating==3){color = 'rgb(175,175,0)'} if(d.data.Rating==2){color = 'rgb(135,135,0)'} if(d.data.Rating==1){color = 'rgb(95,95,0)'} return color } function steakInfo(event,d){ d3.select(this).style('fill','red') svg .append('text') .attr('class','steakText') .attr('x','150') .attr('y','700') .style("font-family", "Helvetica") .style('font-size','.75em') .style('fill','rgb(0,200,0)') .style('text-anchor','start') .text(d.data.Name) svg .append('line') .attr('class','steakLine') .attr('x1','125') .attr('y1','725') .attr('x2','400') .attr('y2','725') .style('stroke','black') .style('stroke-width','1') var ratingList = [] if(d.data.Rating==2){ratingList = [exclamation,exclamation]} if(d.data.Rating==3){ratingList = [exclamation,exclamation,exclamation]} if(d.data.Rating==4){ratingList = [exclamation,exclamation,exclamation,exclamation]} if(d.data.Rating==5){ratingList = [exclamation,exclamation,exclamation,exclamation,exclamation]} 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('+(150+(i*35))+',200)'}) .style('fill','black') .style('stroke','none') //.style('stroke-width','.5') } function steakInfoOut(event,d){ d3.selectAll('polyline.icon').style('fill',fillColor) d3.selectAll('text.steakText').remove() d3.selectAll('line.steakLine').remove() d3.selectAll('polyline.icon_rating').remove() } return svg.node(); }30:T4c0,dashboard = html`

${dashboardGraphics}

${//chart}

${md`*Montana Steak Adventure*`}

${viewof bbb} ${viewof scc} ${viewof mcgs}

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

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

${drawCow}

` 31:[{"id":"b5ecc9954715b057e735d01a9c9e5a828c83243c5eee3f2b7b89c63b8aaf4f85694f5f3bc388f4264316b041e53beb333da66adf5433e3f5bc967e1d7a6848c4","href":"https://static.observableusercontent.com/files/b5ecc9954715b057e735d01a9c9e5a828c83243c5eee3f2b7b89c63b8aaf4f85694f5f3bc388f4264316b041e53beb333da66adf5433e3f5bc967e1d7a6848c4","name":"trails.geojson","type":"application/geo+json","lastModified":1708532084482.857,"size":836943},{"id":"44a40cd618d4d191b8defebc6b0d52c31eb9a7269f99b3d53b7d3c08c6203e569490bc557a9325cd3002ce94c7242285bcbfb4d310d43032f23eba9d99775396","href":"https://static.observableusercontent.com/files/44a40cd618d4d191b8defebc6b0d52c31eb9a7269f99b3d53b7d3c08c6203e569490bc557a9325cd3002ce94c7242285bcbfb4d310d43032f23eba9d99775396","name":"helena_roads_01.geojson","type":"application/geo+json","lastModified":1708532084482.857,"size":9269385},{"id":"396e474bcccd3d5546b632a93a3406c880bf14f0331451e7ee037e1d07addcc95f3f4dffe2adb8896555e08ec0a3a8d8ce2bb8626485eec9b086c40c61ee7e7d","href":"https://static.observableusercontent.com/files/396e474bcccd3d5546b632a93a3406c880bf14f0331451e7ee037e1d07addcc95f3f4dffe2adb8896555e08ec0a3a8d8ce2bb8626485eec9b086c40c61ee7e7d","name":"bbox_01.geojson","type":"application/geo+json","lastModified":1708532084482.857,"size":499},{"id":"243f6e0ac96a216a9460e162f71626528c7d4e71cf123ee2968aad753b8624bb4dab51c22e4291a902383abdce627117f4881fdf4b55d093425eabd7426c89d6","href":"https://static.observableusercontent.com/files/243f6e0ac96a216a9460e162f71626528c7d4e71cf123ee2968aad753b8624bb4dab51c22e4291a902383abdce627117f4881fdf4b55d093425eabd7426c89d6","name":"exclamation@2.txt","type":"text/plain","lastModified":1708532084482.857,"size":1609},{"id":"b19377c630679d2c4d8962f94f30f417faaef0f9c29d7fc420c2c049e8d489353c84fcf3ba0c7e8ee895bbdb9e65c7652cebe4101eb1f391741214188193142c","href":"https://static.observableusercontent.com/files/b19377c630679d2c4d8962f94f30f417faaef0f9c29d7fc420c2c049e8d489353c84fcf3ba0c7e8ee895bbdb9e65c7652cebe4101eb1f391741214188193142c","name":"barn_test.txt","type":"text/plain","lastModified":1708532084482.857,"size":418},{"id":"773f31335d4336bc7f5ceb49cf5524786afb387f276742a3e1a87191808c7bf918126e31ed83c31ddc5264212eced77994319585fe0cf5085e418103095dccfc","href":"https://static.observableusercontent.com/files/773f31335d4336bc7f5ceb49cf5524786afb387f276742a3e1a87191808c7bf918126e31ed83c31ddc5264212eced77994319585fe0cf5085e418103095dccfc","name":"subway_lines.geojson","type":"application/geo+json","lastModified":1708532084482.857,"size":27570},{"id":"e2fa1dc5cf145281da1a53806f490e6a40aa69d0f871fc483ace20d3c358885f57211a214d29ef96cc38822c6c8310a6208390e0539b15aa4eafe689f3394e0a","href":"https://static.observableusercontent.com/files/e2fa1dc5cf145281da1a53806f490e6a40aa69d0f871fc483ace20d3c358885f57211a214d29ef96cc38822c6c8310a6208390e0539b15aa4eafe689f3394e0a","name":"sub_stops.geojson","type":"application/geo+json","lastModified":1708532084482.857,"size":6135},{"id":"41b37f63d4c4b7b23efb8a4c880ad732b5d0ef947234d2063fb96f69a043d25d1d410e4cbe4f586041adea987eaf28dbfd07b7a48c4bb18f7dcd1dc28bf0ccf7","href":"https://static.observableusercontent.com/files/41b37f63d4c4b7b23efb8a4c880ad732b5d0ef947234d2063fb96f69a043d25d1d410e4cbe4f586041adea987eaf28dbfd07b7a48c4bb18f7dcd1dc28bf0ccf7","name":"site_boundary.geojson","type":"application/geo+json","lastModified":1708532084482.857,"size":640},{"id":"7b9a69a0561d7bd96aff56475982b168e21e12bbbd6ca016d05329e423d72f93ad414cd770e2b9b48d8f771668a2620609ccbc165eafa1f01f85356405aee2b6","href":"https://static.observableusercontent.com/files/7b9a69a0561d7bd96aff56475982b168e21e12bbbd6ca016d05329e423d72f93ad414cd770e2b9b48d8f771668a2620609ccbc165eafa1f01f85356405aee2b6","name":"bldgs.geojson","type":"application/geo+json","lastModified":1708532084482.857,"size":1529909},{"id":"e17b70051b5397ca3c42a6611a16d506c24910cb349320ff22b311f8301b945ff0d33e853053c69258be3ca5efb801538167227b887981ae71173d30a5151189","href":"https://static.observableusercontent.com/files/e17b70051b5397ca3c42a6611a16d506c24910cb349320ff22b311f8301b945ff0d33e853053c69258be3ca5efb801538167227b887981ae71173d30a5151189","name":"bbox_02.geojson","type":"application/geo+json","lastModified":1708532084482.857,"size":501},{"id":"3d4c46af0aa1ecad3acdccba806c371f09dd55f4167a3b8354e5b7a16ed53ea4930c5d1f59e451383e3ddd8215d8e66b3b0292081f6d5c3f38bef86fffcc822c","href":"https://static.observableusercontent.com/files/3d4c46af0aa1ecad3acdccba806c371f09dd55f4167a3b8354e5b7a16ed53ea4930c5d1f59e451383e3ddd8215d8e66b3b0292081f6d5c3f38bef86fffcc822c","name":"streams.geojson","type":"application/geo+json","lastModified":1708532084482.857,"size":74188},{"id":"916860c5f603e397b59adc69ea3bcdccc200bf0ea41ef6b283e5b186456bdefae54ed60e7077bca6225e9c6845917a898509c07a47e0b8d54dde8ea1a6b8d808","href":"https://static.observableusercontent.com/files/916860c5f603e397b59adc69ea3bcdccc200bf0ea41ef6b283e5b186456bdefae54ed60e7077bca6225e9c6845917a898509c07a47e0b8d54dde8ea1a6b8d808","name":"cow_test.txt","type":"text/plain","lastModified":1708532084482.857,"size":1738},{"id":"1ca75b087c117c370c5460985cff4a73ebe69217684e9e9552c53c0a4fd2a0514aa4c1e8dc60b9a77dd97f53e88a2e7acb2a0fc25a898cb605a64bfaad55c8ab","href":"https://static.observableusercontent.com/files/1ca75b087c117c370c5460985cff4a73ebe69217684e9e9552c53c0a4fd2a0514aa4c1e8dc60b9a77dd97f53e88a2e7acb2a0fc25a898cb605a64bfaad55c8ab","name":"dashboard_graphics_01.txt","type":"text/plain","lastModified":1708532084482.857,"size":155},{"id":"be5eb16d3e838d2a8f5e3fd0d83262831a4a7451db998468b9fecd836cd7672d2a85ad2cf5b8d3111ef3149917da65bb9ec7d6351c7f27fafe8767001068e011","href":"https://static.observableusercontent.com/files/be5eb16d3e838d2a8f5e3fd0d83262831a4a7451db998468b9fecd836cd7672d2a85ad2cf5b8d3111ef3149917da65bb9ec7d6351c7f27fafe8767001068e011","name":"cow_origin.txt","type":"text/plain","lastModified":1708532084482.857,"size":1805}] 2d:{"title":"base map - UD Spring 2024 1/31 - fleet's version - practice","cells":[{"id":11,"value":"# base map - UD Spring 2024 1/31 - fleet's version - practice","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":166,"value":"icon_list = {\n\n ///create empty list\n var list = []\n\n ///loop through google sheets list\n for (let i = 0; i < steak.length; i++) {\n //function to add item to a list\n list.push({data:steak[i],pts:barn_test})\n } \n \n //add icon points to each google sheet item\n ////addd combined data to empty list\n\n\n //return new list\n return list\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"barn_test = FileAttachment(\"barn_test.txt\").tsv({array:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"steak = d3.csv(steak_link,d3.autoType)","pinned":false,"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":92,"value":"bbox_01 = FileAttachment(\"bbox_01.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"helena_roads = FileAttachment(\"helena_roads_01.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"trails = FileAttachment(\"trails.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"bbox_02 = FileAttachment(\"bbox_02.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"streams = FileAttachment(\"streams.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"steak_link = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vR8X-dzSRwsv4ASzWuzuXPAlKOb43hFdbmvxSKYyvZfWy0hoUUKntEsOZ-Jgfe0hLPG7v-ZFU6HDpuW/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"exclamation = FileAttachment(\"exclamation@2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"cow_test = FileAttachment(\"cow_test.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"dashboard_graphics_01 = FileAttachment(\"dashboard_graphics_01.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"dashboardGraphics = {\n\n const width = 1000,\n height = 1000;\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n var p = svg.selectAll(\"polyline\")\n .data(dashboard_graphics_01)\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','3')\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"drawCow = {\n var icon = ' '\n if(calculatedValues[0]>12 && calculatedValues[1]<200){icon = cowIcon}\n\n\n return icon\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"viewof bbb = Inputs.radio([\"0\", \"1\", \"2\"], {label: \"Bad Betty's Barbecue\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"viewof scc = Inputs.radio([\"0\", \"1\", \"2\"], {label: \"Shellie's Country Cafe\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"viewof mcgs = Inputs.radio([\"0\", \"1\", \"2\"], {label: \"Montana City Grill and Saloon\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"bbb","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"steakDataset = [\n {name:\"bbb\",rating:4,cost:12},\n {name:\"scc\",rating:3,cost:8},\n {name:\"mcgs\",rating:2,cost:20}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"calculatedValues = {\n\n var totalRating = 0\n var totalCost = 0\n\n \n totalRating = totalRating+steakDataset[0].rating*bbb\n totalRating = totalRating+steakDataset[1].rating*scc\n totalRating = totalRating+steakDataset[2].rating*mcgs\n\n totalCost = totalCost+steakDataset[0].cost*bbb\n totalCost = totalCost+steakDataset[1].cost*scc\n totalCost = totalCost+steakDataset[2].cost*mcgs\n\n return [totalRating,totalCost]\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"calculatedValues[1]//this is our total cost","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"cow_origin = FileAttachment(\"cow_origin.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"cowIcon = {\n\n const width = 90,\n height = 60;\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-40, -30, width, height]);\n\n var p = svg.selectAll(\"polyline\")\n .data(cow_origin)\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','3')\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}