Public
Edited
May 7, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
SelectCompanyDataPoints
Insert cell
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;
}
Insert cell
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';
}
}
};
Insert cell
Inputs.table(finalJoinedData)
Insert cell
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'));
});
};

Insert cell
Insert cell
t = {
const test = "Colleges"
return egChangeListener.get(test)
}
Insert cell
Insert cell
Insert cell
Insert cell
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
maplibregl = require("maplibre-gl@2.1.9")
Insert cell
Insert cell
Insert cell
Insert cell
import {viewof select} from "6703cfce2eceff50"
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.table(SelectCompanyDataPoints)
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more