Question
What is necessary to produce directed edges in sigma.js? I'm looking for a minimal example that is preferably based off of the minimal example currently on their home page.
Attempts
I tried adapting the minimal graph example from the sigma.js homepage in the following way
sigma.parsers.json('data.json', {
container: 'container',
settings: {
defaultNodeColor: '#ec5148',
+ defaultEdgeArrow: 'source' // adding this line should add arrows?
}
});
Sadly this did not produce different results.
I also tried modifying the edges in the graph itself
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1",
+ "arrow": "source"
},
...,
]
But again this had no effect.
More complex examples
Edge arrow rendering was added in this pull request. This links to a couple of examples here and here
I've been struggling with this issue myself. It looks like sigma.js underwent a major redesign in the last few months and the code from the examples is from an older version of sigma.js.
They do have the ability to render arrows, but the settings to generate these have changed and some of the options were lost (no longer can you specify target, source, or both; you only can use target):
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1",
+ "type": "arrow",
},
...,
]
"curvedArrow" is also a valid option for type.
See this issue transcript: https://github.com/jacomyal/sigma.js/pull/219 for more information.
I was struggling with it for a few hours. I was able to find a working example at https://www.bsimard.com/2018/04/25/graph-viz-with-sigmajs.html .
The things you need:
- add 'type: "arrow"' to the node properties
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1",
+ "type": "arrow",
},
...,
]
and in the Sigma constructor set minArrowSize, also for me it is only working with canvas.
s = new sigma({
graph: data,
renderer: {
container: document.getElementById('graph-container'),
type: 'canvas'
},
settings: {
minArrowSize: 10
}
});
Related
I'm writing a programme to create a page under a Notion database using the API, but am having trouble getting the multi-select property to work
This is what I have written in properties { } (lines 67-76 of the code in my index.js in my repo)
"multi-select": [
{ "name": tag1},
{ "name": tag2}
],
This is in an async function where tag1 and tag2 are string variables
But when I run the code I get the following error:
'code: validation_error', message: 'body failed validation. Fix one:\n' + .... {"object":"error", ...
(It's too long to paste but that's the gist. I screenshotted the full error here.)
The code works perfectly when I comment these lines out.
I see no reason why this shouldn't work, so I suspect I have done something wrong in my set-up elsewhere, since I'm quite new to coding. The full repo is here - it's not long
Grateful for what I'm sure is probably a quick fix - thank you very much :)
There's a couple things going on with how you're trying to define the the multi select property:
It should be multi_select not multi-select
The body should be an object with an array of options, not just an array. I think you've copied some stuff from an API response which looks a little different.
"Tags": {
"multi_select": {
"options": [
{
"name": tag1,
"color": "red"
},
{
"name": tag2,
"color": "gray"
}
]},
The format for the JSON above seems incorrect, here's an updated one if you're copy/pasting:
{
"Tags": {
"multi_select": {
"options": [
{
"name": "tag1",
"color": "red"
},
{
"name": "tag2",
"color": "gray"
}
]
}
}
}
I have 2 main questions:
how to read or parse a js/ts source map file in NodeJs
how to find the equivalent javascript compiled part of code, from typescript selected code
I'm building a typescript compiler and I'm using typescript API for that.
after compiling the code I want to let the user to select a part of ts code and then I want to highlight the compiled equivalent code in a WebView.
so how to find/locate that piece of code?
please tell me if you need more information. and sorry for poor English
source-map is a library that parses source maps and gives you an api to run queries on them.
main.js.map
{
"version": 3,
"file": "main.js",
"sourceRoot": "",
"sources": [
"main.ts"
],
"names": [],
"mappings": "AAKA,IAAM,KAAK,GAAM;IACf,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;CACL,CAAA"
}
Example usage
await sourcemap.SourceMapConsumer.with(mainSourceMap /* main.js.map */, null, (consumer) => {
consumer.sources // [ 'main.ts' ]
consumer.generatedPositionFor({
source: "main.ts",
line: 7,
column: 2,
}) // { line: 2, column: 4, lastColumn: 4 }
consumer.originalPositionFor({
line: 2,
column: 4,
}) // { source: 'main.ts', line: 7, column: 2, name: null }
})
I am currently building a web tool which enables the user to generate a package of options in the form of a String. To select which options he wants he uses a form with different inputs (radio, checkbox) which is generated from a dictionary.json that currently holds all available options and their codes in the following format (subject to change):
[
{
"id": 0001,
"title":"foo",
"type":"radio",
"options":[
{
"bar":"",
"foo":"489",
"foobar":"489+490"
}
]
},
{
"id": 0002,
"title":"something",
"type":"check",
"options":[
{
"everything":"M016",
"evenmore":"M139"
}
]
},
[...]
As you can see it is basically a small database. The problem is that the options depend on each other so if foo is foobar it might determine that something is definitely evenmore and can NOT be changed to everything. How would I map these dependencies in the dictionary.json so that the generated form can reliably grey out options that are determined by other choices?
The structure has to be flexible so new dependencies can be inserted and would generate the new form reliably or validate existing outputs against them. There could also be options that depend on multiple other options. I can't think of a smart way of saving these dependencies and I wonder if JSON is the right format to go with here.
Any tips or ideas are welcome. Thanks!
You could try to save every option as one object which stores all the options which will be excluded if that option is selected.
So your JSON could look like the following:
[
{
"id": 0001,
"title":"foo",
"type":"radio",
"options":[
{
"bar":"",
"excludes": []
},
{
"foo":"489",
"excludes": []
},
{
"foobar":"489+490",
"excludes": [
{
"id": 0002,
"options": [
"everything"
],
},
{
"id": 0003,
"options": [
"apple",
"cherry"
],
},
]
}
]
},
{
"id": 0002,
"title":"something",
"type":"check",
"options":[
{
"everything":"M016",
"excludes": []
},
{
"evenmore":"M139",
"excludes": []
}
]
},
[...]
Everytime an option is selected you would have to check their excludes list and diable all those options for the specific fields.
To improve the usability you could check there is only one option left for a field, select this option and then disable the whole field.
EDIT:
Additionally you could save a isExcludedBy field to each of the options.
The everything option of id 0002 would then look like this:
"isExcludedBy": [
"id": 0001,
"options": [
"foobar"
]
]
This would be kind of redundant, but depending on what you want your UI to show, it could save you some computing time.
A possible simple solution (which answers your question):
// dictionary.json
{
"options": [
{
"id": 0001,
"title":"foo",
"type":"radio",
"options":[
{
"bar":"",
"foo":"489",
"foobar":"489+490"
}
]
}
// etc.; same as before
],
// this is it:
"dependencies": [
[["0001", "foobar"], ["0002", "evenmore"]],
]
}
dependencies here consist of pairs of [path to option in options that implies another option, path to the implied option].
You could make a Map data structure out of this directly (the implying options are keys, the implied are values).
This assumes that one option can imply only one other option (but it still allows for options that depend on multiple other options).
You could of course easily extend that like so:
[["0001", "foobar"], [["0002", "evenmore"], ["0003", "namaste"]]]
This would mean that "0001"/"foobar" implies both "0002"/"evenmore" and "0003"/"namaste". But perhaps YAGNI. :)
One way to approach this is to model the domain you're actually expressing, and generate the form based on that. For example, we know that apartments have street numbers, and apartment numbers, whereas houseboats don't even have streets.
{
"dwelling": {
"type": "houseboat",
"latitude": null,
"longitude": null,
}
}
or
{
"dwelling": {
"type": "apartment",
"street": "Beech St.",
"street_number": 123,
"apartment_number": 207,
}
}
By modelling the domain rather than the form, you can write rules that apply beyond the form, and you won't have to develop a mini-language for expressing form dependencies.
I am looking for a chart solution of an semantic differential like in this pictures.
But I found only line charts like this one:
fiddle
How can I change this chart into ones like this below.
Maybe in this part?
"trendlines": [
{
"line": [
{
"startvalue": "17022",
"color": "#6baa01",
"valueOnRight": "1",
"displayvalue": "Average"
}
]
}
Check out this: http://bit.ly/1In8fJa
Created using FusionCharts.
I want to create a force directed graph like http://bl.ocks.org/mbostock/4062045 and I am able to do so using the code provided on the website.
The tweak I want to perform in this is: I wanna color the edges(links) in different colors so as to depict the relationship between two nodes distinctly.
I have my json structure looking like:
{
"links": [
{
"group": 2,
"source": "node1",
"target": "node2",
"value": "5"
},
{
"group": 1,
"source": "node2",
"target": "node3",
"value": "5"
}],
"nodes":
[{ "name": "node1" }
{ "name": "node2" }
{ "name": "node3" }]}
I tried:
var color = d3.scale.category10();
and for styling it:
.style("stroke", function(d) { return color(d.group)})
with no success. The thing is if I place the color as "red" or "blue" or any other instead of placing the function, all the edges are colored fine. Also, I am able to color the "nodes" differently as given in the sample force directed graph but the same attribute is not getting applicable for the links.
I tried the most naive way of comparing as
if (d.group == 1) { return "blue"; }
but still with no success. Im clearly missing out something very basic. Can anyone help me out in this. Much appreciated.