I'm using vis js to build an application and when I generate the first search I don't have edges overlapping but after expanding a node I got them.
I have a loop to fill the nodes and edges using nodes.update and edges.update
Graph:
var container = document.getElementById("graph-container");
var data = {
nodes: nodes,
edges: edges,
};
var options = {
interaction:{
dragNodes:true,
dragView: true,
hover: true,
hoverConnectedEdges: true,
selectConnectedEdges: true,
zoomView: true
},
layout:{
randomSeed : 2,
improvedLayout:true,
clusterThreshold: 150,
},
physics: {
barnesHut: {
avoidOverlap: 0.5
}
},
nodes: {
physics:false,
borderWidth:3,
size:14,
font:{color:'#000000'}
},
edges:{
length: 200,
smooth: {
roundness: 0.2,
type: 'dynamic'
},
font:{
size:9,
}
}
};
if(is not expand node){
network = new vis.Network(container, data, options);
}else{
network.fit();
network.redraw();
}
What am I doing wrong?? I think its not reading my options = {...} in the expansion
Related
I want to generate a NDWI chart, but I get this error:
Error generating chart: No features contain non-null values of "system:time_start".
enter code here
var L8 = ee.ImageCollection("LANDSAT/LC08/C02/T1_RT_TOA")
.filterDate('2021-01-01', '2021-12-31')
.filterBounds(VolRn)
.filterMetadata('CLOUD_COVER', 'less_than', 1.5)
.mean()
.clip(VolRn);
var green = L8.select('B3');
var nir = L8.select('B5');
var ndwi = green.subtract(nir).divide(green.add(nir)).rename('NDWI');
var ndwiParams = {
min: -1,
max: 1,
palette: ['green', 'white', 'blue']
};
var ndwiMasked = ndwi.updateMask(ndwi.gte(0.001))
Map.setCenter(44.5858, 48.8047, 7);
Map.addLayer(ndwi, ndwiParams, 'NDWI image');
var options = {
title: 'Landsat Spectral Indexes',
hAxis: {title: 'Date'},
vAxis: {title: 'Value'},
lineWidth: 1,
maxPixels: 1e9,
series: {
0: {color: 'blue'}, // NDWI
}};
print(Chart.image.series(ndwi, VolRn, ee.Reducer.mean(), 200).setOptions(options));
enter code here
Can you please explain what this error is and how to fix it.
I am completely new to GEE and can't find information about this error.
I will be very grateful
I'm trying to add polynomial regression line to my google trends live graph but it does not work properly:
as you can see the polynomial regression trendline is not fitting the data points properly (it's straight trendline and not a polynomial trendline).
My code is:
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time of Day');
data.addColumn('number', 'Depth');
var options = {
title: 'graph',
legend: 'none',
crosshair: { trigger: 'both', orientation: 'both' },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
}
},
hAxis: {
viewWindow: {
min: new Date(),
}
},
vAxis: {
viewWindow: {
min: 0,
max: 100
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
chart.draw(data, options);
var interval = setInterval(function() {
var time = new Date();
data.addRow([time, newValue])
chart.draw(data, options);
}, 10);
I am having issues rotating my symbol around a specific pivot point.
Here is my code :
var path_tank_left_track = new Path({
segments: [[0,0], [10, 0], [10,40], [0,40]], strokeColor: 'black',
closed: true
});
var path_tank_right_track = new Path({
segments: [[40,0], [50, 0], [50,40], [40,40]], strokeColor: 'black',
closed: true
});
var path_tank_body = new Path({
segments: [[10,5], [40,5], [40,35], [10,35]], strokeColor: 'black',
closed: true
});
var path_tank_gun = new Path({
segments: [[23,15], [23,0], [27, 0], [27, 15]],
strokeColor: 'black',
pivot: [25,15],
name: 'gun'
});
var path_arena_separation = new Path(new Point(view.size.width/2,0),
new Point(view.size.width/2, view.size.height));
path_arena_separation.strokeColor = 'black';
path_arena_separation.closed = true;
var whole_tank = new Group();
whole_tank.addChild(path_tank_left_track);
whole tank.addChild(new Point(5,20)); // trying to add the middle of the left track pivot point
whole_tank.addChild(path_tank_body);
whole_tank.addChild(path_tank_right_track);
whole tank.addChild(new Point(50,20)); // trying to add the middle of the right track pivot point
whole_tank.addChild(path_tank_gun);
// Create a symbol definition from the path:
var definition = new SymbolDefinition(whole_tank);
var instance1 = definition.place();
instance1.position = new Point(view.size.width/4, view.size.height/2);
var instance2 = definition.place();
instance2.position = new Point(3*view.size.width/4, view.size.height/2);
function onFrame(event) {
instance1.rotate(1, instance1.definition.item.children[1]);
}
As you can see, at the onFrame function, I'm trying to rotate the instance by 1 degree every frame around the point I created earlier. But I get an error saying the item_remove is not a function in the paper-full.js.
I'm confused, I tried to create a path with a single point and add it to the group but it did not let me.
If I modify the code to make the gun rotate on it's pivot instead, it does work :
function onFrame(event) {
instance1.definition.item.children['gun'].rotate(1, instance1.definition.item.children['gun'].pivot);
}
The gun does rotate around the proper pivot and the pivot stays attached to the symbol even if the symbol moves around. How could I achieve that behavior but turning the whole tank around a specific point relative to the center of the tank?
Thank you for your help, let me know if I should include more detail.
Your code is crashing because you try to add a point (and not a path containing a single point as you seems to be trying to) as a group child, which is not what API expects.
To create a path containing a single point, you have to do this:
var path = new Path(new Point(x,y));
But I think the idea of adding a single point path as a child to later retrieve its position to use it as a pivot point is wrong in your case.
The fact that you are creating each tank as a Symbol implies that you won't have access to its own children.
You can instead, before placing your symbols, store 2 vectors: one from center to left and one from center to right. They will later help you calculating left / right track positions.
Here is a Sketch adapted from your code, demonstrating this.
var path_tank_left_track = new Path({
segments : [ [ 0, 0 ], [ 10, 0 ], [ 10, 40 ], [ 0, 40 ] ],
strokeColor: 'black',
closed : true
});
var path_tank_right_track = new Path({
segments : [ [ 40, 0 ], [ 50, 0 ], [ 50, 40 ], [ 40, 40 ] ],
strokeColor: 'black',
closed : true
});
var path_tank_body = new Path({
segments : [ [ 10, 5 ], [ 40, 5 ], [ 40, 35 ], [ 10, 35 ] ],
strokeColor: 'black',
closed : true
});
var path_tank_gun = new Path({
segments : [ [ 23, 15 ], [ 23, 0 ], [ 27, 0 ], [ 27, 15 ] ],
strokeColor: 'black',
pivot : [ 25, 15 ],
name : 'gun'
});
var path_arena_separation = new Path(new Point(view.size.width / 2, 0), new Point(view.size.width / 2, view.size.height));
path_arena_separation.strokeColor = 'black';
path_arena_separation.closed = true;
var whole_tank = new Group();
whole_tank.addChild(path_tank_left_track);
whole_tank.addChild(path_tank_left_track);
whole_tank.addChild(path_tank_body);
whole_tank.addChild(path_tank_right_track);
whole_tank.addChild(path_tank_gun);
// store vectors from bounds center to tracks middle points
var tankCenter = whole_tank.bounds.center;
var leftTrackCenter = new Point(5, 20);
var rightTrackCenter = new Point(50, 20);
var leftVector = leftTrackCenter - tankCenter;
var rightVector = rightTrackCenter - tankCenter;
// Create a symbol definition from the path:
var definition = new SymbolDefinition(whole_tank);
var instance1 = definition.place();
instance1.position = new Point(view.size.width / 4, view.size.height / 2);
var instance2 = definition.place();
instance2.position = new Point(3 * view.size.width / 4, view.size.height / 2);
function onFrame(event)
{
// calculate pivot point position
// first we rotate vector accordingly to instance current rotation
var rotatedVector = rightVector.rotate(instance1.rotation);
// then we add it to current tank center
var point = instance1.bounds.center + rotatedVector;
// turn right
instance1.rotate(1, point);
}
I am trying to do a point cluster layer based on the JSON objects I obtained from database. Here is my JavaScript to plot a point cluster layer:
function addClusters() {
$.ajax({
url: "index.aspx/getBusCommuter",
type: "POST",
data: "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var parsed = JSON.parse(data.d);
$.each(parsed, function (i, jsondata) {
var coordXicon = jsondata.BusStopX;
var coordYicon = jsondata.BusStopY;
var commuterAmt = jsondata.CommuterAmt;
var latlng = new esri.geometry.Point({ "x": coordXicon, "y": coordYicon, "spatialReference": { "wkid": 4326 } });
// cluster layer that uses OpenLayers style clustering
clusterLayer = new ClusterLayer({
"data": commuterAmt,
"distance": 100,
"id": "clusters",
"labelColor": "#fff",
"labelOffset": 10,
"resolution": map.extent.getWidth() / map.width,
"singleColor": "#888"
});
var defaultSym = new SimpleMarkerSymbol().setSize(4);
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
var picBaseUrl = "http://static.arcgis.com/images/Symbols/Shapes/";
var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
renderer.addBreak(0, 2, blue);
renderer.addBreak(2, 200, green);
renderer.addBreak(200, 1001, red);
clusterLayer.setRenderer(renderer);
map.addLayer(clusterLayer);
});
},
error: function (request, state, errors) {
}
});
}
However, when I try to run it, it told me an error message which is clusterLayer is not defined. I wonder which part I missed and am I doing in the correct way.
Also, I wonder is it possible/correct to set the commuterAmt I obtained to data so that for each point on the map will be attached with the correct amount?
I get the reference from: ArcGIS Documentation
Thanks in advance.
Try to download the sample code ArcGIS Documentation
Include ClusterLayer.js from extras direxctory
var dojoConfig = {
paths: {
extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
}
};
then in your code use
define dojo.provide("extras.ClusterLayer");
and call
clusterLayer = new extras.ClusterLayer({
"data": commuterAmt,
"distance": 100,
"id": "clusters",
"labelColor": "#fff",
"labelOffset": 10,
"resolution": map.extent.getWidth() / map.width,
"singleColor": "#888"
});
I have a crossfilter with the following data structure being inputted.
project | subproject | cost
data = [
["PrA", "SubPr1", 100],
["PrA", "SubPr2", 150],
["PrA", "SubPr3", 100],
["PrB", "SubPr4", 300],
["PrB", "SubPr5", 500],
["PrC", "SubPr6", 450]]
I can create a barchart that has the summed cost per project:
var ndx = crossfilter(data)
var projDim = ndx.dimension(function(d){return d.project;});
var projGroup = costDim.group().reduceSum(function(d){return d.budget;});
What I want to do is create a dc.js histogram by project cost...so {450: 2, 300: 1}, etc. As far as I can tell, crossfilter can have only attributes of each row be input for a dimension. Is there a way around this?
Accepting the challenge!
It is true, crossfilter does not support this kind of double-reduction, but if you are willing to accept a slight loss of efficiency, you can create "fake dimensions" and "fake groups" with the desired behavior. Luckily, dc.js doesn't use very much of the crossfilter API, so you don't have to implement too many methods.
The first part of the trick is to duplicate the dimension and group so that the new dimension and old dimension will each observe filtering on the other.
The second part is to create the fake groups and dimensions, which walk the bins of the copied group and rebin and refilter based on the values instead of the keys.
A start of a general solution is below. For some charts it is also necessary to implement group.top(), and it is usually okay to just forward that to group.all().
function values_dimension(dim, group) {
return {
filter: function(v) {
if(v !== null)
throw new Error("don't know how to do this!");
return dim.filter(null);
},
filterFunction: function(f) {
var f2 = [];
group.all().forEach(function(kv) {
if(f(kv.value))
f2.push(kv.key);
});
dim.filterFunction(function(k) {
return f2.indexOf(k) >= 0;
});
return this;
}
};
}
function values_group(group) {
return {
all: function() {
var byv = [];
group.all().forEach(function(kv) {
if(kv.value === 0)
return;
byv[kv.value] = (byv[kv.value] || 0) + 1;
});
var all2 = [];
byv.forEach(function(d, i) {
all2.push({key: i, value: d});
});
return all2;
}
};
}
// duplicate the dimension & group so each will observe filtering on the other
var projDim2 = ndx.dimension(function(d){return d.project;});
var projGroup2 = projDim2.group().reduceSum(function(d){return d.budget;});
var countBudgetDim = values_dimension(projDim2, projGroup2),
countBudgetGroup = values_group(projGroup2);
jsfiddle here: http://jsfiddle.net/gordonwoodhull/55zf7L1L/
JSFillde Link
Denormalize + Map-reduce. Note the data already include the cost per project as the 4th column ( and this can be pre-calculated easily). It's a hack, but hopefully an easy one in order to get DC.js and crossfilter works without too much change.
var data = [
["PrA", "SubPr1", 100, 450],
["PrA", "SubPr2", 150, 450],
["PrA", "SubPr3", 200, 450],
["PrB", "SubPr4", 300, 800],
["PrB", "SubPr5", 500, 800],
["PrC", "SubPr6", 450, 450]
];
var newdata = data.map(function (d) {
return {
project: d[0],
subproject: d[1],
budget: d[2],
cost: d[3]
};
})
var ndx = crossfilter(newdata),
costDim = ndx.dimension(function (d) {
return d.cost;
}),
visitedProj = {},
costGroup = costDim.group().reduce(function (p, v) {
if (visitedProj[v.project]) return p;
console.info(v.project);
visitedProj[v.project] = true;
return p + 1;
}, null, function () {
return 0;
});
dc.rowChart("#costChart")
.renderLabel(true)
.dimension(costDim)
.group(costGroup)
.xAxis().ticks(2);
dc.renderAll();
Map-Reduce can be very powerful and the API can be accessed from here. JSFillde Link