d3 and connection charts are owning me

Question

I've been pushing my ability on d3 for probably close to a week in my free time.

I've been able to take a sample from Mike Bostock's site and plug it into a php based generator. I'm using it to show connections of intersecting interests between friends.

This is in it's infancy, but it needs some real tweaking.

My sample code is here, http://www.nogumallowed.com/test4.php

The inspiration for this came from here: http://gia.guim.co.uk/2013/03/video-game-violence/index.html

• My question is, how could I show things in groups?
• How can I set custom IDs for each node? it's currently deriving an ID from the text, but spaces are breaking that.
• Is there a simple way to show that cool color transition on the lines?

I'm still really new, but have nothing but love for d3 so far, I just need to find more and more documentation!!

Answer 1

w/r/t setting custom IDs w/o spaces: Look at their code to figure see how they did it!

.attr('id', function(d){
  return 'bargroup-' + d.name.toLowerCase().replace(' ', '')
})