benkeen / d3pie Goto Github PK

I currently use "label" as the labels.outer.format for my D3PIE charts and "value" as the labels.inner.format.
This works, but would be nice if we could add custom formatting. For instance if my labels.inner.format is a dollar amount maybe I want to display $1,999,999.00 over 1999999. I don't believe this is possible right now without customizing the D3 API directly.

IE Version: 11

• Tooltip doesn't hide properly while moving around mouse pointer
• while moving around mouse pointer, it adds vertical and horizontal scroll bars to the page
  

Click from homepage to generator then back. The nav items disappear.

Chrome.

Can you add an option to start label position form the radial center of the segment?

    "sortOrder": "value-desc",
    "content": [
        {"label":"A","value":12909729       ,"color": "#2383c1"},
        {"label":"A","value":12200000       ,"color": "#64a61f"},
        {"label":"A","value":11650000       ,"color": "#7b6788"},
        {"label":"A","value":1088685        ,"color": "#a05c56"},
        {"label":"A","value":1074000        ,"color": "#961919"},
        {"label":"A","value":850000         ,"color": "#d8d239"},
        {"label":"A","value":808716         ,"color": "#e98125"},
        {"label":"A","value":691000         ,"color": "#d0743c"},
        {"label":"A","value":650000         ,"color": "#635122"},
        {"label":"A","value":603000         ,"color": "#6ada6a"},
        {"label":"A","value":601000         ,"color": "#0b6197"},
        {"label":"A","value":345746         ,"color": "#7c9058"},
        {"label":"A","value":310000         ,"color": "#207f32"},
        {"label":"A","value":305000         ,"color": "#44b9af"},
        {"label":"A","value":300000         ,"color": "#bca349"},
        {"label":"A","value":280000         ,"color": "#e4a14a"},
        {"label":"A","value":275000         ,"color": "#a3acb2"},
        {"label":"A","value":260000         ,"color": "#8cc2e9"},
        {"label":"A","value":220825         ,"color": "#69a5f9"},
        {"label":"A","value":211000         ,"color": "#5a378f"},
        {"label":"A","value":210500         ,"color": "#546e91"},
        {"label":"A","value":200000         ,"color": "#8bde94"},
        {"label":"A","value":3315400        ,"color": "#d2ab58"},
        {"label":"A","value":170000         ,"color": "#d2ab58"},
        {"label":"A","value":150000         ,"color": "#273c71"},
        {"label":"A","value":150000         ,"color": "#98bf6e"},
        {"label":"A","value":150000         ,"color": "#4caa4a"},
        {"label":"A","value":150000         ,"color": "#98aac5"},
        {"label":"A","value":150000         ,"color": "#cc0f0f"},
        {"label":"A","value":141720         ,"color": "#31373b"},
        {"label":"A","value":139000         ,"color": "#006291"},
        {"label":"A","value":136521         ,"color": "#c2643f"},
        {"label":"A","value":135000         ,"color": "#b0a474"},
        {"label":"A","value":130000         ,"color": "#a5a29c"},
        {"label":"A","value":120000         ,"color": "#a9c2bb"},
        {"label":"A","value":106000         ,"color": "#22af8c"},
        {"label":"A","value":100000         ,"color": "#7fcecf"},
        {"label":"A","value":100000         ,"color": "#9779c6"},
        {"label":"A","value":100000         ,"color": "#3d3a87"},
        {"label":"A","value":95000          ,"color": "#b77b1b"},
        {"label":"A","value":85000          ,"color": "#c9c2b6"},
        {"label":"A","value":85000          ,"color": "#7f7dce"},
        {"label":"A","value":80000          ,"color": "#8db27c"},
        {"label":"A","value":80000          ,"color": "#be66a2"}]

Bug!

Hi,

I cannot find d3pie with npm search d3pie.

Is it possible to add d3pie in npm and (if possible) bower registries ?

Thx !

Great job on d3pie : so far the best pie chart i've found around 👍

I'm attempting to modify the data.content, size.pieInnerRadius and size.pieOuterRadius in an already existing d3pie chart using the updateProp function. The initial chart displays as desired; it's a donut looking d3pie chart that displays my first set of data. I have a second set of data that I want to update this chart with; I also want to decrease the size.pieInnerRadius to a value of 1%. The transition from the initial chart to the new one happens in a JavaScript function called donutSegmentClick "shown in screenshot below", triggered from onClickSegment "defined in the d3pie constructor". A screenshot of the code is attached.

All of the properties in the screenshot above update correctly, but the 3 updateProp calls seem to be causing issues. The problem is additional segments in the transitioned-too d3 chart. In the screenshot below, see how there are 3 labels for pie segments but there more segments in the pie:

This following is a screenshot of the data set that was used to create the chart shown directly above:

Hi,

I am trying to create a d3pie chart inside a svg g container. But i get an error as it is outside the html namespace. I think we should allow for svg namespaces too.

hi
please add a tooltip onmouseover on segments
best regards

I was using d3pie and had the requirement to show clickable legends but currently clickable legends are missing.

Example :

One = 264131 = 41.24%
Two = 218812 = 34.16%
Three = 157618 = 24.60%

In getPercentage (pie, index) Function

The Math.floor(x) function returns the largest integer less than or equal to a number "x".
Instead the function should make use of the decimalPlaces value already collected to display the actual percentage.

It's time!

Without hacking the library, debugging callbacks passed in the config can be difficult because the execution of callbacks is wrapped in a try catch statement.

Minimally, errors should be logged to console to allow debugging

Looks like updateProp doesn't work on iOS devices.

pie.updateProp("data.content", newItems);
+
pie.redraw();
or
pie.updateProp("size.canvasWidth", newWidth); // using redraw();
-------> Uncaught TypeError: Cannot read property 'value' of undefined

Hi,

I believe that at the moment it's only possible to load data statically by:
data: {content: [{ label: "label", value: value}]}.

I'd like to see the possibility to load data from JSON objects so that data can be loaded from databases like MySQL or from files stored on a server to allow more dynamic pies. Is there a possibility that you will add such a feature in the near future?

hi I noticed that the tooltips either show up intermittently (at the top left corner instead of near the segment you hover over) or in most cases don't show up at all. This only happens on IE however (IE11). It works fine in FF and Chrome
When I opened up the debug console in IE this exception gets thrown everytime I hover over a pie segment which is probably the issue

Unable to get property 'ownerSVGElement' of undefined or null reference
File: d3.min.js, Line: 1, Column: 5509

I'm using d3 3,5,3 and d3pie 0.1.5
here's the code (Its basically the code from the d3pie generator)

<html>
<head></head>
<body>

<div id="pieChart"></div>

<script src="d3.min.js"></script>
<script src="d3pie.min.js"></script>
<script>
var pie = new d3pie("pieChart", {
    "header": {
        "title": {
            "text": "Programming Languages",
            "fontSize": 24,
            "font": "open sans"
        },
        "subtitle": {
            "text": "Distribution",
            "color": "#999999",
            "fontSize": 12,
            "font": "open sans"
        },
        "titleSubtitlePadding": 10
    },
    "footer": {
        "color": "#999999",
        "fontSize": 10,
        "font": "open sans",
        "location": "bottom-left"
    },
    /*"size": {
        "canvasWidth": auto
    },*/
    "data": {
        "sortOrder": "value-desc",
        "smallSegmentGrouping": {
            "enabled": true
        },
        "content": [
            {
                "label": "JavaScript",
                "value": 264131,
                "color": "#2383c1"
            },
            {
                "label": "Ruby",
                "value": 218812,
                "color": "#64a61f"
            },
            {
                "label": "Java",
                "value": 157618,
                "color": "#7b6788"
            },
            {
                "label": "Python",
                "value": 95002,
                "color": "#961919"
            },
            {
                "label": "C+",
                "value": 78327,
                "color": "#d8d239"
            },
            {
                "label": "C",
                "value": 67706,
                "color": "#e98125"
            },
            {
                "label": "Objective-C",
                "value": 36344,
                "color": "#d0743c"
            },
            {
                "label": "Go",
                "value": 264131,
                "color": "#69a5f9"
            },
            {
                "label": "Groovy",
                "value": 218812,
                "color": "#5a378f"
            }
        ]
    },
    "labels": {
        "inner": {
            "hideWhenLessThanPercentage": 3
        },
        "mainLabel": {
            "fontSize": 11
        },
        "percentage": {
            "color": "#ffffff",
            "decimalPlaces": 0
        },
        "value": {
            "color": "#adadad",
            "fontSize": 11
        },
        "lines": {
            "enabled": true,
            "style": "straight"
        }
    },
    "tooltips": {
        "enabled": true,
        "type": "placeholder",
        "string": "{label}: {value}, {percentage}%",
        "styles": {
            "backgroundColor": "#040404"
        }
    },
    "effects": {
        "pullOutSegmentOnClick": {
            "effect": "back",
            "speed": 400,
            "size": 12
        }
    },
    "misc": {
        "gradient": {
            "enabled": true,
            "percentage": 100
        }
    }
});
</script>

