Libraries used in bl.ocks

A dump of 2000+ libraries found in the 14,000+ blocks we have indexed.

I parse the html files of all the blocks with this code.

It would be nice to have a structured way to pull the version out of this variety of URL patterns. Perhaps someone will come up with a crazy regex that does it.

This is likely the first step to indexing the library version for blockbuilder search. We have an issue for this tracked here.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { 
      margin:0;position:fixed;top:0;right:0;bottom:0;left:0; 
      background-color: #111;
    }
    
    #libs {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: scroll;
      font-family: Monospace;
    }
    .lib {
      background-color: steelblue;
      float: left;
      clear: left;
      margin: 1px;
      white-space: nowrap 
    }
    a {
      color: white;
    }
  </style>
</head>

<body>
  <div id="libs"></div>
  
  <script>
    var width = 960;
    d3.csv("libs.csv", function(err, data) {
      var libs = data.map(function(d) {
        return {
          url: d.url,
          count: +d.count
        }
      }).sort(function(a,b) { return b.count - a.count})
      console.log("libs", libs)
      
      var max = d3.max(libs, function(d) { return d.count})
      var widthScale = d3.scale.linear()
        .domain([0, max])
        .range([0, width])
      
      var vis = d3.select("#libs")
      var bars = vis.selectAll("div.lib")
        .data(libs.filter(function(d){ 
          //return d.url.indexOf('d3.v2') >= 0
          //return d.url.indexOf('d3.v3') >= 0
          //return d.url.indexOf('d3/3.') >= 0
          //return d.url.indexOf('d3.v4') >= 0
          //return d.url.match(/d3/)
          return true
        }))
      
      bars.enter().append("div").classed("lib", true)
        .append("a").attr({
          href: function(d) { return d.url}
        })
        .text(function(d) { 
          return d.count + " " + d.url
        })
      bars.style({
        width: function(d) { return widthScale(d.count) + "px"}
      })
    })
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js