2f:T11b5,viewof Maine = { const container = html`

`; let resolve; container.value = new Promise(_ => resolve = _); yield container; var map = (container.value = new maplibregl.Map({ boxZoom: true, pitch: 0, bearing: 0, maplibreLogo: true, container, center: [-69, 45], zoom: 6, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", scrollZoom: true })); map.on("data", function () { map.addSource("CTE", { type: "geojson", data: K12GeoJson }); map.addLayer({ id: "K12-circles", type: "circle", source: "CTE", layout: {}, paint: { 'circle-color': 'red', 'circle-opacity': 0.8, 'circle-radius': 5, } }); // Create a popup, but don't add it to the map yet. var popup = new maplibregl.Popup({ closeButton: false, closeOnClick: false }); map.on('mouseenter', 'K12-circles', function (e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var Name = e.features[0].properties["School Name"]; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML('' + Name + '').addTo(map); }); map.on('mouseleave', 'K12-circles', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); map.addSource("companies", { type: "geojson", data: companyGeoJson }); map.addLayer({ id: "company-circles", type: "circle", source: "companies", layout: {}, paint: { 'circle-color': 'blue', 'circle-opacity': 0.8, 'circle-radius': 5, } }); map.on('mouseenter', 'company-circles', function (e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var Name = e.features[0].properties["School Name"]; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML('' + Name + '').addTo(map); }); map.on('mouseleave', 'company-circles', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); map.addSource("Colleges", { type: "geojson", data: univGeoJson }); map.addLayer({ id: "Colleges-circles", type: "circle", source: "Colleges", layout: {}, paint: { 'circle-color': 'orange', 'circle-opacity': 0.8, 'circle-radius': 5, } }); map.on('mouseenter', 'Colleges-circles', function (e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var Name = e.features[0].properties["School Name"]; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML('' + Name + '').addTo(map); }); map.on('mouseleave', 'Colleges-circles', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); map.addSource("CC", { type: "geojson", data: CCGeoJson }); map.addLayer({ id: "CC-circles", type: "circle", source: "CC", layout: {}, paint: { 'circle-color': 'purple', 'circle-opacity': 0.8, 'circle-radius': 5, } }); map.on('mouseenter', 'CC-circles', function (e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var Name = e.features[0].properties["School Name"]; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML('' + Name + '').addTo(map); }); map.on('mouseleave', 'CC-circles', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); resolve(map); // Expose the Map instance as the view’s value. invalidation.then(() => map.remove()); }); map.addControl(new maplibregl.NavigationControl()); return map }30:[] 2d:{"title":"BEMID: multi-step","cells":[{"id":0,"value":"md`# BEMID: multi-step`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1853,"value":"md`## Search`","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"viewof selected_company = SearchForm({\n placeholder: \"What company are you interested\",\n suggestion: (text) => {\n const res = companyName;\n return res;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1778,"value":"viewof company_row = Inputs.table(school.filter(obj => obj[\"Institution Type\"] == \"Company\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1766,"value":"viewof selected_job = SearchForm({\n placeholder: \"What job are you interested\",\n suggestion: (text) => {\n const res = jobName;\n return res;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1763,"value":"viewof job_row = Inputs.table(company_occupation.filter(obj => obj.Company == selected_company))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1786,"value":"viewof selected_program = SearchForm({\n placeholder: \"What degree are you interested\",\n suggestion: (text) => {\n const res = degreeName;\n return res;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1797,"value":"viewof program_row = Inputs.table(program_occupation.filter(obj => obj.Occupation == selected_job))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1801,"value":"viewof school_row = Inputs.table(program.filter(obj => obj[\"School Program\"] == selected_program))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1570,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1572,"value":"companyName = Array.from(new Set(company.map(obj => obj[\"School Name\"]))).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"jobName = Array.from(new Set(company_occupation.map(obj=>obj[\"Occupation\"]))).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1715,"value":"degreeName = Array.from(new Set(program_occupation.map(obj=>obj[\"Program\"]))).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1575,"value":"filtered_occupation = company_occupation.filter(obj => obj[\"Company\"] == selected_company)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"filtered_program = program_occupation.filter(obj => obj[\"Occupation\"] == selected_job)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1624,"value":"category = Array.from(\n program.reduce((prev, curr) =>{\n prev.add(curr[\"School Program\"])\n return prev\n }, new Set()))\n.sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"// Pull institution type categories from Google Sheets as a CSV. Change this URL to a different sheet if desired.\ninstitution_type = d3.tsv(getTsvUrl(\"https://docs.google.com/spreadsheets/d/1qJBKjaCgBFXIJTWjnhbrVrX41646PXn5c5DjVY8ZGTw/edit#gid=692350962\"), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1581,"value":"// Pull school from Google Sheets as a CSV, as well as the institution type and geocoordinates for each school. Change this URL to a different sheet if desired.\nschool = d3.tsv(getTsvUrl(\"https://docs.google.com/spreadsheets/d/1qJBKjaCgBFXIJTWjnhbrVrX41646PXn5c5DjVY8ZGTw/edit#gid=1980599465\"), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1583,"value":"// Pull the school programs for each school from Google Sheets as a CSV. Change this URL to a different sheet if desired.\nprogram = d3.tsv(getTsvUrl(\"https://docs.google.com/spreadsheets/d/1qJBKjaCgBFXIJTWjnhbrVrX41646PXn5c5DjVY8ZGTw/edit#gid=1693796963\"), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"// Pull the program-occupation table for each school from Google Sheets as a CSV. Change this URL to a different sheet if desired.\nprogram_occupation = d3.tsv(getTsvUrl(\"https://docs.google.com/spreadsheets/d/1qJBKjaCgBFXIJTWjnhbrVrX41646PXn5c5DjVY8ZGTw/edit#gid=161049214\"), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1590,"value":"// Pull the compnay-occupation table for each school from Google Sheets as a CSV. Change this URL to a different sheet if desired.\ncompany_occupation = d3.tsv(getTsvUrl(\"https://docs.google.com/spreadsheets/d/1qJBKjaCgBFXIJTWjnhbrVrX41646PXn5c5DjVY8ZGTw/edit#gid=1242465174\"), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1592,"value":"schoolMap = school.reduce((prev, curr) =>{\n prev[curr[\"School Name\"]] = {\"Institution Type\": curr[\"Institution Type\"], \"Latitude\": curr[\"Latitude\"], \"Longitude\": curr[\"Longitude\"]}\n return prev;\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1594,"value":"graphData = {\n var g = category.reduce((prev, curr) => {\n prev[curr] = new Array();\n for(let i=0;i<4;i++){\n prev[curr].push(new Array())\n }\n return prev;\n}, {})\n \nvar map = {\"K-12\": 0,\"Community College\":1, \"University\":2, \"Company\":3}\n for(const p of program){\n g[p[\"School Program\"]][map[schoolMap[p[\"School Name\"]][\"Institution Type\"]]].push({id:p[\"School Name\"]});\n }\n\nObject.keys(g).map(curr =>{\n for (let i=1;i{\n prev.push(curr[\"id\"])\n return prev;\n },new Array())\n \n g[curr][i].map(row => row[\"parents\"]=parent)\n }\n})\n \n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1597,"value":"md`### Group by Institution Type`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1598,"value":"school0 = {\n const school0 = _.cloneDeep(schoolMap)\n for (const s of Object.keys(school0)){\n school0[s][\"Program\"] = new Set()\n }\n\n for (const p of program){\n school0[p[\"School Name\"]][\"Program\"].add(p[\"School Program\"])\n }\n\nreturn school0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"value":"school1 = {\n const temp = _.cloneDeep(school)\n for (const s of temp){\n Array.from(school0[s[\"School Name\"]][\"Program\"]).map(x => s[x] = \"X\")\n }\nreturn temp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"inst = {\n const k12 = new Array();\n const cc = new Array();\n const univ = new Array();\n const company = new Array();\n\n for (const s of school1){\n if (s[\"Institution Type\"] == \"K-12\"){\n k12.push(s)\n } else if (s[\"Institution Type\"] == \"Community College\"){\n cc.push(s)\n } else if (s[\"Institution Type\"] == \"University\"){\n univ.push(s)\n } else if (s[\"Institution Type\"] == \"Company\"){\n company.push(s)\n } \n }\n return [k12, cc, univ, company];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1665,"value":"K12 = inst[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"CC = inst[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1672,"value":"univ = inst[2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1620,"value":"company = inst[3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"md`### GeoJSON`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"K12GeoJson = {\n return {\n type: \"FeatureCollection\",\n features: K12.map((d) => {\n return {\n type: \"Feature\",\n geometry: { type: \"Point\", coordinates: [d.Longitude, d.Latitude] },\n properties: d\n }\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1657,"value":"CCGeoJson = {\n return {\n type: \"FeatureCollection\",\n features: CC.map((d) => {\n return {\n type: \"Feature\",\n geometry: { type: \"Point\", coordinates: [d.Longitude, d.Latitude] },\n properties: d\n }\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1660,"value":"univGeoJson = {\n return {\n type: \"FeatureCollection\",\n features: univ.map((d) => {\n return {\n type: \"Feature\",\n geometry: { type: \"Point\", coordinates: [d.Longitude, d.Latitude] },\n properties: d\n }\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1662,"value":"companyGeoJson = {\n return {\n type: \"FeatureCollection\",\n features: company.map((d) => {\n return {\n type: \"Feature\",\n geometry: { type: \"Point\", coordinates: [d.Longitude, d.Latitude] },\n properties: d\n }\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"# Filters","pinned":false,"hidden":false,"mode":"md"},{"id":1911,"value":"Filter_Companies = Maine.setFilter('company-circles', ['==', [\"get\", \"School Name\"] , selected_company]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1903,"value":"Filter_K12 = Maine.setFilter('K12-circles',['has', selected_program]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"Filter_Colleges = Maine.setFilter('Colleges-circles',['has', selected_program]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1545,"value":"Filter_CC = Maine.setFilter('CC-circles',['has', selected_program]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"d3 = require('d3-scale', 'd3-scale-chromatic', 'd3-array', 'd3-selection', \"d3@v7\", \"d3-interpolate-path@v2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"import {footnote} from \"@jashkenas/markdown-style-footnotes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1727,"value":"import {SearchForm} from \"@floatingpurr/input-autocomplete\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"maplibregl = require(\"maplibre-gl@2.1.9\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1608,"value":"// Converts a Google Sheets website URL to its TSV URL.\ngetTsvUrl = url => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3]\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/export?format=tsv&gid=${gid}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":535,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}