Graphics Reference
In-Depth Information
diagrams. Other examples include hierarchy-specific visualizations such as
dendograms, collapsible trees, treemaps, and sunbursts.
A Simple Graph in D3
Let's start with a simple graph from a simple data set with four nodes and
four edges. Following is the code for the entire HTML page for drawing the
graph, including the data:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// this is the graph data
graph = {
"nodes":[
{"name":"Ann","NumEmail":1,"SumSize":100},
{"name":"Ben","NumEmail":4,"SumSize":500},
{"name":"Tim","NumEmail":2,"SumSize":200},
{"name":"Zoe","NumEmail":3,"SumSize":400}
],
"links":[
{"source":0,"target":1,"NumEmail":1,"SumSize":100},
{"source":1,"target":2,"NumEmail":1,"SumSize":100},
{"source":2,"target":3,"NumEmail":1,"SumSize":100},
{"source":1,"target":3,"NumEmail":2,"SumSize":300}
]
}
// set up the drawing area
var width = 500,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
