2b:null 2c:["$","title",null,{"children":"A4 - What we learn from Yelp | Columbia Dataviz | Observable"}] 31:T4da,### User Testing and Tweaks User testing, conducted by Audrey, revealed that a tooltip was necessary, as users wanted to interact with the circles. We knew we wanted a tooltip text to show restaurant name/stars/no. reviews on the lowest level, but as the map zoomed out and clustered, we weren’t sure what information would be most useful to the viewer. Yamini and Amrut created a dynamic tooltip that would show aggregate data when zoomed out. Users also felt confused by circle sizing when zoomed out and wanted a legend. Thus, Jenny created a dynamic legend that would update with zooming. This was challenging in d3 as the legend values are dynamically edited using mutables according to both the clusters and the zoom level. To scale the circle sizes, heuristics were created in the generateGrades function. Another challenge was the combination of two different libraries, which made it difficult to ensure the legend was updated upon zoom. The legend also blocked the graph when zoomed out at high levels, so Amrut and Jenny made the design choice to use a divIcon to show the cluster size instead for those situations. Users praised the color coordinated circles and drop down menu UI, which Amrut made, as feeling intuitive. 32:Tcc8,apply = { const featureGroup = L.featureGroup().addTo(map); const nodes = fd_grp_review_filtered.map(d => createNode(map.latLngToLayerPoint([d.latitude, d.longitude]), d.review_count, d.stars, d.name)); // init the cluster ! const cluster = mc .cluster() .nodes(nodes) .on("tick", ticked); // bind to zoom events map.on('zoomend', zoomend); // map.on('move', zoomend); // on d3-marker-cluster update function ticked() { const current = this.nodes(); const filtered = current.filter(d => d.r != 0); // filter out dead nodes //https://bl.ocks.org/Andrew-Reid/21ff4b57267fa91dacc57ef1ccb7afb3 // heuristic ? if (filtered.length !== current.length) { this.nodes(filtered); // faster iterations featureGroup.clearLayers(); // remove old layers mutable max_area = 0; mutable radii = []; let circleMarkers = []; filtered.forEach(function(c){ const mark = createMarker(map.layerPointToLatLng([c.x, c.y]), c); mark.addTo(featureGroup); circleMarkers.push(mark); mutable max_area = Math.max(mutable max_area, c.a); const area = radius_selector.match('Restaurants') ? c.a/30 : c.a*4; if(map.getZoom() < 8 && circleMarkers.length<15){ if(radius_selector.match('Restaurants') && area > 50){ var myIcon = L.divIcon({ className: 'my-div-icon', html: ` ${String(area)} `, iconAnchor: [12, 7] }); L.marker(map.layerPointToLatLng([c.x, c.y-c.r]), { icon: myIcon }).addTo(featureGroup); } else if (area>1000){ var myIcon = L.divIcon({ className: 'my-div-icon', html: ` ${String(area)} `, iconAnchor: [20, 7] }); L.marker(map.layerPointToLatLng([c.x, c.y-c.r]), { icon: myIcon }).addTo(featureGroup); } } }); const markersInBound = filterByBound(circleMarkers); const radiiArr = [...new Set(markersInBound.map(m => m.getRadius()))]; const radii = generateGrades(d3.min(radiiArr), d3.max(radiiArr)); mutable radii = radii.map(r => Number(r)); } legend.addTo(map); } // when we zoom function zoomend() { cluster.stop(); // stop the cluster featureGroup.clearLayers(); // remove old layers // recompute the position of the nodes depending on actual zoom const data = cluster .nodes( fd_grp_review_filtered.map(d => createNode(map.latLngToLayerPoint([d.latitude, d.longitude]), d.review_count, d.stars, d.name)) ) .alpha(1); // update the data cluster.restart(); // start the clusterer } // when we throw the cell away invalidation.then(() => { cluster.stop(); // stop the cluster :) map.off('zoomend', zoomend); // unbind events featureGroup.remove(); // remove the displayed markers }); return md`~~~observable "Important" // this cell adds markers to cluster and cluster to map ~~~`; }33:T565,legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [...new Set (radii.map(radius => Number(radius.toFixed(2))))].sort((a, b) => a - b), // radii = grades.map(d => Math.round(Math.sqrt(d/Math.PI))), labels = radius_selector.match('Restaurants') ? ['Number of Restaurants'] : ['User Traffic '], categories = grades.map(function(d){ let area = d*d*Math.PI; area = radius_selector.match('Restaurants') ? Math.round(area/30) : Math.round(area*4); return area == 1 ? '1' :'~ ' + area; }); //console.log(grades); const seen = new Set(); const indices = [] categories.forEach((category, i) => { if (!seen.has(category)) { indices.push(i); seen.add(category); } }); for (var i of indices) { var grade = grades[i]; if (!grade || !categories[i]) { continue; } labels.push( ` ${categories[i]} `); } if (map.getZoom() >= 8) { div.innerHTML ='' + labels.join('') + '

