Public
Edited
May 7, 2024
SelectCompanyDataPoints
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;
}
viewof SelectedCompanyMap = {
const container = html`<div style="height: 800px;"></div>`;
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,
});
// Wait for the map style to load before adding layers
map.on('style.load', () => {
// add points for companies (should be zero or one)
selectedCompanyData.forEach((company) => {
// Create a circle layer for the college's location
map.addLayer({
id: `company-circle-${company.company_id}`,
type: 'circle',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [company.comp_longitude, company.comp_latitude],
},
properties: {
stream: company.stream,
},
},
],
},
},
// QUESTION: what do we want for company colors?
paint: {
'circle-radius': 5, // Adjust the radius of the circle
'circle-color': getColorForStream(company.stream), // Dynamically set circle color based on stream
'circle-opacity': 0.7,
},
});
});
// add points for colleges
Array.from(egSelectedColleges.values()).forEach(college => {
console.log(college);
// Add a label for the college's name
map.addLayer({
id: `college-label-${college.Colleges}`, // QUESTION: do we need layers for each point? seem to be getting just one...
type: 'symbol',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [college.Longitude, college.Latitude],
},
},
],
},
},
layout: {
'text-field': college.Colleges,
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
'text-size': 8,
'text-offset': [0, 1], // Adjust the offset if needed
'text-anchor': 'top',
},
paint: {
'text-color': getColorForStream(college.stream), // Use the same color as the circle
},
});
// Add a tooltip (popup) to each circle marker
const popup = new maplibregl.Popup({ closeOnClick: false })
.setLngLat([college.Longitude, college.Latitude])
.setHTML(`<b>${college.Colleges}</b><br>Stream: ${college.stream}`)
.addTo(map);
// Show the tooltip by default
popup.addTo(map);
});
});
// Resolve the promise when the map is loaded and data is plotted
map.on("load", () => {});
// Function to get a color based on the stream
function getColorForStream(stream) {
// Add logic to return different colors based on the stream
// For example, you can use a switch statement or a color scale
// Here, a simple switch statement is used for illustration
switch (stream) {
case 'Biology':
return 'blue';
case 'Physics':
return 'green';
// Add more cases as needed
default:
return 'red';
}
}
};
Inputs.table(finalJoinedData)
viewof SelectedCompanyMap1 = {
const container = html`<div style="height: 800px;"></div>`;
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'));
});
};
t = {
const test = "Colleges"
return egChangeListener.get(test)
}
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
maplibregl = require("maplibre-gl@2.1.9")
import {viewof select} from "6703cfce2eceff50"
Inputs.table(SelectCompanyDataPoints)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.