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://developer.crunchbase.com/member/register
The team at CrunchBase have done a great job with the API and have also provides a nice web documentation interface; so, once you have your API key you can test their API here: http://developer.crunchbase.com/io-docs.
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.
We’re going to assume you’re working in a Canvas-compatible browser and only need to download our JavaScript files. But if, for whatever reason, you find yourself on a machine with only IE7 installed, you will also need to download the Flash file.
This code snippet shows a very simple KeyLines “hello world” example.
<!DOCTYPE html>
<html>
<head>
<!-- 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>
</head>
<body>
<!-- This is the HTML element that will be used to render the KeyLines component -->
<div id="chartID" style="width: 400px; height: 300px;" ></div>
<!-- This is the actual code to load KeyLines in the page -->
<script>
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>
</body>
</html>
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 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:
The post Visualizing a CrunchBase network in KeyLines appeared first on .
Detecting Fraud with Network Visualization
The beach and cliffs in the background are 
