1

I am using the voronoi arc map example http://bl.ocks.org/mbostock/7608400 And I can successfully visualise my dataset for import export trades.

However I am not able to change the properties of the individual paths generated at specific localities. I use .airport-arcs to make those paths and I would like to have variable "stroke-width" or "color" of the individual lines. I have tried several options, such as :

var color = d3.scale.category20();
...       
var td = svg.selectAll(".airport-arcs")
td.style("stroke", function(d) { return color(d.count); });
td.attr("stroke-width", function(d) { return Math.log(d.count); });

which appears to change all the stroke-width by the same quantity, while colors are different for all the links generated at a given locality (but different between localities). Any suggestion on how to change the attributes for the individual paths?

Patrizio
  • 13
  • 3

1 Answers1

0

There are two errors in your code:

  1. You are not selecting the elements you are looking for. Selecting class .airport-arcs will return the group containing all paths. To manipulate the paths individually, you need to select like this:

    var td = svg.selectAll(".airport-arcs path")

  2. You are accessing the wrong property. .count is not a direct property of the data bound to the paths but of the airports' objects. d.source.count is what you are looking for.

Your corrected code would look like this:

var color = d3.scale.category20();

var td = svg.selectAll(".airport-arcs path")
td.style("stroke", function(d) { return color(d.source.count); });
td.attr("stroke-width", function(d) { return Math.log(d.source.count); });
altocumulus
  • 21,179
  • 13
  • 61
  • 84
  • Hi, Thanks for the advice, and yes I forgot to mention that I am new to d3 and JS. I have tried your suggestion it in the example file liked above but it produces the same results I had before. Only the "color-per-group" is changed but not the individual path..... – Patrizio Oct 26 '15 at 13:31
  • @Patrizio Maybe, I don't get it. `count` is a value *per airport*. Therefore, `color(d.source.count)` will always return the same color for all flights starting at any given airport. Sounds like you are using the wrong criterion to determine the color. – altocumulus Oct 26 '15 at 13:55
  • count is a value per airport per destination. The same airport with different destinations might have different count values. Hence I would expect that based on [count] I can have different attributes for the different path. – Patrizio Oct 26 '15 at 14:03
  • I disagree: check the `airports.filter()` function. It sets `count` to be the number of all incoming or all outgoing flights whichever is greater and includes only those airports having `count > 0`. The last statement of the example gives another hint to my assumption setting the radius of the airports circle to be the square root of `count`. This only makes sense, if `count` is the number of flights *per airport*. – altocumulus Oct 26 '15 at 14:13
  • you are absolutely right. I have missed that line in the airports.filter(). I was looking at the flights.csv which has a count for each desstination. I will try to keep that info available in the script and then I suppose I can obtain the behavior I want. Thanks – Patrizio Oct 26 '15 at 14:25