2a:null 2b:["$","title",null,{"children":"Senate elections Teplice 2020 - 2nd round | Michal Škop | Observable"}] 30:T14c7,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.3}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([50.61,13.8237], 11); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', { attribution: 'Michal Škop | © OpenStreetMap contributors' }).addTo(map); function setColor(feature) { return colorScale(feature.properties.VOTES_1 / (feature.properties.VOTES_1 + feature.properties.VOTES_2)) } function setOpacity(feature) { // console.log(opacityScale((feature.properties.VOTES_1 + feature.properties.VOTES_2) / feature.properties.AREA * 1000000)) return opacityScale((feature.properties.VOTES_1 + feature.properties.VOTES_2) / feature.properties.AREA * 1000000) } function polystyle(feature) { return { fillColor: setColor(feature), opacity: 0, weight: 0, color: '#fff', //Outline color fillOpacity: setOpacity(feature) } } 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; layer.setStyle({ // highlight the feature weight: 2, color: '#fff', 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) { return "" + feature.properties.MUNI + " " + feature.properties.STATION_CO + "
" + "Hanza: " + feature.properties.VOTES_1.toString() + "
" + "Bergman: " + feature.properties.VOTES_2.toString() } const data_LM = L.geoJson(data_municipalities, { style: polystyleMunicipalities // onEachFeature: function (feature, layer) { // onEachFeature(feature, layer) // layer.bindTooltip(tooltipText(feature), { permanent: false }); // } }) .addTo(map); 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() }31:T6e5,// https://observablehq.com/@d3/color-legend legends = { const svg = d3.select(DOM.svg(width, 150)) svg.append("g") .attr("transform", "translate(500,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: "Hanza - výrazně vítězil:", tickSize: 0, width: 200, height: 48 })) svg.append("g") .attr("transform", "translate(500,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: "Oba zhruba stejně hlasů:", tickSize: 0, width: 200, height: 48 })) svg.append("g") .attr("transform", "translate(500,90)") .append(() => legend({ color: d3.scaleOrdinal(["řídce obydleno", " ", " ", " ", "hustě obydleno"], [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: "Bergman - výrazně vítězil:", tickSize: 0, width: 200, height: 48 })) return svg.node() }32:[{"id":"9dbf38d60444eebf0dc831cc9f9fee8cdba8e90867872a8077c449b89a1a468864ecb09fbfc9294ed68b85c943e5a1a1f3a7116b66973af86944c225c22c1e22","href":"https://static.observableusercontent.com/files/9dbf38d60444eebf0dc831cc9f9fee8cdba8e90867872a8077c449b89a1a468864ecb09fbfc9294ed68b85c943e5a1a1f3a7116b66973af86944c225c22c1e22","name":"teplice_32.geojson","type":"application/geo+json","lastModified":1593040549009.391,"size":1873112},{"id":"c578e2bb92ec781bb2f2d7402ad3bc0c923219a11d2e5e3e6c8f44b0e3a8b69d86ba5374ef3f685789259433c2ce366fb485bff28bbd2f464cfb9356940caf9e","href":"https://static.observableusercontent.com/files/c578e2bb92ec781bb2f2d7402ad3bc0c923219a11d2e5e3e6c8f44b0e3a8b69d86ba5374ef3f685789259433c2ce366fb485bff28bbd2f464cfb9356940caf9e","name":"teplice_32_municipalities.geojson","type":"application/geo+json","lastModified":1593159342046.984,"size":1442207}] 2e:{"id":"4070916f42b36baf","slug":"senate-elections-teplice-2020","title":"Senate elections Teplice 2020 - 2nd round","thumbnail":"9f04cd935d14581bce6edc04393b760adfff9071c6d6700b2e10e61bf208af38","access_level":"public","create_time":"$D2020-06-24T23:14:47.602Z","update_time":"$D2020-06-26T19:36:33.922Z","view_time":null,"first_public_time":"$D2020-06-25T01:12:41.167Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"708d7da1c041c3c3","login":"michalskop","name":"Michal Škop","avatar_url":"https://avatars-next.observableusercontent.com/39ba5d7a328bf2076832e50130114e907e8202cbcb1eb0b12c09f8ba641563fb","tier":"starter_2024"},"version":869,"publish_version":869,"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,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Senate elections Teplice 2020 - 2nd round","cells":[{"id":0,"value":"md`# Senate elections Teplice 2020 - 2nd round`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":657,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":105,"value":"opacityScale = d3.scaleLinear().domain([limitsDensity().min, limitsDensity().median, limitsDensity().max]).range([0.15, 0.575, 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":821,"value":"// colors = [\"green\", \"red\"]\ncolors = [\"blue\", \"yellow\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":781,"value":"limitsDensity = function() {\n let arr = []\n data.features.forEach(feature => {\n arr.push(feature.properties.VOTES_1 + feature.properties.VOTES_2) / 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"},{"id":14,"value":"L = require('leaflet@1.6.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"myStyles = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"data = FileAttachment(\"teplice_32.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":723,"value":"data_municipalities = FileAttachment(\"teplice_32_municipalities.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"