djodjoni/README.md

## README.md

      
    Raw
  

              README.md
            
          
    From the D3 documentation:

Enclosure diagrams use containment (nesting) to represent the hierarchy. The size of each leaf node’s circle reveals a quantitative dimension of each data point. The enclosing circles show the approximate cumulative size of each subtree, but note that because of wasted space there is some distortion between levels; only the leaf nodes can be compared accurately. Although circle packing does not use space as efficiently as a treemap, the “wasted” space more prominently reveals the hierarchy.

Featured on D3plus.org

  
## index.html
<!doctype html>
<meta charset="utf-8">

<!-- load D3js -->
<script src="//d3plus.org/js/d3.js"></script>

<!-- load D3plus after D3js -->
<script src="//d3plus.org/js/d3plus.js"></script>

<!-- create container element for visualization -->
<div id="viz"></div>

<script>

  // sample data array
  var sample_data = [
    {"value": 100, "name": "alpha", "group": "group 1"},
    {"value": 70, "name": "beta", "group": "group 2"},
    {"value": 40, "name": "gamma", "group": "group 2"},
    {"value": 15, "name": "delta", "group": "group 2"},
    {"value": 5, "name": "epsilon", "group": "group 1"},
    {"value": 1, "name": "zeta", "group": "group 1"}
  ]

  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#viz")     // container DIV to hold the visualization
    .data(sample_data)     // data to use with the visualization
    .type("bubbles")       // visualization type
    .id(["group", "name"]) // nesting keys
    .depth(1)              // 0-based depth
    .size("value")         // key name to size bubbles
    .color("group")        // color by each group
    .draw()                // finally, draw the visualization!

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!doctype html>
	<meta charset="utf-8">

	<!-- load D3js -->
	<script src="//d3plus.org/js/d3.js"></script>

	<!-- load D3plus after D3js -->
	<script src="//d3plus.org/js/d3plus.js"></script>

	<!-- create container element for visualization -->
	<div id="viz"></div>

	<script>

	// sample data array
	var sample_data = [
	{"value": 100, "name": "alpha", "group": "group 1"},
	{"value": 70, "name": "beta", "group": "group 2"},
	{"value": 40, "name": "gamma", "group": "group 2"},
	{"value": 15, "name": "delta", "group": "group 2"},
	{"value": 5, "name": "epsilon", "group": "group 1"},
	{"value": 1, "name": "zeta", "group": "group 1"}
	]

	// instantiate d3plus
	var visualization = d3plus.viz()
	.container("#viz") // container DIV to hold the visualization
	.data(sample_data) // data to use with the visualization
	.type("bubbles") // visualization type
	.id(["group", "name"]) // nesting keys
	.depth(1) // 0-based depth
	.size("value") // key name to size bubbles
	.color("group") // color by each group
	.draw() // finally, draw the visualization!

	</script>