31:T531,renderPopup = (map, layer, accessor) => { var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on('mouseenter', layer, function(e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = accessor(e.features[0]); var description = ` node_name: ${e.features[0].properties['node_name']}
osm_id: ${e.features[0].properties['osm_id']}
uic_ref: ${e.features[0].properties['uic_ref']}
transport_mode: ${e.features[0].properties['transport_mode']}
tm1: ${e.features[0].properties['tm1']}
`; description = `

${description}

`; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. // while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { // coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; // } // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates) .setHTML(description) .addTo(map); }); map.on('mouseleave', layer, function() { map.getCanvas().style.cursor = ''; popup.remove(); }); }32:Tc0d,viewof probabilityHue = { // setup const margin = { top: 10, right: 10, bottom: 20, left: 25 }; const svgWidth = Math.min(640, width); const svgHeight = svgWidth / 4; const svg = d3.select(DOM.svg(svgWidth, svgHeight)); const x = d3.scaleLinear() .domain([-2.5, 360]) .range([0, svgWidth - margin.left - margin.right]); const y = d3.scaleLinear() .domain([1, -0.025]) .range([0, svgHeight - margin.top - margin.bottom]) .clamp(true); const xAxis = d3.axisBottom(x) .ticks(svgWidth / 75) .tickSize(4); const yAxis = d3.axisLeft(y) .ticks(svgHeight / 50) .tickSize(4); const yTickLines = d3.axisLeft(y) .ticks(svgHeight / 50) .tickSize(-x(360) + x(0)); const line = d3.line() .x(d => d.x) .y(d => d.y); // data const data = [ { h: 0, p: 0.012, color: "#ff008a" }, { h: 30, p: 0.725, color: "#ff003a" }, { h: 60, p: 0.665, color: "#ff8400" }, { h: 90, p: 0.850, color: "#ffdd00" }, { h: 120, p: 0.125, color: "#a5ff00" }, { h: 150, p: 0.015, color: "#00ff8a" }, { h: 180, p: 0.020, color: "#00ffe0" }, { h: 210, p: 0.365, color: "#00eaff" }, { h: 240, p: 0.950, color: "#00c0ff" }, { h: 270, p: 0.855, color: "#008fff" }, { h: 300, p: 0.215, color: "#001aff" }, { h: 330, p: 0.016, color: "#ff00f0" }, { h: 360, p: 0.012, color: "#ff008a" } ]; const dots = data.map(d => ({ x: x(d.h), y: y(d.p), color: d.color })); const node = svg.node(); node.value = data; // draw const plot = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); plot.append('g') .attr('transform', `translate(0, ${svgHeight - margin.top - margin.bottom})`) .call(xAxis) .call(node => node.select(".domain").remove()); plot.append('g') .call(yAxis) .call(node => node.select(".domain").remove()); plot.append("g") .attr("transform", `translate(${x(0)}, 0)`) .call(yTickLines) .call(node => { node.select(".domain").remove(); node.selectAll("text").remove(); node.selectAll(".tick line") .attr("stroke", "#777") .attr("shape-rendering", "crispEdges"); node.selectAll(".tick:not(:first-of-type).tick:not(:last-of-type) line") .attr("stroke-dasharray", "2,2"); }); plot.append('path') .attr("id", "line") .attr("d", line(dots)) .attr("stroke", "black") .attr("stroke-dasharray", "6,4") .attr("fill", "none"); plot.selectAll("dots") .data(dots) .enter().append("circle") .attr('r', 4) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('stroke', 'grey') .attr('fill', d => d.color) .style("cursor", "move") .call(d3.drag() .on("drag", function(d, i) { let p = y.invert(d3.event.y); d3.select(this).attr('cy', d.y = y(p)); d3.select("#line").attr('d', line(dots)); node.value[i].p = p; node.dispatchEvent(new CustomEvent("input")); })); return node; }33:Tb0a,viewof probabilityLightness = { // setup const margin = { top: 10, right: 10, bottom: 20, left: 25 }; const svgWidth = Math.min(640, width); const svgHeight = svgWidth / 4; const svg = d3.select(DOM.svg(svgWidth, svgHeight)); const x = d3.scaleLinear() .domain([-0.005, 1]) .range([0, svgWidth - margin.left - margin.right]); const y = d3.scaleLinear() .domain([1, -0.025]) .range([0, svgHeight - margin.top - margin.bottom]) .clamp(true); const xAxis = d3.axisBottom(x) .ticks(svgWidth / 75) .tickSize(4); const yAxis = d3.axisLeft(y) .ticks(svgHeight / 50) .tickSize(4); const yTickLines = d3.axisLeft(y) .ticks(svgHeight / 50) .tickSize(-x(360) + x(0)); const line = d3.line() .x(d => d.x) .y(d => d.y); // data const data = [ { l: 0.0, p: 1.000 }, { l: 0.1, p: 0.676 }, { l: 0.2, p: 0.424 }, { l: 0.3, p: 0.244 }, { l: 0.4, p: 0.136 }, { l: 0.5, p: 0.100 }, { l: 0.6, p: 0.136 }, { l: 0.7, p: 0.244 }, { l: 0.8, p: 0.424 }, { l: 0.9, p: 0.676 }, { l: 1.0, p: 1.000 } ]; const dots = data.map(d => ({ x: x(d.l), y: y(d.p), color: `hsl(0, 0%, ${d.l * 100}%)` })); const node = svg.node(); node.value = data; // draw const plot = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); plot.append('g') .attr('transform', `translate(0, ${svgHeight - margin.top - margin.bottom})`) .call(xAxis) .call(node => node.select(".domain").remove()); plot.append('g') .call(yAxis) .call(node => node.select(".domain").remove()); plot.append("g") .attr("transform", `translate(${x(0)}, 0)`) .call(yTickLines) .call(node => { node.select(".domain").remove(); node.selectAll("text").remove(); node.selectAll(".tick line") .attr("stroke", "#777") .attr("shape-rendering", "crispEdges"); node.selectAll(".tick:not(:first-of-type).tick:not(:last-of-type) line") .attr("stroke-dasharray", "2,2"); }); plot.append('path') .attr("id", "line2") .attr("d", line(dots)) .attr("stroke", "black") .attr("stroke-dasharray", "6,4") .attr("fill", "none"); plot.selectAll("dots") .data(dots) .enter().append("circle") .attr('r', 4) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('stroke', 'grey') .attr('fill', d => d.color) .style("cursor", "move") .call(d3.drag() .on("drag", function(d, i) { let p = y.invert(d3.event.y) d3.select(this).attr('cy', d.y = y(p)); d3.select("#line2").attr('d', line(dots)); node.value[i].p = p; node.dispatchEvent(new CustomEvent("input")); })); return node; }34:[] 2f:{"title":"OSM stations Serbia","cells":[{"id":0,"value":"md`# OSM stations Serbia`","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"md`\nstations combined (OSM data)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"csv = {\n const csvArray = [];\n stations.map(row => {\n if(row.tm1 && row.tm1 !== 'tm1') {\n csvArray.push({ \n osm_id: row.osm_id,\n agency_abbr: row.agency_abbr,\n tm1: row.tm1,\n transport_mode: row.transport_mode,\n node_type: row.node_type,\n uic_ref: row.uic_ref,\n node_name: row.node_name,\n lon: parseFloat(row.lon).toFixed(6),\n lat: parseFloat(row.lat).toFixed(6),\n h3_8: row.h3_8,\n h3_12: row.h3_12,\n });\n }\n })\n \n return d3.csvFormat(csvArray); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"mapContainer = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"map = {\n let map = this;\n \n if (!map) {\n\n map = new mapboxgl.Map({\n container: mapContainer,\n center: [\n config.lng,\n config.lat,\n ],\n zoom: config.zoom,\n style: 'mapbox://styles/mapbox/light-v9'\n });\n map.loadImage(\"https://i.imgur.com/MK4NUzI.png\", function(error, image) {\n map.addImage(\"custom-marker\", image);\n });\n }\n \n // Wait until the map loads, then yield the container again.\n yield new Promise(resolve => {\n if (map.loaded()) resolve(map);\n else map.on('load', () => resolve(map));\n });\n \n render(map);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"function render(map) {\n \n \n let hexes_source = map.getSource('hexes_source');\n if(!hexes_source) {\n map.addSource('hexes_source', {\n type: 'geojson',\n data: { type: 'FeatureCollection', features: hexes }\n });\n map.addLayer({\n id: 'hexes_layer',\n source: 'hexes_source',\n type: 'fill',\n interactive: false,\n paint: {\n \n }\n }); \n \n renderPopup(map, 'hexes_layer', feature => { return feature.geometry.coordinates[0][0].slice() });\n }\n \n map.getSource('hexes_source').setData({ type: 'FeatureCollection', features: hexes });\n map.setPaintProperty('hexes_layer', 'fill-color', '#062542');\n map.setPaintProperty('hexes_layer', 'fill-opacity', 0.6);\n \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"hexes = {\n return stations.map(station => {\n const feature = geojson2h3.h3ToFeature(station.h3_12, true);\n feature.properties = {...station};\n return feature;\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"stations = { \n const nodes = await d3Fetch.csv('https://gist.githubusercontent.com/djr4/86f08e3642670b7f9957dd443244d623/raw/548cbff98769939585cd6a09842d622faf9a7180/serbia_osm_nodes.csv')\n const platforms = await d3Fetch.csv('https://gist.githubusercontent.com/djr4/dd06afe6fb64a8fa53aeabd4fe174745/raw/c99a365e385e93d802fe0547fb84c255e1b597eb/serbia_mapped_platforms.csv')\n \n let all = platforms.concat(nodes);\n \n all = (Object.values(all.reduce((acc,cur)=>Object.assign(acc,{[cur.h3_12]:cur}),{})))\n \n return all; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"getCentroid = (features) => {\n \n let lat = 0;\n let lon = 0;\n for(let i = 0; i < features.length; i++) {\n lon += features[i].geometry.coordinates[0];\n lat += features[i].geometry.coordinates[1];\n }\n \n return [lon / features.length, lat / features.length];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"function distance(coords1, coords2, isMiles) {\n function toRad(x) {\n return x * Math.PI / 180;\n }\n\n var lon1 = coords1[0];\n var lat1 = coords1[1];\n\n var lon2 = coords2[0];\n var lat2 = coords2[1];\n\n var R = 6371; // km\n\n var x1 = lat2 - lat1;\n var dLat = toRad(x1);\n var x2 = lon2 - lon1;\n var dLon = toRad(x2)\n var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +\n Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *\n Math.sin(dLon / 2) * Math.sin(dLon / 2);\n var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n var d = R * c;\n\n if(isMiles) d /= 1.60934;\n\n return d * 1000;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"config = ({\n lat: 44.8015941,\n lng: 20.4847713,\n // lat: 47.39625182403829,\n //lng: 8.504748064447062,\n zoom: 12,\n fillOpacity: 0.9,\n colorScale: ['#ffffD9', '#50BAC3', '#1A468A'],\n areaThreshold: 0.75\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"groupBy = (list, keyGetter) => {\n const map = new Map();\n list.forEach((item) => {\n const key = keyGetter(item);\n const collection = map.get(key);\n if (!collection) {\n map.set(key, [item]);\n } else {\n collection.push(item);\n }\n });\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"getHueProbability = (hue, data) => {\n const i = Math.floor(hue / 360 * (data.length - 1));\n return (data[i + 1].p - data[i].p) / (data[i + 1].h - data[i].h) * (hue - data[i].h) + data[i].p;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"lchConstrained = () => {\n let color;\n do {\n color = d3.lch(Math.random() * 100, Math.random() * 140, Math.random() * 360)\n } while(\n !color.displayable()\n || Math.random() > getHueProbability(color.h, probabilityHue)\n || Math.random() > getLightnessProbability(color.l, probabilityLightness)\n );\n \n return color\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"colors = {\n const list = [];\n for(let i = 0; i < 1500; i++) {\n list.push(d3.rgb(lchConstrained()) );\n }\n \n return list;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"getLightnessProbability = (lightness, data) => {\n const i = Math.floor(lightness / 100 * (data.length - 1));\n return (data[i + 1].p - data[i].p) / (data[i + 1].l - data[i].l) * (lightness / 100 - data[i].l) + data[i].p;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"geojson2h3 = require('https://bundle.run/geojson2h3@1.0.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3Fetch = require('d3-fetch')","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"h3 = require('https://bundle.run/h3-js@3.1.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"center = h3.geoToH3(44.8016971, 20.4847753, 12)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {mapboxApiToken} from '@nrabinowitz/mapbox-token'","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0');\n mapboxgl.accessToken = mapboxApiToken;\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}