2e:null 2f:["$","title",null,{"children":"Presidential elections Poland 2020 - 1st round | Michal Škop | Observable"}] 34:T1596,map = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width}px;height:${width/1.05}px` }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it. let map = L.map(container).setView([52.00,19.1], 7); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Michal Škop | © OpenStreetMap contributors | © EuroGeographics for the administrative boundaries'}).addTo(map); function setColor(feature) { return colorScale(feature.properties.DUDA / (feature.properties.DUDA + feature.properties.TRZASKOWSK)) } function setOpacity(feature) { return opacityScale(feature.properties.ALL_VOTERS / feature.properties.area * 1000000) } function polystyle(feature) { return { fillColor: setColor(feature), // polygone color opacity: setOpacity(feature), // polygone weight: 1, // Outline width color: setColor(feature), //'#fff', //Outline color fillOpacity: setOpacity(feature) //Outline opacity } } // function polystyleMunicipalities(feature) { // return { // opacity: 1, // weight: 2, // color: "#fff", //Outline color // fillOpacity: 0 // } // } function highlightFeature(e) { var layer = e.target; layer.setStyle({ // highlight the feature weight: 5, color: '#222', dashArray: '', }); } function resetHighlight(e) { var layer = e.target; let feature = layer.feature layer.setStyle({ // dehighlight the feature weight: 1, // Outline width color: setColor(feature), //'#fff', //Outline color fillOpacity: setOpacity(feature), //Outline opacity dashArray: '', }); } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, // click: zoomToFeature, // pointToLayer: pointToLayer }); }; // map.info.update(layer.feature.properties); // Update infobox function tooltipText(feature) { let dudaPerc = (Math.round(feature.properties.DUDA / feature.properties.ALL_VOTERS * 1000) / 10).toString() + "%" let trzaskowskiPerc = (Math.round(feature.properties.TRZASKOWSK / feature.properties.ALL_VOTERS * 1000) / 10).toString() + "%" return "" + feature.properties.NAME + "
" + "Duda: " + feature.properties.DUDA.toString() + " " + dudaPerc + "
" + "Trzaskowski: " + feature.properties.TRZASKOWSK.toString() + " " + trzaskowskiPerc } const data_L = L.geoJson(data, { style: polystyle, onEachFeature: function (feature, layer) { onEachFeature(feature, layer) layer.bindTooltip(tooltipText(feature), { permanent: false }); } }) .addTo(map); // let layerGroup = L.geoJSON(data, { // onEachFeature: function (feature, layer) { // layer.bindPopup('

name: '+feature.properties.MUNI+'

'); // } // }).addTo(map); // TEXTS: // let cities = [ // { name: "Teplice", position: [50.64, 13.82]}, // { name: "Bílina", position: [50.54, 13.76]}, // { name: "Duchcov", position: [50.59, 13.73]}, // { name: "Krupka", position: [50.68, 13.87]}, // { name: "Dubí", position: [50.66, 13.78]} // ] // let markerOptions = { // opacity: 0 // } // let tooltipOptions = { // permanent: true, // className: "my-labels", // direction: "center" // } // cities.forEach(city => { // let marker = L.marker(city['position'], markerOptions).addTo(map) // marker.bindTooltip(city['name'], tooltipOptions).openTooltip() // }) // LEGEND: // let div = d3.select(map.getPanes().tooltipPane).append("div") // .attr("style", "position:absolute;left:700px") // // .attr("class", "leaflet-top leaflet-right leaflet-bar") // // .attr("viewBox", [0, 0, width, 100]) // div.append(() => legend({ // color: d3.scaleOrdinal([" ", " ", "", " "], ["rgba(0,0,128,0.1)", "rgba(0,0,128,0.4)", "rgba(0,0,128,0.7)", colorScale(0.66)]), // title: "Hanza - výrazně vítězil", // tickSize: 0, // width: 200, // height: 50 // })) // div.append(() => legend({ // color: d3.scaleOrdinal([" ", " ", "", " "], ["rgba(128,0,0,0.1)", "rgba(128,0,0,0.4)", "rgba(128,0,0,0.7)", colorScale(0.5)]), // title: "Oba zhruba stejně hlasů", // tickSize: 0, // width: 200 // })) // div.append(() => legend({ // color: d3.scaleOrdinal(["Řídce obydleno", " ", "", "Hustě obydleno"], ["rgba(0,128,0,0.1)", "rgba(0,128,0,0.4)", "rgba(0,128,0,0.7)", colorScale(0.33)]), // title: "Bergman - výrazně vítězil", // tickSize: 0, // width: 200 // })) // return div.node() }37:T6dc,// https://observablehq.com/@d3/color-legend legends2 = { const svg = d3.select(DOM.svg(width, 150)) svg.append("g") .attr("transform", "translate(700,10)") .attr("class", "legend") .append(() => legend({ color: d3.scaleOrdinal(["", " ", " ", " ", " "], [rgbaScale(0.66, limitsDensity().min), rgbaScale(0.66, (limitsDensity().min + limitsDensity().median) / 2), rgbaScale(0.66, limitsDensity().median), rgbaScale(0.66, (limitsDensity().max + limitsDensity().median) / 2), rgbaScale(0.66, limitsDensity().max)]), title: "Duda winning:", tickSize: 0, width: 200, height: 48 })) svg.append("g") .attr("transform", "translate(700,50)") .append(() => legend({ color: d3.scaleOrdinal(["", " ", " ", " ", " "], [rgbaScale(0.5, limitsDensity().min), rgbaScale(0.5, (limitsDensity().min + limitsDensity().median) / 2), rgbaScale(0.5, limitsDensity().median), rgbaScale(0.5, (limitsDensity().max + limitsDensity().median) / 2), rgbaScale(0.5, limitsDensity().max)]), title: "About the same:", tickSize: 0, width: 200, height: 48 })) svg.append("g") .attr("transform", "translate(700,90)") .append(() => legend({ color: d3.scaleOrdinal(["low population density", " ", " ", " ", "high population density"], [rgbaScale(0.33, limitsDensity().min), rgbaScale(0.33, (limitsDensity().min + limitsDensity().median) / 2), rgbaScale(0.33, limitsDensity().median), rgbaScale(0.33, (limitsDensity().max + limitsDensity().median) / 2), rgbaScale(0.33, limitsDensity().max)]), title: "Trzaskowski + Hołownia winning:", tickSize: 0, width: 200, height: 48 })) return svg.node() }38:[{"id":"4aa6b53a455a9454ff1cf0dbe997d00aa322af0b6d912211af9312c2babecf542e7ea639406456853289d930ad7f444bf8521506e212e54b33dd5d1cd1f21335","href":"https://static.observableusercontent.com/files/4aa6b53a455a9454ff1cf0dbe997d00aa322af0b6d912211af9312c2babecf542e7ea639406456853289d930ad7f444bf8521506e212e54b33dd5d1cd1f21335","name":"pl.geojson","type":"application/geo+json","lastModified":1593559306719.194,"size":8034827}] 32:{"id":"ffce882ca2fc2d4b","slug":"presidential-elections-poland-2020-1st-round","title":"Presidential elections Poland 2020 - 1st round","thumbnail":"73dc0d0eb7489c1dd5b16d55b28cc9d748dbf50b9ce259dae9f8e03f8a6614bd","access_level":"public","create_time":"$D2020-06-30T23:20:08.844Z","update_time":"$D2020-07-05T23:26:20.586Z","view_time":null,"first_public_time":"$D2020-06-30T23:53:17.619Z","has_unpublished_edits":null,"fork":{"id":"4070916f42b36baf","slug":"senate-elections-teplice-2020","title":"Senate elections Teplice 2020 - 2nd round","owner":{"id":"708d7da1c041c3c3","login":"michalskop","name":"Michal Škop"}},"stars":1,"starred":false,"owner":{"type":"team","id":"708d7da1c041c3c3","login":"michalskop","name":"Michal Škop","avatar_url":"https://avatars-next.observableusercontent.com/39ba5d7a328bf2076832e50130114e907e8202cbcb1eb0b12c09f8ba641563fb","tier":"starter_2024"},"version":944,"publish_version":944,"role":null,"authored":false,"authors":[{"type":"individual","id":"526f39c248664968","login":"michalskop","name":"Michal Škop","avatar_url":"https://avatars-next.observableusercontent.com/39ba5d7a328bf2076832e50130114e907e8202cbcb1eb0b12c09f8ba641563fb","tier":null}],"members":[{"type":"individual","id":"526f39c248664968","login":"michalskop","name":"Michal Škop","avatar_url":"https://avatars-next.observableusercontent.com/39ba5d7a328bf2076832e50130114e907e8202cbcb1eb0b12c09f8ba641563fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Presidential elections Poland 2020 - 1st round","cells":[{"id":0,"value":"md`# Presidential elections Poland 2020 - 1st round`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"rgbaScale = function(a, b) {\n let color = colorScale(a)\n let alpha = opacityScale(b)\n return color.replace(\"rgb\", \"rgba\").replace(\")\", \",\" + alpha.toString() + \")\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"opacityScale = d3.scaleLinear().domain([limitsDensity().min, limitsDensity().q25, limitsDensity().median, limitsDensity().q75, limitsDensity().max]).range([0.15, 0.3, 0.4, 0.5, 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"colorScale = d3.scaleLinear().domain([0.33, 0.5, 0.67]).range([colors[1], d3.interpolateRgb(colors[0], colors[1])(0.5), colors[0]]);\n// colorScale = d3.scaleLinear().domain([0.33, 0.5, 0.67]).range([\"rgba(255, 255, 0, 1)\", \"#666\", \"#00f\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"// colors = [\"green\", \"red\"]\ncolors = [\"blue\", \"orange\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"limitsDensity = function() {\n let arr = []\n data.features.forEach(feature => {\n arr.push(feature.properties.ALL_VOTERS / feature.properties.area * 1000000)\n })\n return {\n min: d3.min(arr),\n q25: d3.quantile(arr, 0.75),\n median: d3.median(arr),\n q75: d3.quantile(arr, 0.25),\n max: d3.max(arr)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"L = require('leaflet@1.6.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"myStyles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = FileAttachment(\"pl.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"