So I am very new to D3.js so I am looking for a little bit of help. I would like to make a pie chart using just the first part of the JSON response. For example, here is what the JSON looks like:
[
{
"Count": 4224,
"DNS": 0,
"Connect": 181,
"SSL": 218,
"Send": 65.7,
"Server Busy": 1459,
"Receive": 3,
"RTT": 1926.7
},
{
"Count": 5268,
"DNS": 0,
"Connect": 153.3,
"SSL": 218,
"Send": 54,
"Server Busy": 2211,
"Receive": 1,
"RTT": 2637.3
},
{
"Count": 5567,
"DNS": 0,
"Connect": 103,
"SSL": 190,
"Send": 53,
"Server Busy": 2100,
"Receive": 2,
"RTT": 2448
}
]
So what happens here is RTT is the total (the whole pie) and then Receive, Server Busy, Send, SSL, Connect, and DNS are the pieces to make up the whole (those all added up equal RTT). All the examples I have found online don't do it this way, so I'm wondering if this is possible, and if so, how could I do that?
I have the basics set up (it just uses all 3 RTT's), but I'm not sure how to use the data the way I want to. Any help is appreciated. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Graphic</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
body {
font-family: "Exo 2", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300;
font-size: 1.2em;
line-height: 1.2em;
background: #FDF6E3;
color: #475B62;
}
strong {
font-weight: 600;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, sans-serif;
font-weight: 700;
color: #CB4B19;
font-size: 1.75em;
margin-bottom: .4em;
}
p {
margin-bottom: .5em;
}
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
margin-top:10px;
}
@media all and (max-width: 500px) {
h2 {
padding-left: 10px;
text-align: center;
}
.container {
width: 100%;
}
}
#graphic {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h2>D3 Graphic</h2>
<div id="chart"></div>
</div>
<script>
var width = 400,
height = 400,
radius = 200
colors = d3.scale.ordinal()
.range(['#33CCCC','#6600CC','#0066FF']);
var piedata = [
{
"Count": 4224,
"DNS": 0,
"Connect": 181,
"SSL": 218,
"Send": 65.7,
"Server Busy": 1459,
"Receive": 3,
"RTT": 1926.7
},
{
"Count": 5268,
"DNS": 0,
"Connect": 153.3,
"SSL": 218,
"Send": 54,
"Server Busy": 2211,
"Receive": 1,
"RTT": 2637.3
},
{
"Count": 5567,
"DNS": 0,
"Connect": 103,
"SSL": 190,
"Send": 53,
"Server Busy": 2100,
"Receive": 2,
"RTT": 2448
}
]
var pie = d3.layout.pie()
.value(function(d) {
return d.RTT;
})
var arc = d3.svg.arc()
.outerRadius(radius)
var myChart = d3.select('#chart').append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate('+(width-radius)+','+(height-radius)+')')
.selectAll('path').data(pie(piedata))
.enter().append('g')
.attr('class', 'slice')
var slices = d3.selectAll('g.slice')
.append('path')
.attr('fill', function(d, i) {
return colors(i);
})
.attr('d', arc)
var text = d3.selectAll('g.slice')
.append('text')
.text(function(d, i) {
return d.data.RTT;
})
.attr('text-anchor', 'middle')
.attr('fill', 'white')
.attr('transform', function(d) {
d.innerRadius = 0;
d.outerRadius = radius;
return 'translate('+ arc.centroid(d)+')'
})
</script>
</body>
</html>