28:null 29:["$","title",null,{"children":"HaoChe's Final Assignement | HaoChe | Observable"}] 2f:Tdf4,reviewData = [ { username: 1, review: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae aliquet nec ullamcorper sit amet risus nullam." }, { username: 2, review: "Commodo viverra maecenas accumsan lacus. Urna nec tincidunt praesent semper feugiat. Adipiscing tristique risus nec feugiat. Ut ornare lectus sit amet est placerat. Dui faucibus in ornare quam viverra orci sagittis eu volutpat." }, { username: 3, review: "Vitae sapien pellentesque habitant morbi tristique senectus et netus. Amet nisl suscipit adipiscing bibendum. Vitae tortor condimentum lacinia quis vel." }, { username: 4, review: "Viverra nibh cras pulvinar mattis." }, { username: 5, review: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae aliquet nec ullamcorper sit amet risus nullam." }, { username: 6, review: "Commodo viverra maecenas accumsan lacus. Urna nec tincidunt praesent semper feugiat. Adipiscing tristique risus nec feugiat. Ut ornare lectus sit amet est placerat. Dui faucibus in ornare quam viverra orci sagittis eu volutpat." }, { username: 7, review: "Ultrices vitae auctor eu augue ut lectus arcu." }, { username: 8, review: "Erat pellentesque adipiscing commodo elit. Urna et pharetra pharetra massa massa." }, { username: 9, review: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae aliquet nec ullamcorper sit amet risus nullam." }, { username: 10, review: "Commodo viverra maecenas accumsan lacus. Urna nec tincidunt praesent semper feugiat. Adipiscing tristique risus nec feugiat. Ut ornare lectus sit amet est placerat. Dui faucibus in ornare quam viverra orci sagittis eu volutpat." }, { username: 11, review: "Vitae sapien pellentesque habitant morbi tristique senectus et netus. Amet nisl suscipit adipiscing bibendum. Vitae tortor condimentum lacinia quis vel." }, { username: 12, review: "Viverra nibh cras pulvinar mattis." }, { username: 13, review: "Ultrices vitae auctor eu augue ut lectus arcu." }, { username: 14, review: "Commodo viverra maecenas accumsan lacus. Urna nec tincidunt praesent semper feugiat. Adipiscing tristique risus nec feugiat. Ut ornare lectus sit amet est placerat. Dui faucibus in ornare quam viverra orci sagittis eu volutpat." }, { username: 15, review: "Non curabitur gravida arcu ac tortor dignissim convallis aenean. Magna eget est lorem ipsum dolor." }, { username: 16, review: "Nunc faucibus a pellentesque sit amet porttitor. Fermentum et sollicitudin ac orci phasellus." }, { username: 17, review: "Ultrices vitae auctor eu augue ut lectus arcu." }, { username: 18, review: "Commodo viverra maecenas accumsan lacus. Urna nec tincidunt praesent semper feugiat. Adipiscing tristique risus nec feugiat. Ut ornare lectus sit amet est placerat. Dui faucibus in ornare quam viverra orci sagittis eu volutpat." }, { username: 19, review: "Non curabitur gravida arcu ac tortor dignissim convallis aenean. Magna eget est lorem ipsum dolor." }, { username: 20, review: "Nunc faucibus a pellentesque sit amet porttitor. Fermentum et sollicitudin ac orci phasellus." } ]30:[{"id":"087ac4e7afa471826a594c0188b09b31686effadbd2e3bb93bba35b72beeea9e79cc166e9a6b50297de335edc022c5f887f609a6aad06f174734e95a58ac91af","href":"https://static.observableusercontent.com/files/087ac4e7afa471826a594c0188b09b31686effadbd2e3bb93bba35b72beeea9e79cc166e9a6b50297de335edc022c5f887f609a6aad06f174734e95a58ac91af","name":"AA_meeting_all-4.csv","type":"text/csv","lastModified":1702303582737.218,"size":101287}] 2c:{"id":"45b4c350e00e587d","slug":null,"title":"HaoChe's Final Assignement","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-12-11T14:04:26.520Z","update_time":"$D2023-12-11T15:16:17.016Z","view_time":null,"first_public_time":"$D2023-12-11T14:04:26.520Z","fork":{"id":"da3f3c7bef895f04","slug":"integrating-duckdb-user-inputs-and-mapbox","title":"Integrating DuckDB, user inputs, and Mapbox","owner":{"id":"3d100e334331cdef","login":"aaronxhill","name":"Aaron Hill"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c32e51353e9ac9e4","login":"hhc9106","name":"HaoChe","avatar_url":"https://avatars-next.observableusercontent.com/5518bb0143f9e13eda2bd7e68d7c0e3cfb1c7026b4ef72826c068ae773d3d9b3","tier":"starter_2024"},"version":277,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e6ddf36973f353a","login":"hhc9106","name":"HaoChe","avatar_url":"https://avatars-next.observableusercontent.com/5518bb0143f9e13eda2bd7e68d7c0e3cfb1c7026b4ef72826c068ae773d3d9b3","tier":null}],"members":[{"type":"individual","id":"5e6ddf36973f353a","login":"hhc9106","name":"HaoChe","avatar_url":"https://avatars-next.observableusercontent.com/5518bb0143f9e13eda2bd7e68d7c0e3cfb1c7026b4ef72826c068ae773d3d9b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"HaoChe's Final Assignement","cells":[{"id":0,"value":"# HaoChe's Final Assignement\n\nLast week, we used [DuckDB](https://observablehq.com/@observablehq/duckdb) to [import AA data and reviews](https://observablehq.com/@aaronxhill/duckdb-demo). \n\nIn the next step toward your final assignment, you will use [Mapbox in Observable](https://observablehq.com/@aaronxhill/hello-mapbox-gl) to plot your AA data. \n\nThis demo shows how you can use the values of [Observable user inputs](https://observablehq.com/@observablehq/learning-observable-user-inputs-and-interactivity) within your DuckDB queries, and connecting those query results to your Mapbox map. ","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"aa_meeting_all4 = await FileAttachment(\"AA_meeting_all-4.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"### Create database\n\nCreate a new instance of DuckDBClient, in a variable named `client`. This variable will hold two tables: 1) `meetings` from an attached CSV file, and 2) `reviews` from an array of objects: ","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"client = DuckDBClient.of({\n meetings: FileAttachment(\"AA_meeting_all-4.csv\"),\n reviews: reviewData\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"### Save data from a query to a JavaScript variable\n\nWhen creating a new SQL cell, give it a name. I'll name this one `daysQuery`:","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"SELECT *\nFROM meetings\nWHERE date = ${d}; -- previously: WHERE Day = 'Wednesdays';","pinned":true,"hidden":false,"mode":"sql","output":"daysQuery","database":"var:client"},{"id":105,"value":"daysQuery","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"# Map generated from SQL query that updates on user input","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"d","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"zones = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"SELECT *\nFROM meetings\nWHERE zone = ${z}; ","pinned":true,"hidden":false,"mode":"sql","output":"areaQuery","database":"var:client"},{"id":198,"value":"areaQuery","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"meeting = [\n \"B = Beginners meeting\",\n \"BB = Big Book meeting\",\n \"C = Closed Discussion\",\n \"OD = Open Discussion\",\n \"S = Step meeting\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"SELECT *\nFROM meetings\nWHERE meeting_type = ${c}; ","pinned":true,"hidden":false,"mode":"sql","output":"meetingQuery","database":"var:client"},{"id":271,"value":"SELECT *\nFROM meetings\nWHERE date = ${d} AND zone = ${z} AND meeting_type = ${c}; ","pinned":true,"hidden":false,"mode":"sql","output":"allQuery","database":"var:client"},{"id":214,"value":"viewof d = Inputs.select(days, { label: \"Days\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"viewof z = Inputs.select(zones, { label: \"Zone\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"viewof c = Inputs.select(meeting, { label: \"Meeting\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"zones","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"viewof map = {\n const container = html`

`;\n yield container; // Give the container dimensions.\n const map = (container.value = new mapboxgl.Map({\n container,\n center: [-73.973103, 40.781031],\n zoom: 14,\n style: \"mapbox://styles/mapbox/streets-v11\",\n scrollZoom: false\n }));\n\n // 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}]\n\n for (const element of allQuery) {\n const popup = new mapboxgl.Popup().setHTML(\n `

${element.GROUP_NAME}

${element.meeting_type}

${element.date}

${element.time}

`\n ); // Customize the content here\n const thisMarker = new mapboxgl.Marker()\n .setLngLat([element.longitude, element.latitude])\n .setPopup(popup)\n .addTo(map);\n }\n invalidation.then(() => map.remove());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1\");\n if (!gl.accessToken) {\n gl.accessToken = accessToken;\n const href = await require.resolve(\"mapbox-gl@1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"accessToken = \"pk.eyJ1IjoibW9sbGllbWFyaWUiLCJhIjoiY2txNXF0Mmw5MTVvdDJ3b2N3bHhobXN6aCJ9.ztC4Av-WFMynvpwyFgUiGw\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"days = [\n \"Sundays\",\n \"Mondays\",\n \"Tuesdays\",\n \"Wednesdays\",\n \"Thursdays\",\n \"Fridays\",\n \"Saturdays\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"# Next steps\n\n1. How will you integrate metadata with the [map markers](https://docs.mapbox.com/help/getting-started/add-markers/)?\n2. How will you integrate review data into the interface? (read for next class: Hills NoSQL chapter) ","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"