2c:null 2d:["$","title",null,{"children":"Mapbox vector tiles | Armand Emamdjomeh | Observable"}] 32:T964,map = { const graphic = svg` ` yield graphic; d3.select('#memphis') .append('g') .attr('id', 'scale-bar') .call(scaleBar); return graphic; }33:[] 30:{"id":"eeb9295f5f387d38","slug":"mapbox-vector-tiles","title":"Mapbox vector tiles","thumbnail":"d5907079ab22c831dd7899c412fe11b48901b8faed70b8d573e61ad817e721c2","access_level":"public","create_time":"$D2018-12-12T22:01:46.685Z","update_time":"$D2019-10-21T15:23:09.387Z","view_time":null,"first_public_time":"$D2019-03-21T14:48:02.119Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"775f5069ff441bf9","login":"emamd","name":"Armand Emamdjomeh","avatar_url":"https://avatars-next.observableusercontent.com/7a932cbd387d1f561d8d1c405bf9e61ef1b6a679e1fa54aaa262a54380ab2f9b","tier":"starter_2024"},"version":503,"publish_version":503,"role":null,"authored":false,"authors":[{"type":"individual","id":"aac33ad2144eec5b","login":"emamd","name":"Armand Emamdjomeh","avatar_url":"https://avatars-next.observableusercontent.com/7a932cbd387d1f561d8d1c405bf9e61ef1b6a679e1fa54aaa262a54380ab2f9b","tier":null}],"members":[{"type":"individual","id":"aac33ad2144eec5b","login":"emamd","name":"Armand Emamdjomeh","avatar_url":"https://avatars-next.observableusercontent.com/7a932cbd387d1f561d8d1c405bf9e61ef1b6a679e1fa54aaa262a54380ab2f9b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mapbox vector tiles","cells":[{"id":0,"value":"md`# Mapbox vector tiles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`This map shows 27,000 evictions in Memphis from September 2015 to October 2018. It published in December 2018 as part of a story in the Washington Post, [Eviction filings and code complaints: What happened when a private equity firm became one city’s biggest homeowner](https://www.washingtonpost.com/business/economy/eviction-filings-and-code-complaints-what-happened-when-a-private-equity-firm-became-one-citys-biggest-homeowner/2018/12/25/995678d4-02f3-11e9-b6a9-0aa5c2fcc9e4_story.html?utm_term=.aff19865bc78).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"viewof road_width = slider({\n min: 0.25,\n max: 3,\n precision: 2,\n value: 1.0,\n title: \"Road width\", \n description: \"Use slider to adjust values\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"md`#### Eviction circles color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"viewof eviction_color = colorPicker(\"#ce432e\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"viewof majority_nonwhite_blockgroups_color = color({\n value: \"#E6B83B\",\n title: \"Majority nonewhite population block groups color\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"viewof water_color = color({\n value: \"#ffffff\",\n title: \"Water color\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"viewof background_color = color({\n value: \"#eff0ed\",\n title: \"Background color\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"DOM.download(await serialize(map), 'map.svg', 'Download map as svg')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"scaleBar = d3_geo_scalebar.geoScaleBar()\n .projection(projection)\n .units('miles')\n .fitSize([width, height], county_limits[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"getIsFirstKey = function(d, a, b) {\n return d.properties.manager === \"FIRST KEY HOLDINGS\" ? a : b\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"radiusScale = d3.scalePow().exponent(0.5)\n .domain([1, 11])\n .range([3, 15]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"isLayer = (feature, layer) => feature.properties.class === layer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"tiles = Promise.all(tile().map(async t => {\n let data = new vt.VectorTile(new Protobuf(await d3.buffer(`https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/${t.z}/${t.x}/${t.y}.mvt?access_token=pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg`))).layers\n \n t.data = Object.keys(data).reduce((initialData, key) => {\n initialData[key] = {\n type: \"FeatureCollection\",\n features: [...Array(data[key].length).keys()].map((item, i) => {\n let feature = data[key].feature(i).toGeoJSON(t.x, t.y, t.z)\n \n if (key === 'water') {\n feature.properties['class'] = 'water'\n }\n \n return feature\n })\n }\n\n return initialData\n }, {})\n \n return t;\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"t.layers.water.feature(0).toGeoJSON(1023, 1618, 12)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"t.layers.road.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"t = new vt.VectorTile(new Protobuf(await d3.buffer(`https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/12/1023/1618.mvt?access_token=pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg`)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"getLayers('road')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"eviction_sorted = eviction_cases.sort(function(a, b) {\n if (a.properties.manager !== 'FIRST KEY HOLDINGS') {\n return -1;\n } else {\n return 1;\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"// eviction_cases = await json('https://gist.githubusercontent.com/emamd/06f575de3d7d305488bf72905def3c8c/raw/de1e166bd8059b80be6cb96cf962118f7bcaaea8/eviction_cases.json')\neviction_cases = await json('https://gist.githubusercontent.com/emamd/77b6b749e54d8e76eddcec26dc487b8c/raw/cd192aad34739021c3538466009d522b93193e46/all_sfh_evict4.geojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"majority_minority_blockgroups = await json('https://gist.githubusercontent.com/emamd/87ba2f9b62b8b118dd28bbd352856555/raw/3eb69357eab3b2c90df30364d915bf94244bc5b1/majority_minority_blockgroups.geojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"county_limits = await json('https://gist.githubusercontent.com/emamd/a0612f8e58d30a532ca2a717c8e8877a/raw/7f969235a8faaf0084a5c64473e3037a4a659e6f/shelby-county.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"getLayers = key => {\n const flatten = (arr, depth = 1) => arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), [])\n \n return [ ...new Set(\n flatten(\n tiles.map(d => {\n if (d.data[key]) {\n return d.data[key].features.map(d => d.properties.class)\n }\n })\n )\n )\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"filter = function(d, test) {\n if (!d.features) { return }\n return { type: \"FeatureCollection\", features: d.features.filter(test) };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"projection = d3.geoMercator()\n .center([-89.9190, 35.1395])\n .scale(800000 / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"json = async url => {\n const { features } = await d3.json(url);\n return features;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\", \"d3-scale@2.1.2\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"d3_geo_scalebar = require('d3-geo-scale-bar@0.2.0/build/d3-geo-scale-bar.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"vt = require('https://bundle.run/@mapbox/vector-tile@1.3.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"Protobuf = require('pbf@3.2.1/dist/pbf.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"import { colorPicker } from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"import {slider, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"import {attribution as mapAttribution}\nwith {height as attributionHeight}\nfrom '@aboutaaron/mapbox-map-maker'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"