2b:null 2c:["$","title",null,{"children":"Zigbang -- browse by pictures | Grégoire Geis | Observable"}] 31:[] 2f:{"id":"6bfeed2c656ca55f","slug":null,"title":"Zigbang -- browse by pictures","thumbnail":"f62f636ddb44714dacddafe28931c06957c0207353dbcc88f15e45bb8dc5f63e","access_level":"public","create_time":"$D2022-06-10T07:11:04.621Z","update_time":"$D2023-05-06T06:25:01.045Z","view_time":null,"first_public_time":"$D2023-05-06T05:44:19.458Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6817f8df4b71afcf","login":"71","name":"Grégoire Geis","avatar_url":"https://avatars-next.observableusercontent.com/046456a6fcb599cae062b5a172a9e2c85acef403c376bdb60a4cc6d135a60aad","tier":"starter_2024"},"version":315,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3881cfc7f3117323","login":"71","name":"Grégoire Geis","avatar_url":"https://avatars-next.observableusercontent.com/046456a6fcb599cae062b5a172a9e2c85acef403c376bdb60a4cc6d135a60aad","tier":null}],"members":[{"type":"individual","id":"3881cfc7f3117323","login":"71","name":"Grégoire Geis","avatar_url":"https://avatars-next.observableusercontent.com/046456a6fcb599cae062b5a172a9e2c85acef403c376bdb60a4cc6d135a60aad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Zigbang -- browse by pictures","cells":[{"id":0,"value":"# Zigbang -- browse by pictures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"{\n const container = html`

`;\n yield container;\n const map = L.map(container).setView([37.5258555, 126.9227264], 17);\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n const updateCb = () => { mutable map = map; };\n map.addEventListener(\"zoomend\", updateCb);\n map.addEventListener(\"moveend\", updateCb);\n mutable map = map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"coords = {\n const bounds = map.getBounds(),\n center = bounds.getCenter();\n\n return { lat: center.lat, long: center.lng };\n}\n//coords = await getCoordinates(21909)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"viewof maxDeposit = Inputs.range([0, 1e5], { step: 1e3, value: 50e2, label: \"Max deposit (만원)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"viewof maxRent = Inputs.range([0, 1e4], { step: 1e2, value: 2e2, label: \"Max rent (만원)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"viewof minRent = Inputs.range([0, 1e4], { step: 1e1, value: 10, label: \"Min rent (만원)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"buildings = fetchBuildings({ ...coords, minDate: new Date(\"2011-01\"), maxDeposit: maxDeposit * 1e4, maxRent: maxRent * 1e4, minRent: (minRent >= maxRent ? 0 : minRent) * 1e4 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"items_in_buildings = {\n const allItems = await fetchItemsInBuildings(buildings);\n const keys = new Set();\n\n return allItems.filter((item) => {\n const key = `${item.deposit} ${item.rent} ${item.addressOrigin.fullText} ${item.regDate} ${item.service_type} ${item.size_m2}`;\n\n return keys.size + 1 === keys.add(key).size;\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"full_items = Promise.all(items_in_buildings.map((item) => fetchFullItem(item.item_id)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"images = html`${\n full_items\n .map((item) => `

(${item.sales_title} ${item.보증금액}/${item.월세금액})

${item.addressOrigin.fullText}, ${item.floor_all}

` + item.images\n .map((src) => `\n

\n `)\n .join(\"\") + \"

\")\n .join(\"\")\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"mutable map = undefined;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"async function fetchBuildings(opts = {}) {\n const {\n maxDeposit = 5e8, // Max deposit (won).\n maxRent = 3e6, // Max rent (won).\n minRent = 1e6,\n minDate = new Date(\"2020-01\"), // Min date of construction.\n lat = 37.50727613649934,\n long = 127.03215133594384,\n } = opts;\n\n let queryString = `\n ?buildings=true\n &domain=zigbang\n &needHasNoFiltered=true\n &geohash=${geohash(lat, long)}\n &deposit_lteq=${maxDeposit / 1e4}\n &rent_lteq=${maxRent / 1e4}\n &rent_gteq=${minRent / 1e4}\n &room_type_in=02%7C04\n &sales_type_in=%EC%9B%94%EC%84%B8`.replace(/\\n[ ]+/g, \"\");\n\n return await fetchWithCache(cache.BUILDINGS, queryString + minDate.valueOf(), `https://apis.zigbang.com/v2/officetels${queryString}`)\n .then((json) => Object.assign(\n json.buildings.filter((b) => b.count > 0\n && new Date(b.established.replace(\". \", \"-\")) >= minDate),\n { item_ids: json.sections.flatMap((section) => section.item_ids) }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"async function fetchItemsInBuildings({ item_ids }) {\n return await fetchWithCache(cache.ITEMS_PER_BUILDING, item_ids.join(\",\"), \"https://apis.zigbang.com/v2/items/list\", {\n headers: {\n Accept: \"application/json\",\n \"Content-Type\": \"application/json\",\n },\n method: \"POST\",\n body: JSON.stringify({ domain, withCoalition: true, item_ids }),\n }).then((json) => json.items);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"async function fetchFullItem(id) {\n return await fetchWithCache(cache.FULL_ITEMS, id, `https://apis.zigbang.com/v2/items/${id}`, {\n headers: {\n Accept: \"application/json\",\n },\n }).then((x) => Object.assign(x.item, x, { item: undefined }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"async function fetchImages(fullItem) {\n return html`${fullItem.images.map((src) => `

`).join(\"\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"async function getCoordinates(buildingId) {\n return ftch(`https://apis.zigbang.com/v2/officetels?building_id=${buildingId}&buildings=true`)\n .then((resp) => resp.json())\n .then(({ buildings: [{ lat, lng }]}) => ({ lat, long: lng }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"function geohash(lat, long, len = 5) {\n const e = Number(lat.toFixed(10)),\n t = Number(long.toFixed(10)),\n i = 90, a = -90, s = 180, u = -180;\n for (var o = [], c = 0, l = 0, d = 0, p = i, f = a, h = s, g = u; o.length < len; ) {\n var m;\n if (l % 2 === 0)\n t > (m = (h + g) / 2) ? (d = 2 * d + 1,\n g = m) : (d = 2 * d + 0,\n h = m);\n else\n e > (m = (p + f) / 2) ? (d = 2 * d + 1,\n f = m) : (d = 2 * d + 0,\n p = m);\n if (l++,\n 5 === ++c) {\n var b = \"0123456789bcdefghjkmnpqrstuvwxyz\"[d];\n o.push(b),\n c = 0,\n d = 0\n }\n }\n return o.join(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"ftch = window.fetchNoCors ?? window.fetch","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"fetchWithCache = async (cache, id, ...args) => cache[id] ?? (cache[id] = await ftch(...args).then((x) => x.json()))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"domain = \"zigbang\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"cache = ({ BUILDINGS: {}, ITEMS_PER_BUILDING: {}, FULL_ITEMS: {} })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"Object.values(cache.BUILDINGS)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"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","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"