</body>
</html>

More of a support request at the moment but can this library support transitions between data states? For example growing and shrinking the size of the pie based on updated data. From what I understand only redraws are supported at the moment.

As described.

The segment percentages showing on d3pie chart is wrong ,because the sum of percentage is not 100%. The configuration object developed by d3pie generator is given below.
var pie = new d3pie("pieChart", {
"header": {
"title": {
"fontSize": 34,
"font": "courier"
},
"subtitle": {
"color": "#999999",
"fontSize": 10,
"font": "courier"
},
"location": "pie-center",
"titleSubtitlePadding": 10
},
"footer": {
"color": "#999999",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasWidth": 642,
"pieInnerRadius": "52%",
"pieOuterRadius": "70%"
},
"data": {
"sortOrder": "label-desc",
"content": [
{
"label": "green",
"value": 3,
"color": "#2fc339"
},
{
"label": "Donald Rumsfeld",
"value": 4,
"color": "#eb2da5"
},
{
"label": "The Zombie Apocalypse",
"value": 4,
"color": "#cb2121"
},
{
"label": "Planes with/out snakes",
"value": 5,
"color": "#ae83d5"
}
]
},
"labels": {
"outer": {
"format": "label-percentage1",
"pieDistance": 3
},
"mainLabel": {
"fontSize": 11
},
"percentage": {
"color": "#100d0d",
"fontSize": 11,
"decimalPlaces": 0
},
"value": {
"color": "#cc8143",
"fontSize": 11
},
"lines": {
"enabled": true
}
},
"tooltips": {
"enabled": true,
"type": "placeholder",
"string": "{label}: {value}, {percentage}%",
"styles": {
"fadeInSpeed": 121
}
},
"effects": {
"pullOutSegmentOnClick": {
"effect": "linear",
"speed": 400,
"size": 8
}
},
"misc": {
"colors": {
"segmentStroke": "#000000"
}
}
});
The following figure shows the total percentage is 99%

Hi,

Would you mind to consider adding an option to handle a pie segment value threshold which regroup segments under x% into a single one. This segment could have a default label "Others".

Option could be :

{
    threshold : {
        value : 1 // default
        percent : true //default, false means its a numeric value
        label : "Others" //default
    }
}

Hi Ben,

I'm currently writing an angular directive wrapper for d3pie (i will push on git as soon as i have a first working version).
I'd like to watch data to dynamicly update the pie.
In a previous version, I was able to do it but I had to do a destroy/new instead of just change data in options and call redraw.
I just found updateProp function which seemed to do the job but the switch doesnt include the "data" case.

Br

Another small issue.

Hello, first and most importantly, thank you for such an amazing tool its been really useful. Do you have any plans on adding chart responsiveness? Or could you tell me how can I achieve this? The chart right now is based on a fixed size that doesn't rely on the container it is being binded to. Many sites are based on responsive design and a tool like yours could be really useful if it could be responsive. Thank you!

The d3pie.min.js should contain a comment at the top containing the header blurb.

Hey @benkeen
Love the plugin. using it on Beepl :)

Quick question, how can I make pie pieces clickable. So if user clicks on "javascript" instead of it poping out.. it would take me to - say - this link.

Thanks bud!

Drat. When removing the jQuery dependencies from the script, I also removed them from the demos, so they're not working properly, e.g.
http://d3pie.org/website/examples/refresh.html

It would be great to be able to show more than one segment pulled out, to highlight more than one of them - something like (for chart.options.data.content):

[
    {
        "label": "Something we want to highlight",
        "value": 24,
        "pullout": true
    },
    {
        "label": "Something else we want to highlight",
        "value": 37,
        "pullout": true
    }
]

How open sector after load page?

If the title is centered (pie-center), the pie-center offset option under Misc should shift the title as well. Right now it just stays in place.

The outer labels are not drawing properly and tooltip is also not working properly.I am getting this issue when there are two or less data values .Please check the images for reference.

Great work Ben

Hi
If anybody is interested in using the d3library with R a starting point is the new library rd3pie here

Benjamin Keen acknowledged directly in the DESCRIPTION file (as per CRAN norms). Please let me know if OK.

