diff --git "a/docs/emoji-test-\360\237\224\213.md" "b/docs/emoji-test-\360\237\224\213.md" new file mode 100644 index 0000000..a341e84 --- /dev/null +++ "b/docs/emoji-test-\360\237\224\213.md" @@ -0,0 +1,170 @@ +--- +toc: false +--- + + + +
+

New York Real Estate

+

Welcome to interactive visualizations of New York City real estate data! The code and data used to generate these data are public and free to reuse :) +

+ +**Please note: this is a work in progress. You might need to refresh the page or try a different browser to get the map to display correctly! Please let me know if you run into issues or file an issue on GitHub: https://github.com/jaanli/new-york-real-estate** + +[Let me know](mailto:jaan.li@jaan.li) if you have ideas on what to link with this: +* such as variables from the census: American Community Survey visualization of 159 New York Metropolitan Area neighborhoods and districts +* or variables related to public health, health care access, and access to nonprivate spaces like coffee shops, saunas, communal bathhouses. (It's weird that my mom's hometown in Estonia pays for and maintains a free public sauna and in New York it's a bougie $90-a-pop upsold "wellness" experience privy to tech folk like me...) +* verifying interesting anecdata, like some landlords exclusively working with foreign student rental agencies, as foreign students have high turnover (and often cannot get the requisite H-1B visas or green cards to stay in the country, often being from countries with high rates of visa denials, like India and China, or countries with high rates of visa overstays, like Nigeria and Brazil). I've been told that this lets them increase rents faster than if they rented to "locals". (I'm from Canada myself and benefited from the housing lottery last year.) +* or variables related to private equity and sovereign wealth fund investments, alongside landowner shell companies and network analyses like [this](https://MKEPropertyOwnership.com) +

Download the data dictionary here in order to understand the variables in the data: NYC Planning Primary Land Use Tax Lot Output Data Dictionary

+Code for data transform, starting from downloading the data from the New York City Department of City Planning + +```js +const center = [40.7,-74]; +const zoom = 13.5; +``` + +```js +const areas = FileAttachment("data/new_york_real_estate_MapPLUTO_data_min_zoom_0_max_zoom_g.pmtiles"); +``` + +```js +import maplibregl from "npm:maplibre-gl@4.0.2"; +import { PMTiles, Protocol } from "npm:pmtiles@3.0.3"; +const protocol = new Protocol(); +maplibregl.addProtocol("pmtiles",protocol.tile); +``` + + + +```js +const div = display(document.createElement("div")); +div.style = "height: 1000px;"; +const map = new maplibregl.Map({ + container: div, + zoom: zoom - 1, + center: [center[1],center[0]], + style: "https://api.protomaps.com/styles/v2/black.json?key=7c0c24912bd59a0f" +}) + +map.on("load", () => { + map.addSource("dataMapPLUTO24v1_wgs84", { + type: "vector", + url: `pmtiles://${areas.href}` + }) + + map.addLayer({ + "id":"dataMapPLUTO24v1_wgs84", + "source": "dataMapPLUTO24v1_wgs84", + "source-layer":"dataMapPLUTO24v1_wgs84", + "type": "fill", + "paint": { + "fill-color": [ + "case", + ['boolean', ['feature-state', 'hover'], false], + "red", + "steelblue" + ], + "fill-opacity": 0.7 + } + }) + + map.addLayer({ + "id":"dataMapPLUTO24v1_wgs84_stroke", + "source": "dataMapPLUTO24v1_wgs84", + "source-layer":"dataMapPLUTO24v1_wgs84", + "type": "line", + "paint": { + "line-color": "cyan", + "line-width": 0.2 + } + }) + + let hoveredId = null; + + const popup = new maplibregl.Popup({ + closeButton: false, + closeOnClick: false + }); + + map.on('mousemove', 'dataMapPLUTO24v1_wgs84', (e) => { + + if (e.features.length > 0) { + map.getCanvas().style.cursor = 'pointer'; + const props = e.features[0].properties; + let result = ''; + for (let key in props) { + if (props.hasOwnProperty(key)) { + result += key + ': ' + props[key] + '
'; + } + } + popup.setLngLat(e.lngLat).setHTML(result).addTo(map); + + if (hoveredId) { + map.setFeatureState( + {source: 'dataMapPLUTO24v1_wgs84', sourceLayer: "dataMapPLUTO24v1_wgs84", id: hoveredId}, + {hover: false} + ); + } + hoveredId = e.features[0].id; + map.setFeatureState( + {source: 'dataMapPLUTO24v1_wgs84', sourceLayer: "dataMapPLUTO24v1_wgs84", id: hoveredId}, + {hover: true} + ); + } + }); + + map.on('mouseleave', 'dataMapPLUTO24v1_wgs84', () => { + map.getCanvas().style.cursor = ''; + popup.remove(); + + if (hoveredId) { + map.setFeatureState( + {source: 'dataMapPLUTO24v1_wgs84', sourceLayer: "dataMapPLUTO24v1_wgs84", id: hoveredId}, + {hover: false} + ); + } + hoveredId = null; + }); +}) +```