29:null 2a:["$","title",null,{"children":"City distance and bearing visualisation | Jonas | Observable"}] 2f:[] 2d:{"id":"fe3bc5fa4eeb0328","slug":null,"title":"City distance and bearing visualisation","thumbnail":"5ccba4790dda5b2d5b971e38d01810ff403b3b454e922801db2e8fc56620c0c0","access_level":"public","create_time":"$D2023-05-29T10:00:49.633Z","update_time":"$D2023-06-06T18:08:18.726Z","view_time":null,"first_public_time":"$D2023-05-29T10:00:49.633Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6015bb0b93952860","login":"jnsprnw","name":"Jonas","avatar_url":"https://avatars-next.observableusercontent.com/4ac18ffeb86a7f908cf6997d5bb728ceb25707f3a3db2104f3517527f54aa1f6","tier":"starter_2024"},"version":337,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"002ca05f0ffda548","login":"jnsprnw","name":"Jonas","avatar_url":"https://avatars-next.observableusercontent.com/4ac18ffeb86a7f908cf6997d5bb728ceb25707f3a3db2104f3517527f54aa1f6","tier":null}],"members":[{"type":"individual","id":"002ca05f0ffda548","login":"jnsprnw","name":"Jonas","avatar_url":"https://avatars-next.observableusercontent.com/4ac18ffeb86a7f908cf6997d5bb728ceb25707f3a3db2104f3517527f54aa1f6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"City distance and bearing visualisation","cells":[{"id":0,"value":"# City distance and bearing visualisation\nThis notebook calculates the distance and the bearing (angle) from a city in the center and multiple cities around the world.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":308,"value":"TODO: Display different distances","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":26,"value":"Plot.plot({\n marginBottom: margin,\n marginTop: margin,\n marginLeft: margin,\n marginRight: margin,\n width: size,\n height: size,\n x: {axis: null, domain: [0, size]},\n y: {axis: null, domain: [0, size]},\n r: {type: \"linear\", range: [0, size / 2 - margin], domain: [0, size / 2]},\n marks: [\n Plot.dot([[size / 2]], {x: size / 2, y: size / 2, r: d => d[0], stroke: '#eee'}),\n Plot.dot([[2]], {x: size / 2, y: size / 2, r: d => d[0], stroke: 'none', fill: '#222'}),\n Plot.text([center], {x: size / 2, y: size / 2 + 10, text: d => d.properties.label}),\n Plot.dot(cities, {x: d => d.coordinates[0], y: d => d.coordinates[1], stroke: 'none', r: 2, fill: '#222'}),\n Plot.text(cities, {x: d => d.coordinates[0], y: d => d.coordinates[1], text: d => `${d.properties.label}: ${d.distance.toFixed(0)} km `, rotate: d => d.bearingInRotate, textAnchor: 'end'}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"\n \n \n \n \n \n \n \n \n ${cities.map(city => htl.html`\n \n \n \n `)}\n \n

Name	Distance in km	Angle
${city[\"properties\"].label}	${city[\"distance\"].toFixed(0)}	${city[\"bearingInRotate\"].toFixed(2)}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":301,"value":"This defines the city, that is in the center","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":15,"value":"center = turf.point([6.5122856, 49.6052317], { label: 'Saarburg' });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":303,"value":"The next cell defines the cities surrounding the center.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":272,"value":"cities = [\n turf.point([17.5760475, 59.83334], { label: 'Uppsala, Sweden' }),\n turf.point([6.0031281, 50.8682635], { label: 'Kerkrade, Netherlands' }),\n turf.point([7.1330785, 50.9617319], { label: 'Bensberg, Germany' }),\n turf.point([30.9447884, -25.4808772], { label: 'Mbombela, South Africa' }),\n turf.point([35.1768493, 31.7160163], { label: 'Beit Jala, Palestine' }),\n turf.point([33.6366723, -13.9549847], { label: 'Lilongwe, Malawi' }),\n turf.point([33.9744892, -11.4313957], { label: 'Mzuzu, Malawi' }),\n turf.point([33.8955471, -9.9459396], { label: 'Karonga, Malawi' }),\n].map(d => calculatePosition(center, d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"This function calculates the bearing and the distance from a center and a point.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":39,"value":"function calculatePosition(center, point) {\n const bearing = turf.bearing(center, point);\n const bearingInDegree = scaleBearingToDegree(bearing); // This will be used for our coordinate function\n const bearingInRotate = scaleDegreeToRotate(bearingInDegree); // This will be used to rotate the text labels\n return {\n ...point,\n bearing,\n bearingInDegree,\n bearingInRotate,\n distance: turf.distance(center, point),\n coordinates: getCoordinatesForPercent(bearingInDegree),\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"The next function calculates the coordinates from the center given a degree.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"function getCoordinatesForPercent(degree) {\n const radian = degree * Math.PI / 180\n\tconst x = size / 2 + size / 2 * Math.cos(radian);\n\tconst y = size / 2 + size / 2 * Math.sin(radian);\n\treturn [x, y];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":284,"value":"## Transformers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":294,"value":"The Turf bearing has a different mapping than our function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":49,"value":"scaleBearingToDegree = d3.scaleLinear().domain([-180, 180]).range([270, -90])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"The SVG-rotate has a different arrangement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":191,"value":"scaleDegreeToRotate = d3.scaleLinear().domain([180, 0]).range([-180, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"## Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":43,"value":"size = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"margin = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"import('https://unpkg.com/@turf/distance@6.5.0/dist/es/index.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import('https://unpkg.com/@turf/bearing@6.5.0/dist/es/index.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"