The avatar for @gemmeg
Giuliano Gemma
Published
Edited
Apr 9, 2020
1 fork
Insert cell
md`# Smell trajectories`
Insert cell
import {select} from "@jashkenas/inputs"
Insert cell
import {slider} from "@rohscx/inputs"
Insert cell
d3 = require("d3@5")
Insert cell
trj=d3.json("https://raw.githubusercontent.com/giulianogemma/calsta/master/trj_poly2.json", function(error, data){
//use data here
})
Insert cell
trj2=d3.json("https://raw.githubusercontent.com/giulianogemma/calsta/master/sources_circles.json", function(error, data){
//use data here
})
Insert cell
results={
let data = await
d3.csv("https://raw.githubusercontent.com/giulianogemma/calsta/master/res_grouped.csv" );
return data
}
Insert cell
import {renderTable} from "@tmcw/fancy-tables"
Insert cell
res=d3.nest()
.key(d => d.recettore)
.entries(results.filter(function(d) { return (d.recettore == receptor_by) & (d.data_evento== evento_by);}))
.map(d => { return d.values;})
Insert cell
res2=results.filter(function(d) { return (d.recettore == receptor_by) & (d.data_evento== evento_by);})
Insert cell
//viewof data_in = html`<input type=file accept="*/*">`
Insert cell
//viewof data_in2 = html`<input type=file accept="*/*">`
Insert cell
//trj_txt2= Files.text(data_in2);
Insert cell
//trj2 = JSON.parse(trj_txt2);
Insert cell
//trj_txt= Files.text(data_in);
Insert cell
//trj = JSON.parse(trj_txt);
Insert cell
prop=d3.nest()
.key(d => d.id)
.entries(trj.features)
.map(d => { return d.values[0].properties ;})
Insert cell
recettori= d3.nest()
.key(d=> d.recettore)
.rollup(d=>d.recettore)
.entries(prop)
.map(d=> d.key)
Insert cell
viewof receptor_by = select({
options: recettori,
title: "Select receptor"
})
Insert cell
function get_events(d){
var data;
data = prop.filter(function(d) { return d.recettore == receptor_by;});
var eventi= d3.nest()
.key(d=> d.evento)
//.rollup(d=>receptor_by)
.entries(data)
.map(d=> d.key)
return eventi;}
Insert cell
viewof evento_by = select({
options: get_events(),
title: "Select event"
})
Insert cell
res2
Insert cell
intersection_table ={
if (res2.length > 0){
return renderTable(res2);
}
else{
return "Nessuna intersezione";
};
};
Insert cell
function get_traj_count(d){
var data;
data = prop.filter(function(d) { return d.evento == evento_by;});
return data.length-1;}
Insert cell
tobe_enabled = function(){
var enabled=false;
if(get_traj_count()>0){
enabled=true;
}
return enabled;
}

