A thriving data ecosystem
A proof of concept for the Truth Within Statistics Hackdays 2018 that combines data from the Canton of Zurich with metadata from opendata.swiss and geodata from swisstopo, displays the data on a map from OpenStreetMap and enriches it with information from wikipedia.
Select the Open Data Dataset from KantonZuerich@opendata.swiss. All Datasets listed here have a standardized structure.
viewof ind = html`<select>${ids.map(id => ` <option value=${id.nr}>${id.title}</option>`).join("")} </select>`
Description: * *
viewof jahr = html`<select>${years.map(year => ` <option value=${year}>${year}</option>`).join("")} </select>`
{ let container = DOM.element('div', {id:'map', style: `width:${width}px;height:${width/1.6}px` }); yield container; const map = L.map('map').addControl(new customControl1()) console.log('mapsetview') map.setView([latOrg, lngOrg], zoomOrg) var svgLayer = L.svg(); svgLayer.addTo(map); var svg = d3.select("#map").select("svg").style('pointer-events', 'auto'); var g = d3.select("#map").select("svg").select('g'); g.attr("class", ' leaflet-zoom-hide'); //OpenStreetMap_BlackAndWhite L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map); function projectPoint(x, y) { var point = map.latLngToLayerPoint(new L.LatLng(y, x)); this.stream.point(point.x, point.y); } var transform = d3.geoTransform({point: projectPoint}) var path = d3.geoPath().projection(transform) let featureElement = g.selectAll('path.gemeinde') .data(mapData) .enter() .append("path") .attr("d", path) .attr('class', 'gemeinde') .attr('cursor', 'pointer') .style('stroke-width', 0.5) .style('stroke', 'white') .style('fill-opacity', 0.7) .style('fill', function(d) { return colorScale(d.properties.value); }) .on('mouseover', function(d) { console.log(d.properties.name); var bBox = d3.select(this).node().getBBox(); g.append('text') .attr('class', 'mouse') .style('pointer-events', 'none') .attr('x', bBox.x+bBox.width/2) .attr('y', bBox.y+bBox.height/2) .text(d.properties.name+': '+ch_DE.format(',')(d.properties.value)); //.text(d.properties.name+': '+d.properties.population); }) .on('mouseout', function() { //undo what ever you wanted to do with your Map-Data on Mouse-Out d3.selectAll('.mouse').remove(); }) .on('click', function(d) { var bBox = d3.select(this).node().getBBox(); d3.selectAll('.image').remove(); if (d.properties.image) { var bilder = g.append('image') .attr('class', 'image') .style('pointer-events', 'none') .attr('x', bBox.x+bBox.width/2 ) .attr('y',bBox.y+bBox.height/2 ) .attr('width', 100) .attr('height', 100) .attr('xlink:href', d.properties.image); } else { g.append('text') .attr('class', 'mouse') .style('pointer-events', 'none') .attr('x', bBox.x+bBox.width/2) .attr('y', bBox.y+bBox.height/2) //.text(d.properties.name+': '+chFormat.format(',')(d.properties.population)); .text('No image to display'); } }) map.on('zoom', update) function update() { d3.selectAll('.image').remove(); console.log('update') featureElement.attr('d', path); } //update() map.on("zoomend", function(){ let zoomLev = map.getZoom(); }) function resetZoom() { map.setView([latOrg, lngOrg], zoomOrg); d3.selectAll('.image').remove(); //d3.selectAll('.gemeinde').style('fill-opacity', 0.3); } }
To display the image of a municipality, click on it on the map
How to do it
First we load the metadata over the api of opendata.swiss. Let us write a little function , that we can use in all our projects: (it is more complicated than expected, talk to me, if you want to know why ;) )
function getMetadata(indicator) { let id = ids.filter(function (el) { return el.nr == indicator }) let tr = {"ä":"a","ü":"u", "ö":"o", "ß":"ss","Ä":"A", "Ü":"U", "Ö":"O" } function replaceUmlaute(s) { return s.replace(/[äöüßÄÖÜ]/g, function($0) { return tr[$0] }) } String.prototype.replaceAll = function(search, replacement) { var target = this; return target.split(search).join(replacement); }; //var odswissId = id[0].title.replace(/[^a-zA-Z0-9]/g,'') var odswissId = replaceUmlaute(id[0].title).replaceAll(' ','-').replace(/[&\[\]\/\\#,+()$~%.'":*?<>{}]/g,'').replace(' ','').toLowerCase(); while (odswissId.substring(odswissId.length-1) == "-") { odswissId = odswissId.substring(0, odswissId.length-1); } console.log(odswissId) let link = "https://cors-anywhere.herokuapp.com/https://opendata.swiss/api/3/action/package_show?id="+odswissId console.log(link) const metadata = d3.json(link) //https://opendata.swiss/api/3/action/package_show?id= return metadata }
Now we use this function to get our Metadata:
metadata = getMetadata(ind)
Get the data as csv from the Statistical Office of the Canton of Zurich
openData = d3.dsv(";","https://cors-anywhere.herokuapp.com/http://www.web.statistik.zh.ch/ogd/data/KANTON_ZUERICH_"+ind+".csv")
We need to know, for which years we have data, because this depends on the data source. lets write a little function for this.
function getYears(data) { const years = [] let firstBFS = data[0].BFS_NR for(let i=0;i<data.length;i++) { if (data[i].BFS_NR == firstBFS) { years.push(data[i].INDIKATOR_JAHR) } } return years.sort(function(a, b){return b - a}); }
Now we can use this function, to get the available years for the selected indicator:
years = getYears(openData)
Next, calculate the extent (minimum and maximum) of the value that we want to visualize in order to compute a suitable colorscale.
valExt = d3.extent(openData, function(d) { return +d.INDIKATOR_VALUE; })
Based on this data, we compute a color-scale for the values we want to display.
colorScale = d3.scaleLinear() .domain([valExt[0],valExt[1]]) .range(['steelblue','tomato']) .interpolate(d3.interpolateLab)
Now we get the geodata from swisstopo and the images from Wikidata with a federated SPARQL-query.
We use the SPARQL-endpoint from geo.admin.ch
endPoint = "https://ld.geo.admin.ch/query"
The SPARQL-query looks like
query = "PREFIX schema: <http://schema.org/>"+ "PREFIX gn: <http://www.geonames.org/ontology#>"+ "PREFIX wdt: <http://www.wikidata.org/prop/direct/>"+ "PREFIX wd: <http://www.wikidata.org/entity/>"+ "PREFIX wikibase: <http://wikiba.se/ontology#>"+ "PREFIX geo: <http://www.opengis.net/ont/geosparql#>"+ "PREFIX dct: <http://purl.org/dc/terms/>"+ "PREFIX st: <https://ld.geo.admin.ch/def/>"+ "select ?Image ?Municipality ?Name ?Population ?bfs ?WKT "+ "where"+ "{"+ "?Municipality gn:featureCode gn:A.ADM3 ."+ "?Municipality schema:name ?Name ."+ "?Municipality gn:population ?Population ."+ "?Municipality st:bfsNumber ?bfs ."+ "?Municipality dct:issued ?Date ."+ "?Municipality gn:parentADM1 ?InCanton ."+ "?InCanton schema:name ?CantonName ."+ "?Municipality geo:hasGeometry ?Geometry ."+ "?Geometry geo:asWKT ?WKT ."+ "FILTER (?Date = '2017-01-01'^^xsd:date)"+ "FILTER (?CantonName = 'Zürich')"+ "{"+ "SELECT DISTINCT (xsd:integer(?bfsWD) AS ?bfs) ?WikidataURI ?Image WHERE {"+ "SERVICE <https://query.wikidata.org/bigdata/namespace/wdq/sparql>"+ "{"+ "?WikidataURI wdt:P771 ?bfsWD . "+ "?WikidataURI wdt:P31 wd:Q70208 . "+ "OPTIONAL { ?WikidataURI wdt:P18 ?Image. } ."+ "}"+ "}"+ "}"+ "}"
For a quick introduction to SPARQL, i recommend the Introduction to RDF & SPARQL from the European Data Portal.
Get the data and combine it with Open Data from the Canton of Zurich. As URI (Uniform Ressource Identifier), we use the «BFS-Nummer».
mapData = new Promise(resolve => { sp.sparql(endPoint, query).get(data => { let dataArr = [] for (let i=0;i<data.length;i++) { for (let j=0;j<openData.length;j++) { if (data[i].bfs.valueOf() == openData[j].BFS_NR && openData[j].INDIKATOR_JAHR == jahr) { let newObj = {} newObj.properties = {}; newObj.properties.municipality= data[i].Municipality; newObj.properties.value= openData[j].INDIKATOR_VALUE; newObj.properties.bfs= data[i].bfs.valueOf(); newObj.properties.name= data[i].Name; newObj.properties.image= data[i].Image; newObj.properties.population= data[i].Population.valueOf(); newObj.type = 'Feature'; let wkt = new wicket.Wkt(); wkt.read(data[i].WKT); newObj.geometry = wkt.toJson(); dataArr.push(newObj); //console.log(JSON.stringify(newData)); } } } resolve(dataArr) }); })
And we're done!
Some parameters
h = 650
latOrg = 47.43
lngOrg = 8.64
zoomOrg = 10
customControl1 = L.Control.extend({ options: { position: 'topright' }, onAdd: function (map) { let container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom'); container.innerHTML = 'Reset Zoom' container.style.backgroundColor = 'white'; container.style.padding = '5px'; container.onclick = function(){ map.setView([latOrg, lngOrg], zoomOrg); d3.selectAll('.image').remove(); } return container; } })
ids = [{nr:46,title:'15-Jahresverbrauch [%]'}, {nr:45,title:'15-Jahresverbrauch [ha]'}, {nr:450,title:'1-Personenhaushalte [Anz.]'}, {nr:451,title:'2-Personenhaushalte [Anz.]'}, {nr:452,title:'3-Personenhaushalte [Anz.]'}, {nr:454,title:'4-Personenhaushalte [Anz.]'}, {nr:456,title:'5-Personenhaushalte [Anz.]'}, {nr:458,title:'6 und mehr Personenhaushalte [Anz.]'}, {nr:542,title:'Aerzte [Anz.]'}, {nr:543,title:'Aerzte [pro 1000 Einw.]'}, {nr:95,title:'Altersquotient [%]'}, {nr:134,title:'Altpapiermengen [Tonnen]'}, {nr:360,title:'Anteil 1 Zi.-Wohnungen [%]'}, {nr:470,title:'Anteil 1-Personenhaushalte [%]'}, {nr:361,title:'Anteil 2 Zi.-Wohnungen [%]'}, {nr:471,title:'Anteil 2-Personenhaushalte [%]'}, {nr:362,title:'Anteil 3 Zi.-Wohnungen [%]'}, {nr:472,title:'Anteil 3-Personenhaushalte [%]'}, {nr:363,title:'Anteil 4 Zi.-Wohnungen [%]'}, {nr:496,title:'Anteil 4-Personenhaushalte [%]'}, {nr:364,title:'Anteil 5 Zi.-Wohnungen [%]'}, {nr:497,title:'Anteil 5-Personenhaushalte [%]'}, {nr:498,title:'Anteil 6 und mehr Personenhaushalte [%]'}, {nr:365,title:'Anteil 6+ Zi.-Wohnungen [%]'}, {nr:369,title:'Anteil EFH am Wohnungsbestand [%]'}, {nr:185,title:'Anteil Gewässerfläche [%]'}, {nr:821,title:'Anteil GK A [%]'}, {nr:822,title:'Anteil GK B [%]'}, {nr:823,title:'Anteil GK C [%]'}, {nr:824,title:'Anteil GK D [%]'}, {nr:825,title:'Anteil GK E [%]'}, {nr:826,title:'Anteil GK F [%]'}, {nr:290,title:'Anteil Grundsteuern am Steuerertrag [%]'}, {nr:293,title:'Anteil jur. Pers. an allg. Gemeindesteuern [%]'}, {nr:291,title:'Anteil Kirchgemeinden an allg. Gemeindesteuern [%]'}, {nr:183,title:'Anteil Landwirtschaftsfläche [%]'}, {nr:294,title:'Anteil natürl. Pers. an allg. Gemeindesteuern [%]'}, {nr:827,title:'Anteil ohne GK [%]'}, {nr:292,title:'Anteil Pol./Schulgem. an allg. Gemeindesteuern [%]'}, {nr:186,title:'Anteil Siedlungsfläche [%]'}, {nr:261,title:'Anteil Teilzeitbeschäftigte Landwirtschaft [%]'}, {nr:459,title:'Anteil unproduktive Fläche [%]'}, {nr:187,title:'Anteil Verkehrsfläche [%]'}, {nr:262,title:'Anteil Vollzeitbeschäftigte Landwirtschaft [%]'}, {nr:184,title:'Anteil Waldfläche [%]'}, {nr:546,title:'Apotheken [Anz.]'}, {nr:547,title:'Apotheken [pro 1000 Einw.]'}, {nr:107,title:'Arbeitslose [Anz.]'}, {nr:380,title:'Arbeitslosenanteil an Bevölkerung 15-64 Jahre [%]'}, {nr:581,title:'Arbeitsstätten im Primärsektor [Anz.]'}, {nr:582,title:'Arbeitsstätten im Sekundärsektor [Anz.]'}, {nr:583,title:'Arbeitsstätten im Tertiärsektor [Anz.]'}, {nr:205,title:'Ausländeranteil [%]'}, {nr:171,title:'Bauinv. Dienstl. 5 Jahre [Fr./Einw.]'}, {nr:172,title:'Bauinv. EFH 5 Jahre [Fr./Einw.]'}, {nr:173,title:'Bauinv. Industr./Lager 5 Jahre [Fr./Einw.]'}, {nr:174,title:'Bauinv. Landwirtschaft 5 Jahre [Fr./Einw.]'}, {nr:175,title:'Bauinv. MFH 5 Jahre [Fr./Einw.]'}, {nr:179,title:'Bauinv. ÖV, Kommunik. 5 Jahre [Fr./Einw.]'}, {nr:180,title:'Bauinv. Spital, Kultur usw. 5 J. [Fr./Einw.]'}, {nr:176,title:'Bauinv. Strassen, PP 5 Jahre [Fr./Einw.]'}, {nr:177,title:'Bauinv. Ver-/Entsorg. 5 Jahre [Fr./Einw.]'}, {nr:178,title:'Bauinv. Wohnen [Fr./Einw.]'}, {nr:181,title:'Bauinvestitionen [Fr./Einw.]'}, {nr:182,title:'Bauinvestitionen [Mio.Fr.]'}, {nr:199,title:'Baulandpreis (Median) [Fr./m2]'}, {nr:477,title:'Baulandpreis Modell (Median) [Fr./m2]'}, {nr:47,title:'Bauzonen [ha]'}, {nr:49,title:'Bauzonen nicht überbaut [%]'}, {nr:48,title:'Bauzonen nicht überbaut [ha]'}, {nr:52,title:'Bauzonen überbaut [%]'}, {nr:51,title:'Bauzonen überbaut [ha]'}, {nr:50,title:'Bauzonen überbaut pro Kopf [m2/Einw.]'}, {nr:300,title:'Beschäftigte im Gastgewerbe: Anteil [%]'}, {nr:588,title:'Beschäftigte im Primärsektor [Anz.]'}, {nr:589,title:'Beschäftigte im Sekundärsektor [Anz.]'}, {nr:590,title:'Beschäftigte im Tertiärsektor [Anz.]'}, {nr:264,title:'Beschäftigte Landwirtschaft [Pers.]'}, {nr:133,title:'Bevölkerung [Pers.]'}, {nr:81,title:'Bevölkerung: Anteil 0-14-Jährige [%]'}, {nr:83,title:'Bevölkerung: Anteil 15-19-Jährige [%]'}, {nr:85,title:'Bevölkerung: Anteil 20-39-Jährige [%]'}, {nr:87,title:'Bevölkerung: Anteil 40-64-Jährige [%]'}, {nr:89,title:'Bevölkerung: Anteil 65-79-Jährige [%]'}, {nr:91,title:'Bevölkerung: Anteil 80 u.m.-Jährige [%]'}, {nr:809,title:'Bevölkerung: Durchschnittsalter [Jahre]'}, {nr:99,title:'Bevölkerung: Frauen [Pers.]'}, {nr:206,title:'Bevölkerung: Frauenanteil [%]'}, {nr:204,title:'Bevölkerung: Heimat Ausland [Pers.]'}, {nr:805,title:'Bevölkerung: Heimat Schweiz [Pers.]'}, {nr:406,title:'Bevölkerung: katholisch [Pers.]'}, {nr:100,title:'Bevölkerung: Männer [Pers.]'}, {nr:103,title:'Bevölkerung: Männeranteil [%]'}, {nr:405,title:'Bevölkerung: reformiert [Pers.]'}, {nr:408,title:'Bevölkerung: übrige/andere/ohne Konfession [Pers.]'}, {nr:460,title:'Bevölkerungsdichte [Einw./km2]'}, {nr:201,title:'Bevölkerungszunahme 1 Jahr [%]'}, {nr:200,title:'Bevölkerungszunahme 1 Jahr [Pers.]'}, {nr:203,title:'Bevölkerungszunahme 5 Jahre [%]'}, {nr:202,title:'Bevölkerungszunahme 5 Jahre [Pers.]'}, {nr:815,title:'Bezügerquote der bedarfsabh. Sozialleistungen [%]'}, {nr:412,title:'Bruttoinvestitionen [Fr./Einw.]'}, {nr:413,title:'Bruttoverschuldungsanteil [%]'}, {nr:449,title:'Durchschnittliche Haushaltsgrösse [Pers.]'}, {nr:379,title:'EFH-Bestand [Whg.]'}, {nr:414,title:'Eigenkapital [Fr./Einw.]'}, {nr:280,title:'Eigenkapital steuerpfl. jur. Pers. [Mio.Fr.]'}, {nr:385,title:'Erschliessung durch Bus [% der Einw.]'}, {nr:386,title:'Erschliessung durch S-Bahn [% der Einw.]'}, {nr:401,title:'Erschliessung durch S-Bahn+Bus [% der Einw.]'}, {nr:828,title:'Ertrags- (+) / Aufwandüberschuss (-) [Fr./Einw.]'}, {nr:258,title:'Erwerb des Schweizer Bürgerrechts [Pers.]'}, {nr:259,title:'Erwerb des Schweizer Bürgerrechts [pro 1000 Einw.]'}, {nr:415,title:'Finanzvermögen [Fr./Einw.]'}, {nr:44,title:'Fläche [ha]'}, {nr:416,title:'Fremdkapital [Fr./Einw.]'}, {nr:157,title:'Geb.Vol. Dienstleistungen: Anteil [%]'}, {nr:158,title:'Geb.Vol. Dienstleistungen: Zunahme [%]'}, {nr:159,title:'Geb.Vol. Industrie/Lager: Anteil [%]'}, {nr:160,title:'Geb.Vol. Industrie/Lager: Zunahme [%]'}, {nr:161,title:'Geb.Vol. Infrastruktur: Anteil [%]'}, {nr:162,title:'Geb.Vol. Infrastruktur: Zunahme [%]'}, {nr:163,title:'Geb.Vol. Landwirtschaft: Anteil [%]'}, {nr:164,title:'Geb.Vol. Landwirtschaft: Zunahme [%]'}, {nr:165,title:'Geb.Vol. Nebengebäude: Anteil [%]'}, {nr:166,title:'Geb.Vol. Nebengebäude: Zunahme [%]'}, {nr:167,title:'Geb.Vol. Wohnen: Anteil [%]'}, {nr:168,title:'Geb.Vol. Wohnen: Zunahme [%]'}, {nr:169,title:'Gebäudevolumen [1000 m3]'}, {nr:170,title:'Gebäudevolumen: Zunahme [%]'}, {nr:96,title:'Geburten [Pers.]'}, {nr:98,title:'Geburtenrate (5-J.-mittel) [pro 1000 Einw.]'}, {nr:97,title:'Geburtenrate [pro 1000 Einw.]'}, {nr:105,title:'Geburtenüberschuss 5-J.-mittel [pro 1000 Einw.]'}, {nr:391,title:'Gemeindebeitrag an ZVV [1000 Fr.]'}, {nr:390,title:'Gemeindebeitrag an ZVV [Fr./Einw.]'}, {nr:65,title:'Gesamtsteuerfuss (ohne Kirchen) [%]'}, {nr:587,title:'Grosse Betriebe (250+ VZÄ) [Anz.]'}, {nr:271,title:'Hauptberufliche Landwirtschaftsbetriebe [Anz.]'}, {nr:445,title:'Heiraten [Anz.]'}, {nr:446,title:'Heiraten [pro 1000 Einw.]'}, {nr:43,title:'Höhe [m.ü.M.]'}, {nr:301,title:'Hotelbetten [Anz.]'}, {nr:302,title:'Hotelbetten pro 1000 Einwohner [Anz.]'}, {nr:540,title:'Hotelbetten pro Hotel [Anz.]'}, {nr:303,title:'Hotels [Anz.]'}, {nr:418,title:'Investitionsanteil [%]'}, {nr:94,title:'Jugendquotient [%]'}, {nr:419,title:'Kapitaldienstanteil [%]'}, {nr:135,title:'Kehrichtmengen [Tonnen]'}, {nr:585,title:'Kleine Betriebe (10-49 VZÄ) [Anz.]'}, {nr:436,title:'KRW Wähleranteil AL [%]'}, {nr:444,title:'KRW Wähleranteil BDP [%]'}, {nr:114,title:'KRW Wähleranteil CVP [%]'}, {nr:437,title:'KRW Wähleranteil EDU [%]'}, {nr:115,title:'KRW Wähleranteil EVP [%]'}, {nr:116,title:'KRW Wähleranteil FDP [%]'}, {nr:438,title:'KRW Wähleranteil GLP [%]'}, {nr:117,title:'KRW Wähleranteil GP [%]'}, {nr:439,title:'KRW Wähleranteil SD [%]'}, {nr:118,title:'KRW Wähleranteil SP [%]'}, {nr:119,title:'KRW Wähleranteil SVP [%]'}, {nr:266,title:'Kühe [Anz.]'}, {nr:267,title:'Landwirtschaftliche Nutzfläche [ha]'}, {nr:265,title:'Landwirtschaftsbetriebe [Anz.]'}, {nr:381,title:'Leerwohnungen Total [Anz.]'}, {nr:373,title:'Leerwohnungsquote [%]'}, {nr:584,title:'Mikrobetriebe (0-9 VZÄ) [Anz.]'}, {nr:586,title:'Mittlere Betriebe (50-249 VZÄ) [Anz.]'}, {nr:481,title:'MIV-Anteil (Modal Split) [%]'}, {nr:495,title:'MIV-Wege Quell-, Ziel- und Binnenverkehr [Anz.]'}, {nr:393,title:'Motorfahrzeuge [Anz.]'}, {nr:394,title:'Motorfahrzeuge pro 1000 Einwohner [Anz.]'}, {nr:395,title:'Motorräder [Anz.]'}, {nr:396,title:'Motorräder pro 1000 Einwohner [Anz.]'}, {nr:420,title:'Nettoaufwand Behörden und Verwaltung [Fr./Einw.]'}, {nr:421,title:'Nettoaufwand Bildung [Fr./Einw.]'}, {nr:422,title:'Nettoaufwand Finanzen und Steuern [Fr./Einw.]'}, {nr:423,title:'Nettoaufwand Gesundheit [Fr./Einw.]'}, {nr:424,title:'Nettoaufwand Kultur und Freizeit [Fr./Einw.]'}, {nr:425,title:'Nettoaufwand Rechtsschutz und Sicherheit [Fr./Einw.]'}, {nr:426,title:'Nettoaufwand Soziale Wohlfahrt [Fr./Einw.]'}, {nr:427,title:'Nettoaufwand Umwelt und Raumordnung [Fr./Einw.]'}, {nr:428,title:'Nettoaufwand Verkehr [Fr./Einw.]'}, {nr:429,title:'Nettoaufwand Volkswirtschaft [Fr./Einw.]'}, {nr:430,title:'Nettoinvestitionen [Fr./Einw.]'}, {nr:431,title:'Nettovermögen [Fr./Einw.]'}, {nr:354,title:'Neu gegründete Unternehmen Sektor 2 [Anz.]'}, {nr:355,title:'Neu gegründete Unternehmen Sektor 3 [Anz.]'}, {nr:353,title:'Neu gegründete Unternehmen Total [Anz.]'}, {nr:371,title:'Neuerstellte EFH [Whg.]'}, {nr:372,title:'Neuerstellte MFH-Wohnungen [Whg.]'}, {nr:370,title:'Neuerstellte Wohnungen [Whg.]'}, {nr:374,title:'Neuerstellte Wohnungen letzte 5 Jahre [%]'}, {nr:440,title:'NRW Wähleranteil AL [%]'}, {nr:549,title:'NRW Wähleranteil BDP [%]'}, {nr:120,title:'NRW Wähleranteil CVP [%]'}, {nr:441,title:'NRW Wähleranteil EDU [%]'}, {nr:121,title:'NRW Wähleranteil EVP [%]'}, {nr:122,title:'NRW Wähleranteil FDP [%]'}, {nr:442,title:'NRW Wähleranteil GLP [%]'}, {nr:123,title:'NRW Wähleranteil GP [%]'}, {nr:443,title:'NRW Wähleranteil SD [%]'}, {nr:124,title:'NRW Wähleranteil SP [%]'}, {nr:125,title:'NRW Wähleranteil SVP [%]'}, {nr:281,title:'Ø Eigenkapital steuerpfl. jur. Pers. [1000 Fr.]'}, {nr:278,title:'Ø Reingewinn steuerpfl. jur. Pers. [Fr.]'}, {nr:282,title:'Ø steuerbares Einkommen natürliche Pers. [Fr.]'}, {nr:286,title:'Ø steuerbares Vermögen natürliche Pers. [1000 Fr.]'}, {nr:480,title:'ÖV-Anteil (Modal Split) [%]'}, {nr:492,title:'ÖV-Wege Quell-, Ziel- und Binnenverkehr [Anz.]'}, {nr:398,title:'Personenwagen [Anz.]'}, {nr:399,title:'Personenwagen pro 1000 Einwohner [Anz.]'}, {nr:455,title:'Privathaushalte Total [Anz.]'}, {nr:279,title:'Reingewinn juristische Personen [Mio.Fr.]'}, {nr:304,title:'Restaurants [Anz.]'}, {nr:305,title:'Restaurants pro 1000 Einwohner [Anz.]'}, {nr:268,title:'Rinderviehbestand [Anz.]'}, {nr:269,title:'Schafe [Anz.]'}, {nr:447,title:'Scheidungen [Anz.]'}, {nr:448,title:'Scheidungen [pro 1000 Einw.]'}, {nr:141,title:'Schül. Berufsschule [Anz.]'}, {nr:142,title:'Schül. Berufsschule [pro 1000 Einw.]'}, {nr:152,title:'Schül. höh. Berufsausbild. [pro 1000 Einw.]'}, {nr:151,title:'Schül. höh. Berufsausbildung [Anz.]'}, {nr:143,title:'Schül. Kindergarten [Anz.]'}, {nr:144,title:'Schül. Kindergarten [pro 1000 Einw.]'}, {nr:145,title:'Schül. Mittelschule [Anz.]'}, {nr:146,title:'Schül. Mittelschule [pro 1000 Einw.]'}, {nr:147,title:'Schül. Oberstufe [Anz.]'}, {nr:148,title:'Schül. Oberstufe [pro 1000 Einw.]'}, {nr:149,title:'Schül. Primarschule [Anz.]'}, {nr:150,title:'Schül. Primarschule [pro 1000 Einw.]'}, {nr:464,title:'Schüler Sekundarstufe I [Pers. pro 1000 Einw.]'}, {nr:465,title:'Schüler Sekundarstufe II [Pers. pro 1000 Einw.]'}, {nr:466,title:'Schüler Tertiärstufe [Pers. pro 1000 Einw.]'}, {nr:270,title:'Schweine [Anz.]'}, {nr:432,title:'Selbstfinanzierung [Fr./Einw.]'}, {nr:433,title:'Selbstfinanzierungsanteil [%]'}, {nr:434,title:'Selbstfinanzierungsgrad [%]'}, {nr:541,title:'Sozialhilfequote [%]'}, {nr:101,title:'Sterbefälle [Pers.]'}, {nr:156,title:'Sterberate (5-J.-mittel) [pro 1000 Einw.]'}, {nr:102,title:'Sterberate [pro 1000 Einw.]'}, {nr:315,title:'Steuerb. Einkommen natürl. Pers. 25%-Quantil [Fr.]'}, {nr:318,title:'Steuerb. Einkommen natürl. Pers. 75%-Quantil [Fr.]'}, {nr:317,title:'Steuerb. Einkommen natürl. Pers. Durchschn. [Fr.]'}, {nr:316,title:'Steuerb. Einkommen natürl. Pers. Median [Fr.]'}, {nr:319,title:'Steuerb. Vermögen natürl. Pers. 25%-Quantil [Fr.]'}, {nr:322,title:'Steuerb. Vermögen natürl. Pers. 75%-Quantil [Fr.]'}, {nr:321,title:'Steuerb. Vermögen natürl. Pers. Durchschn. [Fr.]'}, {nr:320,title:'Steuerb. Vermögen natürl. Pers. Median [Fr.]'}, {nr:283,title:'Steuerbares Einkommen natürliche Pers. [Mio.Fr.]'}, {nr:284,title:'Steuerbares Vermögen natürliche Pers. [Mio.Fr.]'}, {nr:314,title:'Steuerertrag allgemeine Gemeindesteuern [Mio.Fr.]'}, {nr:295,title:'Steuerertrag Grundsteuern [Mio.Fr.]'}, {nr:296,title:'Steuerertrag Kirchgemeinden [Mio.Fr.]'}, {nr:297,title:'Steuerertrag Politische/Schulgemeinde [Mio.Fr.]'}, {nr:287,title:'Steuerertrag Total [Mio.Fr.]'}, {nr:298,title:'Steuerertrag von juristischen Personen [Mio.Fr.]'}, {nr:299,title:'Steuerertrag von natürlichen Personen [Mio.Fr.]'}, {nr:68,title:'Steuerfuss juristische Personen [%]'}, {nr:375,title:'Steuerkraft (arith. Mittel 3 Jahre) [Mio.Fr.]'}, {nr:376,title:'Steuerkraft [Mio.Fr.]'}, {nr:288,title:'Steuerkraft ber. (arith. Mittel 3 Jahre) [Mio.Fr.]'}, {nr:273,title:'Steuerkraft berichtigt [Mio.Fr.]'}, {nr:274,title:'Steuerkraft berichtigt pro Kopf [Fr.]'}, {nr:378,title:'Steuerkraft pro Kopf [Fr.]'}, {nr:462,title:'Steuerpflichtige juristische Personen [Anz.]'}, {nr:277,title:'Steuerpflichtige natürliche Personen [Anz.]'}, {nr:153,title:'Studierende Fachhochschule [Anz.]'}, {nr:154,title:'Studierende Fachhochschule [pro 1000 Einw.]'}, {nr:594,title:'Total Arbeitsstätten [Anz.]'}, {nr:595,title:'Total Beschäftigte [Anz.]'}, {nr:356,title:'Total geschaffene Stellen, Beschäftigte [Anz.]'}, {nr:596,title:'Total VZÄ [Anz.]'}, {nr:820,title:'Unfälle [pro 1000 Einw.]'}, {nr:188,title:'Verkäufe EFH [Anz.]'}, {nr:191,title:'Verkäufe MFH [Anz.]'}, {nr:193,title:'Verkäufe Stockwerkeigentum [Anz.]'}, {nr:402,title:'Verkäufe von unbebautem Land [Anz.]'}, {nr:138,title:'Verpackungsglasmengen [Tonnen]'}, {nr:591,title:'VZÄ im Primärsektor [Anz.]'}, {nr:592,title:'VZÄ im Sekundärsektor [Anz.]'}, {nr:593,title:'VZÄ im Tertiärsektor [Anz.]'}, {nr:803,title:'Wahlbeteiligung Kantonsrat [%]'}, {nr:804,title:'Wahlbeteiligung Nationalrat [%]'}, {nr:104,title:'Wanderungsbilanz [Pers.]'}, {nr:249,title:'Wanderungsbilanz [pro 1000 Einw.]'}, {nr:469,title:'Wasserverbrauch pro Tag und Kopf [Liter]'}, {nr:400,title:'Weg zur nächsten Haltestelle [m]'}, {nr:252,title:'Wegzüge [%]'}, {nr:253,title:'Wegzüge [Pers.]'}, {nr:461,title:'Wohnungen: Anteil Eigentumsobjekte [%]'}, {nr:140,title:'Wohnungsbestand [Whg.]'}, {nr:544,title:'Zahnärzte [Anz.]'}, {nr:545,title:'Zahnärzte [pro 1000 Einw.]'}, {nr:435,title:'Zinsbelastungsanteil [%]'}, {nr:817,title:'ZL-Bezügerquote der Personen ab 65 Jahren [%]'}, {nr:255,title:'Zuzüge [%]'}, {nr:256,title:'Zuzüge [Pers.]'}]
ch_DE = d3.formatLocale({ decimal: ".", thousands: "'", grouping: [3], currency: ["CHF", " "], dateTime: "%a %b %e %X %Y", date: "%d.%m.%Y", time: "%H:%M:%S", periods: ["AM", "PM"], days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],shortDays: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"], months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"], shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]})
Used libraries
wicket = require("wicket")
sp = require('https://cdn.jsdelivr.net/npm/d3-sparql@1.0.0/build/d3-sparql.min.js')
d3 = require("https://d3js.org/d3.v5.min.js")
d3format = require("d3-format")
L = require('leaflet@1.2.0')
html`<style> /* required styles */ .leaflet-map-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-pane, .leaflet-tile-container, .leaflet-overlay-pane, .leaflet-shadow-pane, .leaflet-marker-pane, .leaflet-popup-pane, .leaflet-overlay-pane svg, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { position: absolute; left: 0; top: 0; } .leaflet-container { overflow: hidden; -ms-touch-action: none; } .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; } .leaflet-marker-icon, .leaflet-marker-shadow { display: block; } /* map is broken in FF if you have max-width: 100% on tiles */ .leaflet-container img { max-width: none !important; } /* stupid Android 2 doesn't understand "max-width: none" properly */ .leaflet-container img.leaflet-image-layer { max-width: 15000px !important; } .leaflet-tile { filter: inherit; visibility: hidden; } .leaflet-tile-loaded { visibility: inherit; } .leaflet-zoom-box { width: 0; height: 0; } /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ .leaflet-overlay-pane svg { -moz-user-select: none; } .leaflet-tile-pane { z-index: 2; } .leaflet-objects-pane { z-index: 3; } .leaflet-overlay-pane { z-index: 4; } .leaflet-shadow-pane { z-index: 5; } .leaflet-marker-pane { z-index: 6; } .leaflet-popup-pane { z-index: 7; } .leaflet-vml-shape { width: 1px; height: 1px; } .lvml { behavior: url(#default#VML); display: inline-block; position: absolute; } /* control positioning */ .leaflet-control { position: relative; z-index: 7; pointer-events: auto; } .leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; } .leaflet-top { top: 0; } .leaflet-right { right: 0; } .leaflet-bottom { bottom: 0; } .leaflet-left { left: 0; } .leaflet-control { float: left; clear: both; } .leaflet-right .leaflet-control { float: right; } .leaflet-top .leaflet-control { margin-top: 10px; } .leaflet-bottom .leaflet-control { margin-bottom: 10px; } .leaflet-left .leaflet-control { margin-left: 10px; } .leaflet-right .leaflet-control { margin-right: 10px; } /* zoom and fade animations */ .leaflet-fade-anim .leaflet-tile, .leaflet-fade-anim .leaflet-popup { opacity: 0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .leaflet-fade-anim .leaflet-tile-loaded, .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { opacity: 1; } .leaflet-zoom-anim .leaflet-zoom-animated { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1); transition: transform 0.25s cubic-bezier(0,0,0.25,1); } .leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile, .leaflet-touching .leaflet-zoom-animated { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .leaflet-zoom-anim .leaflet-zoom-hide { visibility: hidden; } /* cursors */ .leaflet-clickable { cursor: pointer; } .leaflet-container { cursor: -webkit-grab; cursor: -moz-grab; } .leaflet-popup-pane, .leaflet-control { cursor: auto; } .leaflet-dragging .leaflet-container, .leaflet-dragging .leaflet-clickable { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; } /* visual tweaks */ .leaflet-container { background: #ddd; outline: 0; } .leaflet-container a { color: #0078A8; } .leaflet-container a.leaflet-active { outline: 2px solid orange; } .leaflet-zoom-box { border: 2px dotted #38f; background: rgba(255,255,255,0.5); } /* general typography */ .leaflet-container { font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; } /* general toolbar styles */ .leaflet-bar { box-shadow: 0 1px 5px rgba(0,0,0,0.65); border-radius: 4px; } .leaflet-bar a, .leaflet-bar a:hover { background-color: #fff; border-bottom: 1px solid #ccc; width: 26px; height: 26px; line-height: 26px; display: block; text-align: center; text-decoration: none; color: black; } .leaflet-bar a, .leaflet-control-layers-toggle { background-position: 50% 50%; background-repeat: no-repeat; display: block; } .leaflet-bar a:hover { background-color: #f4f4f4; } .leaflet-bar a:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .leaflet-bar a:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: none; } .leaflet-bar a.leaflet-disabled { cursor: default; background-color: #f4f4f4; color: #bbb; } .leaflet-touch .leaflet-bar a { width: 30px; height: 30px; line-height: 30px; } /* zoom control */ .leaflet-control-zoom-in, .leaflet-control-zoom-out { font: bold 18px 'Lucida Console', Monaco, monospace; text-indent: 1px; } .leaflet-control-zoom-out { font-size: 20px; } .leaflet-touch .leaflet-control-zoom-in { font-size: 22px; } .leaflet-touch .leaflet-control-zoom-out { font-size: 24px; } /* layers control */ .leaflet-control-layers { box-shadow: 0 1px 5px rgba(0,0,0,0.4); background: #fff; border-radius: 5px; } .leaflet-control-layers-toggle { background-image: url(images/layers.png); width: 36px; height: 36px; } .leaflet-retina .leaflet-control-layers-toggle { background-image: url(images/layers-2x.png); background-size: 26px 26px; } .leaflet-touch .leaflet-control-layers-toggle { width: 44px; height: 44px; } .leaflet-control-layers .leaflet-control-layers-list, .leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; } .leaflet-control-layers-expanded .leaflet-control-layers-list { display: block; position: relative; } .leaflet-control-layers-expanded { padding: 6px 10px 6px 6px; color: #333; background: #fff; } .leaflet-control-layers-selector { margin-top: 2px; position: relative; top: 1px; } .leaflet-control-layers label { display: block; } .leaflet-control-layers-separator { height: 0; border-top: 1px solid #ddd; margin: 5px -10px 5px -6px; } /* attribution and scale controls */ .leaflet-container .leaflet-control-attribution { background: #fff; background: rgba(255, 255, 255, 0.7); margin: 0; } .leaflet-control-attribution, .leaflet-control-scale-line { padding: 0 5px; color: #333; } .leaflet-control-attribution a { text-decoration: none; } .leaflet-control-attribution a:hover { text-decoration: underline; } .leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale { font-size: 11px; } .leaflet-left .leaflet-control-scale { margin-left: 5px; } .leaflet-bottom .leaflet-control-scale { margin-bottom: 5px; } .leaflet-control-scale-line { border: 2px solid #777; border-top: none; line-height: 1.1; padding: 2px 5px 1px; font-size: 11px; white-space: nowrap; overflow: hidden; -moz-box-sizing: content-box; box-sizing: content-box; background: #fff; background: rgba(255, 255, 255, 0.5); } .leaflet-control-scale-line:not(:first-child) { border-top: 2px solid #777; border-bottom: none; margin-top: -2px; } .leaflet-control-scale-line:not(:first-child):not(:last-child) { border-bottom: 2px solid #777; } .leaflet-touch .leaflet-control-attribution, .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { box-shadow: none; } .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar { border: 2px solid rgba(0,0,0,0.2); background-clip: padding-box; } /* popup */ .leaflet-popup { position: absolute; text-align: center; } .leaflet-popup-content-wrapper { padding: 1px; text-align: left; border-radius: 12px; } .leaflet-popup-content { margin: 13px 19px; line-height: 1.4; } .leaflet-popup-content p { margin: 18px 0; } .leaflet-popup-tip-container { margin: 0 auto; width: 40px; height: 20px; position: relative; overflow: hidden; } .leaflet-popup-tip { width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: white; box-shadow: 0 3px 14px rgba(0,0,0,0.4); } .leaflet-container a.leaflet-popup-close-button { position: absolute; top: 0; right: 0; padding: 4px 4px 0 0; text-align: center; width: 18px; height: 14px; font: 16px/14px Tahoma, Verdana, sans-serif; color: #c3c3c3; text-decoration: none; font-weight: bold; background: transparent; } .leaflet-container a.leaflet-popup-close-button:hover { color: #999; } .leaflet-popup-scrolled { overflow: auto; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; } .leaflet-oldie .leaflet-popup-content-wrapper { zoom: 1; } .leaflet-oldie .leaflet-popup-tip { width: 24px; margin: 0 auto; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); } .leaflet-oldie .leaflet-popup-tip-container { margin-top: -1px; } .leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, .leaflet-oldie .leaflet-popup-content-wrapper, .leaflet-oldie .leaflet-popup-tip { border: 1px solid #999; } /* div icon */ .leaflet-div-icon { background: #fff; border: 1px solid #666; } #map { width: 570px; height: 600px; margin-top: 10px; } </style`