D3 Authors by Domain

This infographic was prepared for the d3.selectAll('meetup').data([2014]).enter() meet of the Bay Area d3 User Group, held Jan. 28, 2014. It uses Mike Bostock's Circle Packing enclosure diagram to show the long-tail distribution of authors and titles in the D3 ecosystem. Source data originates from the D3 Gallery spreadsheet.

During data cleanup, aggregated domain values were assigned to each record in the data from the url. The bl.ocks.org domain represents 880 titles, and github holds 169. However, there are 24 domains with more than 5 titles and another 522 with fewer than 5. While bl.ocks and github are the foundation for the developer community, the other domains hold finished titles that make points and change opinions. Presentation of author titles by domain allows us to see this dynamic at a glance.

Each containing circle (yellow) represents a web domain where authors display their finished D3 visualizations. Each leaf circle (blue) within a domain represents the number of works an author presents on that domain. Mouse over a circle to view the number in a tooltip.

The Jan. 24, 2014 spreadsheet snapshot held 1,986 titles, but listed authors for only 1,464 (74%) of the total. Null values were replaced with author tokens extracted from the url when possible. The remainder were associated with the single appearance of a unique domain, and were assigned to the list with a unique name with the suffix 'other'. This represents the many people with one published D3 image. The same approach was taken for 60 bl.ocks.org titles that had a gist number, but no name. These should actually be assigned to someone on the list, but there wasn't enough time to finish that work. The information was kept to keep the domains sized appropriately.

This version of the infographic adds responsive page design to the circle packing gist, which resizes the image as the window size changes. Click on the raw data to see this in action. This allows it to appear gracefully in a phone format (particularly the iPhone). Additionally, there is a noob factor that suppresses the label for any circle representing a person with fewer published images than the specified value.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

circle {
  stroke: #e67e22;
  fill-opacity: .25;
  fill: #f1c40f;
  stroke-width: 1px;
}

.leaf circle {
  fill: #3498db;
  stroke: #34495e;
  fill-opacity: 1;
}

text {
  font: 12px sans-serif;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  #visual {
    -webkit-user-select: none;
    font-size: 1.2em;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  #visual { 
	-webkit-user-select: none; 
  }
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var initialdiameter = diameter = 960,
    noob = 2,
    format = d3.format(",d");

// adjust the box immediately for mobile devices
if (window.innerWidth <= 480) {
    diameter = window.innerWidth;
}
    
// set viewBox and aspect ratio to enable a resize of the visual dimensions 
var viewBoxDimensions = "0 0 " + diameter + " " + diameter,
    aspect = 1;

var pack = d3.layout.pack()
    .size([diameter - 40, diameter - 40])
    .value(function(d) { return d.size; });

var svg = d3.select("body").append("svg")
    .attr("id", "visualsvg")
    .attr("viewBox", viewBoxDimensions)
    .attr("preserveAspectRatio", "xMinYMid")    // add viewBox and preserveAspectRatio
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(2,2)");

d3.json("d3authorsbydomain.json", function(error, root) {
  var node = svg.datum(root).selectAll(".node")
      .data(pack.nodes)
    .enter().append("g")
      .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.append("title")
      .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });

node.append("circle")
      .attr("r", function(d) { return d.r; });

node.filter(function(d) { return !d.children && d.size > noob; }).append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.name.substring(0, d.r / 3); });
});

window.onresize = function() {
    var targetWidth = (window.innerWidth < initialdiameter)? window.innerWidth : initialdiameter;
            
    var svg = d3.select("#visualsvg")
        .attr("width", targetWidth)
        .attr("height", targetWidth / aspect);
}

d3.select(self.frameElement).style("height", diameter + "px");

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js