2f:Te48,viewof chart = { const colorScale = d3.scaleOrdinal(d3.schemeCategory10); const svg = d3.create("svg") .attr("viewBox", [-margin.left, -margin.top, width, dx]) .style("font", "13px sans-serif") .style("user-select", "none"); const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 3); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(source) { const duration = d3.event && d3.event.altKey ? 2500 : 500; const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + margin.top + margin.bottom; const transition = svg.transition() .duration(duration) .attr("viewBox", [-margin.left, left.x - margin.top, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // Update the nodes… const node = gNode.selectAll("g") .data(nodes, d => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("fill", d => colorScale(d.depth)) .attr("stroke-opacity", 0) .on("click", (event, d) => { mutable pcs = {}; d.children = d.children ? null : d._children; update(d); }); nodeEnter.append("circle") .attr("r", 6) .attr("fill", d => d._children ? "#555" : "#999") .attr("stroke-width", 10) ; nodeEnter.append("text") .attr("dy", "0.31em") .attr("x", d => d._children ? -6 : 6) .attr("text-anchor", d => d._children ? "end" : "start") .text(d => d.data.name) .clone(true).lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path") .data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // Transition links to their new position. link.merge(linkEnter).transition(transition) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } update(root); return svg.node(); }30:T545,SelectCollegeDataPoints = { const finalJoinedDataTemp = finalJoinedData; const columnToFilter = "Colleges"; // Check if the specified column exists in the DataFrame // Extract the array from the Map const valuesToFilter = egChangeListener.get(columnToFilter); //return valuesToFilter // Filter DataFrame based on whether the column value is present in the array const filteredDataFrame = finalJoinedDataTemp.filter(record => valuesToFilter && valuesToFilter.includes(record[columnToFilter])); const selectedKeysArray = filteredDataFrame.map(({Colleges, Latitude, Longitude}) => ({Colleges, Latitude, Longitude })); // Function to find distinct values based on multiple columns function findDistinctValues(data, columns) { const uniqueValues = new Map(); for (const item of data) { const key = columns.map(column => item[column] +';').join(',') + ';'; if (!uniqueValues.has(key)) { uniqueValues.set(key, item); } } return Array.from(uniqueValues.values()); } // Specify columns for which you want distinct values const distinctColumns = ['Colleges', 'Latitude', 'Longitude']; // Find distinct values based on the specified columns const distinctValues1 = findDistinctValues(selectedKeysArray, distinctColumns); return distinctValues1; }31:Tea5,viewof SelectedCompanyMap = { const container = html`

`; yield container; // Assuming SelectCompanyDataPoints contains the selected company data const selectedCompanyData = SelectCompanyDataPoints; const selectedCollegeData = SelectCollegeDataPoints; // Initialize the map var map = new maplibregl.Map({ container: container, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", center: [selectedCompanyData[0].comp_longitude, selectedCompanyData[0].comp_latitude], zoom: 6, }); // Function to add a point to the map function addPoint(data, type) { map.addLayer({ id: `${type}-${data.id}`, // Unique ID for the layer type: 'circle', source: { type: 'geojson', data: { type: 'Feature', geometry: { type: 'Point', coordinates: [data.longitude, data.latitude] } } }, paint: { 'circle-radius': 5, 'circle-color': type === 'company' ? 'blue' : 'green', 'circle-opacity': 0.7 } }); } // Wait for the map style to load before adding points map.on('load', () => { selectedCompanyData.forEach(company => addPoint(company, 'company')); selectedCollegeData.forEach(college => addPoint(college, 'college')); }); }; 33:T74a,data = { var csv_str = "name,parent\n" const selectedCompany = selectCompany; const companyName = Array.from(new Set(finalJoinedData.map(obj => obj["company"]))).map(value => value.replace(/,/g, '')).map(value => value.replace(/-/g, '')).sort(); const filteredCompanyStreamCombinations = Array.from(new Set(finalJoinedData .filter(obj => obj["company"].replace(/,/g, '') === selectedCompany) .map(obj => `${obj.company.replace(/,/g, '')}-${obj.stream.replace(/,/g, '')}`))) .map(combination => { const [company, stream] = combination.split('-').map(value => value.replace(/,/g, '')); return { company, stream }; }); const streamCollegesCombinations = Array.from(new Set(finalJoinedData .filter(item => filteredCompanyStreamCombinations.some(t => t.stream.includes(item.stream) )) .map(obj => `${obj.stream.replace(/,/g, '')}-${obj.Colleges.replace(/,/g, '')}`))) .map(combination => { const [stream, colleges] = combination.split('-').map(value => value.replace(/,/g, '')); return { stream, colleges }; }); for (let i = 0; i < filteredCompanyStreamCombinations.length; i++) { const company = filteredCompanyStreamCombinations[i]['company']; const stream = filteredCompanyStreamCombinations[i]['stream']; csv_str += stream + "," + company + "\n"; } for (let i = 0; i < streamCollegesCombinations.length; i++) { const stream = streamCollegesCombinations[i]['stream'] || 'UnknownStream'; const colleges = streamCollegesCombinations[i]['colleges'] || 'UnknownColleges'; csv_str += colleges + "," + stream + "\n"; } csv_str += selectCompany + ","; var table = d3.csvParse(csv_str); var root = d3.stratify() .id(function(d) { return d.name; }) .parentId(function(d) { return d.parent; }) (table); return root; }34:[] 2d:{"title":"Map Final Project","cells":[{"id":0,"value":"# Map Final Project","pinned":false,"hidden":false,"mode":"md"},{"id":488,"value":"viewof selectCompany = 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":104,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"## Maps","pinned":false,"hidden":false,"mode":"md"},{"id":550,"value":"SelectCompanyDataPoints = {\n const finalJoinedDataTemp = finalJoinedData;\n const filteredData = finalJoinedDataTemp.filter(item => item.company === selectCompany);\n const distinctValues = [...new Set(filteredData.map(item => item.company))];\n\n\n // Function to find distinct values based on multiple columns\n function findDistinctValues(data, columns) {\n const uniqueValues = new Map();\n \n for (const item of data) {\n const key = columns.map(column => item[column]).join(',');\n \n if (!uniqueValues.has(key)) {\n uniqueValues.set(key, item);\n }\n }\n \n return Array.from(uniqueValues.values());\n }\n\n // Specify columns for which you want distinct values\n const distinctColumns = ['company', 'latitude', 'longitude'];\n \n // Find distinct values based on the specified columns\n const distinctValues1 = findDistinctValues(filteredData, distinctColumns);\n \n return distinctValues1\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"SelectCompanyDataPoints","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"Inputs.table(finalJoinedData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":804,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"egChangeListener = {\n if (pcs) {} // NOTE: this is a hack to register our dependency on `pcs` (i.e. listen for changes)\n\n // if you want to get lat/long for leaf nodes, we have to do actual tree traversal here\n return d3.rollup(\n root.descendants(),\n dd => dd.map(d => d.name),\n d => levels[d.depth],\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"t = {\n const test = \"Colleges\"\n return egChangeListener.get(test)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"levels = ['company', 'stream', 'Colleges']","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"mutable pcs = ({}) // NOTE: this is a dummy object for change detection","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"egSelectedColleges = {\n // NOTE: This is just an example of a fast and dirty way to get details about the selected colleges.\n // IMPORTANT: These are arbitrarily deduped rows, just based on college name. It is sufficient for\n // latitude and longitude, but it could lead to ambiguities for more detailed fields (e.g. stream).\n // QUESTION: Does the 'stream' vary depending on how we navigate to a college? For example,\n // \"Thomas College\" will come up under multiple companies. If it comes up under different\n // streams, how would we choose a color?\n const cc = new Set(egChangeListener.get('Colleges') || [])\n return d3.rollup(\n finalJoinedData.filter(d => cc.has(d.Colleges)),\n dd => ({stream: dd[0].stream, Colleges: dd[0].Colleges, Latitude: dd[0].Latitude, Longitude: dd[0].Longitude}),\n d => d.Colleges,\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"null","pinned":true,"hidden":false,"mode":"ojs"},{"id":445,"value":"## Calculations","pinned":false,"hidden":false,"mode":"md"},{"id":264,"value":"mutable visible = root.descendants()","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"Promises.tick(100, root.descendants().length);","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"root = {\n const root = d3.hierarchy(data);\n \n root.x0 = dy / 2;\n root.y0 = 0;\n root.descendants().forEach((d, i) => {\n d.name = d.data.name = d.data.id;\n d.id = i;\n d._children = d.children;\n //if (d.depth && d.data.name.length !== 7) d.children = null;\n d.children = null;\n });\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"dx = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"dy = width / 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"margin = ({top: 10, right: 120, bottom: 10, left: 220})","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"tree = d3.tree().nodeSize([dx, dy])","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"maplibregl = require(\"maplibre-gl@2.1.9\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"## Additional Data","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"import {finalJoinedData} from \"@class/bio-science\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"import {SearchForm} from \"@floatingpurr/input-autocomplete\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"import {viewof select} from \"6703cfce2eceff50\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"## Approach 2","pinned":false,"hidden":false,"mode":"md"},{"id":308,"value":"companyName = Array.from(new Set(finalJoinedData.map(obj => obj[\"company\"]))).map(value => value.replace(/,/g, '')).sort();","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"Inputs.table(SelectCompanyDataPoints)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}