29:null 2a:["$","title",null,{"children":"RIS connections draft WIP | zoltan | Observable"}] 2f: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() }30:[] 2d:{"id":"ffb4831b6584e945","slug":"ris-connections-draft-wip","title":"RIS connections draft WIP","thumbnail":"31faf5ccd219ee6955068730b3c92e11922d8aa8cf310dd8105f39c932d7e170","access_level":"public","create_time":"$D2020-01-30T12:27:23.957Z","update_time":"$D2020-03-03T10:05:51.694Z","view_time":null,"first_public_time":"$D2020-01-31T12:17:24.639Z","has_unpublished_edits":null,"fork":{"id":"01011aa057c881db","slug":"ris-connections-draft","title":"RIS connections draft","owner":{"id":"0b6b4eed37f6a077","login":"zofejes","name":"zoltan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0b6b4eed37f6a077","login":"zofejes","name":"zoltan","avatar_url":"https://avatars-next.observableusercontent.com/954fcff0faa85b10cf32d98f0e6be7261bea38a8264c85c9bd2ffc47797a6a99","tier":"starter_2024"},"version":818,"publish_version":818,"role":null,"authored":false,"authors":[{"type":"individual","id":"196692c4e99a86c2","login":"zofejes","name":"zoltan","avatar_url":"https://avatars-next.observableusercontent.com/954fcff0faa85b10cf32d98f0e6be7261bea38a8264c85c9bd2ffc47797a6a99","tier":null}],"members":[{"type":"individual","id":"196692c4e99a86c2","login":"zofejes","name":"zoltan","avatar_url":"https://avatars-next.observableusercontent.com/954fcff0faa85b10cf32d98f0e6be7261bea38a8264c85c9bd2ffc47797a6a99","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"RIS connections draft WIP","cells":[{"id":0,"value":"md`# RIS connections draft WIP`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"viewof rrcSelect = select({\n options: rrc_loc.map(r => r.name),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"mutable selected = {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"h = width * 0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"projection = d3.geoEqualEarth().fitExtent([[0, 0], [w, h]], earth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"world = (await fetch(\"https://unpkg.com/world-atlas@1/world/110m.json\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"earth = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"peer_loc = peer_loc_raw.filter(x => x.geocode_city_lon !== null )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"line_coords = rrcLines.map(l => l.coordinates)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"import {button, checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"