Not sure if it exists yet in 2.0, but could be nice to have the ability to set a share threshold, like 0.5%, below which any boxes less than the threshold would automatically get grouped into an another box (perhaps that could could default to being called "Other" but would also be nice if user could set the name of the new group too)

Expected Behaviour:

• Treemap combines id's into it's parents. Each parent is separate from one another.
• Hex color assignment are easily applied as per tutorials.

Current Map

• Executing treemap results in combining of several parents
• Hex color's are not assigned

Steps to Reproduce (for bugs)

Example Data

var data = [
        { parent: "Animal Products",
            id: "Horses",
            value: 27237745.0,
            color: "#F2AA86",
            image: "/images/icons/hs/hs_1.svg",
        },
        { parent: "Animal Products",
            id: "Horses",
            value: 27237745.0,
            color: "#F2AA86",
            image: "/images/icons/hs/hs_1.svg",
        },
.....]

Code as it exists:

function currency(x){
        if (x >= 1e9){
          return "$" + (x/1e9).toFixed(2).toString() + " Billion (USD)";
        } else if ( x < 1e9 && x >= 1e6 ){
          return "$" + (x/1e6).toFixed(2).toString() + " Million USD";
        } else {
          return "$" + (x).toFixed(2).toString() + " (USD)";
        }
      }
      new d3plus.Treemap()
        .data(data)
        .config({
          threshold: 0.0,
        })
        .tooltipConfig({
          body: function(d){
            var table = "<table class='tooltip-table'>";
            table+="<tr><td class='title'>Section:</td><td class='data'>" + d.parent + "</td></tr>";
            table+="<tr><td class='title'>HS4:</td><td class='data'>" + d.id + "</td></tr>";
            table+="<tr><td class='title'>AB Exports:</td><td class='data'>" + currency(d.value) + "</td></tr>";
            table+="</table>";
            return table;
          }
        })
        .groupBy(["parent","id"])
        .legend(true)
        .legendConfig({
          shapeConfig: {
            opacity: 0,
            fill: function(d) { console.log(d.color); return d.color; },
            width: 30,
            height: 30,
            backgroundImage: function(d) {
              if (d.image.length == 2) {
                return d.image.slice(-1)[0]
              } else {
                return d.image;
              }
            },
          },
          label: false
        })
        .sum("value")
        .select("#treemap")
        .render();

Your Environment

• Browser Name: Chrome
• Operating System and Version: Win 10

This will be a recreation of the d3plus 1.0 bubbles visualization, renaming to "Pack" to be more inline with the d3 algorithm: https://github.com/d3/d3-hierarchy#pack

When there are multiple parent groups, as in that old example, each parent group should be placed in the optimal number of rows and columns (with the pack algorithm running for the circles inside each group separately). This will allow large numbers of parent groups to be displayed as a grid, as used in DataViva. Here is the old logic (sorry for the coffeescript 😬): https://github.com/alexandersimoes/d3plus/blob/master/src/viz/types/bubbles.coffee#L13-L23

Version 0.6.15 of d3plus-common just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As d3plus-common is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 1.0.3 of d3-array just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As d3-array is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Expected Behavior

Show pie chart labels by default

Current Behavior

It doesn't show label by default and it changes legend labels when label is set to a value.

Steps to Reproduce (for bugs)

http://jsfiddle.net/xbneck43

Your Environment

• Browser Name: Chrome
• Operating System and Version: macOS High Sierra

If the user uses l as a key in their data objects, d3plus will collide with this variable and use it to determine the offset height of a text box in a tree map.

before (with l variable collision):

after (removing l variable from user supplied data):

Hello,
I used d3plus v1 to create a treeMap where I can change the depth dynamically through a drop down list below the treemap (.ui) like the following example:

var visualization = d3plus.viz()
.container("#viz")
.data(sample_data)
.type("tree_map")
.id(["category","name"])
.color("category")
.size("value")
.ui([
{
"method" : "depth",
"type": "drop",
"value":[{"category":0},{"name":1}]
}
])
.draw();

