2d:null 2e:["$","title",null,{"children":"Let's visualize Linked Data | Matthias Mazenauer | Observable"}] 33:T442,md`Linked Data Query Link to this query `34:[] 31:{"id":"265cacdeba7fdc40","slug":"lets-visualize-linked-data","title":"Let's visualize Linked Data","thumbnail":"e7013e4ea7d93340c2c1565dae88f15b960e619d509e787a60db8b5c8cad5029","access_level":"public","create_time":"$D2018-06-22T15:03:01.626Z","update_time":"$D2019-02-04T16:57:19.246Z","view_time":null,"first_public_time":"$D2018-06-28T15:30:08.091Z","has_unpublished_edits":null,"fork":{"id":"e83fd90c3aff0fbf","slug":"lets-visualize-linked-data","title":"Let's visualize Linked Data","owner":{"id":"b9de8438f259d69b","login":"mmznr","name":"Matthias Mazenauer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a8029a35a2e0d70a","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":"starter_2024"},"version":567,"publish_version":567,"role":null,"authored":false,"authors":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null}],"members":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Let's visualize Linked Data","cells":[{"id":0,"value":"md`# Let's visualize Linked Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"md`Linked Data Sparql Endpoint from swisstopo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"endPoint = \"https://ld.geo.admin.ch/query\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"query = \"PREFIX schema: \"+\n \"PREFIX gn: \"+\n \"PREFIX geo: \"+\n \"PREFIX dct: \"+\n \"select ?Municipality ?Name ?Population ?WKT\"+\n \" where\"+\n \"{\"+\n \"?Municipality gn:featureCode gn:A.ADM3 .\"+\n \"?Municipality schema:name ?Name .\"+\n \"?Municipality gn:population ?Population .\"+\n \"?Municipality dct:issued ?Date .\"+\n \"?Municipality gn:parentADM1 ?InCanton .\"+\n \"?InCanton schema:name ?CantonName .\"+\n \"?Municipality geo:hasGeometry ?Geometry .\"+\n \"?Geometry geo:asWKT ?WKT .\"+\n \"FILTER (?Date = '2017-01-01'^^xsd:date)\"+\n \"FILTER (?CantonName = 'Bern') \"+\n \"}\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"md`Request the data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"data = new Promise(resolve => {\n sp.sparql(endPoint, query).get(data => {\n let dataArr = []\n for (let i=0;iD3.js `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\")\n .style('background', 'lightgrey');\n\n svg.selectAll('path.gemeinde')\n .data(data)\n .enter()\n .append(\"path\")\n .attr(\"d\", path)\n .attr('class', 'gemeinde')\n .style('stroke-width', 0.5)\n .style('fill', function(d) {\n return colorScale(d.properties.population);\n })\n .on('mouseover', function(d) {\n let bBox = d3.select(this).node().getBBox()\n let maus = svg.append('g').attr('id', 'maus')\n maus.append('text')\n .attr('x', bBox.x+bBox.width)\n .attr('y', bBox.y)\n .text(d.properties.name+\": \"+d.properties.population)\n d3.selectAll('.gemeinde').style('opacity', 0.7)\n d3.select(this).style('opacity',1)\n })\n .on('mouseout', function() {\n d3.select('#maus').remove()\n d3.selectAll('.gemeinde').style('opacity',1)\n })\n //addLmaps()\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"popEx = d3.extent(data, function(d) { return d.properties.population.valueOf(); })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"colorScale = d3.scaleLinear()\n .domain([popEx[0],1000,10000,popEx[1]])\n .range(['lightgrey','steelblue','lightcoral','tomato'])\n .interpolate(d3.interpolateLab)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"\nheight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"projection = d3.geoMercator()\n .center([8.64, 47.43])\n .scale((1 << 18) / (2 * Math.PI))\n .translate([width / 2, height / 2])\n .precision(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"md`# Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"wicket = require(\"wicket\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"sp = require('https://cdn.jsdelivr.net/npm/d3-sparql@1.0.0/build/d3-sparql.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"L = require(\"leaflet\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"