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://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{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({});
const markerclusterCSS = await require.resolve('leaflet.markercluster@1.4.1/dist/MarkerCluster.css');
// 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.hometown}</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.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 contestant info based on filters (franchise & max season)
scFiltered = contestants.filter(contestant => filters.franchise.includes(contestant.franchise_name) && contestant.season_year<=filters.seasonYear);
// in geo data, only return records that match contestant ids from filtered contestant data
queenGeoFiltered = queen_geo_data.filter(queen => scFiltered.some(sc => sc.contestant_id === queen.contestant_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>`
import 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.min.js';
import 'bootstrap-multiselect/dist/css/bootstrap-multiselect.css';
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.