2b:null 2c:["$","title",null,{"children":"Spatial Lighting | Nikola Petković | Observable"}] 31:T684,map = { const width = 600 const projection = d3.geoIdentity() .reflectY(true) .fitWidth(width, opstine) const path = d3.geoPath(projection) const height = Math.ceil(path.bounds(opstine)[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"); function click(d) { mutable selected = d.properties; } svg.append('g') .selectAll('path') .data(naselja.features) .enter() .append('path') .attr('d', path) .attr('fill', d => color(d.properties[sort])); svg.append('g') .selectAll('path') .data(opstine.features) .enter() .append('path') .attr('fill', 'white') .attr('fill-opacity', '0') .attr('stroke', 'black') .attr('stroke-width', '0.3px') .attr('d', path) .on('click', click) .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(); }32:T657,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[sort])) .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 => d3.format(".2f")(d[sort])) .call(text => text .filter(d => x(d[sort]) - x(0) < 25) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start") ) .call(text => text .filter( d => d[sort] > config[sort].domain[config[sort].domain.length - 2] ) // light bars .attr("fill", "grey") ); svg.append("g").call(xAxis); svg.append("g").call(yAxis); const yTitle = g => g .append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", "bold") .attr("y", 10) .attr("x", margin.left) .text( `${i18n(config[sort].label)} [${config[sort].format.replace( /<[^>]*>?/gm, '' )}]` ); svg.call(yTitle); return svg.node(); }33:T4d1,config = ({ P_LA_15: { label: "Lighted Area 2015", domain: [0.01, 5, 10, 20, 40, 60, 80, 100], colors: [ "#000004", "#281461", "#5e177f", "#982c80", "#d3426e", "#f8765c", "#febb80", "#fcfdbf" ], format: "%" }, "P_LA_15-19": { label: "Lighted Area 2015–2019", domain: [0.01, 5, 10, 20, 40, 60, 80, 100], colors: [ "#000004", "#281461", "#5e177f", "#982c80", "#d3426e", "#f8765c", "#febb80", "#fcfdbf" ], format: "%" }, SOL_15: { label: "Sum of Lights 2015", domain: [0.01, 10, 50, 100, 500, 1000, 5000, 10000], colors: [ "#000004", "#201352", "#50127b", "#822581", "#b63679", "#e75163", "#fc8761", "#fec387", "#fcfdbf" ], format: "nW m^-2 sr^-1" }, "SOL_15-19": { label: "Sum of Lights 2015–2019", domain: [0.01, 10, 50, 100, 500, 1000, 5000, 10000], colors: [ "#000004", "#201352", "#50127b", "#822581", "#b63679", "#e75163", "#fc8761", "#fec387", "#fcfdbf" ], format: "nW m^-2 sr^-1" } })34:[{"id":"a035f6a8ba50c52a4a30e75c667993a3ae44f4e8f25a369d7e734fb407c0725a3a768e608f27a797db563558dd5f83f164871d4d1a020e1820b0dfac0bde401c","href":"https://static.observableusercontent.com/files/a035f6a8ba50c52a4a30e75c667993a3ae44f4e8f25a369d7e734fb407c0725a3a768e608f27a797db563558dd5f83f164871d4d1a020e1820b0dfac0bde401c","name":"Hipso_class_Serbia_3.json","type":"application/json","lastModified":1608997544586.382,"size":709313},{"id":"4f1cfa051d82e40369131b2a4cf0d75c8a39f51abc686724302352b5f01e02f762c0c41222a54e8e46bec8ae0ecf1a3b497d638689c48c853c378881e2bd1e2f","href":"https://static.observableusercontent.com/files/4f1cfa051d82e40369131b2a4cf0d75c8a39f51abc686724302352b5f01e02f762c0c41222a54e8e46bec8ae0ecf1a3b497d638689c48c853c378881e2bd1e2f","name":"LA_SOL_Settl.json","type":"application/json","lastModified":1608997544586.382,"size":3482643}] 2f:{"id":"c9a1218f8fe8c3ef","slug":"spatial-lighting","title":"Spatial Lighting","thumbnail":"25a4b5c1ad4f15f44b702e49697a71ae269249920abca9033bf49ed69e2551cf","access_level":"public","create_time":"$D2020-12-26T15:45:44.586Z","update_time":"$D2020-12-26T15:45:44.586Z","view_time":null,"first_public_time":"$D2020-12-26T15:45:48.437Z","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":751,"publish_version":751,"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":"Spatial Lighting","cells":[{"id":0,"value":"title = md`# Spatial Lighting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"intro = md`For more info about this indicator and how data is obtained, visit [Noćna svetla](https://depopulacija.rs/687e152cef7c47b29969e2eb4e395092).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"guide = html`↓ Choose an indicator and a municipality, then scroll down to explore data ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"viewof sort = radio({\n options: [\n { label: `${i18n(\"Lighted Area 2015\")}`, value: \"P_LA_15\" },\n { label: `${i18n(\"Lighted Area 2015–2019\")}`, value: \"P_LA_15-19\" },\n { label: `${i18n(\"Sum of Lights 2015\")}`, value: \"SOL_15\" },\n { label: `${i18n(\"Sum of Lights 2015–2019\")}`, value: \"SOL_15-19\" }\n ],\n value: \"P_LA_15\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"subtitle = html`

${i18n(config[sort].label)} [${config[sort].format}]

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"intro_1 = md`### ${i18n(\"Data for Municipality\")}: ${selected.Naziv_lati}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"legend_1 = legend({\n color: color,\n title: `${i18n(config[sort].label)}`,\n tickSize: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"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":734,"value":"locale = new URLSearchParams(location.search).get('lang')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"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":729,"value":"dict = ({\n \"Lighted Area 2015\": \"Osvetljene površine 2015\",\n \"Lighted Area 2015–2019\": \"Osvetljene površine 2015–2019\",\n \"Sum of Lights 2015\": \"Suma radijanse 2015\",\n \"Sum of Lights 2015–2019\": \"Suma radijanse 2015–2019\",\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":140,"value":"data = naselja.features.filter(i => i.properties.MatBrO == selected.MATBRO)\n .map(function(item){ return item.properties })\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":436,"value":"format = x.tickFormat(20, data.format)","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":431,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickFormat(i => data[i].ImeNasLat).tickSizeOuter(0))","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":500,"value":"barHeight = 18","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"width = 960","pinned":false,"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":509,"value":"color = d3.scaleThreshold()\n .domain(config[sort].domain)\n .range(config[sort].colors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"domain = [0, Math.max(...naselja.features.map(f => f.properties[sort]))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"naselja = FileAttachment('LA_SOL_Settl.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"opstine = FileAttachment('Hipso_class_Serbia_3.json').json()","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":"$33","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 {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"