Comments (14)
Hi @happylilem, thanks for your interest in dc.graph.js!
I am taking a quick look at the source, hope to get to this soon.
One limitation is that the brushing-filtering code expects certain attributes in the graph, specifically node.color
dc.graph.js/web/js/brushing-filtering.js
Lines 76 to 78 in 1466cef
and edge.dash
dc.graph.js/web/js/brushing-filtering.js
Lines 80 to 82 in 1466cef
Maybe some more too. So it's likely that you will still have to modify the demo for your purposes, adding and removing charts too.
When I started this project, I imagined it as a programmers toolkit for building network visualizations, much as dc.js is for other charts. Of course, most people don't want to learn JavaScript in order to see their graphs, so this may have been a step in the wrong direction.
Later on, I added "self serve" features where you can import your own data into the browser, and these proved very popular.
Not sure where the sweet spot is between having all the interactions and all the layouts and making it easy to use.
from dc.graph.js.
Thanks Gordon for the reply! Yes I also noticed the color part of the brushing-filtering code, if we were to import our own data, the color part would require more setup regarding the actual data instead of the fixed ones in the demo. Since my biggest problem currently is still how to get my own data file to work in the brushing-filtering demo, maybe color would be of less priority in my case. I would really appreciate it if you could make the "import data" function available for the brushing-filtering demo, and then I'll see how I can get the two demos merged and consider the color part later on :)
from dc.graph.js.
Okay, I have added the feature to the demo.
I ran into a couple of bugs which I don't have time to track down atm:
- sometimes layout will fail with the following error:
Uncaught TypeError: Cannot read property 'dcg_shape' of undefined
at project_port (place_ports.js:29)
at diagram.js:2103
...
- sometimes the auto-zoom is incorrect and parts of the graph are not displayed.
These don't seem to have anything to do with the feature in question, just, well, it's a complicated system and it evolved somewhat chaotically.
Also, it seems that graphs which don't have the attributes mentioned above will cause nothing to be displayed.
I won't have time to work on this for a few days, so I thought it would be better to publish the updates and hopefully return to this soon. Hope it helps!
from dc.graph.js.
Thank you so much for adding that feature! I just checked it out and tried with my data file, I think it is just like what you mentioned, nothing is displayed because my data file lack the features required in this demo. But having this feature does help a lot with my merging, I'll look more closely at the code and see how I could further modify it. I'll let you know if I got other questions or, hopefully, if it worked!
from dc.graph.js.
Cool, thanks for confirming!
It should be pretty easy to make it resilient to data that doesn’t fit (and just let the other charts fail). Will give that a try soon.
The other bugs are more difficult.
from dc.graph.js.
Hi Gordon, I'm having trouble finding the function where I can set an attribute in my data file to be a distinguisher which the color groups can depend on. For example I want the colors groups to be sorted base on "gender" group in my data, so all males get the same color, all females get another color, and non-binaries get another color. Is there a function in this repository that can do this?
And I would also like to know where function(n) is defined.
dc.graph.js/web/js/brushing-filtering.js
Lines 69 to 78 in 1466cef
I was navigated to jquery-ui.js and d3-tip.css for the definition, but they don't seem quite right to me. May I know what exactly does function(n) do? Thank you!
from dc.graph.js.
The node and edge colors, shapes, dashes, etc., are parameterized on the diagram by data in a pattern similar to how dc.js charts are.
In particular, the node color is initialized here:
dc.graph.js/web/js/brushing-filtering.js
Lines 169 to 171 in 3c76b26
from dc.graph.js.
Also note nodeFillScale
a few lines down… nodeFill
provides a value , its scale maps the value to a color.
from dc.graph.js.
Hi Gordon, sorry for not being able to get back to you since I've been very busy these days. I finally got time to take a closer look at nodeFill and nodeFillScale and got them like halfly understood.
I'm wondering what function kv does here,
dc.graph.js/web/js/brushing-filtering.js
Lines 169 to 171 in 3c76b26
and I looked up where kv is defined, but I couldn't quite interpret line 7270:
dc.graph.js/web/js/yoga-layout.js
Lines 7269 to 7270 in 3c76b26
Can you please kindly tell me how kv works, what a,b,c stand for and how they interact in this function? Does this function has anything to do with the "colors" variable and "domain" in nodeFillScale?
dc.graph.js/web/js/brushing-filtering.js
Line 141 in 3c76b26
dc.graph.js/web/js/brushing-filtering.js
Line 175 in 3c76b26
Because when I tried to switch node colors shown on the graph by changing the "domain", I discovered that it doesn't work as I thought. I thought domain[0], domain[1], and domain[2] should each correspond to a hex code in the colors variable, but in fact, either of those corresponds to the first color hex code, and if I want to switch to the second color, I had to do domain[0,1]. And domain[0,1,2] gives the color represented by the third hex code. Are these defined by the kv function?
from dc.graph.js.
BTW, right now I have a thought that although we have the API which explains many of the major functions used in the js files of the graph demos, there are many other underlying functions (such as function kv) that lack a documentation. I'm thinking it might be a good idea if I start documenting those functions, e.g. the components that made up the functions, how the formula in the function works etc. as I try to understand them, so that it would be clearer to people who wants to modify the codes for their own use. What do you think about this idea on documenting those?
from dc.graph.js.
kv
here is just an ordinary function parameter, not a function.
I use the name kv
to indicate a parameter which is a key/value pair in the form of an object. This is a convention that comes from crossfilter groups.
So nodeFill
is a method which gets/sets a function which takes a {key,value}
pair, and calculates some "domain value".
And nodeFillScale
is a method which gets/sets a D3 scale, which is a function that takes a "domain value" and returns a "range value", in this case a color.
Functions which take functions as parameters can be confusing, but they are very powerful. In this case we are telling the library not just a value, but how to retrieve or calculate a domain value from the data supplied to the library. This make the library oblivious to the underlying data format.
d3.scale.ordinal()
maps from ordinal "domain values" to "range values". So [0,1,2]
are the possible inputs, and colors
are the corresponding outputs.
from dc.graph.js.
I agree the documentation is sparse. Any help would be appreciated.
from dc.graph.js.
Hi Gordon, I guess now I’m kinda able to group the nodes array-wise, but not completely have them grouped when I try to reflect the groups by different colors on the graph.
I asked previously about how the colors were assigned to the nodes, but colorDimension just gives a range of colors that each group refers to, and the nodes should be grouped first before getting different colors. So I guess my fundamental problem should be: how exactly does the brushing-filtering demo decide the groups?
I put breakpoints at almost every line and could see that the randomly generated data arrays have key and color elements, and the color element has values such as 0,1,2, which corresponds to the color domains.
I thought the color element does the grouping, but turned out that it's not when I tried to add this element to the data array in my own data file. I couldn’t find any other line which set the nodes into groups and how these groups and the colors are connected. Does the grouping come with the generated data? Because when I tried with my own data file, hoping to see the nodes show different colors according to their groups that I set (but maybe groups aren’t formed at all, I don't know how the system recognizes the groups that I try to make), but all the nodes just still show the same color.
Can you possibly let me know which line(s) group the nodes? Thank you!
from dc.graph.js.
Hi Gordon, never mind I just got the whole merging figured out! And I created a data structure format that can apply to the brushing and filtering demo, so as long as the data file imported is in that format, the demo will be able to do its job without throwing any errors :) If you're interested in having a look at that and creating some documentation to explain how the demo works, please let me know, I'd be happy to discuss with you!
from dc.graph.js.
Related Issues (20)
- upgrade to modern D3
- "semantic zoom"
- highlight-neighbors is unreliable HOT 1
- do arrowheads and edge stubs work in angular? HOT 1
- layout algorithm directedness?
- options toggling on Edge
- user-select: none not working in Edge HOT 1
- explore.html?expanded=x with user file
- d3force layout doesn't work in simple viewer
- mod-key brushing doesn't select all contained nodes
- cola layout temporarily NaNs a lot of node positions
- edges not showing
- eliminate unqualified d3.selects in render_svg
- scoping event handlers to the chart
- layered_layout crashes if there are no nodes
- compatibility with yoga for flexbox layout HOT 1
- Rendering of nested subgraphs fails. HOT 1
- The altKeyZoom attribute doesn't work as described HOT 5
- Archiving this repo HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dc.graph.js.