I want to create a node graph that can be edited. So obviousely I need access to its x,y properties.
How can I set the initial x,y coordinates and also access them as they update?
Other libraries I saw are pretty straight forward, just add the coordinates to the nodes object. However it doesn't seem to work on vis.
"nodes": [
{
"id": 1,
"title": "Node A",
"x": 258.3976135253906,
"y": 331.9783248901367,
"type": "empty"
},
{
"id": 2,
"title": "Node B",
"x": 593.9393920898438,
"y": 260.6060791015625,
"type": "empty"
},]
Related
I am trying to transform GeoJSON to TopoJOSN in order to put into Vega-Lite. Therefore I can draw a map.
I used https://geojson-maps.ash.ms/ to download the .json for map Oceania (Low resolution), then I put this file into https://mapshaper.org/ so that I can export it again as .topojson
However, even I choose export as .topojson, the file still give me .json. Because when I put this URL to Vega-Late, it cannot display a Oceania map. (My code at the very bottom of the question)
Anyone know how can I transform into topojson? Or even maybe there is anything wrong with my URL?
A couple issues with your specification:
your GeoJSON file does not include a feature named "states". It includes a feature named "custom".
you are using the albersusa projection, which only shows the USA, and your GeoJSON has no data within this boundary.
Fixing these issues, and using an orthographic projection centered on Australia, gives you a better chart (view in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": 500,
"height": 300,
"layer": [
{
"data": {
"url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/Ausmap.geo.json",
"format": {
"type": "topojson",
"feature": "custom"
}
},
"mark": {
"type": "geoshape",
"fill": "lightgray",
"stroke": "white"
}
},
{
"data": {
"url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/rainfall_tidy.csv"
},
"mark": "circle",
"encoding": {
"longitude": {
"field": "longitude",
"type": "quantitative"
},
"latitude": {
"field": "latitude",
"type": "quantitative"
},
"size": {"value": 10},
"color": {"value": "steelblue"}
}
}
],
"config": {
"projection": {
"type": "orthographic",
"rotate": [-140, 30, 0]
}
}
}
In this Treemap example, the whole JSON tree exists from the start:
http://jsfiddle.net/6p1gayrp/
As I have a very big dataset, I would like to load each level on click:
Clicking "International relations" in the example should instead load the children array from a remote datasource and then layout the rectangles.
So starting out with one level:
var json = {
"name": "Sitemap",
"children": [{
"name": "International Relations",
"value" : 700
}]
}
And then adding more data to the tree before recalculating layout:
var json = {
"name": "Sitemap",
"children": [{
"name": "International Relations",
"children": [{
"name": "Systemic Theory",
"children": [{
"name": "Great Powers",
"value": 400,
}, {
"name": "Systemic Politics",
"value": 300,
}]
}]
}]
}
How can I load data async while keeping the rest of the functionality intact?
(Ideally this would also work in the other direction: For example if a user navigates straight to a particular level of the treemap and then starts going up the hierarchy.)
I would like to read node/edges information for a graph (sigma.js)
from a JSON variable. While it's quite easy to use an external JSON file
as input via a JSON parser, I could not find a way to use a JSON object
directly defined in the JavaScript code.
There seems to exist a method called 'read', but I could not get
it to work (Source: https://github.com/jacomyal/sigma.js/wiki/Graph-API).
Could someone give me a hint?
This is what I would like to have:
data = {
"nodes": [
{
"id": "n0",
"label": "A node",
"x": 0,
"y": 0,
"size": 3
},
{
"id": "n1",
"label": "Another node",
"x": 3,
"y": 1,
"size": 2
},
],
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1"
},
]
}
sigma.parsers.json( data , {
container: 'container',
settings: {
defaultNodeColor: '#ec5148'
}
});
Thank you, cheers, Michael
Add your data as follows:
s = new sigma({
graph: data,
container: 'container',
settings: {
defaultNodeColor: '#ec5148'
}
});
See also: json-is-not-read-by-sigma-js
How I can add 3 lines to the graphic in xCharts? For make graphic with 2 lines I should write:
var data = {
"xScale": "time",
"yScale": "linear",
"type": "line",
"main": [
{
"data": getStatistic(), // Some JSON data
},
],
"comp": [
{
"type": "line",
"data": getStatistic(), // Some JSON data
},
],
};
But adding one more "comp" element doesn't work. On library website I not found graphic with more than two lines...
The answer can be found here: https://github.com/tenXer/xcharts/issues/21
main data and comp are data both Arrays. They can take many different data sets. The documentation might not explain this very well...
You can provide multiple data sets to the main Array to accomplish what you'd like. In example, here is how you might draw both pizza and tacos:
{
"main": [
{
"className": ".pizza",
"data": [
{
"x": "2012-11-05",
"y": 12
},
{
"x": "2012-11-06",
"y": 8
}
]
},
{
"className": ".tacos",
"data": [
{
"x": "2012-11-05",
"y": 8
},
{
"x": "2012-11-06",
"y": 11
}
]
}
]
}
You can add more data sets to this main Array. There is no limit.
https://github.com/mbostock/d3/wiki/Stack-Layout
http://mbostock.github.com/d3/ex/stream.html
I'm trying to make a streamgraph with D3.js. Looking at the example, we see that the data is formulated through the helper function stream_layers(n, m). In this example an array is returned as described in the API. The API describes input x, y and y0. But the example uses x, y0, y1.
My dataset is formulated similarly to the one described in the API:
{
"name": "apples",
"values": [
{ "year": -2000, "y": 91},
{ "year": -1950, "y": 290}
]
},
{
"name": "oranges",
"values": [
{ "year": -2000, "y": 9},
{ "year": -1950, "y": 49}
]
}
What would a helper function that stacks this dataset look like? The example returns a 3D array (one dimension for the number of layers, one for the number of samples m and one for the y-values at each sample).