2f:Tf67,chart = { const svg = d3.create('svg') .attr('viewBox', [-width/10, -width/10, width, width]) .style('margin', '5px') .style('background', '#FCFCFC') .style('border-radius', '15px') .style('box-shadow', '0px 0px 5px 0px rgba(0, 0, 0, 0.075)'); const edgeElements = svg.append('g') .attr('id', 'edges'); const nodeElements = svg.append('g') .attr('id', 'nodes'); return Object.assign(svg.node(), { update(g, nodes, edges) { edgeElements .selectAll('path') .data(edges) .join( enter => enter.append('path') .attr('d', d => d.d) .style('stroke', d => d.stroke) .style('stroke-width', d => d.stroke_width) .style('fill', 'none') .style('opacity', 0) .call( enter => enter.transition() .duration(delay * 0.5) .delay(delay*0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .delay(delay * 0.25) .attr('d', d => d.d) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.25) .style('opacity', 0) .remove() ) ); nodeElements .selectAll('path') .data(nodes) .join( enter => enter.append('path') .attr('d', d => d.d) .style('stroke', d => d.stroke) .style('stroke-width', d => d.stroke_width) .attr("stroke-linecap", "round") .style('fill', 'none') .style('opacity', 0) .call( enter => enter.transition() .duration(delay * 0.5) .delay(delay * 0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .attrTween('d', function(d) { return d3.interpolatePath( this.getAttribute('d'), d.d ); }) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.25) .style('opacity', 0) .remove() ) ); nodeElements .selectAll('text') .data(nodes) .join( enter => enter.append('text') .filter(d => (d.x != null) && (d.y != null)) .text(d => d.data_id) .attr('transform', d => `translate(${d.x}, ${d.y})`) .attr('text-anchor', 'left') .style('font-family', 'Helvetica, Arial, sans-serif') .style('font-size', '11px') .style('paint-order', 'stroke') .style('stroke', '#FCFCFC') .style('stroke-width', 2.5) .style('stroke-linecap', 'round') .style('stroke-linejoin', 'round') .call( enter => enter.transition() .duration(delay * 0.5) .delay(delay * 0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .text(d => d.data_id) .attr('transform', d => `translate(${d.x}, ${d.y})`) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.25) .style('opacity', 0) .remove() ) ); return 'I arrange the graph...'; } }); }30: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 }31:T10a5,constructTangleLayout = (levels, options={}) => { // precompute level depth levels.forEach((l, i) => l.forEach(n => (n.level = i))); var nodes = levels.reduce((a, x) => a.concat(x), []); var nodes_index = {}; nodes.forEach(d => (nodes_index[d.id] = d)); // objectification nodes.forEach(d => { d.parents = (d.parents === undefined ? [] : d.parents).map( p => nodes_index[p] ); }); // precompute bundles levels.forEach((l, i) => { var index = {}; l.forEach(n => { if (n.parents.length == 0) { return; } var id = n.parents .map(d => d.id) .sort() .join('-X-'); if (id in index) { index[id].parents = index[id].parents.concat(n.parents); } else { index[id] = { id: id, parents: n.parents.slice(), level: i, span: i - d3.min(n.parents, p => p.level) }; } n.bundle = index[id]; }); l.bundles = Object.keys(index).map(k => index[k]); l.bundles.forEach((b, i) => (b.i = i)); }); var links = []; nodes.forEach(d => { d.parents.forEach(p => links.push({ source: d, bundle: d.bundle, target: p }) ); }); var bundles = levels.reduce((a, x) => a.concat(x.bundles), []); // reverse pointer from parent to bundles bundles.forEach(b => b.parents.forEach(p => { if (p.bundles_index === undefined) { p.bundles_index = {}; } if (!(b.id in p.bundles_index)) { p.bundles_index[b.id] = []; } p.bundles_index[b.id].push(b); }) ); nodes.forEach(n => { if (n.bundles_index !== undefined) { n.bundles = Object.keys(n.bundles_index).map(k => n.bundles_index[k]); } else { n.bundles_index = {}; n.bundles = []; } n.bundles.sort((a,b) => d3.descending(d3.max(a, d => d.span), d3.max(b, d => d.span))) n.bundles.forEach((b, i) => (b.i = i)); }); links.forEach(l => { if (l.bundle.links === undefined) { l.bundle.links = []; } l.bundle.links.push(l); }); // layout // const padding = 8; // const node_height = 22; // const node_width = 50; // const bundle_width = 14; // const level_y_padding = 16; // const metro_d = 4; // const min_family_height = 22; options.c ||= 16; const c = options.c; options.bigc ||= node_width+c; nodes.forEach( n => (n.height = (Math.max(1, n.bundles.length) - 1) * metro_d) ); var x_offset = padding; var y_offset = padding; levels.forEach(l => { x_offset += l.bundles.length * bundle_width; y_offset += level_y_padding; l.forEach((n, i) => { n.x = n.level * node_width + x_offset; n.y = node_height + y_offset + n.height / 2; y_offset += node_height + n.height; }); }); var i = 0; levels.forEach(l => { l.bundles.forEach(b => { b.x = d3.max(b.parents, d => d.x) + node_width + (l.bundles.length - 1 - b.i) * bundle_width; b.y = i * node_height; }); i += l.length; }); links.forEach(l => { l.xt = l.target.x; l.yt = l.target.y + l.target.bundles_index[l.bundle.id].i * metro_d - (l.target.bundles.length * metro_d) / 2 + metro_d / 2; l.xb = l.bundle.x; l.yb = l.bundle.y; l.xs = l.source.x; l.ys = l.source.y; }); // compress vertical space var y_negative_offset = 0; levels.forEach(l => { y_negative_offset += -min_family_height + d3.min(l.bundles, b => d3.min(b.links, link => link.ys - 3*c - (link.yt + c)) ) || 0; l.forEach(n => (n.y -= y_negative_offset)); }); // very ugly, I know links.forEach(l => { l.yt = l.target.y + l.target.bundles_index[l.bundle.id].i * metro_d - (l.target.bundles.length * metro_d) / 2 + metro_d / 2; l.ys = l.source.y; l.c1 = l.source.level - l.target.level > 1 ? Math.min(options.bigc, l.xb-l.xt, l.yb-l.yt)-c : c; l.c2 = c; }); var layout = { width: d3.max(nodes, n => n.x) + node_width + 2 * padding, height: d3.max(nodes, n => n.y) + node_height / 2 + 2 * padding, node_height, node_width, bundle_width, level_y_padding, metro_d }; return { levels, nodes, nodes_index, links, bundles, layout }; }32:T699,renderChart = (data, options={}) => { options.color ||= (d, i) => color(i) const tangleLayout = constructTangleLayout(_.cloneDeep(data), options); return svg``; }33:T43d,{var div = DOM.element('div') var footnote1 = footnote("intro", 1, `A. Bezerianos, P. Dragicevic, J. Fekete, J. Bae and B. Watson, "GeneaQuilts: A System for Exploring Large Genealogies," in IEEE Transactions on Visualization and Computer Graphics, vol. 16, no. 6, pp. 1073-1081, Nov.-Dec. 2010, doi: 10.1109/TVCG.2010.159.`) var footnote2 = footnote("intro", 2, `Javier García Fernández, "D3 Transitions": https://www.d3indepth.com/transitions/`) var footnote3 = footnote("intro", 3, `mcmcclur, "Embed Width":https://talk.observablehq.com/t/embed-width/3197/6`) var footnote4 = footnote("intro", 4, `Bartosz Prusinowski, "Step-by-step directed graph drawing (dagre layout)":https://observablehq.com/@bartok32/step-by-step-directed-graph-drawing-dagre-layout`) var footnote5 = footnote("intro", 5, `Matteo Abrate, "Tangled tree visualization (simple)":https://observablehq.com/@nitaku/tangled-tree-visualization`) div.appendChild(footnote1) div.appendChild(footnote2) div.appendChild(footnote3) div.appendChild(footnote4) div.appendChild(footnote5) return div; }34:[] 2d:{"title":"BEMID - Career Path","cells":[{"id":0,"value":"md`# BEMID - Career Path`","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":true,"hidden":false,"mode":"ojs"},{"id":1613,"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":1616,"value":"viewof select = 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":1723,"value":"selected_company","pinned":true,"hidden":false,"mode":"ojs"},{"id":1725,"value":"selected_job","pinned":true,"hidden":false,"mode":"ojs"},{"id":1721,"value":"select","pinned":true,"hidden":false,"mode":"ojs"},{"id":1350,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"md`## Variable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1190,"value":"graph = d3.create('svg').append('g')","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"lines = Array.from(renderChart(graphData[select]).querySelector(\"#edges\").children).map(child =>\n({\n d: child.getAttribute(\"d\"),\n stroke : child.getAttribute(\"stroke\"),\n stroke_width: child.getAttribute(\"stroke-width\"),\n data_id : child.getAttribute(\"data-id\")\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"labels = Array.from(renderChart(graphData[select]).querySelector(\"#nodes\").children).map(child =>({\n d: child.getAttribute(\"d\"),\n x: child.getAttribute(\"x\"),\n y: child.getAttribute(\"y\"),\n style: child.getAttribute(\"style\"),\n stroke : child.getAttribute(\"stroke\"),\n stroke_width: child.getAttribute(\"stroke-width\"),\n data_id : child.getAttribute(\"data-id\")}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"sideeffect = chart.update(graph, labels, lines)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"// padding = 8;\npadding = width / 100;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"// node_height = 22;\nnode_height = width / 40;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"// node_width = 50;\nnode_width = width / 20;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"// bundle_width = 14;\nbundle_width = width / 50;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1244,"value":"// level_y_padding = 16;\nlevel_y_padding = width / 50;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"// metro_d = 4;\nmetro_d = width / 200;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"// min_family_height = 22;\nmin_family_height = width / 40;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"height = renderChart(graphData[select]).height.baseVal.value","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"width0 = renderChart(graphData[select]).width.baseVal.value","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"md`## Function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"color = d3.scaleOrdinal(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"md`## Constant`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"width","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"background_color = 'white'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"delay = 650","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":1539,"value":"Filter_K12 = Maine.setFilter('K12-circles',['has', select]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1541,"value":"Filter_Companies = Maine.setFilter('company-circles',['has', select]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"Filter_Colleges = Maine.setFilter('Colleges-circles',['has', select]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1545,"value":"Filter_CC = Maine.setFilter('CC-circles',['has', select]);","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":true,"hidden":false,"mode":"ojs"},{"id":1681,"value":"maplibregl = require(\"maplibre-gl@2.1.9\")","pinned":true,"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":true,"hidden":false,"mode":"html"},{"id":535,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}