search

d2bjs / d2b

Reusable d3-based chart library.
http://d2bjs.org
BSD 3-Clause "New" or "Revised" License
97 stars 17 forks source link

Chart.sunburst() configuration sorting. #17

Closed Dekermanjian closed 6 years ago

Dekermanjian commented 6 years ago

Hi, I am wondering if there exists a list of all the possible configurations under chart.sunburst()? I have been trying to figure out how to sort the arcs by size and I am assuming that the configuration is under chart.sunburst().sort but it hasn't been working for me. I have tried these two variations: chart.sunburst() .sort(function(a.b){return d3.descending(a.x, b.x)} and .sort(function(a,b){return b.x - a.x}

kevinwarne commented 6 years ago

Hey there. The d2b docs can be found here http://docs.d2bjs.org/.

I tried to write them in similar fashion to d3 docs but it can be quite confusing when first interpreting how to configure something.

The d2b.chartSunburst can be found here http://docs.d2bjs.org/charts/sunburst.html#sunburst. This page indicates that it uses a d2b sunburst svg generator to create the svg pieces of the chart. So by using chart.sunburst() method we get the sunburst svg generator returned. I see this is what you tried in your example.

Glancing at the d2b.svgSunburst page http://docs.d2bjs.org/svg/sunburst.html#pie. We see that it also uses a generator but this time it's one of the d3 generators d3.pie. And this can be returned using the following syntax sunburst.pie().

Finally, we can reference the d3-pie documentation page at https://github.com/d3/d3-shape#pie. This page has a pie#sort method to sort the chart. Keep in mind that the a, b attributes here are wrappers of the original data that you provided to d2b. These wrappers contain all sorts of additional properties that can be used, and have a reference to the original arc data through a.data or b.data.

Putting all that together we can configure the sunburst sorting with the following:

chart
  // get the underlying sunburst generator
  .sunburst()
  // get the underlying pie generator
  .pie()
  // use the pie#sort method  
  .sort(function (a, b) {
    // print out the value of a or b if you would like to see the attributes they contain
    console.log(a)
    // return the sorting method
    return d3.ascending(a.value, b.value)
  })

Here is a working fiddle of this: https://jsfiddle.net/tc94zb5d/16/

Side note: sorry it's taking a while on the other issue you submitted, still trying to find time to debug that

Cheers!

Dekermanjian commented 6 years ago

Kevin does this also work with Vue? When I apply the configurations I only get the root circle.

" var app = new Vue({ el: '#app', components: { 'sunburst-chart': vued2b.ChartSunburst }, data: { sunburstChartData: %s, sunburstChartConfig: function(chart) {

  var d3_category30 = [

'#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5', 'salmon','lightsalmon', 'lightsteelblue','steelblue', 'yellow','orange', '#cccccc','#dddddd','#eee','#aaa', '#123456','black']; d3.scale.category30 = function() { return d3.scale.ordinal().range(d3_category30); };

var color = d3.scale.category30(); chart.label(function(d){return d.name}); chart .sunburst().size(function(d){return d.x }); chart.sunburst().pie().sort(function(a,b){return ascending(a.value, b.value)}); chart.color(function(d){return color(d.name);}) //chart.color(function(d){return typeof(d.color) === 'undefined' ? '#BBB' : d.color; }) } }, }) "

On Jun 20, 2018, at 2:17 PM, Kevin Warne notifications@github.com<mailto:notifications@github.com> wrote:

Hey there. The d2b docs can be found here http://docs.d2bjs.org/.

I tried to write them in similar fashion to d3 docs but it can be quite confusing when first interpreting how to configure something.

The d2b.chartSunburst can be found here http://docs.d2bjs.org/charts/sunburst.html#sunburst. This page indicates that it uses a d2b sunburst svg generator to create the svg pieces of the chart. So by using chart.sunburst() method we get the sunburst svg generator returned. I see this is what you tried in your example.

Glancing at the d2b.svgSunburst page http://docs.d2bjs.org/svg/sunburst.html#pie. We see that it also uses a generator but this time it's one of the d3 generators d3.pie. And this can be returned using the following syntax sunburst.pie().

Finally, we can reference the d3-pie documentation page at https://github.com/d3/d3-shape#pie. This page has a pie#sort method to sort the chart. Keep in mind that the a, b attributes here are wrappers of the original data that you provided to d2b. These wrappers contain all sorts of additional properties that can be used, and have a reference to the original arc data through a.data or b.data.

Putting all that together we can configure the sunburst sorting with the following:

chart // get the underlying sunburst generator .sunburst() // get the underlying pie generator .pie() // use the pie#sort method .sort(function (a, b) { // print out the value of a or b if you would like to see the attribute they contain console.log(a) // return the sorting methodology return d3.ascending(a.value, b.value) })

Here is a fiddle working fiddle of this: https://jsfiddle.net/tc94zb5d/16/

Side note: sorry it's taking a while on the other issue you submitted, still trying to find time to debug the issue

Cheers!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/d2bjs/d2b/issues/17#issuecomment-398882547, or mute the threadhttps://github.com/notifications/unsubscribe-auth/Al77aI8jrJwg0BqgzyYgxi41wQLYy_rbks5t-q3PgaJpZM4Uv0_F.

kevinwarne commented 6 years ago

Should work fine with vue. Here is a fiddle for that: https://jsfiddle.net/tc94zb5d/19

In that sort function print out a or b to make sure they have a value attribute to use in the ascending function.

(updated the fiddle version as it wasn't working before)

kevinwarne commented 6 years ago

Oh, in your code you call the ascending function in the sort function. You probably need to use d3.ascending

Dekermanjian commented 6 years ago

Oops! you are right, I am so sorry about that. Thank you for all of your help, I really do appreciate it.

On Jun 20, 2018, at 3:21 PM, Kevin Warne notifications@github.com<mailto:notifications@github.com> wrote:

Oh, in your code you call the ascending function in the sort function. You probably need to use d3.ascending

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/d2bjs/d2b/issues/17#issuecomment-398901224, or mute the threadhttps://github.com/notifications/unsubscribe-auth/Al77aMV0Cw6TuK8S2e8f1T4qd61yq-zNks5t-rzcgaJpZM4Uv0_F.