2b:null 2c:["$","title",null,{"children":"NYC Restaurant Health Inspections 2016-2020 | Jacqueline Cannon Allen | Observable"}] 31:T561,md`_"This data includes the name and location of food service establishments and the violations that were found at the time of their last inspection. Although violation details are collected on inspection reports (i.e., the actual food item, quantity and temperature of food found out of temperature control) as well as corrective actions for critical violations, this data set is limited to the violation number and the corresponding general violation description_." -- [health.data.ny.gov - Food Service Establishment Last Inspection](https://health.data.ny.gov/Health/Food-Service-Establishment-Last-Inspection/cnih-y5dw) A couple notes for those not familar with NYC Health Inspection Ratings. Below are the grades a restaurant can get after a full-inspection. In addition, each letter has an associated color which our visualization stays true to. In order of decreasing hygiene: Letter Grade | Score | Color -------------|-------| ----- A | 0 - 13| Blue B | 14 - 27 | Green C | 28+ | Orange Other letter grade meanings: Letter Grade | Meaning | Color -------------|------- | ----- P | Grade pending on a re-opening following an initial inspection that resulted in a closure | Purple Z | Grade pending | Grey _ [ref](https://health.data.ny.gov/Health/Food-Service-Establishment-Last-Inspection/cnih-y5dw)`32:T15d2,map = { var key_selected = false const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) //.attr("viewBox", [0, 0, width-200, height]) .style("width", width) // .style("width", width-200) .style("height", height) .style("background-color","#fff") .style("cursor", "move") // change to 'grab'? .style("font", "10px sans-serif") const g = svg.append("g"); // ## COLOR MAP ## // WATER g.selectAll(".tile") .data(tiles) .enter().append("path") .style("fill", "steelblue") .style("fill-opacity", .35) .attr("d", (d) => { return path(d.data.water) }) .style("stroke-width", 1) .style("stroke-opacity", .65); // EARTH g.selectAll(".tile") .data(tiles) .enter().append("path") .style("fill", "#fffdf9") .style("fill-opacity", 1) .attr("d", (d) => { return path(d.data.earth) }) // ROADS g.selectAll(".tile") .data(tiles) .enter().append("path") .style("fill", "none") .attr("d", (d) => { return path(d.data.roads) }) .style("stroke-width", .1) .style("stroke-opacity", .5) .style("stroke", "000") // ## POINTS ## // Plot Restuaurants const circles = g.selectAll("circle") .data(data) .attr("class", "circles") .join("circle") .attr("cx", d => projection([d.longitude,d.latitude])[0]) // x-coordinate .attr("cy", d => projection([d.longitude,d.latitude])[1]) // x-coordinate .attr("class", function(d,i) { return "camis " + d.camis; }) .attr("r", d => 1+ d.score/5) .style("fill", (d) => {return gradeColors(d["grade"])}) .style("fill-opacity", .35) .style("stroke", (d) => {return gradeColors(d["grade"])}) .style("stroke-width", .25) .on("mouseover", tooltipMouseOver) .on("mouseout", tooltipMouseOut) .on("click",function(d){click(d)}); // ## HIGHLIGHT ## // Turn Red circles.on("mouseover.highlight", function(d) { console.log('d:') console.log(d) console.log('d3 selection: ') console.log(d3.select(this)) //.getAttribute("fill-opacity") d3.select(this) .raise() // bring to front .style("fill", "red") .style("fill-opacity", 1) .style("stroke", "red") .style("stroke-width", .25) .style("cursor", "pointer"); }); // Return to Normal circles.on("mouseout.highlight", function(d) { d3.select(this) .style("fill", (d) => {return gradeColors(d["grade"])}) .style("fill-opacity", .45) .style("stroke", (d) => {return gradeColors(d["grade"])}) .style("stroke-width", .25); }); // ## VISIBILITY ## // make all datapoints visible function restoreAllDots(){ circles.transition() .style("fill-opacity", .45) .style("stroke-width", .25) .style("stroke-opacity", 1); } // ## LEGEND HEADINGS ## const legendHeader = svg.append("g") legendHeader.append("text") .attr("dx", 15) .attr("dy", 25) .text("Hover over Legend to Explore!") .style("font-weight", "bold") .style("font-size", "18") const selectMSG = svg.append("g") selectMSG.append("text") .attr("dx", 13) .attr("dy", 48) .text(" - Click a legend key to select a grade") .style("font-size", "14") const dblclickMSG = svg.append("g") dblclickMSG.append("text") .attr("dx", 13) .attr("dy", 70) .text(" - DOUBLE-click to deselect") .style("font-size", "14") // ## LEGEND BOX ## const legendBox = svg.append("g") .attr("class", "legend") .selectAll(".legend-g") .data(d3.set(data.map(d => d["grade"])).values()) // pull data for legend .enter().append("g") .attr("transform",(d,i) => `translate(15, ${i*25 + 80})`) // position legend keys on canvas // ADD and COLOR SQUARES legendBox.append("rect") .attr("width", 20) .attr("height", 20) .style("fill", gradeColors) // ## LEGEND HOVER ## .on("mouseenter", function(e) { // 'e' = letter svg.style("cursor", "pointer") if(key_selected !== true) { // switch sub-views circles.filter(d => (d.grade !== e)).transition() .style("fill-opacity", 0) .style("stroke-opacity", 0) } }) .on("mouseleave", function(e) { if(key_selected !== true) { // return to full view restoreAllDots() } svg.style("cursor", "move") }) // ## LEGEND CLICK ## .on("mousedown", function(e) { key_selected = true circles.filter(d => (d.grade !== e)) // hide .transition() .style("fill-opacity", 0) .style("stroke-opacity", 0) circles.filter(d => (d.grade == e)) // show .transition() .style("fill-opacity", .45) .style("stroke-width", .25) .style("stroke-opacity", 1) }) // Add legend text legendBox.append("text") .attr("dx", 25) .attr("dy", 15) .text(d => d) .style("font-weight", "bold") .style("font-size", "15") // ## ZOOM ## var zoom = d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 20]) .on("zoom", function() { g.attr("transform", d3.event.transform) g.selectAll("circle").attr("r", d => (1+d.score/5)/d3.event.transform.k) }); svg.call(zoom) .on("dblclick.zoom", function() { // override zoom on double-click (instead, restore opacities) key_selected = false restoreAllDots() }); return svg.node(); }33:T5e1,md `Given an inherently spatial dataset, we knew we wanted our visualization to be a map. Working through our user-flow sketches, we also wanted to give the user the ability to explore the map by zooming; Color-encoding points by letter-grade and scaling by score ensured that the worse grades stood out. We had some difficulty configuring semantic zoom on a map with geo-mercator projected points so to conserve time we elected for a geometrically zoomable map. Coding the points to change size proportional to zoom-level created a pseudo-semantic effect. Some users reported wanting zooming to expose major street labels for orientation. After initially exploring the dataset, we decided to include filters for ‘Year’ and ‘Cuisine,’ allowing user exploration of temporal trends by restaurant type. We also decided to make the legend another means of filtering, exposing the distribution of letter grades across boroughs. Finally, we wanted users to discover inspection details, leading to the creation of an informational ‘on-click’ tooltip. We initially included scores and restaurant names but, after user feedback, added specific violation information. Because adding that to the on-click box became too busy, we added a ‘hoverable’ tooltip for the name and score and used the on-click box to expose the top violations - critical ones in red. To make clicking functionality intuitive, when the user hovers over a specific dot it becomes red and the cursor changes to a pointer. `34:T6d2,function click(data){ //On click: get all violations & add to display on RHS //Add drop down menu for each inspection? var d= yearly_data[year]//use the data from yearly data instead var violations = [] var addr='' for(var i =0;i'+d[i]["violation_code"]+":"+d[i]["violation_description"]) }else{ violations.push(""+d[i]["violation_code"]+":"+d[i]["violation_description"]) } } } //if display doesn't already have an item displayed, make it visible //set display to list of violations & descriptions let el = d3.selectAll(".clictip"); el.each(function() { el.remove(); }); el = d3.select("body"); el .transition() .duration(100) .style("opacity", 0.9) let div = el .append("g") .append("div") .attr("class", "clictip") .style("opacity", 1); var html_str="" if(data["grade"] == "A" || data["grade"] == "B" ||data["grade"] == "C"){ html_str = '

' } html_str=html_str.concat(data['dba']+ "
") html_str=html_str.concat('

'+addr+'

') html_str=html_str.concat('

'+violations[i]+"") } html_str=html_str.concat("

") div.html(html_str) .style("opacity", 0.9) }35:T46e,html``36:[{"id":"f78da2ab9edb19910500fac6cb20788d1f275d29f27ed43d1d93db6ab98de9e42f954f54d477d8123b8d3685f2a5b0721b6daf46c8f196babcdf21a3ef3b08dd","href":"https://static.observableusercontent.com/files/f78da2ab9edb19910500fac6cb20788d1f275d29f27ed43d1d93db6ab98de9e42f954f54d477d8123b8d3685f2a5b0721b6daf46c8f196babcdf21a3ef3b08dd","name":"userflow1.png","type":"image/png","lastModified":1585500888310.159,"size":95921},{"id":"6631e87704b7ae6a578ad59e1f40541300b061e5bf31a7e747408574e3a92bb099d86b514d668a39dfb508507daad9a0cd4321d3143c7d8f7e77125c7c576d2f","href":"https://static.observableusercontent.com/files/6631e87704b7ae6a578ad59e1f40541300b061e5bf31a7e747408574e3a92bb099d86b514d668a39dfb508507daad9a0cd4321d3143c7d8f7e77125c7c576d2f","name":"userflow2.png","type":"image/png","lastModified":1585500888310.159,"size":79261},{"id":"e2b2ca856d3c72ac93fe71f47067d751e58664d46515df04c313ba6cadc66b7af33b6b75f7c4df80342d2f89dc1c179e20290a886d3a9aef9675209fe34df55e","href":"https://static.observableusercontent.com/files/e2b2ca856d3c72ac93fe71f47067d751e58664d46515df04c313ba6cadc66b7af33b6b75f7c4df80342d2f89dc1c179e20290a886d3a9aef9675209fe34df55e","name":"userflow3@1.png","type":"image/png","lastModified":1585500888310.159,"size":91877}] 2f:{"id":"ec2d313284808dfb","slug":"food-inspections-in-ny-zoomable-map","title":"NYC Restaurant Health Inspections 2016-2020","thumbnail":"b592108314d5fcff5e5c5861c8446ffcb1bb5a76311e39cdd221f44fe015350d","access_level":"public","create_time":"$D2020-03-01T18:09:00.027Z","update_time":"$D2020-03-31T01:04:20.310Z","view_time":null,"first_public_time":"$D2020-03-01T20:37:21.414Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c34fadd0b81defff","login":"ja3143","name":"Jacqueline Cannon Allen","avatar_url":"https://avatars-next.observableusercontent.com/2173641f38a7c7c191d28ad0c6e706518f680203212be14af71396e74f3b63d4","tier":"starter_2024"},"version":836,"publish_version":836,"role":null,"authored":false,"authors":[{"type":"individual","id":"85dde5f87cdbdc25","login":"ja3143","name":"Jacqueline Cannon Allen","avatar_url":"https://avatars-next.observableusercontent.com/2173641f38a7c7c191d28ad0c6e706518f680203212be14af71396e74f3b63d4","tier":null}],"members":[{"type":"individual","id":"85dde5f87cdbdc25","login":"ja3143","name":"Jacqueline Cannon Allen","avatar_url":"https://avatars-next.observableusercontent.com/2173641f38a7c7c191d28ad0c6e706518f680203212be14af71396e74f3b63d4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":29,"collection":null,"type":"notebook","body":{"title":"NYC Restaurant Health Inspections 2016-2020","cells":[{"id":50,"value":"md`# NYC Restaurant Health Inspections 2016-2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`Visualization by Catherine Chu, Alexander Kutner, and Jacqueline Allen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"md`## What is this Dataset?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"md`## The Mapped Results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"md`_Note: you may zoom in/out of the map for a closer look at the points._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"viewof cuisine = {\n const select = cuisine_html(yearly_data[year])\n Promises.delay(2000).then(() => {\n select.selectedIndex = 0;\n select.dispatchEvent(new CustomEvent(\"input\"));\n });\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"viewof year = {\n const select = html``;\n Promises.delay(2000).then(() => {\n select.selectedIndex = 0;\n select.dispatchEvent(new CustomEvent(\"input\"));\n });\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"gradeColors = d3.scaleOrdinal()\n .range([\"#0058A9\",\"#26A146\",\"F68B1F\",\"#D3D3D3\", \"#000000\", \"#9E00FF\", \"#D3D3D3\"])\n .domain([\"A\",\"B\",\"C\", \"Z\", \"N\", \"P\", \"undefined\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"md`# The Final Report: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"md`## Background and Features`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"md`## Alternative Designs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"md`We attempted another design where there was only one map with every restaurant that had received a letter-grade, 2016-2020. Upon clicking the dot (colored by the most-recent grade), a display of past grades by year in a box would appear. Each year would be expandable to show violations. We abandoned the idea because it hindered comparisons of letter distributions over time.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"md`## Areas for Improvement and Exploration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"md` With more time, we would have explored semantic zoom further. We also would have explored Voronoi selection, as some users noted the difficulty of selecting the smallest points. In lieu of those transformations, we chose to focus on making the filters and geometric zoom as intuitive and smooth as possible. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"md`## Division of Work`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"md `We divided up the work according to different functionality that we hoped to include. Jacquie worked on the map, zoom, and legend, Alex on the year/cuisine filters and on-click function, and Catherine on dot mapping and the on-hover tool-tip. \n\nThis iterative process allowed us to experiment with different functionalities and divide the group’s work evenly.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"md`## User Flow Designs:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"html`

