How could i draw pie chart or bar chart in d3js with json data like these ?
{"ratings": {"2": 1, "3": 3, "4": 12, "1": 8, "5": 33} }
or these:
{"languages": {"1": 35, "2": 22}}
please help!
1 Answer
Convert data as shown below and use in pie chart.
var actualData = {
"ratings": {
"2": 1,
"3": 3,
"4": 12,
"1": 8,
"5": 33
}
};
var data = d3.values(actualData.ratings).map(function(v, i) {
return {
key: i + 1,
value: v
}
});
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var labelArc = d3.svg.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var actualData = {
"ratings": {
"2": 1,
"3": 3,
"4": 12,
"1": 8,
"5": 33
}
};
var data = d3.values(actualData.ratings).map(function(v, i) {
return {
key: i + 1,
value: v
}
});
console.log(data)
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.key);
});
g.append("text")
.attr("transform", function(d) {
return "translate(" + labelArc.centroid(d) + ")";
})
.attr("dy", ".35em")
.text(function(d) {
return d.data.key;
});
function type(d) {
d.value = +d.value;
return d;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
1 Comment
Ibrahim Samara
thaaank yoooou <33333
data = []; for(key in json) { data.push({key: key, value json[key]}); }