D3 Playground

by codemeasandwich

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg id="chart"></svg>

CSS

#chart rect {
    fill: steelblue;
}

#chart text {
    fill: white;
    font: 10px Helvetica;
    text-anchor: end;
}

JavaScript

var data = {
 name:'foo',
   children:[{
     name:'bar',
     value:1
  }]
};

function tree (data) {
  const root = d3.hierarchy(data)
      .sort((a, b) => (a.height - b.height) || a.data.name.localeCompare(b.data.name));
  root.dx = 10;
  root.dy = width / (root.height + 1);
  return d3.cluster().nodeSize([root.dx, root.dy])(root);
}

var width = 500;
var barHeight = 20;

var x = d3.chart()
    .domain([0, d3.max(data)])
    .range([0, width]);

var chart = d3.select('#chart')
    .attr('width', width)
    .attr('height', barHeight * data.length);