\n ${await FileAttachment(\"userflow1.png\").image()}\n

Map includes colored restaurant data points and 'Year' and 'Cuisine' filter

\n\n

\n ${await FileAttachment(\"userflow3@1.png\").image()}\n

Map demonstrates zoom functionality and interactive legend' filter

\n\n

\n ${await FileAttachment(\"userflow2.png\").image()}\n

Map demonstrates \"on-click\" violation functionality' filter

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"md`## Resources:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"md `\n1. https://www.visualcinnamon.com/2015/07/voronoi.html \n2. https://observablehq.com/@uwdata/introduction-to-d3\n3. https://observablehq.com/@sjengle/interactivity\n4. https://observablehq.com/@rdbcasillas/labels-and-legends\n5. https://github.com/d3/d3-geo\n6. https://observablehq.com/@mikelotis/edmonton-oscam-bubble-chart-with-geometric-and-semantic-zo`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"md`# Code:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"md`## Tooltip on Hover`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"function tooltipMouseOver(d, i) {\n let el = d3.select(\"body\");\n \n el\n .transition()\n .duration(100)\n .style(\"opacity\", 0.9)\n \n let div = el\n .append(\"g\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"opacity\", 0);\n\n div\n .html(`\n Restaurant Name: ${d.dba}
\n Grade: ${(d.grade)}
\n Score: ${d.score} `)\n .style(\"opacity\", 0.9)\n .style(\"left\", (d3.event.pageX + 28) + \"px\")\n .style(\"top\", (d3.event.pageY - 28) + \"px\");\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"function tooltipMouseOut(d, i) {\n let el = d3.selectAll(\".tooltip\");\n \n el.each(function() {\n\t\tel.remove();\n\t}); \n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"md `## Map - Scale/Layout/Projection` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"projection = d3.geoMercator() \n .center([-73.8375, 40.7324])\n .scale(350000 / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"tiles = Promise.all(tile().map(async d => {\n d.data = await d3.json(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=qrH6iBWjQRyZAVKyDXpR7Q`); // Sign up for an API key: https://www.nextzen.org\n return d;\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"md`# Data - 2016-2020 DOHMH NY`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"yr_2016= d3.json('https://data.cityofnewyork.us/resource/43nn-pn8j.json?$query=SELECT%20*%20where%20(date_extract_y(grade_date))=2016%20LIMIT%20400000')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"yr_2017= d3.json('https://data.cityofnewyork.us/resource/43nn-pn8j.json?$query=SELECT%20*%20where%20(date_extract_y(grade_date))=2017%20LIMIT%20400000')\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"yr_2018= d3.json('https://data.cityofnewyork.us/resource/43nn-pn8j.json?$query=SELECT%20*%20where%20(date_extract_y(grade_date))=2018%20LIMIT%20400000')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"yr_2019= d3.json('https://data.cityofnewyork.us/resource/43nn-pn8j.json?$query=SELECT%20*%20where%20(date_extract_y(grade_date))=2019%20LIMIT%20400000')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"yr_2020= d3.json('https://data.cityofnewyork.us/resource/43nn-pn8j.json?$query=SELECT%20*%20where%20(date_extract_y(grade_date))=2020%20LIMIT%20400000')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"yearly_data = ({\n \"2016\" : yr_2016,\n \"2017\":yr_2017,\n \"2018\":yr_2018,\n \"2019\":yr_2019,\n \"2020\":yr_2020});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"d3 = require(\"d3@5\",\"d3-tile@0.0\")\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"//Tranform data to have 1 entry per restaurant\nfunction get_cuisines(ds){\n var out_obj = {}\n var check = \"\"\n var tot = ds.length\n for(var i =0; i< ds.length;i++){\n var cd = ds[i]['cuisine_description']\n if (cd in out_obj){\n out_obj[cd] = out_obj[cd] + 1\n }else{\n out_obj[cd] = 1\n }\n }\n var ls = []\n for( var type in out_obj){\n ls.push([type,out_obj[type]])\n }\n ls.sort(function(a,b) {\n return a[1]-b[1];\n }).reverse();\n return ls\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"function cuisine_html(ds){\n var cuisine_ls = get_cuisines(ds)\n const x= document.createElement(\"select\")\n var all = document.createElement(\"option\")\n for(var i=0; i