raw_data = d3.csv('https://raw.githubusercontent.com/rinziv/DVVA-2019/master/data_observable/prova_geo.csv')
data = raw_data.map(d => ({
influencer: d.influencer,
location: d.location,
latitude: +d.latitude,
longitude: +d.longitude,
datetime: d3.timeFormat("%m - %Y")(d3.timeMonth(d3.isoParse(d.datetime))),//round to Month
// datetime: d3.timeFormat("%d- %m - %Y")(d3.timeDay(d3.isoParse(d.datetime)))//round to Day
}));
gData[0].values.map(d=>d.value)
gData= d3.nest()
.key(d=>d.datetime)
.key(d=>d.location)
.rollup(v => ({
latitude: d3.mean(v, d=>d.latitude),
longitude: d3.mean(v,d=>d.longitude),
total: v.length
}))
.entries(data)
topLocations = d3.nest()
.key(d=>d.location)
.rollup(v => v.length)
.entries(data)
.sort(function(a, b){
return b.value-a.value;
});
ext = ({
lat: d3.extent(data,d=>+d.latitude),
lon: d3.extent(data, d => +d.longitude),
time: d3.extent(data, d=>d.datetime)
})
size2radius = d3.scaleSqrt()
.domain([0, d3.max(topLocations.map(d => d.value))])
.range([0,200]);
pData = {
//CREATE A NEW DATA OBJECT WITH ALL DATES READY TO BE USED INSIDE PLOTLY
const allDates=[];
gData.forEach(function(d){
const cDate ={}
const date = d.key;
const locations = [];
const lats =[];
const lons = [];
const size = []
d.values.forEach(function (v) {
locations.push(v.key);
lats.push(v.value.latitude);
lons.push(v.value.longitude);
size.push(v.value.total);
})
cDate['date'] = date;
cDate['locations'] = locations;
cDate['latitudes'] = lats;
cDate['longitudes'] = lons;
cDate['size'] = size;
allDates.push(cDate);
});
return allDates
}
initPlot = (data) => {
let firstDate=data[0]
console.log('firstDate',firstDate)
const trace1 = {
type:'scattermapbox',
lat:firstDate.latitudes,
lon:firstDate.longitudes,
mode:'markers',
marker: {
size:firstDate.size.map(d => size2radius(d)),
color:firstDate.locations.map(d=> (L1.indexOf(d) !== -1)?'red':'orange'),
opacity:0.5
},
text:firstDate.locations,
hoverinfo:'text',
name:firstDate.date,
}
plotly.setPlotConfig({
mapboxAccessToken: 'pk.eyJ1IjoiZXRwaW5hcmQiLCJhIjoiY2luMHIzdHE0MGFxNXVubTRxczZ2YmUxaCJ9.hwWZful0U2CQxit4ItNsiQ'
});
plotly.newPlot(graph_loc, [trace1], mapLayout)
graph_loc.dispatchEvent(new CustomEvent("update"))
return 'Plot is initialised'
}
initPlot(pData)
height=800
mapLayout = ({
autosize: true,
hovermode:'closest',
showlegend:true,
width:width,
height:height,
mapbox: {
bearing:0,
center: {
lat:d3.mean(ext.lat),
lon:d3.mean(ext.lon),
},
pitch:0,
zoom:0.5,
},
})
graph_loc = html`<div class='graph_loc' style="width: ${width}; height: ${width}></div>`
// graph_loc = DOM.element('div')
md`integrare la tecnica di animazione presa da qui: https://plot.ly/javascript/animations/#animating-with-a-slider`
function animPlot(){
////////// CREATE FRAMES ///////////
// const frames=[];
const animations = [];
pData.forEach(function (d,i){
const data =[];
const trace = {};
const marker = {};
const mode = {};
const size = {};
const animation = {};
// Create trace with data //
const duration = {};
const transition = {};
const frame ={};
trace.lat = d.latitudes;
trace.lon = d.longitudes;
trace.mode = 'markers';
trace.marker = {};
trace.marker.size = d.size.map(d => size2radius(d));
trace.marker.color = d.locations.map(d=> (L1.indexOf(d) !== -1)?'red':'orange');
trace.marker.opacity ='0.5';
trace.name = d.date;
trace.text = d.locations
animation.data=[];
animation.data.push(trace)
// attributes for frames:
animation.transition= {};
animation.transition.duration=500;
animation.transition.easing='cubic-in-out';
animation.frame={};
animation.frame.duration=500;
animation.frame.redraw=false;
animations.push(animation)
plotly.animate(graph_loc,animation)
})
}
plotly = require('https://cdn.plot.ly/plotly-latest.min.js')
d3=require('d3')
md`API-key to use with mapbox (generate your own)`
mapboxAT= 'pk.eyJ1IjoiZXRwaW5hcmQiLCJhIjoiY2luMHIzdHE0MGFxNXVubTRxczZ2YmUxaCJ9.hwWZful0U2CQxit4ItNsiQ'
import {renderTable} from "@tmcw/fancy-tables"
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.
