md`# Smell trajectories ARPAT`
md`# versione per sistema BT ARPAT`
import {select} from "@jashkenas/inputs"
import {checkbox, slider} from "@rohscx/inputs"
//import {slider} from "@rohscx/inputs"
d3 = require("d3@5")
psv = d3.dsvFormat(",")
data_links = d3.text("https://raw.githubusercontent.com/giulianogemma/master/master/coords.csv").then(
(txt) => psv.parse(txt,d=>(
d.recettore
)))
trj=d3.json("https://raw.githubusercontent.com/giulianogemma/calsta/master/trj_poly2.json", function(error, data){
//use data here
})
/*trj=d3.json("https://raw.githubusercontent.com/giulianogemma/calsta/master/trj_points2_4h.json", function(error, data){
//use data here
})*/
trj2=d3.json("https://raw.githubusercontent.com/giulianogemma/calsta/master/sources_circles.json", function(error, data){
//use data here
})
rec=d3.json("https://raw.githubusercontent.com/giulianogemma/calsta/master/recettori_points.json", function(error, data){
//use data here
})
results={
let data = await
d3.csv("https://raw.githubusercontent.com/giulianogemma/calsta/master/res_grouped.csv" );
return data
}
ts={
let data = await
d3.csv("https://raw.githubusercontent.com/giulianogemma/calsta/master/trasferimenti_segnalazioni.csv" );
return data
}
es={
let data = await
d3.csv("https://raw.githubusercontent.com/giulianogemma/calsta/master/es_elaborati.csv" );
return data
}
tsp = {return renderTable(ts);}
//esp = {return renderTable(es);}
import {renderTable} from "@tmcw/fancy-tables"
res=d3.nest()
.key(d => d.recettore)
.entries(results.filter(function(d) { return (d.meteo == meteo_by) & (d.recettore == receptor_by) & (d.data_evento== evento_by);}))
.map(d => { return d.values;})
res2=results.filter(function(d) { return (d.meteo == meteo_by) & (d.recettore == receptor_by) & (d.data_evento== evento_by);})
//viewof data_in = html`<input type=file accept="*/*">`
//viewof data_in2 = html`<input type=file accept="*/*">`
//trj_txt2= Files.text(data_in2);
//trj2 = JSON.parse(trj_txt2);
//trj_txt= Files.text(data_in);
//trj = JSON.parse(trj_txt);
prop=d3.nest()
.key(d => d.id)
.entries(trj.features)
.map(d => { return d.values[0].properties ;})
recettori= d3.nest()
.key(d=> d.recettore)
.rollup(d=>d.recettore)
.entries(prop)
.map(d=> d.key)
meteo= d3.nest()
.key(d=> d.meteo)
.rollup(d=>d.meteo)
.entries(prop)
.map(d=> d.key)
viewof receptor_by = select({
options: recettori,
title: "Select receptor"
})
recs=d3.nest()
.key(d => d.id)
.entries(rec.features)
.map(d => { return d.values[0].properties ;})
selected_rec = recs.filter(function(d) { return (d.recettore == receptor_by) ;});
viewof meteo_by = select({
options: meteo,
title: "Select meteo dataset"
})
prop.filter(function(d) { return (d.recettore == receptor_by) & (d.meteo == meteo_by) ;});
function get_events(d){
var data;
data = prop.filter(function(d) { return (d.recettore == receptor_by) & (d.meteo == meteo_by) ;});
var eventi= d3.nest()
.key(d=> d.data_evento)
//.rollup(d=>receptor_by)
.entries(data)
.map(d=> d.key)
return eventi;}
viewof evento_by = select({
options: get_events(),
title: "Select event"
})
res2
intersection_table ={
if (res2.length > 0){
return renderTable(res2);
}
else{
return "Nessuna intersezione";
};
};
function get_traj_count(d){
var data;
data = prop.filter(function(d) { return (d.data_evento == evento_by) & (d.meteo == meteo_by);});
return data.length-1;}
tobe_enabled = function(){
var enabled=false;
if((get_traj_count()>0)){
enabled=true;
}
return enabled;
}
function slider_text(){var msg; if (tobe_enabled()) {msg = "From 0 to "+get_traj_count()} else{msg= "Single trajectory"}; return msg;}
msg = slider_text()
//viewof all_trajs = html`<input type=checkbox>`
viewof trajs_sel = slider({
min: 0,
max: get_traj_count(), //trj.features.length-1,
step: 1,
value: 0,
title: "Select trajectory",
description: msg,
disabled: tobe_enabled()
})
viewof all_trajs = checkbox({
title: 'Show all trajectories',
//description: 'Just a single checkbox to toggle',
options: [
{ value: 'toggle', label: 'All' }
],
value: 'toggle'
})
turf = require('@turf/turf')
rec
viewof map = {
/*
var css = html`link href="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.css" rel="stylesheet" /`
var sty = html`<style>
html`<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>`
*/
var container = html`<div style="height:480px;" style="width:500px;" id='map'></div>`
//var container = html`<div style="width:50%;" id='map'></div>`
//transform: rotateZ(-135deg);
var content = html`
<style>
.marker {width:0; height:0;}
.marker span {
display:flex;
justify-content:center;
align-items:center;
box-sizing:border-box;
width: 30px;
height: 30px;
color:#fff;
background: #693;
border:solid 2px;
border-radius: 0 70% 70%;
box-shadow:0 0 2px #000;
cursor: pointer;
transform-origin:0 0;
transform: rotateZ(-135deg)
}
.marker span b {transform: rotateZ(135deg)}
.mapboxgl-popup {
max-width: 200px;
}
</style>
<div id="menu">
<input
id="streets-v11"
type="radio"
name="rtoggle"
value="streets"
checked="checked"
/>
<label for="streets">streets</label>
<input id="light-v10" type="radio" name="rtoggle" value="light" />
<label for="light">light</label>
<input id="dark-v10" type="radio" name="rtoggle" value="dark" />
<label for="dark">dark</label>
<input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors" />
<label for="outdoors">outdoors</label>
<input id="satellite-v9" type="radio" name="rtoggle" value="satellite" />
<label for="satellite">satellite</label>
</div>
<div class='map-wrapper'>
${container}
<div class='map-overlay' id='features'>
<b>Informazioni</b>
<div id='pd'>
<p>Tocca una traiettoria od un' area!</p>
</div>
</div>
</div>`;
yield content; // Give the container dimensions.
var map = container.value = new mapboxgl.Map({
container,
center: [10.294592, 43.597031],
zoom: 10.5,
style: "mapbox://styles/mapbox/streets-v10",
scrollZoom: true
});
map.addControl(new mapboxgl.NavigationControl(),'top-left');
map.addControl(new mapboxgl.ScaleControl(),'bottom-left');
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
var traj_filter=[];
if(all_trajs=="toggle"){
traj_filter=["all",
["==", 'recettore', receptor_by], ["==", "data_evento", evento_by],
["==", 'meteo', meteo_by]]}
else{
traj_filter=["all", ["==", 'uid', trajs_sel],
["==", 'recettore', receptor_by], ["==", "data_evento", evento_by],
["==", 'meteo', meteo_by]];
};
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle('mapbox://styles/mapbox/' + layerId);
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
invalidation.then(() => map.remove());
map.on('style.load', function (e) {
map.addSource('trajs', {
"type": "geojson",
"data": trj,
});
map.addSource('receptors', {
"type": "geojson",
"data": rec,
});
map.addSource('sources', {
"type": "geojson",
"data": trj2,
});
var center = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [10.294592, 43.597031]
},
"properties": {
"title": "Mapbox",
"description": "Calambrone",
"icon": {
"className": 'my-icon icon-sf', // class name to style
"html": '★', // add content inside the marker, in this case a star
"iconSize": null, // size of icon, use null to set the size in CSS
'marker-color': '#3bb2d0',
'marker-size': 'large',
'marker-symbol': 'commercial'
}
}
},
]
};
/*
// add markers to map
center.features.forEach(function(marker, i) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
el.innerHTML = '<span><b>' + (i + 1) + '</b></span>'
// make a marker for each feature and add it to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({
offset: 25
}) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});
*/
// add receptors to map
rec.features.forEach(function(marker, i) {
// create a HTML element for each feature
if(marker.properties.recettore == receptor_by)
{
var el2 = document.createElement('div');
el2.className = 'marker';
el2.innerHTML = '<span><b>' + marker.properties.recettore + '</b></span>'
// make a marker for each feature and add it to the map
new mapboxgl.Marker(el2)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({
offset: 25
}) // add popups
.setHTML('<h3>' + marker.properties.recettore + '</h3><p>' + marker.properties.recettore + '</p>'))
.addTo(map);
}
});
// Draws sources area
map.addLayer({
'id': 'trj2',
'type': 'fill',
'source': 'sources',
'layout': {},
'paint': {
'fill-color': ['get', "color"], //'#acdd12',
'fill-opacity': 0.5
},
});
//Draw Trajectories
map.addLayer({
'id': 'trj',
//'type': 'fill',
'type': 'line',
'source': 'trajs',
'layout': {},
'paint': {
'line-color': 'rgba(255, 0, 0, 1)',
'line-width': 1
},/*
'paint': {
'fill-antialias': true,
'fill-color':'#ff4412',
'fill-opacity': 0.8,
'fill-outline-color': '#ff4412',
}, */
"filter": traj_filter// ["==", "uid", trajs_sel]
});
/*
map.addLayer({
"id": "markers",
"interactive": true,
"type": "symbol",
"source": "receptors",
"layout": {
"icon-image": "park-15",
"icon-size": 1.25
},
"paint": {
"text-size": 10
},
"filter": ["all",
["==", 'recettore', receptor_by]]// ["==", "uid", trajs_sel]
});*/
/*
map.addLayer({
"id": "trj",
"type": "point",
"source": "trajs",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "lightgreen",
"line-width": 8
}
});*/
});
map.on('render', afterChangeComplete); // warning: this fires many times per second!
function afterChangeComplete () {
if (!map.loaded()) { return } // still not loaded; bail out.
// now that the map is loaded, it's safe to query the features:
map.off('render', afterChangeComplete); // remove this handler now that we're done.
}
map.on('mousemove', function(e) {
var states = map.queryRenderedFeatures(e.point, {
layers: ['trj', 'trj2']
})
var pd = document.getElementById('pd')
if (states.length > 0) {
var {id, type, source, paint} = states[0].layer
//var {name, density} = states[0].properties
//pd.innerHTML = `<h3><strong>${name}</strong></h3><p><strong><em>${density}</strong> people per square
if(id=="trj"){
var {end, data_evento, recettore, start, uid} = states[0].properties;
pd.innerHTML = `<strong>Recettore: ${recettore}<br> evento: ${data_evento}</strong><br>start at: ${start} <br>end at: ${end}<br> Numero traiettoria: ${uid}</p>`;
}else{
if(id=="trj2"){
var {color, name,} = states[0].properties
pd.innerHTML = `<strong>Area: ${name}<br> </p>`
}
}
console.log(states[0].properties);
console.log(id);
} else {
//document.getElementById('pd').innerHTML = `<p>Hover over a state!</p>`
}
})
}
require("https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js")
mapboxgl = {
const gl = await require("mapbox-gl@0.49");
if (!gl.accessToken) {
gl.accessToken = "pk.eyJ1IjoiZ2VtbWVnIiwiYSI6ImNqemdtbHFlMTBnazUzbnBrMGl6Y2ozazIifQ.a39V4s3AOYKZElk56ydScg";
/*const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);*/
const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
console.log(href)
const href2="https://fonts.googleapis.com/css?family=Open+Sans";
document.head.appendChild(html`<link href=${href2} rel=stylesheet>`);
const href3="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css";
document.head.appendChild(html`<link href=${href3} rel=stylesheet>`);
}
return gl;
}
//mc = require("https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v3.2.1/leaflet.markercluster.js")
//mc = require('leaflet.markercluster')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