'; } return div; }34:T5c8,theme_Flat = ` :scope { position: relative; display: inline-block; width: 240px; --thumb-size: 15px; --thumb-radius: calc(var(--thumb-size) / 2); padding: var(--thumb-radius) 0; color: #3b99fc; margin: 2px; vertical-align: middle; } :scope .range-track { box-sizing: border-box; position: relative; height: 7px; background-color: hsl(0, 0%, 80%); overflow: visible; border-radius: 4px; padding: 0 var(--thumb-radius); } :scope .range-track-zone { box-sizing: border-box; position: relative; } :scope .range-select { box-sizing: border-box; position: relative; left: var(--range-min); width: calc(var(--range-max) - var(--range-min)); cursor: ew-resize; background: currentColor; height: 7px; border: inherit; } /* Expands the hotspot area. */ :scope .range-select:before { content: ""; position: absolute; width: 100%; height: var(--thumb-size); left: 0; top: calc(2px - var(--thumb-radius)); } :scope .range-select:focus, :scope .thumb:focus { outline: none; } :scope .thumb { box-sizing: border-box; position: absolute; width: var(--thumb-size); height: var(--thumb-size); background: #fcfcfc; top: -4px; border-radius: 100%; border: 1px solid hsl(0,0%,55%); cursor: default; margin: 0; } :scope .thumb:active { box-shadow: inset 0 var(--thumb-size) #0002; } :scope .thumb-min { left: calc(-1px - var(--thumb-radius)); } :scope .thumb-max { right: calc(-1px - var(--thumb-radius)); } `35:[{"id":"60399f8220509109c3764b6b88ce3ba3c26af71dc0df483d1b41425454adb7d0be243b5917594a16d48208022ae2b1b5664bdeac3255186731dffa1d72e655f4","href":"https://static.observableusercontent.com/files/60399f8220509109c3764b6b88ce3ba3c26af71dc0df483d1b41425454adb7d0be243b5917594a16d48208022ae2b1b5664bdeac3255186731dffa1d72e655f4","name":"burger_salad_pizza_sushi_ice_isOpen.csv","type":"text/csv","lastModified":1648257746574.443,"size":1958154},{"id":"74ea61a64e87d411492a9b65e94b95c22c1118e5cfeb7c82b7c2cff8ca5ea9f2b15cf69886531adbd9b7d08fb34386c9c43b1542cc2c6606200bfb081e1ad151","href":"https://static.observableusercontent.com/files/74ea61a64e87d411492a9b65e94b95c22c1118e5cfeb7c82b7c2cff8ca5ea9f2b15cf69886531adbd9b7d08fb34386c9c43b1542cc2c6606200bfb081e1ad151","name":"image.png","type":"image/png","lastModified":1648257746574.443,"size":2506639},{"id":"dce1d7b6ce95afa99fff851b9504c64e205e9563246c21768d3248940ee8316b333fa234a3ee52dc499c97b3df3408b557b5556c81cb53bb8851fee27116b19c","href":"https://static.observableusercontent.com/files/dce1d7b6ce95afa99fff851b9504c64e205e9563246c21768d3248940ee8316b333fa234a3ee52dc499c97b3df3408b557b5556c81cb53bb8851fee27116b19c","name":"IMG_F19C28E2E535-1-1.jpeg","type":"image/jpeg","lastModified":1648257746574.443,"size":399865}] 2f:{"id":"4232943941eaa851","slug":"a4-what-we-learn-from-yelp","title":"A4 - What we learn from Yelp","thumbnail":"8b40cade5801c568156b31c972084aaf5027259320d1ae276ff3460d994acfbe","access_level":"public","create_time":"$D2022-03-26T01:22:26.574Z","update_time":"$D2022-03-26T01:22:26.574Z","view_time":null,"first_public_time":"$D2022-03-26T01:22:56.710Z","fork":{"id":"a6880f93d0be63ab","slug":"a4-yelp-dataset-fork-ui-update-and-tooltip-experimentation","title":"A4 - What we learn from Yelp","owner":{"id":"a0518cd4a93bd4f2","login":"205e184174312240","name":"Amrutavarsh Kinagi"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":1515,"publish_version":1515,"role":null,"authored":false,"authors":[{"type":"individual","id":"205e184174312240","login":"205e184174312240","name":"Amrutavarsh Kinagi","avatar_url":"https://avatars-next.observableusercontent.com/c236b7f0d2dc06594e0f3071128e7a9962367ba42205a398ddc5a14867d3e599","tier":null}],"members":[{"type":"individual","id":"205e184174312240","login":"205e184174312240","name":"Amrutavarsh Kinagi","avatar_url":"https://avatars-next.observableusercontent.com/c236b7f0d2dc06594e0f3071128e7a9962367ba42205a398ddc5a14867d3e599","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"A4 - What we learn from Yelp","cells":[{"id":0,"value":"# A4 - What we learn from Yelp\n## How do food type, rating location, and aggregation metric change the distribution of restaurants we see in certain cities in the USA?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":219,"value":"## Team: Yelp Dataset\n- Amrutavarsh Kinagi\n- Audrey Leong\n- Jenny Cha\n- Yamini Ananth\n\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":739,"value":"

