Visualizing a CrunchBase network in KeyLines

28th April, 2014

As a young technology company, we’re big fans of CrunchBase – the crowd-sourced database of start-up companies, entrepreneurs and products. You can even find us on there…

Just last week, following months of development, CrunchBase 2.0 was announced. The most noticeable difference is in the new responsive page design, but the biggest change is behind the scenes – the creaking relational backend has been replaced with a shiny new Neo4j graph database – making queries faster and opening up new levels of extensibility.


The Business Graph, as it has been named, features 530,000 connected companies and people. In a Neo4j graph database. With a free (and easy to use) API.

Visualizing it in KeyLines seemed the obvious next step.

We’ve made some notes to help show you how simple it is to build a fully-customized data visualization application with KeyLines. To get an evaluation and try it for yourself, just get in touch.

Getting Started

1. Access the CrunchBase API

First you’ll need to familiarize yourself with the CrunchBase developer portal and request an API key, which is needed to call data from the Business Graph, using CrunchBases’ RESTful interface. You can register here: http://data.crunchbase.com/v3/page/accessing-the-dataset

2. Download KeyLines

Once you have your login details for the KeyLines SDK, we recommend taking some time to read the Getting Started documentation and downloading the relevant files.

This code snippet shows a very simple KeyLines “hello world” example.

<!-- Load the KeyLines file --><script src="keylines.js" type="text/javascript"></script><!-- Other libraries we want to use, e.g. jQuery --><script src="jquery.js" type="text/javascript"></script><!-- This is the HTML element that will be used to render the KeyLines component -->

<!-- This is the actual code to load KeyLines in the page --><script>// <![CDATA[
var myChart;            // This will store a reference to our KeyLines chart object
      var myChartItems = [];  // This array will store our node and link definitions

      // wait until the fonts are loaded to start
      $(window).load(function () {
        
        // Set the path for the assets
        KeyLines.setCanvasPaths(‘assets/’);
         
        //load the component: specify the id and callback
        KeyLines.createChart('chartID', chartReady);
      });
         
      function chartReady (err, chart) {
        // Store a reference to the KeyLines chart object
        myChart = chart;

        // Use our helper functions to add the node and link definitions
        addNode('id1', 'Hello','#B9121B');
        addNode('id2', 'World','#B9121B');
        addLink('id1', 'id2', '', '#4C1B1B', false);

        // Load the chart with the newly defined nodes and links
        myChart.load({
          type: 'LinkChart',
          items: myChartItems
        });
      }  
 
      // Helper function to add a new node definition to our chart items array
      function addNode(nodeId, nodeTitle, colour){
        myChartItems.push({c: colour, id: nodeId, t: nodeTitle, type: 'node',x: 100, y: 100
            });
      }

      // Helper function to add a new link definition to our chart items array
      function addLink(nodeId1, nodeId2, linkTitle, colour, directional){
        myChartItems.push({a2: directional, c: colour, id: nodeId1 + '-' + nodeId2,
              id1: nodeId1, id2: nodeId2, t: linkTitle, type: 'link'
            });
      }
// ]]></script>

In this example, we’re carrying out the following actions:

  • Loading our webpage
  • Creating a KeyLines chart object
  • Adding data definitions to our chart object (using the helper functions addNode and addLink)
  • Loading the chart with these item definitions

Which should display a simple little chart like this:

Link CrunchBase with KeyLines

Now we have our basic infrastructure in place, we need to get KeyLines pulling data from CrunchBase. To do this we:

  • Issue a request through to the CrunchBase API and get a response
  • Parse the response into KeyLines’ node-link JSON format
  • Display the results in a KeyLines chart

Step 1: Issue a CrunchBase API Request

We can call data from the Business Graph using the CrunchBase API’s Entity Information Request. There’s an I/O docs interface on their developer site you can use you test this:

The above example will request company information on ‘facebook’. The Request URI for this would be:

http://api.crunchbase.com/v/1/company/facebook.js?api_key={your api key}

The response we get back is in the format of a JSON object – easily manipulable with JavaScript, so perfect for KeyLines. To generate this URI, we use the following code:

function getEntityUrl(entityType, name) {
      return 'http://api.crunchbase.com/v/1/'
      + encodeURIComponent(entityType)
      + '/
      + encodeURIComponent(name)
      + '.js?api_key='
      + apikey;
  }

Now, we need to add the actual request mechanism, using the jQuery $.ajax method:

function getEntity() {
        var cbUrl = getEntityUrl('company', 'facebook');
        $.ajax({
            url:      cbUrl,
            dataType: 'jsonp',
            success:  function(data){
                        parseResponse(data);
                        myChart.expand(myChartItems, {fit: true, animate: true, tidy: true});
                      }
        });
      }

Here we’re making an Ajax request to the generated URL. As this is requesting data from another domain we need to use JSONP (JSON with padding). If the request succeeds then the success callback option is invoked. The callback function will receive the response object returned by the server. This response is then parsed and KeyLines renders the objects.

Step 2: Parse the Response

  function parseResponse(data){
        
        // Get the main company and us this as it's ID
        var mainCompanyId = data.permalink;

        // Add the main company node to the chart
        addNode('company', mainCompanyId, data.name, '#B9121B');

        // Parse Competition
        if(data.competitions.length > 0)
        {
            for (var i = 0; i < data.competitions.length; i++)
            {
                var competition = data.competitions[i];
                var competingCompany = competition.competitor;
                var competingCompanyId = competingCompany.permalink;

                // Add the competitor company node
                addNode('company', competingCompanyId, competingCompany.name, '#B9121B');

                // Now add a link from our main company to the competitor
                addLink('company', mainCompanyId, 'company', competingCompanyId, 'Competitor', '#4C1B1B', false);
            }
        }
        // Todo: Parse Company Personnel 
        // Todo: Parse Acquisitions
        // Todo: Parse Funding
        // Todo: Parse Investments
      }

This function is reasonably simple and relies on two other helper functions (similar to the addNode and addLink functions in our original ‘hello world’ example) to actually add the nodes and link information to an array of chart items.

Step 3: Display the KeyLines Chart

Now that we’ve parsed the response to our original request and added the resulting items to the chart structure, all we need to do is display the chart. The code for this is already in our .success callback from the original Ajax request.

myChart.expand(myChartItems, {fit: true, animate: true, tidy: true});

This sends the newly created chart items to the chart object with some instructions for the layout.

Steps 4 onwards…

So, there it is. In just a short amount of time, it’s possible to pull data from the Business Graph and start displaying it in KeyLines.

Next you will probably want to start playing with how the design of your graph, adding new layout options, extending the user interface to explore data incrementally.

You can also use the CrunchBase API to pull more extensive data on each company – like their employees, products and acquisitions.

With a small amount of coding, it’s possible to extend and enrich not just the visual user experience, but also add value to the data you are exploring with advanced visual analysis.

We’ll cover some of those options in later blog posts. For now, here’s an example of what you could achieve:

Subscribe to our newsletter

Get occasional data visualization updates, stories and best practice tips by email