31:T43c,map = { const container = html`

`; yield container; const map = L.map(container).setView([0,0], 10); var markers = probes.map(p => { return L.geoJSON(p.geometry, { pointToLayer: function( feature, latlng ) { return L.circleMarker(latlng, { color: p2c[ p.id ].color, radius: 4, fillOpacity: 1 }).bindPopup("prb_id: " + p.id )// + "
color: " + p2c[ p.id ].color ) } }) }) var group = L.featureGroup(markers).addTo(map); setTimeout(function () { map.fitBounds(group.getBounds()); }, 1000); L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', { attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors', subdomains: 'abcd', minZoom: 0, maxZoom: 20, ext: 'png' }).addTo( map ); }32:[] 2f:{"title":"Color-coding of RIPE Atlas probes in a country","cells":[{"id":0,"value":"# Color-coding of RIPE Atlas probes in a country","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"Rough idea: Given 3 locations that are reasonably separate, one can use the RGB color scheme (or another color scheme) to encode a location. One location is the \"red channel\", the next the \"green channel\" and the last is the \"blue channel\". If a probe location is close to location 1 the channel value is larger then when the probe is further away. Same for the other 2 locations.","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"viewof cc = Inputs.text({label: \"Country code\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"viewof loc1 = Inputs.text({label: \"Location 1 (r)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof loc2 = Inputs.text({label: \"Location 2 (g)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof loc3 = Inputs.text({label: \"Location 3 (b)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"html`
Type the start and stop date you wish to look into:
\n${bind(html``, viewof _start)}\n${bind(html``, viewof _stop)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"The map below will show the locations of the probes, as well as the color codes for this location (this is a test to see if your color map and cities chosen works for the are you look at","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"Plot.plot({\n facet: {\n data: updown,\n y: \"prb_id\",\n marginLeft: 70,\n grid: true,\n },\n fy: {\n domain: ordered_probe_id_list,\n },\n color: { // needed otherwise Plot.plot will do a color conversion\n domain: color_arr,\n range: color_arr\n },\n x: {\n grid: true\n },\n marks: [\n Plot.tickX(updown, {x: \"start\", stroke: \"black\"}),\n Plot.tickX(updown, {x: \"stop\", stroke: \"black\"}),\n Plot.ruleY(updown, {x1: \"start\", x2: \"stop\", y: null, strokeWidth: 7, stroke: d => p2c[ d.prb_id ].color })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"ordered_probe_id_list = {\n return probes.sort( (a,b) => p2c[ a.id ].dists[0] - p2c[ b.id ].dists[0] ).map( x => x.id ) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"loc2coords = {\n let l2c = {};\n const locs = [loc1,loc2,loc3]\n for (var loc in locs) {\n l2c[ loc ] = await nom_coordinates( locs[loc] )\n \n }\n return l2c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"fade_dist = { // the maximum distance in the triangle between the cities. this is the 0 in the color channel\n return Math.max(\n haversine( loc2coords[0], loc2coords[1] ),\n haversine( loc2coords[0], loc2coords[2] ),\n haversine( loc2coords[1], loc2coords[2] )\n )\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"async function nom_coordinates( loc_name ) {\n let coords = fetch(\n `https://nominatim.openstreetmap.org/search.php?q=${ loc_name }&format=json`\n )\n .then(response => response.json())\n .then(json => json[0])\n .then(j => [+(j.lon), +(j.lat)])\n .catch(error => {\n // Nominatim might be down\n // flalback to pin-on-the-map selection\n // mutable nominatim_down = true;\n // return _coordinates;\n })\n return coords;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"function paginated_fetch(url = \"\", previousResponse = []) {\n return fetch(url)\n .then(response => response.json())\n .then(newResponse => {\n const response = [...previousResponse, ...newResponse['results']]; // Combine the two arrays\n if (newResponse['next']) {\n url = newResponse['next'];\n return paginated_fetch(url, response);\n }\n return response;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"async function fetch_probes_for_county( ccode ) {\n var url = `https://atlas.ripe.net/api/v2/probes?country_code=${ ccode }`;\n /* var probes = []\n // while( url !== undefined ) {\n let p_chunk = fetch( url )\n .then( r => r.json() )\n .then( r => r['results'] )\n probes.push( p_chunk )\n } */\n var prbs = paginated_fetch( url )\n return prbs;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"color_arr = {\n function onlyUnique(value, index, self) {\n return self.indexOf(value) === index;\n }\n return Object.keys(p2c).map( d => p2c[ d ].color ).sort().filter( onlyUnique ) // jump through hoops to do an identity color\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"p2c = { // matrix of [loc][prb]. (by index)\n var p2c = {}\n var range_f = d3.scaleLinear().domain([0, fade_dist]).range([0,252]).clamp(true);\n //console.log( range_f( 5000 ) );\n probes.forEach( p => {\n const h0 = haversine( p.geometry.coordinates, loc2coords[ 0 ] )\n const h1 = haversine( p.geometry.coordinates, loc2coords[ 1 ] )\n const h2 = haversine( p.geometry.coordinates, loc2coords[ 2 ] )\n const r = parseInt( range_f( h0 ) )\n const g = parseInt( range_f( h1 ) )\n const b = parseInt( range_f( h2 ) )\n //p2c[ p.id ] = `rgb( ${r}, ${g}, ${b} )`\n p2c[ p.id ] = {\n color: '#' + rgbToHex(r) + rgbToHex(g) + rgbToHex(b),\n dists: [h0,h1,h2]\n }\n }); \n return p2c;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"rgbToHex = function (rgb) { \n var hex = Number(rgb).toString(16);\n if (hex.length < 2) {\n hex = \"0\" + hex;\n }\n return hex;\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"probes = fetch_probes_for_county( cc ).then( p => p.filter( d => (d.status.id == 1) || (d.status.id == 2) ) )\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"start = _start.toISOString().split(\"T\")[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"viewof _start = new Input(\n new Date(\n (() => {\n let a = new Date();\n a.setDate(a.getDate() - 7);\n return a.toISOString().split(\"T\")[0];\n })()\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"stop = _stop.toISOString().split(\"T\")[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"viewof _stop = new Input(\n new Date(\n (() => {\n let a = new Date();\n a.setDate(a.getDate() + 1);\n return a.toISOString().split(\"T\")[0];\n })()\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"updown = {\n var updown = []; // list of updown\n var state = {};\n const ts_start = Math.floor( _start.getTime() / 1000)\n const ts_stop = Math.floor( _stop.getTime() / 1000)\n\n connections.forEach( d => {\n if ( d.event == \"connect\" ) {\n state[ d.prb_id ] = d.timestamp\n } else if ( d.event == \"disconnect\" ) {\n var ev_start = ts_start\n if ( d.prb_id in state ) { // we have a beginning\n ev_start = state[ d.prb_id ]\n }\n updown.push({\n start: new Date( ev_start * 1000 ),\n stop: new Date( d.timestamp * 1000 ),\n prb_id: d.prb_id\n })\n }\n })\n for ( var prb_id in state ) {\n updown.push({\n start: new Date( state[ prb_id ] * 1000 ),\n stop: new Date( ts_stop * 1000 ),\n prb_id: +prb_id\n })\n }\n return updown\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"connections = { // adapted/stolen from Agustin :)\n let connections = [];\n const page_size = 10;\n let ended = false;\n let i = 0;\n let chunk;\n let chunks = [];\n while (!ended) {\n chunk = probes.slice(i, i + page_size).map( d => d.id );\n chunks.push(chunk);\n console.log( chunk )\n\n i += page_size;\n ended = i >= probes.length;\n }\n\n let promises = chunks.map(chunk =>\n fetch(\n `https://atlas.ripe.net:443/api/v2/measurements/7000/results/?start=${start}T00:00&stop=${stop}T00:00&probe_ids=${chunk.join(\n ','\n )}`\n ).then(r => r.json())\n );\n\n let conns = await Promise.all(promises);\n\n return conns.flat();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"function haversine(coord1, coord2 ) {\n // adapted from https://stackoverflow.com/questions/14560999/using-the-haversine-formula-in-javascript#14561433\n function rad( x ) {\n return x * Math.PI / 180\n }\n var lon1 = coord1[0]\n var lat1 = coord1[1]\n var lon2 = coord2[0]\n var lat2 = coord2[1]\n console.log( lon1, lat1, lon2, lat2 )\n var R = 6371; // km \n //has a problem with the .toRad() method below.\n var x1 = lat2-lat1;\n var dLat = rad( x1 ); \n var x2 = lon2-lon1;\n var dLon = rad( x2 ) \n var a = Math.sin(dLat/2) * Math.sin(dLat/2) + \n Math.cos( rad( lat1 )) * Math.cos( rad( lat2 )) * \n Math.sin(dLon/2) * Math.sin(dLon/2); \n var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); \n return R * c; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"# Below this are tests","pinned":true,"hidden":false,"mode":"md"},{"id":166,"value":"haversine( await nom_coordinates(\"Nur Sultan,KZ\"), await nom_coordinates(\"Almaty,KZ\") )","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"nom_coordinates(\"Almaty,KZ\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"import {Text, Input, bind} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}