${Inputs.bind(fd_grp_f, viewof fd_grp)}

\n establishments in\n

${Inputs.bind(city_f, viewof city)}

\n clustered by\n

${Inputs.bind(clustering_f, viewof radius_selector)}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":441,"value":"viewof review_range = rangeSlider({\n title: 'Restaurant Rating',\n min: 0.0,\n max: 5.0,\n // Default value. Note that values must be specified as array of length 2.\n value: [1, 4],\n // Custom slider CSS, replaces all styles. If you want to use one of the predefined\n // themes, remember to import it along with rangeSlider.\n theme: theme_Flat,\n precision:1,\n // Overrides the range color. Support for range colors is up to the theme.\n color: \"black\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"viewof map = createMap_new(L)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":523,"value":"

User Traffic is calculated using aggregate review counts associated with the node

\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1357,"value":"## Visualization Development","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1354,"value":"Using the Yelp Academic Dataset (made available by Yelp but limited in scope to a few cities/businesses), we were interested to see how the distribution of restaurants for different types of foods would differ. For example, would we see more burgers in cities, in the South, etc?\n\n### Ideation process\nAt first, we wanted to have two coordinated views showing restaurant distributions on the left and user demographics on the right.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1361,"value":"![image.png](${await FileAttachment(\"image.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1367,"value":"It was hard to mentally correlate these two views so it wasn’t as informative as we expected. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1373,"value":"We also thought about showing change in restaurant distribution over time:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1378,"value":"FileAttachment(\"IMG_F19C28E2E535-1-1.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1381,"value":"However, we realized that this wouldn’t work as it wouldn’t actually show how restaurant distribution changed; rather, it would be a map of which restaurants were added to Yelp first. \n\nThus, we went with a single map with user-selected parameters. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1392,"value":"### Data Processing & Initial Steps\n\nAudrey and Amrut processed and cleaned the Yelp dataset by selecting all currently open businesses according to the various available food categories. \n\nZooming out on the map gave us many small dots which overlapped heavily in high density areas, so we wanted to add clustering. At first, we tried doing clustering using pure d3, but we realized that using Leaflet.js would make the map markers, clustering, and tooltips more straightforward. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1403,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1408,"value":"### Where We'd Add On\nIf we had one more week, we would have combined the user traffic and restaurant views into a single view by making the tooltip more informative. One idea is adding graphs within the tooltip to represent the number of reviews and average ratings so users can correlate user traffic to the corresponding restaurant without switching between views and searching for the same specific location each time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1424,"value":"### Helpful Resources\n\nhttps://www.yelp.com/dataset\nhttps://observablehq.com/@mootari/range-slider@1312\nhttps://observablehq.com/@stardisblue/noag-utils\nhttps://observablehq.com/@bartok32/diy-inputs\nhttp://bl.ocks.org/oikonang/6bce54dd9dc0eb702b66fcb5d62b76a9\nhttps://gis.stackexchange.com/questions/341979/leaflet-make-legend-with-different-circle-sizes\nhttps://stackoverflow.com/questions/58917855/create-legend-with-different-circle-sizes-in-leaflet/58918645#58918645\nhttps://leafletjs.com/SlavaUkraini/reference.html\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1413,"value":"---------------------------------------------------------------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":519,"value":"

Code - below

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":295,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1433,"value":"function filterByBound(){\n let features = [];\n map.eachLayer( function(layer) {\n if(layer instanceof L.CircleMarker) {\n if(map.getBounds().contains(layer.getLatLng())) {\n features.push(layer);\n }\n }\n });\n return features;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":491,"value":"

Node settings

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":300,"value":"createNode = (point, review_count, stars, name) => {\n const area = radius_selector.match('Restaurants') ? 30 : review_count*0.25;\n const { x, y } = point;\n if (stars){\n return { x, y, r: Math.sqrt(area / Math.PI), a: area, review_count, stars, name}\n }\n return { x, y, r: Math.sqrt(area / Math.PI), a: area};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"createMarker = (latlng, point) =>\n L.circleMarker(latlng, {\n radius: point.r,\n fillColor: color[radius_selector],\n color: \"black\",\n weight: 1,\n fillOpacity: 0.5\n }\n ).bindTooltip().setTooltipContent(tooltip_text(point));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1212,"value":"function tooltip_text(point){\n if (radius_selector.match('Restaurants')){\n if (point.a == 30){\n return String(point.name +\" - \"+ point.stars + \" stars (\"+ point.review_count + \")\")\n }\n else{\n return String(point.a/30 +\" restaurant cluster\")\n }\n }\n else{\n return String(point.a*4 +\" reviewers\")\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":880,"value":"

Variables

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":776,"value":"viewof fd_grp = new Inputs.input(\"Burger\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":782,"value":"viewof city = new Inputs.input(\"Philadelphia\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"viewof radius_selector = new Inputs.input(\"Restaurants\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":891,"value":"[fd_grp, city, radius_selector]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"

Map Settings

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":303,"value":"map_options = {\n city;\n console.log(city_center[0] +',' + city_center[1]);\n console.log(all_city_nodes.length);\n map.setView(city_center, map.getZoom(), { animation: true });\n map.setZoom(10);\n\n map.options.minZoom = 4.8;\n map.options.maxZoom = 16;\n map.options.zoomSnap = 0.15;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"

Data Manipulation

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":986,"value":"all_city_nodes = all_food_data.filter(function(d){\n return d.city.match(city);\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":989,"value":"city_center = [d3.mean(all_city_nodes.map(d=>d.latitude)), d3.mean(all_city_nodes.map(d=>d.longitude))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":468,"value":"fd_grp_review_filtered = all_food_data.filter(function (d) {\n \n return d.categories.match(fd_grp) && d.stars >= review_range[0] && d.stars <= review_range[1];\n}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1115,"value":"

Legend

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1118,"value":"mutable max_area = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1336,"value":"max_radius = Math.round(Math.sqrt(max_area/Math.PI));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1120,"value":"function getRadius(r) {\n return sizeScale(r);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1122,"value":"sizeScale = {\n let scaling = radius_selector['Restaurants'] ? 1 : 1\n return d3.scaleSqrt()\n .domain([0, max_radius])\n .range([0, max_radius*scaling])};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1123,"value":"legend = L.control({position:'bottomright'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1439,"value":"mutable radii = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1311,"value":"function generateGrades(min, max){\n let grades = [];\n if(min > 0) grades.push(min);\n const multiplers = [0.25,0.5,0.75];\n for(const m of multiplers){\n let val = m*max;\n if(val > min && !grades.includes(val)){\n grades.push(val);\n }\n }\n return grades;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1125,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1127,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"

Imports

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":312,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1040,"value":"import { createURL, createMap } from \"@stardisblue/noag-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"import {rangeSlider} from '@mootari/range-slider@1312'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":622,"value":"import { select } from \"@bartok32/diy-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"mc = require('https://cdn.jsdelivr.net/gh/Andrew-Reid/d3-marker-cluster@0.0.0/d3-cluster.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1284,"value":"all_food_data = FileAttachment(\"burger_salad_pizza_sushi_ice_isOpen.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"cities = ({\"Boise\": [43.615021, -116.202316], \"Edmonton\": [53.544388, -113.490929], \"Indianapolis\": [39.768402, -86.158066], \"Nashville\":[36.162663, -86.781601], \"New Orleans\":[29.951065, -90.071533], \"Philadelphia\": [39.952583, -75.165222], \"Reno\": [39.530895, -119.814972], \"Santa Barbara\":[34.420830, -119.698189], \"Saint Louis\":[38.627003, -90.199402], \"Tampa\":[27.964157, -82.452606], \"Tucson\":[32.253460, -110.911789]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":590,"value":"

Helpers

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":649,"value":"city_f = select({\n title: \"\",\n options: Object.keys(cities),\n selected: \"Philadelphia\",\n selectStyle: {\n background: \"#CFCFCF\",\n \"font-size\": \"20px\",\n height: \"40px\"\n },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":625,"value":"fd_grp_f = select({\n title: \"\",\n options: {\"🍔 Burger\":\"Burger\",\n \"🥗 Salad\":\"Salad\",\n \"🍕 Pizza\":\"Pizza\",\n \"🍣 Sushi\":\"Sushi\",\n \"🍦 Ice Cream\":\"Ice Cream\"},\n selectStyle: {\n background: \"#FAFAB8\",\n \"font-size\": \"20px\",\n height: \"40px\"\n },\n // onchange: ({ select, value }) =>\n // d3\n // .select(select)\n // .style(\"background\", fd_color[value])\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":843,"value":"clustering_f = select({\n title: \"\",\n options: {\"Restaurants\": \"Restaurants\",\n \"User Traffic\": \"Reviews\"},\n selectStyle: {\n background: \"blue\",\n \"font-size\": \"20px\",\n height: \"40px\"\n },\n onchange: ({ select, value }) =>\n d3\n .select(select)\n .style(\"background\", color_category[value])\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1457,"value":"createMap_new = function(L, view = [46.99758, 2.81834], zoom = 5) {\n const container = html`

`;\n const map = L.map(container).setView(view, zoom);\n L.tileLayer(\n \"https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png\",\n {\n attribution:\n \"| © OpenStreetMap contributors\"\n }\n ).addTo(map);\n\n container.value = map;\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":858,"value":"

Theming

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":458,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":584,"value":"color = ({\"Restaurants\": \"blue\", \"Reviews\": \"red\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":853,"value":"color_category = ({\"Restaurants\": \"#A3B1FE\", \"Reviews\": \"#FF9696\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":643,"value":"fd_color = ({\"Burger\":\"#FAFAB8\",\"Salad\": \"#C3F1DF\", \"Pizza\": \"#F7E0D5\", \"Sushi\": \"#F7E0D5\", \"Ice Cream\": \"#F7E0D5\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"