Dhevi D3 Playground

by orthosie

HTML

<script src="https://mbostock.github.io/d3/talk/20111116/d3/d3.js"></script>
<script src="https://mbostock.github.io/d3/talk/20111116/d3/d3.layout.js"></script>
<h2>
      Finace Demystified<br>
      Components
    </h2>

CSS

body {
  font: 300 36px "Helvetica Neue";
  height: 640px;
  margin: 80px 160px 80px 160px;
  overflow: hidden;
  position: relative;
  width: 960px;
}

a:link, a:visited {
  color: #777;
  text-decoration: none;
}

a:hover {
  color: #666;
}

blockquote {
  margin: 0;
}

blockquote:before {
  content: "“";
  position: absolute;
  left: -.4em;
}

blockquote:after {
  content: "”";
  position: absolute;
}

body > ul {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 64px;
}

h1, h2, h3 {
  font-weight: inherit;
  margin: 0;
}

h2, h3 {
  text-align: right;
  font-size: inherit;
  position: absolute;
  bottom: 0;
  right: 0;
}

h2 {
  font-size: 24px;
  position: absolute;
}

h3 {
  bottom: -20px;
  font-size: 18px;
}

.invert {
  background: #1f1f1f;
  color: #dcdccc;
}

.invert h2, .invert h3 {
  color: #7f9f7f;
}

.string, .regexp {
  color: #f39;
}

.keyword {
  color: #00c;
}

.comment {
  color: #777;
  font-style: oblique;
}

.number {
  color: #369;
}

.class, .special {
  color: #1181B8;
}

body > svg {
  position: absolute;
  top: -80px;
  left: -160px;
}

text {
  font-size: 11px;
  pointer-events: none;
}

text.parent {
  fill: #1f77b4;
}

circle {
  fill: #ccc;
  stroke: #999;
  pointer-events: all;
}

circle.parent {
  fill: #1f77b4;
  fill-opacity: .1;
  stroke: steelblue;
}

circle.parent:hover {
  stroke: #ff7f0e;
  stroke-width: .5px;
}

circle.child {
  pointer-events: none;
}

JavaScript

var w = 1280,
    h = 800,
    r = 720,
    x = d3.scale.linear().range([0, r]),
    y = d3.scale.linear().range([0, r]),
    node,
    root;

var pack = d3.layout.pack()
    .size([r, r])
    .value(function(d) { return d.size; })

var vis = d3.select("body").insert("svg:svg", "h2")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");

var data = {
 "name": "Finance",
 "children": [
      {
       "name" : "Functional",
       "children" : [
          { "name": "Front Office",
             "children": [
                {"name": "Portfolio Construction", "size": 3938},
                {"name": "Order Routing", "size": 3812},
                {"name": "Trading", "size": 6714},
                {"name": "Portfolio Risk Management", "size": 6714},
                {"name": "Treasury & Finance", "size": 6714},
                {
                    "name": "Execution Management", 
                     "children" : [
                        {"name" : "Trader initiated order entry", "size" : 230},
                        {"name" : "Algo Orders", "size" : 130},
                        {"name" : "Blotter Scrapping/ Block Aggregation", "size" : 130},
                        {"name" : "DMA Orders", "size" : 130},
                        {"name" : "FX Specific Order Entry", "size" : 130},
                        {"name" : "Multi Order Algo route", "size" : 130},
                        {"name" : "Multi order execution viewer", "size" : 130},
                        {"name" : "Multi Order Route", "size" : 130},
                        {"name" : "Multi slice", "size" : 130},
                        {"name" : "Order and Execution Status Tracking", "size" : 130},
                        {"name" : "Order Modification by Trader", "size" : 130},
                        {"name" : "Point and Click Order Entry", "size" : 130},
                        {"name" : "Preferred Brokers/ Destinations...