2c:null 2d:["$","title",null,{"children":"Accessibility as a Determinant of the Depopulation in Serbia | Nikola Petković | Observable"}] 32:T6c2,map = { const width = 640; const projection = d3 .geoIdentity() .reflectY(true) .fitWidth(width, municipalities); const path = d3.geoPath(projection); const height = Math.ceil(path.bounds(municipalities)[1][1]); let svg = d3.select(DOM.svg(width, height)); const tooltip = d3 .select("body") .append("div") .style('position', 'absolute') .style('text-align', 'start') .style('width', 60) .style('height', 30) .style('font', '12px sans-serif') .style("opacity", 100) .style('border-radius', '8px') .style('background', '#000') .style('pointer-events', 'none') .style('padding', '5px') .style("color", "#fff"); svg .append('g') .selectAll('path') .data(settlements.features) .enter() .append('path') .attr('d', path) .attr('fill', d => color(d.properties["Acc_Key"])); svg .append('g') .selectAll('path') .data(municipalities.features) .enter() .append('path') .attr('fill', d => municipalityColor(d.properties["MATBRO"])) .attr('fill-opacity', d => municipalityColorOpacity(d.properties["MATBRO"])) .attr('stroke', 'black') .attr('stroke-width', '0.3px') .attr('d', path) .on('click', d => { mutable selected = d.properties; }) .on('mouseover', function(d) { d3.select(this).classed('active', true); tooltip .html(d.properties.Naziv_lati) .style("visibility", "visible") .style("left", d3.event.pageX + "px") .style("top", d3.event.pageY - 20 + "px"); }) .on("mouseout", function(d) { d3.select(this).classed("active", false); tooltip.style("visibility", "hidden"); }); return svg.node(); }33:T727,chart = { if (data.length === 0) { return md`_${i18n('Unfortunately no data')} :(_`; } const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("fill", d => color(d["Acc_Key"])) .attr("width", d => x(d[sort]) - x(0)) .attr("height", y.bandwidth()); svg .append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 12) .selectAll("text") .data(data) .join("text") .attr("x", d => x(d[sort])) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(d => d[sort]) .call(text => text .filter(d => x(d[sort]) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start") ); svg .append("g") .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(width / 80)) .call(g => g.select(".domain").remove()); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .tickFormat(i => data[i].ImeNasLat) .tickSizeOuter(0) ); svg .append("g") .attr("transform", `translate(${x(21.3)},0)`) .call( d3 .axisLeft(y) .tickFormat(() => "") .tickSize(0) ) .attr("color", "red"); svg .append("g") // averageXAxis .attr("transform", `translate(0,${margin.top})`) .call( d3 .axisTop(x) .tickValues([21.3]) .tickFormat(d3.format(".1f")) ) .call(g => g.select(".domain").remove()) .attr("color", "red"); return svg.node(); }34:[{"id":"537c4776e9819ac9bf3ebef78f6994d0736b8d94034f84c8a2a9d3018009675d6fe6b1ecfa1111c935e2ea67872127e977565fd83c62dc48bf5d3108782a7a83","href":"https://static.observableusercontent.com/files/537c4776e9819ac9bf3ebef78f6994d0736b8d94034f84c8a2a9d3018009675d6fe6b1ecfa1111c935e2ea67872127e977565fd83c62dc48bf5d3108782a7a83","name":"Accessibility.json","type":"application/json","lastModified":1608995068274.896,"size":3724038},{"id":"a035f6a8ba50c52a4a30e75c667993a3ae44f4e8f25a369d7e734fb407c0725a3a768e608f27a797db563558dd5f83f164871d4d1a020e1820b0dfac0bde401c","href":"https://static.observableusercontent.com/files/a035f6a8ba50c52a4a30e75c667993a3ae44f4e8f25a369d7e734fb407c0725a3a768e608f27a797db563558dd5f83f164871d4d1a020e1820b0dfac0bde401c","name":"Hipso_class_Serbia_3.json","type":"application/json","lastModified":1608995068274.896,"size":709313}] 30:{"id":"c6e5d254bd3def55","slug":"accessibility-as-a-determinant-of-the-depopulation-in-serb","title":"Accessibility as a Determinant of the Depopulation in Serbia","thumbnail":"11a2553abaae70bbd30d5445e5928c23651f8ff1771b271eff75ff3fdf8fc38b","access_level":"public","create_time":"$D2020-12-26T15:04:28.274Z","update_time":"$D2020-12-26T15:04:28.274Z","view_time":null,"first_public_time":"$D2020-12-26T15:04:51.245Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"87e45f1b10876a31","login":"ni5ni6","name":"Nikola Petković","avatar_url":"https://avatars-next.observableusercontent.com/adc16bf2cd7219d81fdc5ab377ca539a565be1c5ab9f920d26bbeb4d479b5a1e","tier":"starter_2024"},"version":1084,"publish_version":1084,"role":null,"authored":false,"authors":[{"type":"individual","id":"c309f5fbc078cf0b","login":"ni5ni6","name":"Nikola Petković","avatar_url":"https://avatars-next.observableusercontent.com/adc16bf2cd7219d81fdc5ab377ca539a565be1c5ab9f920d26bbeb4d479b5a1e","tier":null}],"members":[{"type":"individual","id":"c309f5fbc078cf0b","login":"ni5ni6","name":"Nikola Petković","avatar_url":"https://avatars-next.observableusercontent.com/adc16bf2cd7219d81fdc5ab377ca539a565be1c5ab9f920d26bbeb4d479b5a1e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Accessibility as a Determinant of the Depopulation in Serbia","cells":[{"id":0,"value":"title = md`# Accessibility as a Determinant of the Depopulation in Serbia`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"intro = md`\nFor more info about this indicator and how data is obtained, visit \n[Pristupačnost kao determinanta depopulacije](https://depopulacija.rs/a4ddff6abf92410a95fd999293a65bb9).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"guide = html`↓ Choose a municipality, then scroll down to explore data ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"legend = swatches({\n color: d3.scaleOrdinal(\n [\n `${i18n('Accessible Areas with Population Growth')}`,\n `${i18n('Accessible Areas with Population Decline')}`,\n `${i18n('Inaccessible Areas with Population Growth')}`,\n `${i18n('Inaccessible Areas with Population Decline')}`,\n `${i18n('Municipality Centre')}`,\n `${i18n('No Permanent Inhabitants')}`,\n `${i18n('No Data')}`\n ],\n [\"#6100d0\", \"#9d75e3\", \"#155cbf\", \"#1ab9ec\", \"#f24e10\", \"#eee\", \"#aaaaaa\"]\n ),\n columns: \"320px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"intro_1 = md`### ${i18n(\"Data for Municipality\")}: ${selected.Naziv_lati}\n${i18n(\n \"The average travel time (in minutes) to the municipal center and accessibility classes (Red line is the average time distance at the state level)\"\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"md`### Appendix\n\nThis is just code, stop here if you're not interested :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"locale = new URLSearchParams(location.search).get('lang')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"function i18n(key) {\n return locale == \"sr\" ? dict[key] : key;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"dict = ({\n \"Accessible Areas with Population Growth\":\n \"Pristupačna područja sa populacionim porastom\",\n \"Accessible Areas with Population Decline\":\n \"Pristupačna područja sa populacionim padom\",\n \"Inaccessible Areas with Population Growth\":\n \"Nepristupačna područja sa populacionim porastom\",\n \"Inaccessible Areas with Population Decline\":\n \"Nepristupačna područja sa populacionim padom\",\n \"Municipality Centre\": \"Opštinski centar\",\n \"No Permanent Inhabitants\": \"Nema stalnih stanovnika\",\n \"No Data\": \"Nema podataka\",\n \"The average travel time (in minutes) to the municipal center and accessibility classes (Red line is the average time distance at the state level)\":\n \"Prosečno vreme putovanja (u minutima) od opštinskog centra i klase pristupačnosti (crvena linija označava prosečnu vremensku distancu na državnom nivou)\",\n \"Data for Municipality\": \"Podaci za opštinu\",\n \"Unfortunately no data\": \"Nažalost, nema podataka\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"sort = \"TT_car_min\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"data = settlements.features.filter(i => i.properties.MatBrO == selected.MATBRO)\n .map(function(item){ return item.properties })\n .filter(d => (d[sort] !== 0 && d[sort] !== null))\n .sort((a, b) => d3.descending(a[sort], b[sort]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(data, d => d[sort])])\n .rangeRound([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"y = d3.scaleBand()\n .domain(d3.range(data.length))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"margin = ({top: 34, right: 30, bottom: 30, left: 120})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"width = 960","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"barHeight = 18","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"color = d3\n .scaleOrdinal()\n .domain([1, 2, 3, 4, 5, 6, 7])\n .range([\n \"#6100d0\",\n \"#9d75e3\",\n \"#155cbf\",\n \"#1ab9ec\",\n \"#f24e10\",\n \"#eee\",\n \"#aaaaaa\"\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"municipalityColor = function(d) {\n return municipalitiesWithoutData.includes(d) ? color(7) : 'white'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"municipalityColorOpacity = function(d) {\n return municipalitiesWithoutData.includes(d) ? '1' : '0'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"domain = [0, Math.max(...settlements.features.map(f => f.properties[sort]))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"settlements = FileAttachment('Accessibility.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"municipalities = FileAttachment('Hipso_class_Serbia_3.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"municipalitiesWithoutData = [ 90026, 90093, 90352, 90336, 90328, 90115, 90255, 90018, 90301, 90310, 90280, 90212, 90085, 90042, 90166, 90182, 90069, 90131, 90123, 90034, 90140, 90204, 90263, 90239, 90271, 90298, 90247, 90158, 90107 ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"mutable selected = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"config = ({\n \"P_LA_15\": { \n label: \"Lighted Area 2015\", \n domain: [0.01, 5, 10, 20, 40, 60, 80, 100], \n colors: [\"#000004\", \"#281461\", \"#5e177f\", \"#982c80\", \"#d3426e\", \"#f8765c\", \"#febb80\", \"#fcfdbf\"],\n format: \"%\" \n },\n \"P_LA_15-19\": { \n label: \"Lighted Area 2015-2019\", \n domain: [0.01, 5, 10, 20, 40, 60, 80, 100], \n colors: [\"#000004\", \"#281461\", \"#5e177f\", \"#982c80\", \"#d3426e\", \"#f8765c\", \"#febb80\", \"#fcfdbf\"],\n format: \"%\" \n },\n \"SOL_15\": { \n label: \"Sum of Lights 2015\", \n domain: [0.01, 10, 50, 100, 500, 1000, 5000, 10000],\n colors: [\"#000004\", \"#201352\", \"#50127b\", \"#822581\", \"#b63679\", \"#e75163\", \"#fc8761\", \"#fec387\", \"#fcfdbf\"],\n format: \"nW m^-2 sr^-1\"\n }, \n \"SOL_15-19\": { \n label: \"Sum of Lights 2015-2019\", \n domain: [0.01, 10, 50, 100, 500, 1000, 5000, 10000],\n colors: [\"#000004\", \"#201352\", \"#50127b\", \"#822581\", \"#b63679\", \"#e75163\", \"#fc8761\", \"#fec387\", \"#fcfdbf\"],\n format: \"nW m^-2 sr^-1\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"