https://jsfiddle.net/f670s3co/

I even use the same logic to change dynamically the color, size and even type (treemap, pie bubble)
I'm passing now to d3plus v2 but I can't reproduce the same behaviour , Can we do the same in version 2? what is equivalant to ".ui" and how do we use it?
Thank you

For the Treemap and Pie classes should have a default legendSort defined in their constructors that sorts the legend by the size of the share inside of the visualization.

• timeFilter d3plus/d3plus#696
• click events d3plus/d3plus#697

• pie-chart-multigrouping
• pie-chart
• treemap-as-single-stacked-bar-chart

dependent on this issue: d3plus/d3plus-shape#78

ariaLabel should be based on the following formula: ${rank}. ${drawLabel}, ${size value}.

Version 1.0.5 of d3-scale just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As d3-scale is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi, I was working with total in d3plus, and when I tried to use in Donut/Pie charts I found a weird behaviour, because total title was positioned behind chart's svg.

https://jsfiddle.net/gwcxts4n/

What happens:

In the latest version it seems like when you hover over a rectangle in a treemap, the label disappears

Expected: The label to remain

https://jsfiddle.net/f6jfLvgt/ try hovering the mouse over male or female

Take this config as an example:

const url = "https://api.oec.world/tesseract/data.jsonrecords?Inventor+Country=nausa&Year=2019&cube=patents_i_uspto_w_cpc&drilldowns=Organization&measures=Patent+Share&parents=false&sparse=false";

new d3plus.Treemap()
  .data(url, resp => resp.data)
  .config({
    "type": "Treemap",
    "groupBy": "Organization ID",
    "shapeConfig": {fill: "#3D8E9C"},
    "sum": "Patent Share",
    "thresholdKey": "Patent Share"
  })
  .render();

But if I add an artificial parent level, it groups the rectangles correctly:

"groupBy": [() => "Parent", "Organization ID"],

@frabarz the new thresholdByDepth function has multiple linting errors, one of them having to do with moving the function to root. This will need a little but of refactoring, which I'd rather have you do (rather than me).

Dependent on d3plus/d3plus-common#86

And then passed into formatAbbreviate here: https://github.com/d3plus/d3plus-hierarchy/blob/master/src/Treemap.js#L112

@davelandry

as in d3plus 2.0.0 alpha 17, the highlight is much more aggressive with respect to d3plus 1.9.8

for example: https://bl.ocks.org/pachamaltese/c140bebe38e580478a2c0c52b47ee40f

doesn't look like in the previous version

see for example this: https://bl.ocks.org/pachamaltese/d1014dfc199532284cbb4d75460101be

how can I make the highlighting darker?

…just like the good ol' d3plus v1

Requested by @ranucame here

The devDependency d3plus-dev was updated from 0.6.8 to 0.6.9.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

d3plus-dev is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Version 0.6.3 of d3plus-viz just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As d3plus-viz is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Expected Behavior

All visualizations should support click-through nesting.

Current Behavior

It looks as though the labels for all depths are being displayed on top of eachother.

Steps to Reproduce (for bugs)

http://jsfiddle.net/ge5cjs6u/

Your Environment

• Browser Name: Chrome
• Operating System and Version: macOS Mojave

Create an live example on d3plus.org with click event config.

.shapeConfig({on: {click: () => {}}})

@cnavarreteliz

Create a treemap with this dummy data:

parent,id,value,icon,color
Group 1,alpha,29,https://datausa.io/static/images/attrs/thing_apple.png,cornflowerblue
Group 1,beta,10,https://datausa.io/static/images/attrs/thing_apple.png,cornflowerblue
Group 1,gamma,2,https://datausa.io/static/images/attrs/thing_apple.png,cornflowerblue
Group 2,delta,29,https://datausa.io/static/images/attrs/thing_fish.png,firebrick
Group 2,eta,25,https://datausa.io/static/images/attrs/thing_fish.png,firebrick

then the share will be ok except for the legend that shows NA: