Note that the two axes of the hive plot connote the HIV status of the individuals. The nodes are colored and ordered first by gender and then within each gender are subsequently ordered by the number of links, where the nodes closer to the origin of the axis are more well-connected. The links are also color-coded by whether they are friendships between the same gender or opposite genders. Whether a link is serodiscordant or seroconconcordant is evident from its placement relative to the axes.
The full, interactive visualization is available here and the code is available on Github.
For those new to D3.js, here are some great resources for getting started: