31:T42c,md`If we consider more agents we can rapidly consider the entire field as a conflict zone which is absurd, so we need to filter those zones. To do so, we will introduce several threshold parameters based on : * the weight, between 0 and 1 it represents the synchronisation of each agent to reach a point (perfect synchronisation = 1). The more synchro your agents are, higher is the incertitude on which will possess the point. * the temporal distance, the time needed by an agent to reach a point. If a point is too far away from the agents it is not interesting to take it into account because the incertitude is too large. * the position of each agent. We could have a conflict zone between A and B which includes C but in the vicinity of C there is no interest of consider it as a conflict zone because the area is clearly possess by C. To define what we call "the vicinity" we use the influence zone model developped by [Manuel Stein et al.](https://kops.uni-konstanz.de/bitstream/handle/123456789/35829/Stein_0-371514.pdf) We can now see the filtered zones.`32:T528,md`On the plot above we added two more filters not yet explain. #### The temporal distance filter It is based on the fact that a point too far away from the agents is not interesting because the uncertainty on this point is too large. We set the value of the maximum time between two agents as the time threshold. #### The agent influence zones As we explain above, two agents might have a conflict zone which includes a third agent, in this case we would like to not taking into account the vicinity of the third agent as a part of the conflict zone because the zone is obviously possess by the third agent. In fact, the vicinity is defined thanks to the influence zones model of [Manuel Stein et al.](https://kops.uni-konstanz.de/bitstream/handle/123456789/35829/Stein_0-371514.pdf) which take into account the speed and the orientation of the agent. We modified a little bit the model to fit to a more global approach (not only for soccer purpose). Remark: we can observe that the model does not take the value if it is in the area of influence but if the conflict zone expend further behind the third agent, the drawing will pass through the influence zone because the contour plot tries to match each point with another point which satisfies the previous explained tresholds. I do not know how to fix it... `33:T7de,md`## Export the model To export the model, the *render(svg, Agents, combinations, influenceRadius, options)* function is a good option because it will directly draw the model in your svg element. However, it demands arguments under a certain form. Its arguments are : * *svg* which is the SVG element on which we draw the model. * *Agents* are an object of the form ({position: [[x0, y0], [x1, y1], ...], speed: [[vx0, vy0], [vx1, vy1], ...], relations: [[ai, aj, cij], [ai', aj', ci'j'], ...]}) . * *combinations* are an array of arrays of agents index which determines the agent interactions for a zone. To draw the zone with all agents in interaction we can use: [[...Array(Agents.position.length).keys()]]. * *influenceRadius* is the radius of influence we use to build the model. * *options*: an array with string elements which add or remove drawing elements (detailed below). Its options are : * 'colorMap': Plot the colormap of the weight. * 'contours': Plot the contour of the conflict zone. * 'notThresh': Remove the time threshold filter. * 'noFilterAgents': Remove the agent proximity filter. * 'ZI': plot the influence zones of each agent. * 'barycenter' : plot the barycenter of each zone. * 'relation': Add to the weight model relations between agents. * 'convexHull' : Simplify the zone contours with the convex hull algorithm. * 'ellipse' : Simplify the zone contours by fitting an ellipse. * 'area': Add to the model an area with a fix weight. * 'noPos': remove the plot of the agents. * 'noSpeed': remove the plot of the speed. * 'noZones' : remove the contours but still compute them. Allows to solely plot the barycenter. * 'noFillZones' : plot only the contours of the zones. * 'notThreshMin': remove the minimum time threshold. * 'noZiOverlap': let the points in several influence zones be filtered. * 'grid': plot the graph on which we draw our model. * 'dots': plot the nodes of the graph. * 'weight': works only if 'dots' is set, attribute a color to each node based on their weight.`34:T1041, function render(svg, size, Agents, combinations, influenceRadius, options) { const nodes = getNodes(size), dots = Agents.position.concat(nodes), times = timeNodes(Agents, dots), weightedDots = conflictZone(times, options.includes('relation'), Agents.relation, area); zoneInflu(Agents, influenceRadius, 1); const delaunay = d3.Delaunay.from(dots); const path = d3.geoPath(); const contours1 = d3.tricontour().thresholds(300)( weightedDots.map((d, i) => [d.pos[0], d.pos[1], d.weight]).filter(d => isFinite(d[2])) ); /*const contours1 = d3.tricontour().contour( weightedDots.map((d, i) => [d.pos[0], d.pos[1], d.weight]).filter(d => isFinite(d[2])), d.treshold );*/ const delaunayG = svg.append("g"); if (options.includes('colorMap')){ delaunayG.selectAll("path1").data(contours1) .enter() .append("path") .attr('d', path) .style('fill', d => { let c = color(d.value) if (options.includes('brighter')) c = d3.color(c).brighter(0.6) return c }) /*delaunayG .append("path") .attr('d', path(contours1)) .style('stroke', 'blue');*/ } if (options.includes('contours')){ let Zones = multipleZones2(combinations, times, Agents, options); drawZone(svg, size, path, Zones, Agents, combinations, 0.5, options); } const agentsG = svg.append('g'); if (!options.includes('noPos')) { agentsG.selectAll('agentPos').data(Agents.position) .enter() .append('circle') .attr('class', 'agentPos') .attr('cx', agent => agent[0]) .attr('cy', agent => agent[1]) .attr('r', agentRadius) .style('fill', (_, i) => Agents.color ? Agents.color[i] : 'red') .style('stroke', Agents.color ? 'red' : 'none') agentsG.selectAll('agentPos').data(Agents.position) .enter() .append('text') .attr('x', agent => agent[0]) .attr('y', agent => agent[1]) .attr('text-anchor', 'middle') .attr('dy', 20) .text((agent, i) => `Agent ${i}`) .style('font-size', textSize); } if (!options.includes('noSpeed')) { agentsG.selectAll('agentSpeed').data(Agents.position) .enter() .append('line') .attr('x1', d => d[0]) .attr('y1', d => d[1]) .attr('x2', (d, i) => d[0] + 10*Agents.speed[i][0]) .attr('y2', (d, i) => d[1] + 10*Agents.speed[i][1]) .attr("stroke", "black") .attr("stroke-width", 2); } if (options.includes('ZI')) { const ZIG = svg.append('g'); ZIG.selectAll('ZI').data(Agents.ZI) .enter() .append('path') .attr('d', (d, i) => influencePaths(d3.path(), Agents, i, d)) .style('fill', 'none') .style('stroke-dasharray', 4) .style('stroke-width', 2) .style('stroke', '#757574'); } //show nodes if (options.includes('RI')) { svg.selectAll("RI").data(Agents.position) .enter() .append("circle") .attr('class', 'RI') .attr('cx', agent => agent[0]) .attr('cy', agent => agent[1]) .attr('r', RI) .style('fill', 'none') .style('stroke-dasharray', 6) .style('stroke-width', 2) .style('stroke', 'black')//'#757574'); } //show nodes //show grid if (options.includes('grid')) { delaunayG.append("path") .attr('d', delaunay.render()) .style('fill', 'none') .style('stroke', '#7d7d7d') } if (options.includes('dots')) { delaunayG.selectAll("circle").data(weightedDots) .enter() .append("circle") .attr('cx', point => point.pos[0]) .attr('cy', point => point.pos[1]) .attr('r', 2) //.style('stroke', '#afb0b3') .style('fill', point => options.includes('weight') ? color(point.weight) : '#7d7d7d'); } return svg.node() }35:T449,legend = (selection, props) => { const {combinations, abs, spacing, options} = props, rectWidth = 20 + textSize; const groups = selection.selectAll('g').data(combinations), element = groups.enter() .append('g') .attr('transform', (d, i) => `translate(0, ${i * (spacing + textSize)})`); groups.enter() .append('text') .attr('class', 'title') .attr('x', 0) .attr('dy', textSize) .text('Relations:') .style('font-size', textSize); element.append('rect') .attr('y', spacing + textSize) .attr('width', rectWidth) .attr('height', rectWidth/2) .style('fill', (d, i) => !options.includes('ellipse') ? tTexture(selection, i) : tTexture(selection, i, colors[i%10])) .style('opacity', 0.5) .style('stroke', 'grey') element.append('text') .attr('x', spacing + rectWidth) .attr('y', spacing + textSize + rectWidth/4) .attr('dy', '0.35em') .style('fill', (_, i) => abs.includes(i) ? 'red' : 'black') .text(d => d.toString().replace(/,/gi, '-')) .style('font-size', textSize) }36:Td8c,drawZone = (selection, size, path, zones, Agents, combinations, opacity, options) => { const zoneG = selection.append('g'), abs = [], texture = textures.lines().lighter().stroke('grey'); selection.call(texture); if (!options.includes('noZones')){ zoneG.selectAll('path').data(zones) .enter() .append("path") .attr('id', (d, i) => 'contour' + i) .attr('d', (zone, i) => path(zone) ? path(zone) : abs.push(i)) .style('fill', (d, i) => !options.includes('noFillZones') ? tTexture(selection, i, /*colors[i%10]*/"rgba(235, 218, 218, 0.3)") : 'none') //.style('fill', (d, i) => !options.includes('noFillZones') ? : 'none') .style('opacity', opacity) .style('stroke', 'grey')//'black') .style('stroke-width', 2) } if (options.includes('ellipse')){ zones.forEach((zone, i) => { let ellipses = findEllipse(zone); console.log('ellipse', i, ' : ', ellipses) const ellipseG = selection.append('g'), Resize = 1 ellipseG.selectAll('ellipse').data(ellipses) .enter() .append('ellipse') .attr('transform', ellipse => `rotate(${toDeg(ellipse.tau)} ${ellipse.cx} ${ellipse.cy})`) .attr('cx', ellipse => ellipse.cx) .attr('cy', ellipse => ellipse.cy) .attr('rx', ellipse => ellipse.a*Resize) .attr('ry', ellipse => ellipse.b*Resize) .style('stroke-width', 2) .style('stroke', 'black') .style('fill', !options.includes('noFillZones') ? tTexture(selection, i, colors[i%10]) : 'none') .style('opacity', opacity) }) } const baryG = selection.append('g'), baryScale = d3.scaleSqrt().domain([0, 30000]).range([1, 10]) zones.forEach((Z, i) => { Z.coordinates.forEach((coord, j) => { coord.forEach(array => { let b = barycenter(array), area = d3.polygonArea(array), R = baryScale(area); if (options.includes('barycenter')){ baryG.append('path') .attr('d', starSymbol(d3.path(), b, R)) .style('fill', colors[i%10]) .style('opacity', opacity) .style('stroke', 'black') .style('stroke-width', '0.5'); } if (options.includes('link')){ combinations[i].forEach(k => { baryG.append('line') .attr('x1', b[0]) .attr('y1', b[1]) .attr('x2', Agents.position[k][0]) .attr('y2', Agents.position[k][1]) .style('stroke', colors[i%10]) }) } if (options.includes('label')){ baryG.append('text') .attr('x', b[0]) .attr('y', b[1]) .attr('text-anchor', 'middle') .text(combinations[i].toString().replace(/,/gi, '-')) .style('fill', colors[i%10]) .style('stroke', 'black') .style('stroke-width', 0.5) } }) }) }) if (!options.includes('noLegend')){ const place = legendPlacement(Agents, size, combinations) const legendG = selection.append('g') .attr('transform', `translate(${place}, 0)`) .call(legend, { combinations, abs, spacing: 10, options }) } }37:T468,multipleZones2 = (combinations, times, Agents, options) => { var Z = []; combinations.forEach((combination, i) => { let time = timeIdxFilter(times, combination), weight = conflictZone(time, options.includes('relation'), Agents.relation, area), thresh = getTreshold(weight, tau); let A = selectAgents(Agents, combination), t_thresh = timeAgents(A, time); if (t_thresh < 5 && !options.includes('notThreshMin')) t_thresh = 5; let contourZone = d3.tricontour() .value((d, i) => { let value = 0; if ((!options.includes('noFilterAgents') && nodeInZone(Agents, d, options)) || (!options.includes('notThresh') && tooAway(t_thresh, time[i]))){ value = thresh.treshold - 0.1 } else value = d[2]; return value; }) .contour( weight.map((d, i) => [d.pos[0], d.pos[1], d.weight]).filter(d => isFinite(d[2])), thresh.treshold ); if (options.includes('convexHull')) contourZone = simplifyZone(contourZone) Z.push(contourZone); }) return Z; }38:T525,multipleZones = (combinations, times, Agents, options) => { var Z = []; combinations.forEach((combination, i) => { let time = timeIdxFilter(times, combination), weight = conflictZone(time, options.includes('relation'), Agents.relation, area), tresh = getTreshold(weight, tau), tresh2 = getTreshold(weight, tau/2), filtered = filterWeight(weight, tresh.treshold); if (!options.includes('notThresh')){ let A = selectAgents(Agents, combination), t_thresh = timeAgents(A, time); if (t_thresh < 5) t_thresh = 5; filtered = weightAfterTresh(filtered, t_thresh); } /*if (!options.includes('noFilterAgents')){ filtered = filterNodesAgents(filtered, Agents); }*/ let contourZone = d3.tricontour() .value(d => !options.includes('noFilterAgents') ? nodeInZone(Agents, d, options) ? -5 : 1 : 1) .contour( filtered.map((d, i) => [d.pos[0], d.pos[1], d.weight]).filter(d => isFinite(d[2])), 1 ); /*let contours = d3.tricontour().thresholds([tresh.treshold, tresh2.treshold])( filtered.map((d, i) => [d.pos[0], d.pos[1], d.weight]).filter(d => isFinite(d[2])) );*/ //contours.forEach(contour => Z.push(contour)); Z.push(contourZone) }) return Z; }39:T50e,agents = (nAgents, initAgent, opts = {}) => { var Agents = ({position: [], speed: [], relation: []}); if (opts.color) Agents.color = []; for (let i = 0; i < parseInt(nAgents); i++){ let Agent = [0, 0]; if (initAgent == "polygon") { let center = [width/2, height/2]; let radius = 0.5 * distance(center, [width/2, 0]); let angle = i * 2*Math.PI / nAgents; Agent = [center[0] + radius*Math.cos(angle), center[1] + radius*Math.sin(angle)] } else { Agent = [Math.random() * width, Math.random() * height ]; //Agent = [350 + i*40, 200 + i*40 ]; } let Speed = [0, 0]; if (!opts.noSpeed) { Speed = [factorSpeed * (Math.random() - Math.random()), factorSpeed * (Math.random() - Math.random())]; //Speed = [factorSpeed * (1), factorSpeed * (-1)]; } if (opts.color) { let c = colors[i%10]; Agents.color.push(c); } Agents.position.push(Agent); //Agents.position = [[180, 160],[230, 210],[280, 260]] Agents.speed.push(Speed); } relations.split(';').forEach(d => { let temp = d.split('-'); temp[0] = parseInt(temp[0]); temp[1] = parseInt(temp[1]); temp[2] = parseFloat(temp[2]); Agents.relation.push(temp); }) return Agents; }3a:Ta57,findEllipse = (Multipolygon) => { //https://www.stsci.edu/~RAB/Backup%20Oct%2022%202011/f_3_CalculationForWFIRSTML/Enclosing%20Ellipse.pdf function F1(h, k, tau, d){ return [h - d/2 * Math.cos(tau), k - d/2 * Math.sin(tau)] } function F2(h, k, tau, d){ return [h + d/2 * Math.cos(tau), k + d/2 * Math.sin(tau)] } function s(F1, F2, array){ let smin = Infinity, smax = 0; array.forEach(xy => { let s = distance(xy, F1) + distance(xy, F2) if (s > smax) smax = s; else if (s < smin) smin = s; }) return (smax + smin)/2 } function fhktau(s, d) { return Math.PI * s/4 * Math.sqrt(s**2 - d**2) } function findDeltaMax(h, k, array){ let max = 0; array.forEach(xy => { let m = 2*distance([h, k], xy) if (m > max) max = m; }) return max } var ELLI = []; const precisionFactor = 1; Multipolygon.coordinates.forEach((coord, i) => { coord.forEach((arr, j) => { let h,k,tau, distanceF, f1_f = 0, f2_f = 0, S_f = Infinity, FHKT_f = Infinity, array = d3.polygonHull(arr), center = d3.polygonCentroid(array), dmax = 0, p = 0, q = 0; for (let m = 0; m < array.length; m++){ for (let n = m+1; n < array.length; n++){ let d = distance(array[m], array[n]) if (d > dmax){ p = m; q = n; dmax = d; } } } //centroid + angle h = (array[p][0] + array[q][0])/2; k = (array[p][1] + array[q][1])/2; tau = Math.atan((array[p][1] - array[q][1])/(array[p][0] - array[q][0])); let deltaMax = findDeltaMax(h, k, array), evoA = []; //Optimisation for (let d = 0; d < deltaMax*precisionFactor; d++){ let f1 = F1(h, k, tau, d/precisionFactor), f2 = F2(h, k, tau, d/precisionFactor), S = s(f1, f2, array), FHKT = fhktau(S, d/precisionFactor); if (FHKT < FHKT_f) { FHKT_f = FHKT; S_f = S; f1_f = f1; f2_f = f2; distanceF = d/precisionFactor; } evoA.push({area: FHKT, d: d/precisionFactor}) } let atemp = S_f/2, btemp = Math.sqrt(S_f**2 - distance(f1_f, f2_f)**2)/2, a = Math.max(atemp, btemp), b = Math.min(atemp, btemp), e = Math.sqrt(a**2 - b**2)/a; ELLI.push({cx: h, cy: k, a: a, b: b, tau: tau, e: e, f1: f1_f, f2: f2_f, deltaf: distanceF,s: S_f, area: FHKT_f, evoA: evoA}) }) }) return ELLI }3b:[] 2f:{"title":"Conflict zone model","cells":[{"id":0,"value":"md`# Conflict zone model`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`The role of this notebook is to define the conflict zone model and to show an application of this model on a football dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"md`## To do : \n* find a better visualisation.\n* make the notebook usable by other, like a global function which find the zones.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"md`## Definition\n\nWe define the conflict zone as the space where the agents spend quasi the same time to reach a point.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"Agents0 = agents(2, \"polygon\", {noSpeed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1670,"value":"RI = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":1005,"value":"figure2A = {\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n \n yield svg.node()\n \n let options = ['contours','RI'].concat(Options);\n render(svg, [width, height], Agents0, [[0,1]], influenceRadius, options);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1196,"value":"md`When we seek the zone for two agents it is simple but if we add an agent we now have multiple conflict zones. The zones by pair of agent, 3 zones : \n* Conflict zone agent 0 - agent 1,\n* Conflict zone agent 0 - agent 2,\n* Conflict zone agent 1 - agent 2,\n\nand the zone by triplet of agent :\n* Conflict zone agent 0 - agent 1 - agent 2.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"Agents1 = agents(3, 'polygon', {noSpeed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"figure3AW = {\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n \n yield svg.node()\n \n let options = ['contours', 'notThresh', 'noFilterAgents'].concat(Options);\n yield render(svg, [width, height], Agents1, [[...Array(Agents.position.length).keys()], [0,1], [0,2], [1,2]], influenceRadius, options);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"figure3ANoSpeed = {\n await visibility();\n return draw(Agents1, ['contours'], [[...Array(Agents.position.length).keys()], [0,1], [0,2], [1,2]])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"md` \n\n## Method\n\nTo find those zones we start by drawing a graph with multiple nodes and place _n_ agents (in red) with a speed vector, distributed randomly or on the corners of a polygon:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"viewof n_agents = slider({\n min: 2, \n max: 10, \n step: 1, \n value: 3, \n title: \"Number Agents\",\n description: \"Modify the number of agents.\",\n submit: true\n}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"viewof initAgent = radio({\n title: 'Initalisation of agents',\n description: 'Please select the initialising method',\n options: [\n { label: 'Random', value: 'random' },\n { label: 'Polygon', value: 'polygon' }\n ],\n value: 'polygon'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"viewof factorSpeed = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 5, \n title: \"Speed factor\",\n description: \"Multiply the speed by this factor.\",\n submit: true\n}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"figureGrid = {\n await visibility();\n return draw(Agents, ['dots', 'grid'])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"md`Then, we compute a certain weight, _w_, to each node depending of the temporal distances between the nodes and the agents. The temporal distances model is detailed by [G. Rolland et al.](https://hal.archives-ouvertes.fr/hal-02482706/file/characterization_of_Space_and_Time-Dependece_of_3-Point_Shots_in_Basketball.pdf) \nTo do so, we use this equation :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"tex.block`w_{c} = \\frac{\\sum_{i=0}^n \\sum_{j=i+1}^n e^{-\\frac{\\Delta t_{ij}^2}{2\\sigma^2}}}{\\frac{n(n-1)}{2}}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"md`with ${tex `n = ${n_agents}`}, ${tex `\\sigma = 1`} and ${tex `\\Delta t_{ij} = t_i - t_j`} in our model, but we could peak or smooth the distribution if we would like. Now, we interpolate the weight with a color interpolator red-blue and we plot it. As you can see below, the blue zones are the conflict zones. \n\n#### Multiple zones\n\nWe can define a zone for each combinaison of agent. Therefore for *n* agents we have ${tex `\\sum_{k = 2}^{n} {n\\choose k}`} combinaisons available.\nEach combinaison can be plot, you just have to put in an array the index of the agents. The followed example plot 4 zones, all combinaisons available for 3 agents.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"combinations = [[...Array(Agents.position.length).keys()], [0, 1], [0, 2], [1, 2]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1431,"value":"md`#### Filtered weight\n\nWe draw a contour to highlight the zones. To do it, we filter the node by their weight thanks to a threshold. We take the nodes with a weight higher than the treshold. This threshold is a percentage of the total nodes. Therefore, the cut value is set in function of the number of nodes. \nWe visualize the number of nodes in function of a weight value on the following plot:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"viewof tau = slider({\n min: 0.01, \n max: 0.99, \n step: 0.01, \n value: 0.1, \n title: \"Percentage of nodes in zones.\",\n description: \"Change the percentage to adjust the number of nodes inside zones.\",\n submit: true\n}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"viewof view = embed({\n $schema: 'https://vega.github.io/schema/vega-lite/v4.json',\n height: 200,\n width: 360,\n layer: [{\n data: {\n values: d.data,\n name: 'source'\n },\n mark: 'line',\n encoding: {\n x: {field: 'value', type: 'quantitative', title: 'Weight'},\n y: {field: 'nb', type: 'quantitative', title: '#Nodes'} \n }\n },\n {\n data: {\n values: treshLine,\n name: 'line'\n },\n mark: {stroke: 'firebrick', type: 'line'},\n encoding: {\n x: {field: 'x', type: 'quantitative', title: ''},\n y: {field: 'y', type: 'quantitative', title: ''}\n }\n }] \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"treshLine = [{x: d.treshold, y: 0}, {x: d.treshold, y: d3.max(d.data.map(d => d.nb))}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3167,"value":"embed = require(\"vega-embed@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1364,"value":"md`Now we can visualise the filtered data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"figure3ASpeed = {\n await visibility();\n return draw(Agents, ['contours', 'ZI'], combinations)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"viewof influenceRadius = slider({\n min: 5, \n max: 50, \n step: 1, \n value: 25, \n title: \"Radius of the influence zone\",\n description: \"Change the size of the influence zone.\",\n submit: true\n}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"viewof Options = checkbox({\n title: \"Options\",\n description: \"Please select the options you want to add to the visualisation.\",\n options: [\n { value: \"relation\", label: \"Relations between 2 agents\" },\n { value: \"area\", label: \"Interesting zone\" }\n ],\n value: [\"weight\"],\n submit: true\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"viewof relations = text({title: \"Relations between agents\", placeholder: \"0-1-5\", description: \"You can add relation between agent as agent(i)-agent(j)-coeff. Example : 2-3-1.5; 0-2-18\", submit: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"md`#### Zone of interest coordinates :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"p1 = [700, 150]","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"p2 = [800, 350]","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"md`We can now add options to our model like relations between agents. Thoses relations are added by putting a coefficient, ${tex`c_{ij}`}, to each weight, ${tex`w_{node, ij}`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"tex.block`w_{c} = \\frac{\\sum_{i=0}^n \\sum_{j=i}^n \\ c_{ij}\\ e^{-\\frac{\\Delta t_{ij}^2}{2\\sigma^2}}}{\\sum_{i=0}^n \\sum_{j=i}^n \\ c_{ij}}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"md`If no relations are specified we consider the coefficient equal to 1.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"md`Moreover, we also add zones of interest. Those zones have a certain weight, ${tex`w_{z}`}. Then we can compute the composition of the different weight by this formula : `","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"tex.block`\n w_{node} = \\frac{\\sum_{k \\in \\{c, z\\}} w_k(x, y)}{\\sum_{k \\in \\{c, z\\}} \\ w_k^{max}}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2941,"value":"md`Where ${tex`w_k^{max}`} is the maximum weight you can attribute to zones.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1850,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"md`## Tech Zone`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1424,"value":"md`### Drawing functions:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"async function draw(Agents, options, combinations) {\n \n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n\n options = options.concat(Options);\n render(svg, [width, height], Agents, combinations, influenceRadius, options);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1847,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2516,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1054,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":2608,"value":"legendPlacement = (Agents, size, combinations) => {\n let place = 5,\n b = barycenter(Agents.position);\n\n /*if (b[0] < size[0]/2){\n let margin = 100;\n combinations.forEach(d => {\n let m = d.length*22;\n if (m > margin) margin = m;\n })\n place = size[0] - margin;\n }*/\n return place;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2667,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1059,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":1396,"value":"influencePaths = (context, Agents, i, params) => {\n \n let angleSpeed = Math.atan(Agents.speed[i][1]/Agents.speed[i][0]);\n\n angleSpeed += Agents.speed[i][0] < 0 ? Math.PI : 0;\n \n if (Agents.speed[i][1] == 0 && Agents.speed[i][0] == 0){\n angleSpeed = 0; \n }\n \n let minus = (angleSpeed - params.angle),\n plus = (angleSpeed + params.angle);\n \n context.moveTo(Agents.position[i][0], Agents.position[i][1]);\n context.arc(Agents.position[i][0], Agents.position[i][1], params.radius, minus, plus);\n context.closePath();\n return context; \n };","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`### Agents functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"Agents = {\n let Agents = agents(n_agents, initAgent)\n zoneInflu(Agents, influenceRadius)\n return Agents\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"//Compute the time max between 2 agents \ntimeAgents = (Agents, times) => {\n \n let pos = Agents.position,\n l = pos.length,\n t = 0;\n for (let i = 0; i < l; i++){\n for (let j = 0; j < l; j++){\n if (i == j) continue;\n let temp = distanceTime(pos[i][0], pos[i][1], pos[j][0], pos[j][1], 0, 0, 10);\n if (temp > t) {\n t = temp;\n }\n }\n }\n return t;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2013,"value":"selectAgents = (Agents, combinaison) => {\n let copy = {...Agents};\n for (const key in Agents){\n let k = [...Agents[key]];\n k = k.filter((_, i) => combinaison.includes(i));\n copy[key] = k;\n }\n return copy;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2177,"value":"md`### Nodes manipulations\nIt follows those step :\n* Nodes: points of the graph.\n* Dots: points of the graph + corners.\n* times: attributes to each node temporal distances of each agent. \nHere, we could add the step of filter the agent's time in function of the combination.\n* weightedDots: get the weight of each node in function of the time.\n* d: Array with 2 elements; first an array with the *tau* percent more weighted dot and second the corresponding weight value threshold.\n* filterDots: the weightedDots filtered by the previous threshold.\n* t_thresh: The time threshold which is the time between 2 agents of the most distant agents.\n* filter2Dots: the filterDots filtered by the time threshold. \n* filter3Dots: the filter2Dots filtered by the influence zone of each agent.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2717,"value":"refine = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"mutable getNodes = (size) => {\n let width = size[0],\n height = size[1];\n \n return [[0, 0], [width, 0], [width, height], [0, height]]\n .concat(pick2d(width, height, 2500*refine, \"poissonDisc\"))\n .concat([[width - 50, 50]]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2642,"value":"nodes = getNodes([width, height])","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"dots = Agents.position.concat(nodes) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"times = timeNodes(Agents, dots)","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"weightedDots = conflictZone(times, Options.includes('relation'), Agents.relation, area)","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"d = getTreshold(weightedDots, tau)","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"filterDots = filterWeight(weightedDots, d.treshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"t_tresh = timeAgents(Agents, times)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"filter2Dots = weightAfterTresh(filterDots, t_tresh)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2485,"value":"filter3Dots = filterNodesAgents(filter2Dots, Agents)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2261,"value":"md`### Functions to get the previous development`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2321,"value":"md`#### Get the weighted dots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"timeNodes = (agents, nodes) => {\n\n var newNodes = [];\n nodes.forEach(node => {\n let newNode = ({});\n newNode.pos = node;\n let time = [];\n agents.position.forEach((agent, i) => {\n\n let t = distanceTime(agent[0], agent[1], node[0], node[1], agents.speed[i][0], agents.speed[i][1], 10);\n time.push(t);\n \n })\n newNode.t = time;\n newNodes.push(newNode);\n })\n \n return newNodes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"timeIdxFilter = (times, tabIdx) => {\n let newTab = [...times];\n times.forEach((node, idx) => {\n let n = Object.assign({}, node)\n let t = [];\n for (let i = 0; i < node.t.length; i++){\n if (tabIdx.includes(i)){\n t.push(node.t[i]);\n }\n }\n n.t = t;\n newTab[idx] = n\n })\n return newTab;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"conflictZone = (timeNodes, addRelation, relation, area) => {\n \n var weightNodes = [...timeNodes];\n timeNodes.forEach((node, i) => {\n \n let n = Object.assign({}, node)\n n.w = [];\n conflictWeight(n, addRelation, relation);\n zoneWeight(n, area);\n \n n.weight = d3.sum(n.w) / (1+area.weight)\n \n weightNodes[i] = n;\n })\n\n return weightNodes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"conflictWeight = (node, addRelation, relation) => {\n \n let time = node.t,\n n = time.length,\n w = 0,\n denom = 0;\n \n for (let i = 0; i < n; i++) {\n for(let j = i+1; j < n; j++){ \n let delta = time[i] - time[j];\n let rho = 1;\n if (addRelation) {\n for(let k = 0; k < relation.length; k++){\n if (i == relation[k][0] && j == relation[k][1]) {\n rho = relation[k][2];\n }\n }\n }\n w += rho * weight(delta, 1);\n denom += rho;\n }\n }\n node.w.push(w/denom);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"weight = (x, sigma) => {\n \n return Math.exp(-1/2*x**2/sigma**2);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2350,"value":"md`#### Select the tau percent more weighted dots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"epsilon = 0.005;","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"getTreshold = (timeNodes, p) => {\n \n var val = [],\n nb = [];\n \n timeNodes.forEach(node => {\n \n let idx = val.findIndex(d => d < node.weight + epsilon && d > node.weight - epsilon)\n if (idx != -1){\n nb[idx] += 1; \n }\n else {\n val.push(node.weight);\n nb.push(1);\n }\n \n }) \n \n let gr = [];\n for (let i = 0; i < val.length; i++){\n gr.push({value: val[i], nb: nb[i]})\n }\n gr.sort((a, b) => a.value - b.value)\n let nbtot = d3.sum(nb),\n n = p*nbtot,\n temp = 0,\n k = gr.length;\n \n while (temp < n) {\n if (k-1 < gr.length) {\n temp += gr[k-1].nb;\n k--;\n }\n else {\n console.log(\"error : n too large.\") \n }\n }\n let treshold = gr[k].value;\n \n return ({data: gr, treshold: treshold});\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"filterWeight = (weightedDots, treshold) => {\n \n return weightedDots.filter(node => node.weight >= treshold);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2411,"value":"md`#### Filter by the time threshold`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"weightAfterTresh = (weight, t_tresh) => {\n \n let temp = weight.filter(n => {\n let b = true\n n.t.forEach(nt => {\n if (nt > t_tresh) {\n b = false; \n }\n })\n return b; \n })\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2713,"value":"tooAway = (t_thresh, dot) => {\n let bool = false; \n for (let i = 0; i < dot.t.length; i++){\n if (dot.t[i] > t_thresh) {\n bool = true\n break\n }\n }\n return bool\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2466,"value":"md`#### Filter with the influence zone model`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"zoneInflu = (Agents, R, vmean) => {\n \n let V = Agents.speed.map(d => Math.hypot(d[0], d[1])),\n ZI = [];\n \n V.forEach( v => {\n let temp = ({angle: 0, radius: 0});\n if (v > 10) v = 10;\n temp.angle = (- 0.0038*Math.PI * v**3 + 0.0793*Math.PI * v**2 - 0.61081 * Math.PI * v + 2*Math.PI)/2;\n \n if (v < 1){\n temp.radius = R * vmean \n }\n else {\n temp.radius = R * v \n }\n ZI.push(temp)\n })\n Agents.ZI = ZI;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1280,"value":"nodeInZone = (Agents, node, options) => {\n \n let bool = false,\n n = 0;\n for (let i = 0; i < Agents.position.length; i++){\n \n let p = Agents.position[i],\n r = distance(p, node);\n if (r <= Agents.ZI[i].radius) {\n \n var vector = [(node[0] - p[0]), (node[1] - p[1])],\n v = [...Agents.speed[i]];\n \n if ((p[0] == node[0] && p[1] == node[1]) || (v[0] == 0 && v[1] == 0)){ //if the node and the agent have the same position or if the speed is null.\n n += 1;\n }\n //otherwise compare the angle :\n let normVec = Math.hypot(vector[0], vector[1]),\n normV = Math.hypot(v[0], v[1]),\n newAngle = Math.acos(math.dot(v, vector)/(normV*normVec));\n if (newAngle <= Agents.ZI[i].angle){\n n += 1;\n }\n }\n \n }\n if ((!options.includes('noZiOverlap') && n == 1) || (options.includes('noZiOverlap') && n >= 1)) bool = true;\n return bool;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"filterNodesAgents = (grid, Agents) => {\n \n return grid.filter(node => !nodeInZone(Agents, node.pos, ['']))\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"md`#### Option: Determine a zone of interest`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"area = {\n var area = ({shape: '', pos1: [], pos2: [], weight: 0})\n if (Options.includes('area')) {\n area.shape = 'rectangle';\n area.pos1 = p1;\n area.pos2 = p2;\n area.weight = 0.2;\n }\n return area;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"zoneWeight = (node, zone) => {\n \n if (zone.shape == 'rectangle') {\n if (node.pos[0] > zone.pos1[0] && node.pos[0] < zone.pos2[0] && node.pos[1] > zone.pos1[1] && node.pos[1] < zone.pos2[1]) {\n node.w.push(zone.weight);\n }\n else {\n node.w.push(0);\n }\n }\n \n if (zone.shape == 'circle') {\n let d = distance(node.pos, zone.pos)\n if (d < zone.radius) {\n node.w.push(zone.weight); \n }\n else {\n node.w.push(0); \n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3611,"value":"md`### Zone simplication`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3864,"value":"md`#### Convex Hull`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3250,"value":"simplifyZone = (Multipolygon) => {\n \n Multipolygon.coordinates.forEach((coord, i) => {\n coord.forEach((array, j) => {\n let convexH = d3.polygonHull(array);\n Multipolygon.coordinates[i][j] = convexH;\n })\n })\n return Multipolygon;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3867,"value":"md`#### Ellipse`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3481,"value":"RR = multipleZones2(combinations, times, Agents, [''])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3489,"value":"RE = findEllipse(RR[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3572,"value":"viewof view2 = embed({\n $schema: 'https://vega.github.io/schema/vega-lite/v4.json',\n height: 200,\n width: 360,\n data: {\n values: RE[0].evoA,\n name: 'source'\n },\n mark: 'line',\n encoding: {\n x: {field: 'd', type: 'quantitative', title: 'distance between foci'},\n y: {field: 'area', type: 'quantitative', title: 'Area'} \n } \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3470,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2314,"value":"md`### Colors and textures `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1782,"value":"tTexture = (selection, idx, bg) => {\n let strokeColor = colors[idx%10];\n let T = [\n textures.lines().lighter().stroke(strokeColor).background(bg),\n textures.paths().d(\"crosses\").lighter().thicker().stroke(strokeColor).background(bg),\n textures.paths().d(\"caps\").lighter().thicker().stroke(strokeColor).background(bg),\n textures.paths().d(\"woven\").lighter().thicker().stroke(strokeColor).background(bg),\n textures.paths().d(\"waves\").thicker().stroke(strokeColor).background(bg),\n textures.paths().d(\"nylon\").lighter().shapeRendering(\"crispEdges\").stroke(strokeColor).background(bg),\n textures.lines().orientation(\"7/8\").stroke(strokeColor).background(bg),\n textures.lines().orientation(\"3/8\").stroke(strokeColor).background(bg) \n ],\n texture = T[idx%8];\n selection.call(texture);\n \n return texture.url()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1791,"value":"colors = d3.schemeCategory10","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"color = d3.scaleSequential(d3.interpolateRdYlBu).domain([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2830,"value":"starSymbol = (context, center, R) => {\n let r = R*Math.cos(toRad(72))/Math.cos(toRad(36));\n context.moveTo(center[0], center[1] - R);\n context.lineTo(center[0] + r*Math.cos(toRad(-54)), center[1] + r*Math.sin(toRad(-54)));\n context.lineTo(center[0] + R*Math.cos(toRad(-18)), center[1] + R*Math.sin(toRad(-18)));\n context.lineTo(center[0] + r*Math.cos(toRad(18)), center[1] + r*Math.sin(toRad(18)));\n context.lineTo(center[0] + R*Math.cos(toRad(54)), center[1] + R*Math.sin(toRad(54)));\n context.lineTo(center[0], center[1] + r);\n context.lineTo(center[0] + R*Math.cos(toRad(126)), center[1] + R*Math.sin(toRad(126)));\n context.lineTo(center[0] + r*Math.cos(toRad(162)), center[1] + r*Math.sin(toRad(162)));\n context.lineTo(center[0] + R*Math.cos(toRad(-162)), center[1] + R*Math.sin(toRad(-162)));\n context.lineTo(center[0] + r*Math.cos(toRad(-126)), center[1] + r*Math.sin(toRad(-126)));\n context.lineTo(center[0], center[1] - R);\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3064,"value":"textSize = 32","pinned":true,"hidden":false,"mode":"ojs"},{"id":3071,"value":"agentRadius = 6","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"md`## Annex`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2595,"value":"barycenter = (Array) => {\n \n var xg = 0,\n yg = 0;\n const n = Array.length;\n for (let i = 0; i < n; i++){\n xg += Array[i][0];\n yg += Array[i][1];\n }\n return [xg/n, yg/n]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"distance = (pos1, pos2) => {\n const d = Math.sqrt((pos1[0] - pos2[0])**2 + (pos1[1] - pos2[1])**2);\n return d;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":2840,"value":"toRad = (degree) => {\n return degree*Math.PI/180 \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3542,"value":"toDeg = (rad) => {\n return rad * 180 / Math.PI \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"rng = Math.random","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"width = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require('d3', \"d3-delaunay@5\", \"d3-tricontour@0.1\", \"d3-polygon\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":1817,"value":"math = require(\"mathjs\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1576,"value":"textures = require('textures@1.2.0/dist/textures.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"import {addlabel} from \"@fil/contour-labels-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { pick2d } with { rng } from \"@fil/2d-point-distributions\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"import {distanceTime} from \"@julesallegre/4-th-order-polynomial-equation-resolution\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"import {slider, text, radio, checkbox, select} from \"@jashkenas/inputs\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":1903,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}