I have a very straightforward data structure where I want to have a D3 Donut Chart update based on a different key/value pair in the same object. Here is the data:
var data = [
{
id: 1,
name: 'Bernie Sanders',
name2: 'Jesus Christ',
color: '#0362ad',
state: 3.55,
national: 4.88
},
{
id: 2,
name: 'Donald Trump',
name2: 'Miley Cyrus',
color: '#f0a611',
state: 1.36,
national: 2.65
}
]
I'm setting up my pie chart in the following way:
var pie = d3.layout.pie()
.sort(null)
.value( function(d) { return d.state });
var arc = d3.svg.arc()
.outerRadius(radius - 30)
.innerRadius(radius - 80);
var paths = chart.selectAll('g')
.data(pie(data), function(d) { return d.data.id })
.enter()
.append('g')
.attr('class', 'arc')
.attr('transform', 'translate(' + (radius - margin.left) + ',' + (radius - margin.top) + ')');
var arcs = paths.append('path')
.attr('d', arc)
.style('fill', function(d) { return d.data.color; });
I have an update() function in which I'm trying to change the Donut Chart values to show the national value rather than the state value.
// "which" is equal to 'state' or 'national'
function update(which) {
// change location of values
pie.value( function(d) { return d[which] );
// compute new angles
paths.data(pie(data));
// update arcs
arcs.attr('d', arc);
};
My arcs are not properly updating, and when I log them to the console, the __data__ property still shows the value and angles for the initialized property (d.state).
How can properly compute the new paths for each arc?
You need to handle transition scenario for the paths like so:
(function() {
var data = [{
id: 1,
name: 'Bernie Sanders',
name2: 'Jesus Christ',
color: '#0362ad',
state: 3.55,
national: 4.88
}, {
id: 2,
name: 'Donald Trump',
name2: 'Miley Cyrus',
color: '#f0a611',
state: 1.36,
national: 2.65
}]
var svgElement = $("#piechart");
var width = svgElement.width();
var height = svgElement.height();
var radius = Math.min(width, height) / 2;
var chart = d3.select("#piechart");
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.state
});
var arc = d3.svg.arc()
.outerRadius(radius - 30)
.innerRadius(radius - 80);
chart.append('g')
.attr('class', 'arc')
.attr('transform', 'translate(' + (radius) + ',' + (radius) + ')');
var paths = chart.select('g').selectAll('path')
.data(pie(data), function(d) {
return d.data.id
});
paths.enter()
.append('path')
.attr('d', arc)
.style('fill', function(d) {
return d.data.color;
})
// which is equal to 'state' or 'national'
function update(which) {
pie.value(function(d) {
return d[which]
});
paths.data(pie(data), function(d) {
return d.data.id
});
paths.transition()
.duration(1000)
.attr('d', arc)
.style('fill', function(d) {
return d.data.color;
});
};
$("#stateButton").click(function() {
update("state");
});
$("#nationalButton").click(function() {
update("national");
});
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button id="stateButton">State</button>
<button id="nationalButton">National</button>
<svg id="piechart"></svg>
Related
I am working on a d3 applicaton - with a pie chart -- I would like to get animation onload and on a call to action. Like when the chart becomes visible during a scroll.
Where the pie segments grow around the central pivot. So tween or snap to the other segment like a relay race
http://jsfiddle.net/pg886/192/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="piechart" data-role="piechart" data-width=400 data-height=400 data-radius=30 data-innerradius=20
data-data=x>
</div>
<style>
.piechart{
/*border: 1px solid black;*/
/*text-align: center;
font-size: 12px;*/
}
</style>
<script>
$( document ).ready(function() {
console.log("test")
var $this = $('.piechart');
var data = [{
"label": "Apples",
"value": 100
},
{
"label": "Pears",
"value": 120
},
{
"label": "Bananas",
"value": 20
}];
var w = $this.data("width");
var h = $this.data("height");
var ir = $this.data("innerradius");
var r = $this.data("radius");
function colores_google(n) {
var colores_g = ["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f"];
//var colores_g = ["#47abd5", "#005a70", "#f5a0a3", "#ff7276", "#a9a19c", "#d0743c", "#ff8c00"];
return colores_g[n % colores_g.length];
}
var radius = Math.min(w, h) / 4;
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var labelArc = d3.svg.arc()
.outerRadius(radius - r)
.innerRadius(radius - ir);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.value; });
var chart = d3.select('.piechart').append("svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h)
.attr("transform", "translate(0,0)");
var piechart = chart
.append("g")
.attr("class", "piechart")
.attr("width", (radius*2))
.attr("transform", "translate(0,"+h/4+")");
var path_group = piechart.append("g")
.attr("class", "path_group")
.attr("transform", "translate(90," + ((h / 4) - 20) + ")");
var padding = 45;
var legendPaddingTop = 30;
var legend = chart.append("g")
.attr("class", "legend")
.attr("width", w/2)
.attr("height", h)
.attr("transform", "translate(" + (w - 50) + "," + (h / 4) + ")");
var label_group = legend.append("svg:g")
.attr("class", "label_group")
.attr("transform", "translate(" + (-(w / 3) + 20) + "," + 0 + ")");
var legend_group = legend.append("svg:g")
.attr("class", "legend_group")
.attr("transform", "translate(" + (-(w / 3) - 100) + "," + 0 + ")");
var g = path_group.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
return colores_google(i);
});
var legendHeight = legendPaddingTop;
var ySpace = 18;
//draw labels
var labels = label_group.selectAll("text.labels")
.data(data);
labels.enter().append("svg:text")
.attr("class", "labels")
.attr("dy", function(d, i) {
legendHeight+=ySpace;
return (ySpace * i) + 4;
})
.attr("text-anchor", function(d) {
return "start";
})
.text(function(d) {
return d.label;
});
labels.exit().remove();
//draw labels
//draw legend
var legend = legend_group.selectAll("circle").data(data);
legend.enter().append("svg:circle")
.attr("cx", 100)
.attr("cy", function(d, i) {
return ySpace * i;
})
.attr("r", 7)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {
return colores_google(i);
});
legend.exit().remove();
//draw legend
//reset legend height
//console.log("optimum height for legend", legendHeight);
$this.find('.legend').attr("height", legendHeight);
function type(d) {
d.value = +d.value;
return d;
}
});
</script>
So you can achieve this pretty easily, and there are a couple of blocks that will help you.
Arc Tween Firstly this block gives you an example of how to tween an arc. Basically you can't get that automatically so you have to write your own attrTween function. Fortunately this is pretty simple and Mike Bostock gives a really good example in there.
Here's a code sample - but the link gives a really good verbose description of what's going on.
.attrTween("d", function(d) {
var interpolate = d3.interpolate(d.endAngle, newAngle);
return function(t) {
d.endAngle = interpolate(t);
return arc(d);
};
}
Next you want something like this Donut with transitions. This is actually the end-result for where you're trying to get to. This effect is really easy to achieve, all you need to do is set your angles correctly and the timings.
Angles: So here you want both the endAngle and the startAngle to be the same at the start (which should be the endAngle value of the previous segment or 0 for the first segment).
Timing: You want to allow 1 animation to complete before you start the next, simply by delaying them. You can see how that's done with this snippet:
.transition()
.delay(function(d,i) { return i * 500; })
.duration(500)
.attrTween(...)
const dataset = [
{ age: "<5", population: 2704659 },
{ age: "5-13", population: 4499890 },
{ age: "14-17", population: 2159981 },
{ age: "18-24", population: 3853788 },
{ age: "25-44", population: 14106543 },
{ age: "45-64", population: 8819342 },
{ age: "≥65", population: 612463 },
];
const TIME = 2000 / dataset.length;
const color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
const pie = d3.pie()
.sort(null)
.value(function(d) { return d.population; });
const path = d3.arc()
.innerRadius(0)
.outerRadius(350);
d3.select("#container")
.selectAll(".arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class", "arc")
.append("path")
.attr("fill", function(d) { return color(d.data.age); })
.transition()
.duration(TIME)
.ease(d3.easeLinear)
.delay(function(d, i) { return i * TIME; })
.attrTween("d", function(d) {
// Note the 0.1 to prevent errors generating the path
const angleInterpolation = d3.interpolate(d.startAngle + 0.1, d.endAngle);
return function(t) {
d.endAngle = angleInterpolation(t);
return path(d);
}
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="800" height="800">
<g id="container" transform="translate(400, 400)"></g>
</svg>
I know how I can use an array with d3.jsdonuts but I can't seem to understand how objects work with d3.js.
I'd like to output the following object:
Code
var width = 175,
height = 175,
radius = Math.min(width, height) / 2,
donutWidth = 23;
var color = d3.scaleOrdinal(d3.schemeCategory20);
var data = [{
user: 'Bob',
value: 100
},
{
user: 'Danny',
value: 200
}
];
function render(data) {
//data = [100,250];
var svg = d3.select("#pot").append("svg")
.attr("width", width)
.attr("height", height)
var svg_g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var pie = d3.pie()
.sort(null);
var arc = d3.arc()
.innerRadius(radius - donutWidth)
.outerRadius(radius);
var path = svg_g.selectAll("path")
.data(pie(data));
var pathEnter = path.enter().append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc)
var pathUpdate = path.attr("d", arc);
}
render(data);
JSFiddle
I'd like the values from the object to be rendered.
If you need to show the values in the donut you should add:
.value(function(d) { return d.value }) at var pie = d3.pie().
Something like this:
(function() {
var width = 175,
height = 175,
radius = Math.min(width, height) / 2,
donutWidth = 23;
var color = d3.scaleOrdinal(d3.schemeCategory20);
var data = [{
user: 'Bob',
value: 100
}, {
user: 'Danny',
value: 200
}, {
user: 'Test',
value: 50
}];
function render(data) {
var svg = d3.select("#pot").append("svg")
.attr("width", width)
.attr("height", height)
var svg_g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var pie = d3.pie().value(function(d) {
return d.value
})
.sort(null);
var arc = d3.arc()
.innerRadius(radius - donutWidth)
.outerRadius(radius);
var path = svg_g.selectAll("path")
.data(pie(data));
var pathEnter = path.enter().append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc)
var pathUpdate = path.attr("d", arc);
}
render(data);
})();
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="pot"></div>
I'm trying to make a pie chart that is updated when I press the button "2016" but instead of updating I create a new pie chart, how can I change the values of my pie chart? Thanks in advance. I tried to search a question but all of them are so specific.
var dataset = [{
key: "Alumnos",
value: 15
}, {
key: "AlumnosFCT",
value: 12
}];
var w = 300;
var h = 300;
var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var color = d3.scale.ordinal()
.domain([15, 12])
.range(["#FF4081", "#3F51B5"]);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var arcs = svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")");
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc);
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.text(function(d) {
return d.value;
});
d3.selectAll("button").on("click", function() {
var paragraphID = d3.select(this).attr("id");
if (paragraphID == "2016") {
dataset.push({
key: "Alumnos",
value: 20
}, {
key: "AlumnosFCT",
value: 18
});
dataset.shift();
dataset.shift();
}
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var color = d3.scale.ordinal()
.domain([15, 12])
.range(["#FF4081", "#3F51B5"]);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var arcs = svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")");
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc);
arcs.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.text(function(d) {
return d.value;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button id="2016">2016</button>
In general, d3 is pretty good about managing DOM elements as long as you work within their API. In that way you can write a function that can create new elements for new data, or update existing elements with new data pertaining to those elements.
See the following updated version of your code snippet, specifically pulling out the data dependent DOM manipulations into a function called update:
/***
* Original Code
***/
var dataset = [{
key: "Alumnos",
value: 15
}, {
key: "AlumnosFCT",
value: 12
}];
var w = 300;
var h = 300;
var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var color = d3.scale.ordinal()
.domain([15, 12])
.range(["#FF4081", "#3F51B5"]);
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
/***
* update function for data dependent manipulations
***/
function update(data) {
var arcs = svg.selectAll("g.arc").data(pie(data));
arcs.exit().remove();
arcs.enter().append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")");
var paths = arcs.selectAll('path').data(function (d, i) {
d.idx = i;
return [d];
})
paths.enter().append('path');
paths
.attr("fill", function(d) {
return color(d.idx);
})
.attr("d", arc);
var texts = arcs.selectAll('text').data(function (d) {
return [d];
})
texts.enter().append('text');
texts.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.text(function(d) {
return d.value;
});
}
update(dataset);
/***
* Handler to set new data based on button clicked
***/
d3.select('button').on('click', function() {
var newData;
if (this.id === '2016') {
newData = [{
key: "Alumnos",
value: 20
}, {
key: "AlumnosFCT",
value: 18
}];
update(newData);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button id="2016">2016</button>
(depending on your browser, you might need to scroll the view to see the "2016" button)
Note the following advantages:
only elements whose data need to change are updated when update is called.
if you add a new data point when updating, a new element will be added without touching elements that should remain unchanged (via enter)
if you remove a data point when updating, that element will be removed (via exit)
d3 version: 3.4.11
//bubble chart base.
http://jsfiddle.net/NYEaX/1450/
I am trying to animate the bubbles - via changing their scale -- and if possible fade them in and out. At some stage I need to cluster them with some kind of gravity to occupy more of a containing circumference.
(function() {
var diameter = 250;
var svg = d3.select('#graph').append('svg')
.attr('width', diameter)
.attr('height', diameter);
var bubble = d3.layout.pack()
.size([diameter, diameter])
.value(function(d) {
return d.size;
})
.padding(3);
var color = d3.scale.ordinal()
.domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing"])
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);
function randomData() {
var data1 = {
"children": [
{
name: "AA",
className: "aa",
size: 170
},
{
name: "BB",
className: "bb",
size: 393
},
{
name: "CC",
className: "cc",
size: 293
},
{
name: "DD",
className: "dd",
size: 89
}
]
};
var data2 = {
"children": [
{
name: "AA",
className: "aa",
size: 120
},
{
name: "BB",
className: "bb",
size: 123
},
{
name: "CC",
className: "cc",
size: 193
},
{
name: "DD",
className: "dd",
size: 289
}
]
};
var j = Math.floor((Math.random() * 2) + 1);
console.log("j", j);
if (j == 1) {
return data1;
} else {
return data2;
}
}
change(randomData());
d3.select(".randomize")
.on("click", function() {
change(randomData());
});
function change(data) {
console.log("data", data);
// generate data with calculated layout values
var nodes = bubble.nodes(data)
.filter(function(d) {
return !d.children;
}); // filter out the outer bubble
var vis = svg.selectAll('circle')
.data(nodes);
vis.enter()
.insert("circle")
.attr('transform', function(d) {
return 'translate(' + d.x + ',' + d.y + ')';
})
.attr('r', function(d) {
return d.r;
})
.style("fill", function(d) {
return color(d.name);
})
.attr('class', function(d) {
return d.className;
});
vis
.transition().duration(1000)
vis.exit()
.remove();
};
})();
These animated bubbles will be part of this overall chart - I need support in fine-tuning the animated arcs and bubbles accordingly. So the pie chart arcs should tween smoothly -- and the bubbles should fade in/out/grow in radius/reduce in radius
Latest fiddle.
http://jsfiddle.net/NYEaX/1505/
( http://jsfiddle.net/NYEaX/1506/ )- refactored
1. -- how to animate the arcs
2. -- how to animate the bubbles
3. -- adding back the randomise button to test with 2 dummy data sets.
this is the old pie animations and worked very well
/* ------- ANIMATE PIE SLICES -------*/
var slice = doughpie.select(".slices").selectAll("path.slice")
.data(pie(data), key);
slice.enter()
.insert("path")
.style("fill", function(d) {
return color(d.data.label);
})
.style("transform", function(d, i){
//return "translate(0, 0)";
})
.attr("class", "slice");
slice
.transition().duration(1000)
.attrTween("d", function(d) {
this._current = this._current || d;
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
return arc(interpolate(t));
};
})
slice.exit()
.remove();
/* ------- ANIMATE PIE SLICES -------*/
//this is the current pie arcs - but when I try and animate the pie in the same manner - it fails.
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return color(d.data.label);
});
arc
.outerRadius(radius - 10)
.innerRadius(0);
Try and animate the pie chart first, then review the bubble animation
To animate the bubbles (grow in) use:
vis.enter()
.insert("circle")
.attr('transform', function(d) {
return 'translate(' + d.x + ',' + d.y + ')';
})
.attr('r',0)
.transition()
.duration(1000)
.attr('r', function(d) {
return d.r;
})
.style("fill", function(d) {
return color(d.name);
})
.attr('class', function(d) {
return d.className;
});
I tried adding this code to the jsfiddle you posted above : http://jsfiddle.net/NYEaX/1450/
I am querying a database and adding the result in a json file and trying to generate charts for each records in a same page.
Here is my JSON data set(all the records in a single file) that I generated querying mySql database. Now I want to generate charts (bar or pie chart is enough )for each records. Is that possible?
[
//record1
{"ProductType1":"999999","value1":"99"},
{"ProductType1":"88888","value1":"88"},
{"ProductType1":"77777","value1":"77"},
{"ProductType1":"999999","value1":"99"},
//record 2
{"ProductType":"132023","value":"144"},
{"ProductType":"132030","value":"275"},
{"ProductType":"132053","value":"42"},
{"ProductType":"132093","value":"1"},
{"ProductType":"132197","value":"94"},
//record 3
{"ProductType2":"132207","value2":"23"},
{"ProductType2":"304055","value2":"51"},
{"ProductType2":"520002","value2":"27"},
{"ProductType2":"522275","value2":"34"}
]
Or please suggest some other workarounds to get this done
I would have done it by following steps.
Create a key value map for your data array first.(You can dynamically generate it from the data array if key value names has a regular pattern)
var keyMap = [{
category: 'ProductType',
value: 'value'
}, {
category: 'ProcessType',
value: 'errorcount'
}, {
category: 'Message',
value: 'count'
}];
Convert the existing data in Array of Objects format to and Array of Arrays format.
var formattedData = d3.nest()
.key(function(d) { return Object.keys(d)[0]; })
.entries(data)
.map(function(d){ return d.values });
Once a key map is created, you can iterate over the data array and create charts as shown in below snippet.
Calculate the chart positions as per the requirement inside the loop and place SVG accordingly.
Here is a sample code snippet.
var width = 300,
height = 155,
radius = Math.min(width, height) / 3;
var keyMap = [{
category: 'ProductType1',
value: 'value1'
}, {
category: 'ProductType',
value: 'value'
}, {
category: 'ProductType2',
value: 'value2'
}];
var data =[
{"ProductType1":"999999","value1":"99"},
{"ProductType1":"88888","value1":"88"},
{"ProductType1":"77777","value1":"77"},
{"ProductType1":"999999","value1":"99"},
{"ProductType":"132023","value":"144"},
{"ProductType":"132030","value":"275"},
{"ProductType":"132053","value":"42"},
{"ProductType":"132093","value":"1"},
{"ProductType":"132197","value":"94"},
{"ProductType2":"132207","value2":"23"},
{"ProductType2":"304055","value2":"51"},
{"ProductType2":"520002","value2":"27"},
{"ProductType2":"522275","value2":"34"}
];
var formattedData = d3.nest()
.key(function(d) { return Object.keys(d)[0]; })
.entries(data).map(function(d){ return d.values });
formattedData.forEach(function(pieData, i) {
var color = d3.scale.category10();
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var labelArc = d3.svg.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var svg = d3.select("body")
.append("div")
.attr("width",width)
.attr("height",height)
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
console.log(keyMap[i].value, d);
return d[keyMap[i].value];
});
var g = svg.selectAll(".arc")
.data(pie(pieData))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d, j) {
return color(j);
});
g.append("text")
.attr("transform", function(d) {
return "translate(" + labelArc.centroid(d) + ")";
})
.attr("dy", ".35em")
.text(function(d) {
return d.data[keyMap[i].category];
});
function type(d) {
d[keyMap[i].value] = +d[keyMap[i].value];
return d;
}
});
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
div{
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>