Insert cell
function slider_text(){var msg; if (tobe_enabled()) {msg = "From 0 to "+get_traj_count()} else{msg= "Single trajectory"}; return msg;}
Insert cell
msg = slider_text()
Insert cell
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()
})
Insert cell
turf = require('@turf/turf')
Insert cell
html`<style>

body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h2,
h3 {
margin: 10px;
}

h2 {
font-size: 20px;
}

h3 {
font-size: 16px;
}

p {
font-size: 14px;
margin: 10px;
text-align: left;
}

.map-wrapper {
position: relative;
width: 100%;
height: 500px;
}

#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}

.map-overlay {
position: absolute;
bottom: 0;
right: 0;
height: 30%;
background: rgba(255, 255, 255, 0.8);
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}

#features {
top: 0;
height: 150px;
margin-top: 20px;
width: 250px;
}

#legend {
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
line-height: 18px;
height: 150px;
margin-bottom: 40px;
width: 100px;
}

.legend-key {
display: inline-block;
border-radius: 20%;
width: 10px;
height: 10px;
margin-right: 5px;
}

a {
text-decoration: none;
color: #2dc4b2;
}

#console {
position: absolute;
width: 260px;
margin: 10px;
padding: 10px 20px;
background-color: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.session {
margin-bottom: 20px;
}

.row {
height: 12px;
width: 100%;
}

.colors {
background: linear-gradient(to right, #2dc4b2, #3bb3c3, #669ec4, #8b88b6, #a2719b, #aa5e79);
margin-bottom: 5px;
}

.label {
width: 15%;
display: inline-block;
text-align: center;
}

</style>`
Insert cell
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>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>`*/
var container = html`<div style="height:800px;" style="width:800px;" id='map'></div>`
var content = html`
<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'>
Trajectory info
<div id='pd'>
<p>Tocca una traiettoria!</p>
</div>
</div>
</div>`;
yield content; // Give the container dimensions.
var map = container.value = new mapboxgl.Map({
container,
center: [10.294592, 43.597031],
zoom: 12,
style: "mapbox://styles/mapbox/streets-v10",
scrollZoom: true
});
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
var traj_filter = ["all",["==", "uid", trajs_sel],["==", 'recettore', receptor_by], ["==", "evento", evento_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('sources', {
"type": "geojson",
"data": trj2,
});
/*
map.addLayer({
"id": "circles1",
//"source": "markers",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf",
"circle-opacity": 0.5,
"circle-stroke-width": 0,
},
"filter": traj_filter,
});
*/
var marker = new mapboxgl.Marker()
.setLngLat([10.294592, 43.597031])
.addTo(map);
var center = turf.point([10.294592, 43.597031]);
var radius = 25;
var options = {
steps: 80,
units: 'meters'
};
/*
var circle = turf.circle(center, radius, options);

map.addLayer({
"id": "circle-fill",
"type": "fill",
"source": {
"type": "geojson",
"data": circle
},
"paint": {
"fill-color": "pink",
"fill-opacity": 0.5
}
});
map.addLayer({
"id": "circle-outline",
"type": "line",
"source": {
"type": "geojson",
"data": circle
},
"paint": {
"line-color": "blue",
"line-opacity": 0.5,
"line-width": 10,
"line-offset": 5
},
"layout": {

}
});
*/
// Create a popup, but don't add it to the map yet.

/*
//Prova per disegnare un cerchio sulla mappa
map.addSource("polygon", createGeoJSONCircle([10.3230767110429, 43.5853176841223], 0.5));

map.addLayer({
"id": "polygon",
"type": "fill",
"source": "polygon",
"layout": {},
"paint": {
"fill-color": "blue",
"fill-opacity": 0.6
}
});
*/
// Draws sources area
map.addLayer({
'id': 'trj2',
'type': 'fill',
'source': 'sources',
'layout': {},
'paint': {
'fill-color': '#acdd12',
'fill-opacity': 0.5
},
});
//Draw Trajectories
map.addLayer({
'id': 'trj',
'type': 'fill',
'source': 'trajs',
'layout': {},
'paint': {
'fill-color': '#ff4412',
'fill-opacity': 0.8
},
"filter": traj_filter// ["==", "uid", trajs_sel]
});
});
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']
})
var pd = document.getElementById('pd')

if (states.length > 0) {
var {end, evento, recettore, start, uid} = states[0].properties
//var {name, density} = states[0].properties
//pd.innerHTML = `<h3><strong>${name}</strong></h3><p><strong><em>${density}</strong> people per square
pd.innerHTML = `<strong>Recettore: ${recettore}<br> evento: ${evento}</strong><br>start at: ${start}<br>end at: ${end}<br> id: ${uid}</p>`
console.log(states[0].properties);
} else {
//document.getElementById('pd').innerHTML = `<p>Hover over a state!</p>`
}
})
}
Insert cell
require("https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js")
Insert cell
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>`);
}
return gl;
}
Insert cell

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.
Learn more