Independent Data Analytics Consultant, passionate about data visualization and storytelling · she/her 🏳️🌈
map = {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([15, 27.6], 2);
//for more tile options see https://leaflet-extras.github.io/leaflet-providers/preview/ (copy url)
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
// for marketCluster to work, you need to import the code snippet below to import this feature
let markers = markerCluster({});
// loop to create a marker for each drag queen
queenGeoFiltered.forEach(queen => {
var queenIcon = L.icon({
iconUrl: queen.link_image, // map to image url
iconSize: [32, 32], // size of the icon
iconAnchor: [16, 16], // point of the icon corresponds to marker's location
});
let marker = L.marker([queen.latitude, queen.longitude], {icon: queenIcon});
// Add a tooltip with Queen info (name, hometown)
marker.bindTooltip(`<center><strong>${queen.name}</strong><br>${queen.city}</center>`, {
permanent: false,
direction: 'top'
});
// Open the tooltip when the marker is clicked
marker.on('click', function() {
marker.openTooltip();
});
// Add the marker to the marker cluster group
markers.addLayer(marker);
});
// Add the marker cluster group to the map
map.addLayer(markers);
}
queen_geo_data@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
queen_geo_data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
contestants@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
contestants.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
//get unique franchise names in a list for filter
franchises = [...new Set(contestants.map(f => f.franchise_name))]
queenList = [...new Set(queen_geo_data.map(q => q.name))].sort()
//subset data
scFiltered = contestants.filter(contestant => filters.franchise.includes(contestant.franchise_name) && contestant.season_year<=filters.seasonYear);
scFiltered[1].contestant_id
//
queenGeoFiltered = queen_geo_data.filter(queen => scFiltered.some(sc => sc.contestant_id === queen.queen_id));
markerCluster = L, require('leaflet.markercluster@1.1.0').catch(() => L.markerClusterGroup)
// Template credit: This layout is updated from Martien van Steenbergen @martien/horizontal-inputs
template = (inputs) =>
htl.html`<div class="styled">${Object.values(inputs)}</div>
<style>
div.styled {
text-align: left;
column-count: 2
}
div.styled label {
font-weight: bold;
line-height: 200%;
}
div.styled label:not(div>label):after {
content: ":";
}
</style>`
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.
