Bubbles Drilldown?

[SeloSlav]

I noticed the one popular use case for D3Plus missing is the bubbles chart. In particular, the one in which you are able to drill down into individual nodes (nested hierarchy). This is my normal D3 implementation for example: http://selotec.io/prototype/react/#/map. Any plan on implementing something like this?

[davelandry]

The page you link to is only showing an underwater-esque background for me...

...but I'm assuming you're talking about a Pack chart? http://d3plus.org/examples/d3plus-hierarchy/pack/

All d3plus visualizations support nested drilldowns by default, here's the syntax: http://jsfiddle.net/ge5cjs6u/

Although now looking at it, there does appear to be a bug with the labels. I've filed that here: http://jsfiddle.net/ge5cjs6u/

[SeloSlav]

I don't think it's a packing chart, though I could be wrong. Here is what my example looks like:

var visualization = d3plus.viz()
 .container("#svgbody1")
 .data(sample_data)
 .type("bubbles")
 .id(["parent", "group", "name"])
 .size("default")
 .tooltip({
    "html": htmlContent,
    "sub": "description",
    "anchor": "middle middle",
    "fullscreen": true
    })
 .ui([
      {
        "method" : "size",
        "type": "drop",
        "value"  : [{"# Coins": "default"}, {"Market Cap": "usd"}, {"Market Volume": "vol"}]
      }
])
 .format({
 "text": function(text, params) {
if (text === "usd") {
 return "Market Cap";
 }
 else if (text === "default") {
 return "# Coins"; 
 } else if (text === "vol") {
 return "Volume"; 
 } {
 return d3plus.string.title(text, params);
 }
},

 "number": function(number, params) {
var formatted = d3plus.number.format(number, params);
if (params.key === "usd") {
 return "$" + formatted + " USD";
 } else if (params.key === "vol") {
 return "$" + formatted + " USD";
 }
 else {
 return formatted;
 }
}
 })
 .draw()

[SeloSlav]

I tried using the Pack component:

Result:

Is there something I am missing in terms of enabling drill-down via click?

Live View: http://seloslav.github.io/Coinmap

[davelandry]

Set .depth(0) to enable the click drilldowns.

[SeloSlav]

For posterity. In the d3plus-react implementation, depth is added as such:

const methods = {
  depth: 0,
  groupBy: ["parent", "group", "name"],
  data: [
    {name: "DASH", group: "Privacy Coins", parent: "Currency", value: 1},
    {name: "BNT", group: "Stable Coins", parent: "Currency", value: 1},
    {name: "SMART", group: "Privacy Coins", parent: "Currency", value: 1},
    {name: "BTC", group: "Cryptocurrencies", parent: "Currency", value: 1},
    {name: "BCH",  group: "Cryptocurrencies", parent: "Currency", value: 1},
    {name: "GNO",  group: "Prediction", parent: "Communities", value: 1},
    {name: "REP",  group: "Prediction", parent: "Communities", value: 1}
  ],
  size: d => d.value
};

class App extends Component {

  render() {
    return (

      <div className="App">

      <Pack config={methods} />
      ...