31:Ta13,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.2}px` }); yield container; // Now we create a map object and add a layer to it. let map = L.map(container).setView([49.54,13.12], 9); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Michal Škop | © OpenStreetMap contributors | RÚIAN'}).addTo(map); function setColor(feature) { return colorScale(show(feature)['a'] / (show(feature)['a'] + show(feature)['b'])) } function setOpacity(feature) { return opacityScale(show(feature)['total'] / 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 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, }); }; // http://bl.ocks.org/hpfast/2fb8de57c356d8c45ce511189eec5d6a L.TopoJSON = L.GeoJSON.extend({ addData: function (data) { var geojson, key; if (data.type === "Topology") { for (key in data.objects) { if (data.objects.hasOwnProperty(key)) { geojson = topojson.feature(data, data.objects[key]); L.GeoJSON.prototype.addData.call(this, geojson); } } return this; } L.GeoJSON.prototype.addData.call(this, data); return this; } }) L.topoJson = function (data, options) { return new L.TopoJSON(data, options); } const data_L = L.topoJson(data, { style: polystyle, onEachFeature: function (feature, layer) { onEachFeature(feature, layer) layer.bindTooltip(tooltipText(feature), { permanent: false }); } }) .addTo(map); }32:T74c,legends = { const svg = d3.select(DOM.svg(width, 150)) let titles = [data['elections'][e1]['candidates'][c1]['abbreviation'] + " více:"] if (comparisonVariant == 'two') { titles.push("Zhruba stejně:") titles.push(data['elections'][e2]['candidates'][c2]['abbreviation'] + " více:") } else { titles.push("Zhruba průměr:") titles.push(data['elections'][e1]['candidates'][c1]['abbreviation'] + " méně:") } svg.append("g") .attr("transform", "translate(100,10)") .attr("class", "legend") .append(() => legend({ color: d3.scaleOrdinal(["", " ", " ", " ", " "], [rgbaScale(0.66, limitsDensity().min), rgbaScale(0.66, limitsDensity().q25), rgbaScale(0.66, limitsDensity().median), rgbaScale(0.66, limitsDensity().q75), rgbaScale(0.66, limitsDensity().max)]), title: titles[0], tickSize: 0, width: 200, height: 48 })) svg.append("g") .attr("transform", "translate(100,50)") .append(() => legend({ color: d3.scaleOrdinal(["", " ", " ", " ", " "], [rgbaScale(0.5, limitsDensity().min), rgbaScale(0.5, limitsDensity().q25), rgbaScale(0.5, limitsDensity().median), rgbaScale(0.5, limitsDensity().q75), rgbaScale(0.5, limitsDensity().max)]), title: titles[1], tickSize: 0, width: 200, height: 48 })) svg.append("g") .attr("transform", "translate(100,90)") .append(() => legend({ color: d3.scaleOrdinal(["nízká hustota voličů", " ", " ", " ", "vysoká hustota voličů"], [rgbaScale(0.33, limitsDensity().min), rgbaScale(0.33, limitsDensity().q25), rgbaScale(0.33, limitsDensity().median), rgbaScale(0.33, limitsDensity().q75), rgbaScale(0.33, limitsDensity().max)]), title: titles[2], tickSize: 0, width: 200, height: 48 })) return svg.node() }33:[{"id":"00956b814cf24c0ec50628db2b072fcc49a7edd28590ce0fb297118b303b3288ac51c32d5552bf03f7b199f3eb62c104e1cadab62ac15fc73a37dbd2148ee677","href":"https://static.observableusercontent.com/files/00956b814cf24c0ec50628db2b072fcc49a7edd28590ce0fb297118b303b3288ac51c32d5552bf03f7b199f3eb62c104e1cadab62ac15fc73a37dbd2148ee677","name":"pl.json","type":"application/json","lastModified":1594084820950.365,"size":3003872}] 2f:{"title":"🐫 Plzeňský kraj","cells":[{"id":0,"value":"md`# 🐫 Plzeňský kraj`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md `## ------ Začátek nastavování ------\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof comparisonVariant = radio({\n title: 'Varianta porovnání',\n description: 'Lze porovnat různé strany (v různých volbách), nebo jednu stranu vůči svému průměrnému zisku (v takovém případě se nastavení Volby 2 a Strany 2 nepoužijí)',\n options: [\n { label: 'Jedna strana vs. druhá strana', value: 'two'},\n { label: 'Jedna strana vs. svůj průměr (v obvodu)', value: 'one'}\n ],\n value: 'two'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof e1 = radio({\n title: 'Volby 1',\n options: elections(),\n value: elections()[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof c1 = radio({\n title: 'Strany / kandidáti 1',\n options: candidates(e1),\n value: candidates(e1)[0]['value']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof e2 = radio({\n title: 'Volby 2',\n options: elections(),\n value: elections()[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof c2 = radio({\n title: 'Strany / kandidáti 2',\n options: candidates(e2),\n value: candidates(e2)[1]['value']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"viewof colorVariant = radio({\n title: 'Varianta barev',\n options: [\n { label: 'Barvy stran', value: 'parties'},\n { label: 'Modrá - žlutá', value: 'blue-yellow'},\n { label: 'Zelená - červená', value: 'green-red'}\n ],\n value: 'parties'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md `## ------ Konec nastavování ------\n...níž už jsou jen technický věci...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"tooltipText = function(feature) {\n let aPerc = (Math.round(show(feature)['a'] / feature['properties']['elections'][e1]['statistics']['valid_votes'] * 1000) / 10).toString() + \"%\"\n let bPerc = (Math.round(show(feature)['b'] / feature['properties']['elections'][e2]['statistics']['valid_votes'] * 1000) / 10).toString() + \"%\"\n let header = \"\" + feature.properties.place + \" \" + feature.properties.station + \"
\"\n let aText = data['elections'][e1]['candidates'][c1]['abbreviation'] + \": \" + show(feature)['a'].toString() + \" \" + aPerc + \"
\"\n let bText = ''\n if (comparisonVariant == 'two') {\n bText = data['elections'][e2]['candidates'][c2]['abbreviation'] + \": \" + show(feature)['b'].toString() + \" \" + bPerc + \"\"\n } else {\n bText = 'Průměr: ' + show(feature)['b'].toString() + \" \" + bPerc + \"\"\n }\n return header + aText + bText \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"colors = getColors()","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"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"},{"id":50,"value":"getColors = function() {\n if (colorVariant == 'parties') {\n return [data['elections'][e1]['candidates'][c1]['color'], data['elections'][e2]['candidates'][c2]['color']]\n }\n if (colorVariant == 'blue-yellow') {\n return [\"blue\", \"yellow\"]\n }\n if (colorVariant == 'green-red') {\n return [\"green\", \"red\"]\n }\n return [\"blue\", \"yellow\"]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"colorScale = d3.scaleLinear().domain([0.33, 0.5, 0.67]).range([colors[1], d3.interpolateRgb(colors[0], colors[1])(0.5), colors[0]]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"opacityScale = d3.scaleLinear().domain([limitsDensity().min, limitsDensity().q25, limitsDensity().median, limitsDensity().q75, limitsDensity().max]).range([0.1, 0.2, 0.3, 0.5, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"limitsDensity = function() {\n let arr = []\n data.objects.tracts.geometries.forEach(feature => {\n arr.push(parseFloat(show(feature).total / feature.properties.area * 1000000))\n })\n arr.sort(function(a, b) { return a - b })\n let item = {\n min: d3.min(arr),\n q25: d3.quantile(arr, 0.25),\n median: d3.median(arr),\n q75: d3.quantile(arr, 0.75),\n max: d3.max(arr)\n }\n return item\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"show = function(feature) {\n let item = {\n a: feature.properties.elections[e1].results[c1],\n }\n if (comparisonVariant == 'two') {\n item.b = feature.properties.elections[e2].results[c2]\n } else {\n item.b = Math.round(data.elections[e1].results[c1] / data.elections[e1].statistics['valid_votes'] * feature.properties.elections[e1].statistics['valid_votes'] * 10) / 10\n }\n if (typeof item.a == 'undefined') {item.a = 0}\n if (typeof item.b == 'undefined') {item.b = 0}\n item.total = item.a + item.b\n return item\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"candidates = function(e) {\n let arr = []\n for (let k in data.elections[e].results) {\n let item = data.elections[e].candidates[k]\n item['value'] = k\n item['label'] = item['abbreviation']\n item['result'] = data.elections[e].results[k]\n arr.push(item)\n }\n arr.sort(function(a, b) {\n return b.result - a.result\n })\n return arr\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"elections = function() {\n let arr = []\n for (let k in data.elections) {\n arr.push(k)\n }\n return arr\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"L = require('leaflet@1.6.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"myStyles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"data = FileAttachment(\"pl.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"topojson = require('topojson@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}