I want to create a plot that visualizes the flow between the major that a person graduated in and the profession/sector they are working in after 1.5 years after graduating. I thought about using a Sankey diagram for this like the image below
But wanted to make this slightly more visually interesting by making the left side (the majors studied) and the right side (the jobs) into two arcs. So it mights start to look as a Chord diagram, but with the two arcs pulled apart a bit . The example below sort of shows the idea of the two arcs (although not the correct flows between them)
The Hierarchical Edge bundling example of citations also looks somewhat similar to what I want to achieve, but here the lines have no thickness to show the number of people that flow from one end to the other and no 2 separate arcs (although I could create two white sections with no flows to imitate a separation)
Does anybody have any examples on how to create a circular / arc like Sankey diagram? Or should I try this from a Chord diagram perspective?
Thank you for your help!
I figured out how to do it myself, but it requires a bit of code changes. So I wrote an extensive tutorial on how to do it. You can find it here
Related
We are new to D3 so please forgive me if I ask a stupid question. My developer and me have developed a user interface with D3 and as a default, it returns this:
However, this is not really user-friendly, since it is not clear what belongs to what. My ideal configuration would be something like this:
There are four nodes in total.
The grey node is the center node, it should always be in the center.
The green nodes are like 'subcategories', and they should always be in the circle around the center.
The gold nodes are companies and they can be scattered around, but in the presence of the green nodes they belond to.
The orange nodes are characteristics of the gold nodes and they should be scattered around the gold node that they belong to.
I hope you can give us some suggestions on how to approach this matter.
What you described can be achieved with a force simulation where nodes repel themselves. Here is an example in D3.
Creating a simulation encompasses an understanding of how it works, how to prepare data for it, and how to implement it; which are complex and broad topics that couldn't be fully explained in a single SO question. As a general direction, I recommend looking into the d3 documentation for force simulations. For searches, the keywords you might want to look for are "force simulation graph layout d3". There are several blog posts and examples that can help you implement with much more detail.
Diving a litte bit on your specific scenario, the main difference from your requirements from usual examples is the fixed node at the center. The force simulation works by assigning x and y properties to the nodes, but there are two properties fx and fy that you can manually set to fix the node's position.
When preparing the data for the simulation, find the node you want to be in the center and add the properties fx and fy to match the center of the screen. The force simulation will automatically position the other nodes around it, very similar to your second illustration.
My graphs currently indicate "no data" by calculating the holes in my datasets, then generating a new fake dataset that ranges from nil to max(all-y-values), thus making it look like a full-height background. I make it an "area" dataset and apply an SVG pattern to make it look like this:
The problem arises when the y-axis scale is greater than the data, in other words when max(all-y-values) doesn't coincide with the top of the graph.
I need to make these shaded background intervals always the full height of the graph, and I'm willing to rethink the whole process of adding them.
My recent attempts have been trying to follow the "filling an area above the line" example described in D3 Tips and Tricks as well as the NVD3 documentation and various other resources, but I haven't seen anything working.
This is the "filling an area above the line" example from that link:
Any solution must either use ClojureScript and Om or at least be directly compatible with them, since I already have a proof of concept in the above links and I am looking for more.
I'm fairly new to D3 and have been tasked with developing a force directed graph, however this diagram is unlike any examples I have found and I seem to have encountered quite a few issues.
I'm trying to develop something like this:
http://www.huzzahstudios.com/images/profile_page_simple.jpg
The biggest problem I am having so far is that the nodes containing text tend to overlap quite considerably and collision detection on the shape they form does not seem to be functioning as expected.
Basically I need:
- Nodes to never overlap in resolved state
- Nodes to resolve in similar locations (as per diagram above)
- Graph to be able to adapt acceptably depending on amount of data
This is what I have so far: http://jsfiddle.net/lucidlyle/SwV9s/4/
As you can see it's very messy at the moment, any help with this matter would be most appreciated.
Thanks
I need some advice about how to improve the visualization of cartographic information.
User can select different species and the webmapping app shows its geographical distribution (polygonal degree cells), each specie with a range of color (e.g darker orange color where we find more info, lighter orange where less info).
The problem is when more than one specie overlaps. What I am currently doing is just to calculate the additive color mix of two colors using http://www.xarg.org/project/jquery-color-plugin-xcolor/
As you can see in the image below, the resulting color where two species overlap (mixed blue and yellow) is not intuitive at all.
Someone has any idea or knows similar tools where to get inspiration? for creating the polygons I use d3.js, so if more complex SVG features have to be created I can give a try.
Some ideas I had are...
1) The more data on a polygon, the thicker the border (or each part of the border with its corresponding color)
2) add a label at the center of polygon saying how many species overlap.
3) Divide polygon in different parts, each one with corresponding species color.
thanks in advance,
Pere
My suggestion is something along the lines of option #3 that you listed, with a twist. Rather painting the entire cell with species colors, place a dot in each cell, one for each species. You can vary the color of each dot in the same way that you currently are: darker for more, ligher for less. This doesn't require you to blend colors, and it will expose more of your map to provide more context to the data. I'd try this approach with the border of the cell and without, and see which one works best.
Your visualization might also benefit from some interactivity. A tooltip providing more detailed information and perhaps a further breakdown of information could be displayed when the user hovers his mouse over each cell.
All of this is very subjective. However one thing's for sure: when you're dealing with multi-dimensional data as you are, the less you project dimensions down onto the same visual/perceptual axis, the better. I've seen some examples of "4-dimensional heatmaps" succeed in doing this (here's an example of visualizing latency on a heatmap, identifying different sources with different colors), but I don't think any attempt's made to combine colors.
My initial thoughts about what you are trying to create (a customized variant of a heat map for a slightly crowded data set, I believe:
One strategy is to employ a formula suggested for
n + 1
with regards to breaks in bin spacing. This causes me some concern regarding how many outliers your set has.
Equally-spaced breaks are ideal for compact data sets without
outliers. In many real data sets, especially proteomics data sets,
outliers can make this representation less effective.
One suggestion I have would be to consider the idea of adding some filters to your categories if you have not yet. This would allow slimming down the rendered data for faster reading by the user.
another solution would be to use something like (Comprehensive) R
or maybe even DanteR
Tutorial in displaying mass spectrometry-based proteomic data using heat maps
(Particularly worth noting I felt, was 'Color mapping'.)
I'm thinking of what would be the right terms to use in the UI of my new program, when referring to graphical data representations - i.e., whether to call them "charts", "plots" or "graphs". I was wondering how these terms are different, and when is it appropriate to use each of them?
Chart: Bar, line, or pie charts.
(source: jpowered.com)
(source: jpowered.com)
Plot: X-Y plot or blueprints.
(source: grass.itc.it)
Graph: Nodes connected by edges.
(source: graphviz.org)
I feel your pain. Google searching on these words lately for software libraries was quite difficult due to the overlap in their usage.
Elementary school kids are taught that "graphs" are two dimensional grids used for "graphically" displaying math functions. Yet "graph theory" is about networks, not functions; see graphviz.
Business graphics calls a representation using symbols a "chart," such as a pie chart or bar chart, yet a stripchart is a type of plot.