WebVis contributions bubble chart

(This gist contains server-side code. In order to see it running, you should open it on WebVis.)

This example displays a simple bubble chart, in which each bubble is sized according to the amount of contributions a certain user has made to the WebVis laboratory. Data is read live from the underlying Neo4j graph DB through PHP.

The bubble chart is implemented as a force layout with a non-overlapping constraint (see this example), initialized with a radial displacement of the circles. A simpler, more efficient implementation using a circle packing layout can be found in this example.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="index.css">
        <title>WebVis contributions bubble chart</title>
    </head>
    <body>
        <script src="index.js"></script>
    </body>
</html>
​
    

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

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