benkeen / d3pie Goto Github PK
View Code? Open in Web Editor NEWA configurable pie chart lib and generator built on d3.js
License: MIT License
A configurable pie chart lib and generator built on d3.js
License: MIT License
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
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!
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.
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
}
}
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/
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?
Nice-to-haves:
The d3pie.min.js should contain a comment at the top containing the header blurb.
hi
please add a tooltip onmouseover on segments
best regards
Hi Ben,
Currently id/class attributes naming works on a `"p"+(instance number + 1)+"class/id name" rule by d3pie itself.
<svg>
.#instance[data-index].class
or any combinationI was using d3pie and had the requirement to show clickable legends but currently clickable legends are missing.
This is shown on the "Top 15 fears" example on the current site, and occurs whenever there's a single item.
pie.updateProp("data.content", newItems);
+
pie.redraw();
or
pie.updateProp("size.canvasWidth", newWidth); // using redraw();
-------> Uncaught TypeError: Cannot read property 'value' of undefined
The "proof" isn't working right now.
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
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 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.
Weird. This shouldn't happen. Just center a title and go up/down in the font size field. The donut changes size.
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.
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:
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.
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
Small issue.
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
}
]
Bug!
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>
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.
Hey there. How can I change the distance from the center to the inner labels?
In advance thank you very much for your help.
Looks like updateProp doesn't work on iOS devices.
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
Another small issue.
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,
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 ๐
How open sector after load page?
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.
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
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...?
As described.
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"}]
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.
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
It's time!
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:
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!
Click from homepage to generator then back. The nav items disappear.
Chrome.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.