31:T16a2,map = { // map container SVG const svg = d3 .create('svg') .attr('width', w) .attr('height', h) // filter setup svg.append("defs") .append("filter") .attr("id", "glow") .append("feGaussianBlur") .attr("stdDeviation", 5) .attr("result", "coloredBlur") // rect for backdrop color const backdrop = svg .append('rect') .attr('width', w) .attr('height', h) .attr('fill', '#666') // main group for map const g = svg.append('g').attr('id', 'mapGroup') // outline map g.append('g').attr('id', 'pathGroup') .selectAll('path') .data(earth.features) .enter() .append('path') .attr('d', path) .attr('fill', '#ddd') // main group for legend const legend = svg.append('g').attr('id', 'legendGroup') // ==================================================================================== // d3 zoom setup // have to setup & track zoomlevel here // as d3.event.transform won't be available after zooming let zoomLevel = 1 svg.call( d3.zoom() .extent([[0, 0], [w, h]]) .scaleExtent([-1, 10]) .on('zoom', () => { // update zoomLevel outside zoom fn call scope zoomLevel = d3.event.transform.k // transform map group g.attr('transform', d3.event.transform) // resize dots on zoom + hover svg.selectAll('.dot') .attr('r', 4/d3.event.transform.k) // resize conn lines on zoom svg.selectAll('.conn-line') .attr('stroke-width', `${1/d3.event.transform.k}px`) }), ) // ==================================================================================== // connection lines from peers to rrcs // curved geoprojection lines g.append('g').attr('id', 'lineGroup') .selectAll('path') .data(rrcLines) .enter() .append('path') .attr('d', d => path(d)) .attr('stroke', 'white') .attr('stroke-width', '1px') .attr('fill', 'none') // ==================================================================================== // legend var legendBackground = legend .append('rect') .attr('x', 10) .attr('y', 10) .attr('width', 100) .attr('height', 35) .attr('fill', 'white') legend .append('circle') .attr('cx', 20) .attr('cy', 20) .attr('r', 6) .attr('fill', 'red') legend .append('circle') .attr('cx', 20) .attr('cy', 35) .attr('r', 6) .attr('fill', 'green') legend .append('text') .attr('x', 40) .attr('y', 25) .attr('font-family', 'Helvetica') .attr('font-size', '14px') .attr('fill', 'black') .text('Collectors') legend .append('text') .attr('x', 40) .attr('y', 40) .attr('font-family', 'Helvetica') .attr('font-size', '14px') .attr('fill', 'black') .text('Peers') // ==================================================================================== // connection lines from peers to rrcs // straight lines // g.append('g').attr('id', 'lineGroup') // .selectAll('path') // .data(line_coords) // .enter() // .append('path') // .attr('d', d=> d3.line()([projection(d[0]), projection(d[1])])) // .attr('stroke', 'white') // .attr('stroke-width', '1px') // .attr('fill', 'none') // .attr('class', 'conn-line') // ==================================================================================== // peer dots g.append('g').attr('id', 'peerGroup') .selectAll('circle') .data(peer_loc) .enter() .append('circle') .attr('id', d => `peer-${peer_loc.indexOf(d)}`) .attr('class', 'dot') .attr('cx', d => projection([Number(d.geocode_city_lon), Number(d.geocode_city_lat)])[0]) .attr('cy', d => projection([Number(d.geocode_city_lon), Number(d.geocode_city_lat)])[1]) .attr('r', 4) .style('opacity', 1) .attr('fill', 'green') // .on("click", d => mutable selected = d) // .on("mouseover", function(d) { // let posX = this.cx.baseVal.value // let posY = this.cy.baseVal.value // d3.select(this) // .transition() // .duration(250) // .attr("r", 6/zoomLevel) // d3.select('#tooltip') // .attr('x', posX+10/zoomLevel) // .attr('y', posY) // .attr('width', 100/zoomLevel) // .attr('height', 20/zoomLevel) // .transition() // .duration(250) // .style("opacity", 1) // }) // .on("mouseleave", function(d) { // d3.select(this) // .transition() // .duration(250) // .attr("r", 4/zoomLevel) // d3.select('#tooltip') // .transition() // .duration(250) // .style("opacity", 0) // }) // ==================================================================================== // rrc dots g.append('g').attr('id', 'rrcGroup') .selectAll('circle') .data(rrc_loc) .enter() .append('circle') .attr('id', d => `rrc-${rrc_loc.indexOf(d)}`) .attr('class', 'dot collector') .attr('cx', d => projection([Number(d.geocode_city_lon), Number(d.geocode_city_lat)])[0]) .attr('cy', d => projection([Number(d.geocode_city_lon), Number(d.geocode_city_lat)])[1]) .attr('r', 4) .style('opacity', 1) .attr('fill', 'red') .on("click", d => mutable selected = d) // .on("mouseover", function(d) { // d3.select(this) // .transition() // .duration(250) // .attr("r", 6/zoomLevel) // }) // .on("mouseleave", function(d) { // d3.select(this) // .transition() // .duration(250) // .attr("r", 4/zoomLevel) // }) // ==================================================================================== // tooltip funcitonality helper functions // g.append("rect") // .style("opacity", 0) // .style('pointer-events', 'none') // .attr("id", "tooltip") // .attr("fill", "white") // ==================================================================================== // render map return svg.node() }32:[] 2f:{"title":"RIS connections draft WIP","cells":[{"id":0,"value":"md`# RIS connections draft WIP`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"viewof display = checkbox({\n title: \"Display toggle\",\n description: \"Select which elements to show on the map.\",\n options: [\n { value: \"p\", label: \"Peer nodes\" },\n { value: \"r\", label: \"RRC nodes\" },\n { value: \"l\", label: \"Connection lines\" },\n ],\n value: [\"p\", \"r\", \"l\"],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"{\n if (!!selected.rrc) return\n return html`\n

Selected node: ${selected.name}

Multihop: ${selected.multihop}

Number of peers: ${selected.peers.length}

Geographical location: ${selected.geographical_location}

\n\n\n\n\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"viewof rrcSelect = select({\n options: rrc_loc.map(r => r.name),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"mutable selected = {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"{\n rrcSelect\n let rrcObj = rrc_loc.find(r => r.name === rrcSelect)\n mutable selected = rrcObj\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"{\n selected\n // d3.select('#rrcGroup')\n // .selectAll('circle')\n // .classed(\"selected-node\", false)\n // .style('opacity', 0.5)\n // d3.select(`#rrc-${rrc_loc.indexOf(selected)}`)\n // .classed(\"selected-node\", true)\n // .style('opacity', 1)\n rrcSelect({value: selected.name})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"h = width * 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"projection = d3.geoEqualEarth().fitExtent([[0, 0], [w, h]], earth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"world = (await fetch(\"https://unpkg.com/world-atlas@1/world/110m.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"earth = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"{\n d3.select(\"#peerGroup\").style(\"opacity\", display.includes('p') ? 1 : 0)\n d3.select(\"#rrcGroup\").style(\"opacity\", display.includes('r') ? 1 : 0)\n d3.select(\"#lineGroup\").style(\"opacity\", display.includes('l') ? 1 : 0)\n return 'display elements'\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"peer_loc_raw = (await fetch(\"https://sg-pub.ripe.net/emile/tmp/ris-peers.guessed-and-geocoded.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"peer_loc = peer_loc_raw.filter(x => x.geocode_city_lon !== null )","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"peer_coords = peer_loc.map(x => [Number(x.geocode_city_lon), Number(x.geocode_city_lat)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"rrc_loc = (await fetch(\"https://sg-pub.ripe.net/emile/tmp/ris-rrcs.geocoded2.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"rrc_coords = rrc_loc.map(x => [Number(x.geocode_city_lon), Number(x.geocode_city_lat)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"rrcLines = { // lines between multihop collectors and their peers\n //const gp = d3.geoPath();\n return peer_loc.map( peer => {\n return {\n \"type\": \"LineString\",\n \"coordinates\": [\n [ peer.geocode_city_lon, peer.geocode_city_lat],\n [ \n rrc_loc.find(x => x.name === peer.rrc ).geocode_city_lon, \n rrc_loc.find(x => x.name === peer.rrc ).geocode_city_lat\n ]\n ]\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"line_coords = rrcLines.map(l => l.coordinates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"locCircles = {\n const circle = d3.geoCircle();\n return peer_loc.map(peer => {\n return circle.center([peer.geocode_city_lon,peer.geocode_city_lat]).radius(1).precision(25)();\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"rrcCircles = {\n const circle = d3.geoCircle();\n return rrc_loc.map(rrc => {\n return circle.center([rrc.geocode_city_lon,rrc.geocode_city_lat]).radius(1).precision(25)();\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"import {button, checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}