2b:null 2c:["$","title",null,{"children":"Health Inspections Part ll | Jacqueline Cannon Allen | Observable"}] 31:Td90,viewof m3 = { var container = html`

` var content = html` ${container}

${grade_colors}

` yield content var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/light-v9', // stylesheet location center: [-74.0060, 40.7128], // nyc [ -73.79, 40.744693] zoom: 10, //pitch: 15, maxZoom: 16.5, // how close you can zoom in minZoom: 9, // how far out you can zoom out }); var layerList = document.getElementById('legend'); var checkboxes = layerList.getElementsByTagName('input'); function updateFilter(layer) { var layerId = layer.target.id; var grade_filter = set_filter() map.setFilter('restaurants', grade_filter) } for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].onclick = updateFilter; } var nav = new mapboxgl.NavigationControl(); map.addControl(nav); map.addControl(new mapboxgl.FullscreenControl()); var data_filter = set_filter() map.on('load', function(layer) { recolor(map) map.addSource('inspection_results', { type: 'geojson', //'cluster': true, //clusterMaxZoom: 14, // Max zoom to cluster points on16.5 data: restaurant_data, // initial year }); map.addLayer({ 'id': 'restaurants', 'source': 'inspection_results', 'type': 'circle', 'filter': data_filter, 'paint': { 'circle-color':[ 'match', ['get', 'g'], 'A', '#0058A9','B', '#26A146','C', '#F68B1F','P', '#9E00FF','#D3D3D3'], 'circle-opacity': 0.3, 'circle-radius': ["+", 1, ["/", ['to-number',['get', 's']], 5]], } }) var restaurant_popup; map.on('mouseenter', 'restaurants', function(e) { map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var restaurants_properties = e.features[0].properties; restaurant_popup = new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(`

Restaurant:

${restaurants_properties.d}

`) .addTo(map); }); map.on('mouseleave', 'restaurants', function() { map.getCanvas().style.cursor = ''; restaurant_popup.remove(); }); // FILTERS document.getElementById('yr').addEventListener('input', function(event) { change_year(map, event, restaurant_popup) }); map.on('click','restaurants', function(e) { var coordinates = e.features[0].geometry.coordinates.slice(); var restaurants_properties = e.features[0].properties; console.log(restaurants_properties) }); }); invalidation.then(() => map.remove()) }32:T41f,md` 1. Clusters: - [Mapbox Clustering (geosjon)](https://docs.mapbox.com/mapbox-gl-js/example/cluster/) - [3D buildings on zoom](https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/) - Map Customization: - [Coloring Map](https://docs.mapbox.com/mapbox-gl-js/example/color-switcher/) - Data Processing: - [Converting CSV files to geojson](https://github.com/mapbox/csv2geojson) - [Picking relevent geojson properties](https://github.com/node-geojson/geojson-pick) - [Minify-ing geojson files](https://blog.mastermaps.com/2012/11/how-to-minify-geojson-files.html) - [Splitting up large geojson files](https://www.npmjs.com/package/geojsplit) - Storytelling: - [Slideshow](https://docs.mapbox.com/mapbox-gl-js/example/playback-locations/) - [Animate (ie spin) around point](https://docs.mapbox.com/mapbox-gl-js/example/animate-camera-around-point/) - [Animate symbol along a line](https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-route/) - [Jump to points](https://docs.mapbox.com/mapbox-gl-js/example/jump-to/) `33:[{"id":"a67e5df974c8f6645a68dec4132c235fc15ecb76aa0767db69824e5e451a804d710733f88f05a46aa7d5f7141903f1381d841e90d648c85519a83b97251d361a","href":"https://static.observableusercontent.com/files/a67e5df974c8f6645a68dec4132c235fc15ecb76aa0767db69824e5e451a804d710733f88f05a46aa7d5f7141903f1381d841e90d648c85519a83b97251d361a","name":"style.json","type":"application/json","lastModified":1589654308335.569,"size":156541}] 2f:{"id":"23a0ede75673adec","slug":"health-inspections-part-ll","title":"Health Inspections Part ll","thumbnail":"919968ad5ee8ee201b8095a4d77517cf97283b59002183f4ac0e39905007d1ed","access_level":"public","create_time":"$D2020-05-16T16:47:19.800Z","update_time":"$D2020-05-18T20:40:49.800Z","view_time":null,"first_public_time":"$D2020-05-16T17:05:48.187Z","fork":false,"stars":0,"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":939,"publish_version":939,"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":4,"collection":null,"type":"notebook","body":{"title":"Health Inspections Part ll","cells":[{"id":0,"value":"md`# Health Inspections Part ll `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`_An alternative approach to visualizing NYC Health Inspection Results ([original version here](https://observablehq.com/@ja3143/food-inspections-in-ny-zoomable-map)) using Mapbox GL JS for semantic zoom and clustering_ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`\n\nLetter Grade | Score | Color\n-------------|-------| -----\nA | 0 - 13| Blue\nB | 14 - 27 | Green\nC | 28+ | Orange\n\n\nOther letter grade meanings:\n\nLetter Grade | Meaning | Color\n-------------|------- | -----\nP | Grade pending on a re-opening following an initial inspection that resulted in a closure | Purple\nZ | Grade pending | Grey\n\n---\n## __Source__: [DOHMH: NYC Restaurant Inspection Results](https://data.cityofnewyork.us/Health/DOHMH-New-York-City-Restaurant-Inspection-Results/43nn-pn8j)\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"viewof year = {\n const select = html``;\n\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`# -- Code -- `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"md` ## Voroni Selection`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`## Year Change `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"function change_year(map, event, popups){\n var year=event.target.value\n var new_data_endpoint = get_data(year)\n map.getSource('inspection_results').setData(new_data_endpoint)\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"md`## Map Color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"recolor = function(map){\n\n map.setPaintProperty('water', 'fill-color', '#C9D7E6') // #C6D7E8 or #ccd6e3 or #C9D7E6\n map.setPaintProperty('background', 'background-color', '#fefefe') // #fefefe or #ccd6e3\n \n map.addLayer({\n 'id': 'water-line-layer',\n 'source': 'composite',\n 'source-layer': 'water',\n 'type': 'line',\n 'paint': {\n 'line-color': 'darkgray',\n 'line-width': .65\n }\n }) \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"md` ## Filter `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"function attach_onClick_event(){\n var checkboxes = document.getElementsByClassName('grade_checkbox');\n \n for ( var x in checkboxes ) {\n checkboxes[x].onclick = set_filter(); \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"function set_filter(){\n var filtered = grade_checkbox_change()\n var get_grade = ['get', 'g']\n var grades = ['A', 'B', 'C', 'P','Z']\n \n var map_filter = ['all',]\n \n for(var i = 0; i < grades.length; i++){\n if(filtered[grades[i]] == '!='){\n var filter_i = [filtered[grades[i]], get_grade, grades[i]]\n map_filter.push(filter_i)\n }\n }\n return map_filter\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"function grade_checkbox_change(){\n var status = new Object();\n status['A'] = check_to_filter(document.getElementById('A').checked)\n status['B'] = check_to_filter(document.getElementById('B').checked)\n status['C'] = check_to_filter(document.getElementById('C').checked)\n status['P'] = check_to_filter(document.getElementById('P').checked)\n status['Z'] = check_to_filter(document.getElementById('Z').checked)\n \n return status\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"function check_to_filter(checked_TF){\n if(checked_TF) { return '==' }\n else{ return '!=' }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"md`## Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"grade_colors = html`\n

\n\n

Grade Colors

\n\n

\n \n A \n

\n\n

\n \n B\n

\n\n

\n \n C\n

\n\n

\n \n P \n

\n\n

\n \n Z \n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`## Menu `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"md` # Data `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"function get_data(year){\n var data = endpoint_base+year+filetype\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"restaurant_data = d3.json(get_data(2016))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"endpoint_base = 'https://raw.githubusercontent.com/Jacqueline-Allen/health_inspections/master/'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"filetype = '_clean.min.geojson'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md` \n\nPrevious endpoint: https://raw.githubusercontent.com/Jacqueline-Allen/health_inspections/master/2016.geojson\n\nSteps:\n1. Pull data from endpoint \n - $query=SELECT%20*%20where%20(date_extract_y(grade_date))=YYYY%20LIMIT%20400000\"\n- Convert csv files to geojson\n- File down geojson files by pulling specifcally properties:\n - _geojson-pick dba cuisine_ _ description grade score violation_code violation_description critical_flag < YYYY.geojson > YYYY_clean.geojson\n- Minify files to reduce white space and key names\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md` # Code Setup `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0');\n \tmapboxgl.accessToken = access_token;\n return mapboxgl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"access_token = 'pk.eyJ1IjoiamFjYWxsZW4iLCJhIjoiY2s3Y2xlc3l0MGc2bDNrcHVwdTQ5ODJyZSJ9.rNoxR-HmGCM6gS0ciMwdQQ'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"turf = require(\"https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md` # Sources`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"