2d:null 2e:["$","title",null,{"children":"Visualize Airbnb dataset with Leaflet | Shaoliang Nie | Observable"}] 33:T453,// Visualize the locations of all airbnb { const container = html`

`; yield container; const map = L.map(container).setView([center[1], center[0]], 13); L.tileLayer("https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png", { attribution: "Wikimedia maps beta | © OpenStreetMap contributors" }).addTo(map); let minSize = Infinity, maxSize = -Infinity, minPrice = Infinity, maxPrice = -Infinity; for (let key in neighbor) { const numHomes = neighbor[key].numHomes; const avgPrice = neighbor[key].avgPrice; if (numHomes == 0) continue; if (minSize > numHomes) minSize = numHomes; if (maxSize < numHomes) maxSize = numHomes; if (minPrice > avgPrice) minPrice = avgPrice; if (maxPrice < avgPrice) maxPrice = avgPrice; } const sizeScale = d3 .scaleLinear() .range([100, 1000]) .domain([minSize, maxSize]); const colorScale = d3 .scaleSequential(colorDict[scheme]) .domain([minPrice, maxPrice]); for (let key in neighbor) { let nei = neighbor[key]; if (nei.numHomes == 0) continue; let circle = L.circle([nei.avgLatitude, nei.avgLongitude], { color: colorScale(nei.avgPrice), fillColor: 'white', fillOpacity: 0.5, weight: 5, radius: sizeScale(nei.numHomes) }).addTo(map); circle.bindPopup( `neighbourhood: ${key}; average price: ${floatFormatter( nei.avgPrice )}; number of homes: ${nei.numHomes}` ); } }35:[{"id":"c411cd330fa2b7199324cad8e31a3fbecd6f1d64a8921e704474e05c6fc64ced97d70ce49b3b7885ab7fd225efe4a968b53b1edd67c955f93e96f4ca9b24f3fc","href":"https://static.observableusercontent.com/files/c411cd330fa2b7199324cad8e31a3fbecd6f1d64a8921e704474e05c6fc64ced97d70ce49b3b7885ab7fd225efe4a968b53b1edd67c955f93e96f4ca9b24f3fc","name":"AB_NYC_2019.csv","type":"text/csv","lastModified":1579588741143.562,"size":7077973}] 31:{"id":"bbcd83167fd4e20a","slug":"visualize-airbnb-dataset-with-leaflet","title":"Visualize Airbnb dataset with Leaflet","thumbnail":"96e35343756747749701386b606f3c68211a4eced738509b58d5d71f3b9b01a6","access_level":"public","create_time":"$D2020-01-21T06:39:01.143Z","update_time":"$D2020-01-21T07:46:28.824Z","view_time":null,"first_public_time":"$D2020-01-21T07:19:56.867Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6511ab6bd5e946ae","login":"snie2012","name":"Shaoliang Nie","avatar_url":"https://avatars-next.observableusercontent.com/df49ad249a7fc65c74a4474eb6eea0daa284b0883fa250af7b34fcb6bed1ba05","tier":"starter_2024"},"version":630,"publish_version":630,"role":null,"authored":false,"authors":[{"type":"individual","id":"b253a2892f9e5b9c","login":"snie2012","name":"Shaoliang Nie","avatar_url":"https://avatars-next.observableusercontent.com/df49ad249a7fc65c74a4474eb6eea0daa284b0883fa250af7b34fcb6bed1ba05","tier":null}],"members":[{"type":"individual","id":"b253a2892f9e5b9c","login":"snie2012","name":"Shaoliang Nie","avatar_url":"https://avatars-next.observableusercontent.com/df49ad249a7fc65c74a4474eb6eea0daa284b0883fa250af7b34fcb6bed1ba05","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visualize Airbnb dataset with Leaflet","cells":[{"id":0,"value":"md`# Visualize Airbnb dataset with Leaflet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md `# Import data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"data = {\n let d = d3.csvParse(await FileAttachment(\"AB_NYC_2019.csv\").text());\n return d.map(home => {\n home.price = parseFloat(home.price);\n home.longitude = parseFloat(home.longitude);\n home.latitude = parseFloat(home.latitude);\n home.number_of_reviews = parseInt(home.number_of_reviews);\n home.minimum_nights = parseInt(home.minimum_nights);\n home.host_id = parseInt(home.host_id);\n return home;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`# Prices of ${numSamples} homes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"viewof center = usaMapCoordinates({\n value: [-74.005974, 40.712776],\n description: \"Click a point to decide map center\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"viewof mapSize = slider({\n min: 100,\n max: 1000,\n step: 30,\n value: 300,\n description: \"Map size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"viewof numSamples = slider({\n min: 10,\n max: 8000,\n step: 5,\n value: 100,\n description: \"Number of homes to sample\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`# Number of homes and average prices in each neighborhood`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"neighbor = {\n let neighbor = {};\n data.map(home => {\n const nei = home.neighbourhood;\n if (nei in neighbor) {\n neighbor[nei].numHomes++;\n neighbor[nei].longitudes.push(parseFloat(home.longitude));\n neighbor[nei].latitudes.push(parseFloat(home.latitude));\n neighbor[nei].prices.push(parseFloat(home.price));\n } else {\n neighbor[nei] = {\n numHomes: 0,\n longitudes: [],\n latitudes: [],\n prices: []\n };\n }\n });\n\n for (let key in neighbor) {\n neighbor[key].avgLongitude = d3.mean(neighbor[key].longitudes);\n neighbor[key].avgLatitude = d3.mean(neighbor[key].latitudes);\n neighbor[key].avgPrice = d3.mean(neighbor[key].prices);\n }\n\n return neighbor;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"colorDict = {\n return {\n blues: d3.interpolateBlues,\n oranges: d3.interpolateOranges,\n greens: d3.interpolateGreens,\n greys: d3.interpolateGreys,\n reds: d3.interpolateReds\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"viewof scheme = select({\n options: Object.keys(colorDict),\n placeholder: \"Select a color scheme\",\n value: \"greys\",\n description: \"select a color scheme\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md `# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"import { slider, autoSelect, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"import { usaMapCoordinates } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"import { L } from \"@mbostock/hello-leaflet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"floatFormatter = d3.format(\".2f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"