Thanks for this great library!

This is shown on the "Top 15 fears" example on the current site, and occurs whenever there's a single item.

The labels are not drawn when a single data value is supplied. The pie is drawn correctly but there is no indication of what is being drawn.

Could the labels,percentages and values still be rendered?

Small issue.

Remaining TODO

Nice-to-haves:

• add a fade load effect for the whole pie
• clicking labels should also show tooltip/pull out effect
• add a modal "help" icon for a few of the tabs: "events" is totally not clear.

Hello Ben,

I love the library and have been using it for about a week now. I can get all the callbacks to work except the onClickSegment never seems to fire. The others work just fine.

After a bit of digging I discovered that your d3pie.min.js does not fire the onClickSegment and it is in fact different from the full out version of d3pie.

Hi Ben,

Currently id/class attributes naming works on a `"p"+(instance number + 1)+"class/id name" rule by d3pie itself.

1. The instance name should be :
   • put in options. New instance from the same options set, will be named as you do currently
   • used only for the instance #id itself and inject only in <svg>.
2. Remove #id from inner elements, you already handle data-index.
3. In Inner elements, use class for structure description (remove instance concat from the class name). If we want to target an element, for outside js/css needs, we can use ie. #instance[data-index].class or any combination

This is not really an issue, more of a question and I'm too much of a newbie to get past it;

I'm basically trying to find the index-number of the segment clicked to pass it to an if-statement.

Example:

if ( segmentIndexID //THIS IS THE PART I CANT FIGURED OUT// == 7 ) {
$('#7').show();
)

Tried searching through the documentation for doing something like this, but haven't been able to find the solution. If there is a better way of doing this than going through the index, please let me know.

Thanks.
Marius

Created a basic chart here: http://jsfiddle.net/eeiswerth/8urk402y/

See JS console. Seems the is an array index out of bound in the svg transform attribute callback (approx line 1269 in the fiddle. Somehow 'i' is greater than the length of the data content array.

Thanks,
Eric

This would be a nice feature, but I'm not sure how to do it well. Perhaps the best way would be to just detect the "\n" chars...?

I tried your current release of that great d3 pie chart, but I just can't get around overlapping labels which are very close. I wish that each label may appear above any previous if overlapping is detected. Here is an example:
http://jsfiddle.net/KdBx6/1/

This example includes a fix that two or more charts can appear in several divs - see global variables _svg, _options, etc. I used element.id (i.e. _svg[element.id]) to separate global variables.

Hey there. How can I change the distance from the center to the inner labels?
In advance thank you very much for your help.

Weird. This shouldn't happen. Just center a title and go up/down in the font size field. The donut changes size.

This was taken out of scope for 0.1.0, but it would be great to get into the next version. Possible sample code: http://jsfiddle.net/benkeen/XN45U/

labels.percentage.decimalPlaces is not honored. it is always gettig percentages which are rounded to floor value that makes the total of percentages to be less than 100 in some cases

The "proof" isn't working right now.

Hi. Pls Help me.
How can I make here is when you move to a segment?

I need method, pls or help

I have semi-successfully developed a R package to allow R users to use this great piece of work.

The package allows me successfully to create a pie chart, but there are errors in the console and the pie is wrong. I suspect I am not telling d3pie something but I do not know what!

The package is here: https://github.com/smartinsightsfromdata/rd3pie

This is my R code:

library(rd3pie)
a <- data.frame(label = c("JavaScript","Ruby","Java"),
    value = c(264131,218812,157618 ),stringsAsFactors = F)
rd3pie(a)

This is the javascript I use (simplified):

   var pie = new d3pie(el.id, x );
    pie.redraw();

This is how the json appears at the console:

{"data":{"content":[{"label":"JavaScript","value":264131},{"label":"Ruby","value":218812},{"label":"Java","value":157618}]}}

This is the error I get:

Error: undefined is not an object (evaluating 'data[index].value')
    getSegmentAngle (d3pie.js, line 1495)
    (anonymous function) (d3pie.js, line 1311)
    attrFunction (d3.js, line 654)
    (anonymous function) (d3.js, line 939)
    d3_selection_each (d3.js, line 945)
    each (d3.js, line 938)
    attr (d3.js, line 637)
    create (d3pie.js, line 1307)
    (anonymous function) (d3pie.js, line 2074)
    (anonymous function) (d3pie.js, line 296)

And this is how the pie looks like: