cluster

by Cyril Cherian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.js"></script>

CSS

circle {
    stroke-width: 1.5px;
}

JavaScript

var width = 960,
    height = 220,
    padding = 1.5, // separation between same-color nodes
    clusterPadding = 6, // separation between different-color nodes
    maxRadius = 12;
var data = [
     {
         "name": "Transaction failed",
         "value": 100,
     },
     {
         "name": "Rates",
         "value": 10,
     },
     {
         "name": "Error page",
         "value": 10,
     },
     {
         "name": "Unsupported country",
         "value": 20,
     },
     {
         "name": "Different currency",
         "value": 40,
     },
     {
         "name": "Bad service",
         "value": 13,
     },
     {
         "name": "Fees",
         "value": 12,
     },
     {
         "name": "Price",
         "value": 35,
     },
     {
         "name": "Transaction failed",
         "value": 100,
     },
     {
         "name": "Rates",
         "value": 10,
     },
     {
         "name": "Error page",
         "value": 10,
     },
     {
         "name": "Unsupported country",
         "value": 20,
     },
     {
         "name": "Different currency",
         "value": 40,
     },
     {
         "name": "Bad service",
         "value": 13,
     },
     {
         "name": "Fees",
         "value": 12,
     },
     {
         "name": "Price",
         "value": 35,
     },
     {
         "name": "Rates",
         "value": 10,
     },
     {
         "name": "Error page",
         "value": 10,
     },
     {
         "name": "Unsupported country",
         "value": 20,
     },
     {
         "name": "Different currency",
         "value": 40,
     },
     {
         "name": "Bad service",
         "value": 13,
     },
     {
         "name": "Fees",
         "value": 12,
     },
     {
         "name": "Price",
         "value": 35,
     },
     {
         "name": "Rates",
         "value": 10,
     },
     {
         "name": "Error page",
         "value": 10,
     },
     {
         "name": "Unsupported country",
         "value": 20,
     },
     {
...