reviewData = [{"username": 3, "review": "I love this meeting"}, {"username": 5, "review": "This meeting never starts on time"}, {"username" : 17, "review": "The people here are wonderful, but the coffee isn't very good"}]
client = DuckDBClient.of({
meetings: FileAttachment("my_aadata-2.csv"),
reviews: reviewData
})
client
daysQuery
d
viewof d = Inputs.select(days, {label: "Days"})
viewof map = {
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
const map = container.value = new mapboxgl.Map({
container,
center: [-73.973103, 40.781031],
zoom: 14,
style: "mapbox://styles/mapbox/streets-v11",
scrollZoom: false
});
// const data = [{address: "63 Fifth Ave", lat: 40.7354741, long: -73.993774}, {address: "16 E 16th St", lat: 40.7368412, long: -73.9917407}, {address: "2 W 13th St", lat: 40.7353701, long: -73.9945167}]
for (const element of daysQuery) {
const thisMarker = new mapboxgl.Marker()
.setLngLat([element.Longitude, element.Latitiude])
.addTo(map);
}
invalidation.then(() => map.remove());
}
mapboxgl = {
const gl = await require("mapbox-gl@1");
if (!gl.accessToken) {
gl.accessToken = accessToken;
const href = await require.resolve("mapbox-gl@1/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
accessToken = "pk.eyJ1IjoibW9sbGllbWFyaWUiLCJhIjoiY2txNXF0Mmw5MTVvdDJ3b2N3bHhobXN6aCJ9.ztC4Av-WFMynvpwyFgUiGw"
days = ["Sundays", "Mondays", "Tuesdays", "Wednesdays", "Thursdays", "Fridays", "Saturdays"]
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.
