Skip to content

Instantly share code, notes, and snippets.

@bennpearson

bennpearson/index.html

Last active January 31, 2016 18:38
Show Gist options
  • Save bennpearson/a5b77156a13bb3a997a2 to your computer and use it in GitHub Desktop.
Save bennpearson/a5b77156a13bb3a997a2 to your computer and use it in GitHub Desktop.
Download ZIP
Resources
Raw
index.html
<!doctype html>
<meta charset="utf-8">
<!-- load D3js -->
<script src="http://www.d3plus.org/js/d3.js"></script>
<!-- load D3plus after D3js -->
<script src="http://www.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": "video", "group": "macbeth"},
{"value": 70, "name": "video", "group": "hamlet"},
{"value": 40, "name": "radio", "group": "hamlet"},
{"value": 15, "name": "images", "group": "hamlet"},
{"value": 5, "name": "radio", "group": "macbeth"},
{"value": 1, "name": "images", "group": "macbeth"}
]
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment