Concentric ring charts with d3.js or dimple.js

Shalini Ravishankar

unread,

Apr 14, 2015, 3:20:57 AM4/14/15

to d3...@googlegroups.com

Hello Everyone,

I have data set which is like :

[

{

"Id":"ARG",

"Country":"Argentina",

"Over all Score":34,

"sub_score1 : 23

"sub_score2 : 43

"sub_score3 : 53

"sub_score4 : 33

},

{

"Id":"AUS",

"Country":"Australia",

"Over all Score":44,

"sub_score1 : 43

"sub_score2 : 43

"sub_score3 : 43

"sub_score4 : 43

},

....

.

.]

I want to draw separate ring charts(concentric charts http://dimplejs.org/examples_viewer.html?id=ring_multiple) for each country. So that the outer ring specifies Score and inner circle will be of donut chart with each partition dependends on sub scores(4). I just started with d3.js ad am new to this field. I am not quite sure how to start. Can someone give me some suggestions on how do I achieve this. ? How can I use my data.

It would be really help full.

Shalini Ravishankar

unread,

Apr 14, 2015, 3:31:09 AM4/14/15

to d3...@googlegroups.com

All the examples I found takes data and aggregate based on some axis to calculate the chart but I need to draw separate rings/chart for each country: the outer circle should be drawn based on only one quantitative value (no aggregation or anything) just draw pie (23) .

Can some one please tell me how can I do this.

--

Thanks & Regards,

Shalini Ravishankar.

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/jflDPK-4BAE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Shalini Ravishankar

unread,

Apr 14, 2015, 3:44:32 AM4/14/15

to d3...@googlegroups.com

Hello,

I tried creating 5 concentric circles so that 4 inner circles represent 4 subs cores and outer circle represent over all score with d3.js (with out using data just mentioning explicitly) butt nothing shows up:

<!DOCTYPE html>

<html>

</head>

<body>

var value= 0,

minValue = 0,

maxValue = 100,r = 80;

var colors = ["#1d871b", "#b00d08", "#f0a417", "#3660b0", "#DCD35B"]

var canvas = d3.select("body")

.append("svg")

var _arc = d3.svg.arc().innerRadius(r-5)

.outerRadius(r)

var _arc2 = d3.svg.arc()

.innerRadius(r-10)

.outerRadius(5)

var _arc3 = d3.svg.arc().innerRadius(r-15)

.outerRadius(10)

var _arc4 = d3.svg.arc().innerRadius(r-20)

.outerRadius(15)

var _arc5 = d3.svg.arc().innerRadius(r-25)

.outerRadius(20)

var group = canvas.append("g")

.attr("transform", (200,200))

.attr("id", "AA")

var pie = d3.layout.pie()

.value( function(d) { return d; })

.sort(null)

var arcs = group.selectAll(".arc")

.data(pie([22,90]))

.enter()

.append("g")

.attr("class", "arc")

var arcs2 = group.selectAll(".arc2")

.data(pie([3,4]))

.enter()

.append("g")

.attr("class", "arc2")

var arcs3 = group.selectAll(".arc3")

.data(pie([5,35]))

.enter()

.append("g")

.attr("class", "arc3")

var arcs4 = group.selectAll(".arc4")

.data(pie([33,34]))

.enter()

.append("g")

.attr("class", "arc4")

var arcs5 = group.selectAll(".arc5")

.data(pie([33,4]))

.enter()

.append("g")

.attr("class", "arc5")

var paths = arcs.append("path")

.attr("d", arc)

.attr("fill", colors[0])

.attr("id", "OverAll_Score")

.attr("class", "ring")

.style("opacity", 0.3)

var paths = arcs2.append("path")

.attr("d", arc2)

.attr("fill", colors[1])

.style("opacity", 0.3)

.attr("id", "Sub_Score1")

.attr("class", "ring")

var paths = arcs3.append("path")

.attr("d", arc3)

.attr("fill", colors[2])

.style("opacity", 0.3)

.attr("id", "Sub_Score2")

.attr("class", "ring")

var paths = arcs4.append("path")

.attr("d", arc4)

.attr("fill", colors[3])

.style("opacity", 0.3)

.attr("id", "Sub_Score3")

.attr("class", "ring")

var paths = arcs5.append("path")

.attr("d", arc5)

.attr("fill", colors[4])

.style("opacity", 0.3)

.attr("id", "Sub_Score4")

.attr("class", "ring")

</script>

</body>

</html>

--

Thanks & Regards,

Shalini Ravishankar.

Reply all

Reply to author

Forward