31:T722,_map = { var map = new mapboxgl.Map({ container: maphtml, bounds: [68.1766451354, 7.96553477623, 97.4025614766, 39.4940095078], scrollZoom: false, interactive: false, style: { version: 8, sources: { mock: { center: [0, 0, 0], format: "pbf", maxzoom: 6, minzoom: 0, name: "Mock", bounds: [-180, -85.738076382392, 180, 84.79842793857], profile: "mercator", basename: "Mock", tilejson: "2.0.0", scheme: "xyz", type: "vector" } }, glyphs: "https://hostedglyphs/{fontstack}/{range}.pbf", layers: [ { id: "background-layer", type: "background", paint: { "background-color": "rgba(0,0,0,0)" } } ] } }); var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on('load', f => { map.setRenderWorldCopies(false); map.addSource("states", { type: 'geojson', data: states_geojson_with_age, tolerance: 0.2 }); map.addImage('blank', ""); map.addLayer(non_states_fill_layer); map.addLayer(states_fill_layer); map.addLayer(states_border_layer); map.on('mousemove', 'state-fills', function(e) { var state = e.features[0].properties.NAME_1; var age = moment(new Date(e.features[0].properties.statehood)).fromNow(); if (e.features[0].properties.statehood) { popup .setLngLat(e.lngLat) .setHTML(state + "
" + age) .addTo(map); } else { popup.remove(); } }); map.on('mouseleave', 'state-fills', function(e) { popup.remove(); }); }); invalidation.then(() => { map.remove(); }); return map; }32:T403,states_geojson_with_age = { var state_names = []; var states_data = states.map(d => { state_names.push(d.State); return { name: d.State, statehood: new Date(d.Statehood) }; }); var age_scale = d3 .scaleLinear() .domain(d3.extent(states_data.map(d => d.statehood))); var geojson = {}; Object.assign(geojson, states_geojson); geojson.features.map(d => { if (d.properties.NAME_1 == "Orissa") { d.properties.NAME_1 = "Odisha"; } if (d.properties.NAME_1 == "Uttaranchal") { d.properties.NAME_1 = "Uttarakhand"; } if (d.properties.NAME_1 == "Jammu and Kashmir") { d.geometry = disputed_jk; } if (state_names.indexOf(d.properties.NAME_1) > -1) { d.properties.age = age_scale( states_data[state_names.indexOf(d.properties.NAME_1)].statehood ); d.properties.statehood = states_data[state_names.indexOf(d.properties.NAME_1)].statehood; } else { d.properties.age = null; } }); return geojson; }33:[{"id":"0791df9fadc83579b516ca793ff3227ffc0937dad26c9c285f16941cf261e9272ec791b540faaa669a9b65468124f7e7335fbd86969d8a92b60cfe75ae2508a2","href":"https://static.observableusercontent.com/files/0791df9fadc83579b516ca793ff3227ffc0937dad26c9c285f16941cf261e9272ec791b540faaa669a9b65468124f7e7335fbd86969d8a92b60cfe75ae2508a2","name":"indian-states-map.json","type":"application/json","lastModified":1580582306261.568,"size":226066},{"id":"1953b1b15138aafc589a8ac149f96ed01f01efe9ed31583e6169416fe2b1926b03ab0430dbd8056d085a44191237e3ae3e3f4765657f41a28bc06f0043aa3343","href":"https://static.observableusercontent.com/files/1953b1b15138aafc589a8ac149f96ed01f01efe9ed31583e6169416fe2b1926b03ab0430dbd8056d085a44191237e3ae3e3f4765657f41a28bc06f0043aa3343","name":"india-states.csv","type":"text/csv","lastModified":1580582306261.568,"size":3219},{"id":"c001b954e3b3e8bca68689d05c40079c9caacb54d793a570bc59a6ffb2a2b4b7d8f604efd74e929fb9c468534bd7c7735163a809fbe4a515c517f624e048b1f8","href":"https://static.observableusercontent.com/files/c001b954e3b3e8bca68689d05c40079c9caacb54d793a570bc59a6ffb2a2b4b7d8f604efd74e929fb9c468534bd7c7735163a809fbe4a515c517f624e048b1f8","name":"papyrus.png","type":"image/png","lastModified":1580582306261.568,"size":10567},{"id":"685b24f45daacd7c8ede8e2e3282e9635bb49c3726efb682650faca426b0be60c17f8c3c5dda12d012a55b9c12b0e1d7ab2687722f6855cbeb127ba68a16aaa8","href":"https://static.observableusercontent.com/files/685b24f45daacd7c8ede8e2e3282e9635bb49c3726efb682650faca426b0be60c17f8c3c5dda12d012a55b9c12b0e1d7ab2687722f6855cbeb127ba68a16aaa8","name":"india_state.json","type":"application/json","lastModified":1580597631147.629,"size":1487124}] 2f:{"title":"Indian States By Age Of Statehood","cells":[{"id":0,"value":"md`# Indian States By Age Of Statehood`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"maphtml = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"html`

The states are colored by their age: oldest and newest. Mouse over a state to see its age (relative to today).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"states_fill_layer = ({\n id: \"state-fills\",\n type: \"fill\",\n source: \"states\",\n paint: {\n \"fill-color\": [\n 'case',\n ['!=', [\"get\", \"age\"], null],\n [\n 'interpolate',\n ['linear'],\n ['get', 'age'],\n 0,\n '#FF736C',\n 0.25,\n '#FEE969',\n 0.75,\n '#7EE267',\n 1,\n '#32C77F'\n ],\n 'rgba(0, 0, 0, 0)'\n ]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"non_states_fill_layer = ({\n id: \"non-state-fills\",\n type: \"fill\",\n source: \"states\",\n paint: {\n \"fill-pattern\": 'pattern'\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"states_border_layer = ({\n id: \"state-borders\",\n type: \"line\",\n source: \"states\",\n paint: {\n \"line-color\": \"#555\",\n \"line-width\": 1.2\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"{\n FileAttachment(\"papyrus.png\")\n .image()\n .then(d => _map.addImage('pattern', d));\n return \"Loading background image for non state\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`### Data \n[1] https://en.wikipedia.org/wiki/States_and_union_territories_of_India\n\n[2] https://github.com/geohacker/india`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"states = FileAttachment(\"india-states.csv\")\n .text()\n .then(d3.csvParse)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"states_geojson = FileAttachment('indian-states-map.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"disputed_jk = FileAttachment('india_state.json')\n .json()\n .then(d => {\n var jk = null;\n d.features.map(p => {\n if (p.properties.ST_NM == \"Jammu & Kashmir\") {\n jk = p.geometry;\n }\n });\n return jk;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@v5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"mapboxgl = require('mapbox-gl@1.9.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"deck = require('deck.gl@6.2.3/deckgl.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}