jakezatecky / d3-funnel Goto Github PK
View Code? Open in Web Editor NEWA JavaScript library for rendering funnel charts using the D3.js framework.
Home Page: http://jakezatecky.github.io/d3-funnel/
License: MIT License
A JavaScript library for rendering funnel charts using the D3.js framework.
Home Page: http://jakezatecky.github.io/d3-funnel/
License: MIT License
When using short hex colors such as #fff
, Utils.shadeColor
fails scale the color proportionally and forces the left three characters to be 0
.
The linearGradient
definition used for gradient definitions always produces definitions with ID's of gradient-{index}
. If more than one funnel chart is in use, then there will be duplicate ID definitions and the first definition will be used. If the colors between two funnel charts differ, then this leads to the colors of the first chart affecting any other chart.
Since ID's must be used for linearGradient
definitions, the following tasks should be achieved:
d3-funnel
ID prefix to avoid global namespace conflictThe source file is in need of a major overhaul. Its design makes several of the methods very long, hard to follow, and hard to add in new components. Need to modularize where we can, slim down methods, and make the order much easier to follow.
Currently I have to redraw the funnel chart when window resize event fired, but this is not ideal because I only want to redraw the chart after container size is changed.
It would be great if the funnel chart can redraw itself after the the container size is changed.
Large dependencies like d3.js are often loaded from CDN, and shimmed using browserify-shim.
d3-funnel sets d3 as a required dependency, which forces including d3 into the bundle.
Is there any way to change the funnel from a vertical view to a horizontal view?
I haven't look into the code to check how that can be done but wanted to check first to see if there is any possibility to do this.
The lack of export makes it difficult to test classes and makes the code less pure. This will involve some backwards-incompatible installation, but is preferable to maintaining the current model.
Hi,
I'm trying to implement your d3-funnel library, but I'm getting "Unexpected token =>" message from the browser for line 1 of the d3-funnel.js file.
I've tried several things already:
Any ideas what I'm doing wrong?
Wouter
Although package.json
lists d3
as a requirement, it is not bundled when using Webpack.
Allow custom colors to be assigned along with the data values. Handle both hex and RGB values. Potentially also allow for gradient strength to be set.
I am suggesting adding an option to specify the width and height as percentage (e.g. 50%) which would be good for responsive design. This could be achieved either via new options or using the current width
and height
by providing strings such as "50%"
.
A good feature to go with it is the ability to align the chart horizontally and vertically for both pixel and percentage-based dimension such as:
Happened for me in both min and regular js version. In d3-funnel.js
it's on line #170.
console.log(":(");
'block' set 'null' will make an error when click.
events:{
click:{
block: null
}
}
After Utils.extend(settings) , click.block will be an empty object.
Currently, background and label foreground colors are specified through additional array members in the data array. This makes it to where a background color must be specified for a label color to be specified, but also potentially pollutes the data array in case if the caller wishes to use add any other data.
Although it's possible to allow null
for any sections that we want the colors to default to, it's probably best just to have this specified through the options.
Babel 6 is out. Configuration needs to be modified and need to upgrade gulp-babel
.
D3 4.x is out, but includes a variety of backwards-incompatible changes. Will still need to support 3.x for a while.
Often, it would be useful to directly access the node associated with an event. We should pass the node in the data object.
I am thinking of adding a pull-request to allow formatted values to be displayed. So in my solution you can do either
var data = [
["Teal", 12000, "#008080"],
["Byzantium", 4000, "#702963"],
["Persimmon", 2500, "#ff634d"],
["Azure", 1500, "#007fff"]
];
or
var data = [
["Teal", [12000, 'EUR 12,000'], "#008080"],
["Byzantium", [4000, 'EUR 4,000'], "#702963"],
["Persimmon", [2500, 'EUR 2,500'], "#ff634d"],
["Azure", [1500, 'EUR 1,500'], "#007fff"]
];
Does this sound good for you?
Regards
Stefan
Hi! Today i seen next bug.
When i call draw function in next code:
var data = [
["Plants", 5000],
["Flowers", 2500],
["Perennials", 200],
["Roses", 50]
];
var chart = new D3Funnel("#funnel");
chart.draw(data);
I have next js error:
Uncaught TypeError: undefined is not a function d3-funnel.js?body=1:308
D3Funnel._makePaths d3-funnel.js?body=1:308
D3Funnel.draw d3-funnel.js?body=1:95
Error occurs in this line:
count = this.data[i][1].replace(/\,/g, "")
Then i use string instead int type it works.
i.e.
var data = [
["Plants", "5000"],
["Flowers", "2500"],
["Perennials", "200"],
["Roses", "50"]
];
Versions:
jquery - 1.11.1
d3 - 3.5.2
Add option to animate the chart when it is drawn on the screen
Currently, the minimum height calculation allocates the minimum height for each section, then the remaining pool is available based on the ratio of the section. This makes small sections greedy, where they allocate even more height despite getting the minimum.
A less greedy solution is the following:
Also, we can run out of room from all these small fries taking space. Need to precalculate beforehand to see if we will have a problem, and, if so, throw an exception.
Release 4.0 is eventually coming and will support arrow functions a bit more sanely.
May also provide weak HTML support. Possibly use d3-tip.
How do I implement the alerts boxes like you have on the example site.
http://jakezatecky.github.io/d3-funnel/
The drop down is fine but I am looking to utilize the alert boxes to provide the users with additional information per funnel segment..
This is what I posted on Stackoverflow
http://stackoverflow.com/questions/32010822/javascript-alert-box-using-d3-charting/
Thanks..
Add default handlers for mouseIn, mouseOut, and possibly click.
Jake, thank you for a great library. I extended it slightly to show a funnel where each block looks like a bar chart. Would you be interested in merging adding this feature to d3-funnel
? If so, I could tidy up the source code, add a few tests and submit a pull-request.
When bottomPinch
is non-trivial, the pinched blocks have a larger width than that specified in bottomWidth
. This is because the initial slope calculation assumes we are using the entire funnel height, when we should subtract the height of those pinched blocks to sharpen the slope.
Is it possible to configure the chart such that the width of a block if a function of the value for that block, such that the following would give an hour glass appearance:
var data = [ ['Plants', 5000], ['Flowers', 200], ['Perennials', 200], ['Roses', 5000] ];
When block.fill.type
and block.highlight
are set to 'gradient'
and true
respectively, any block that is highlighted on hover reverts back to a singular shade of color, rather than the gradient.
Would be good to add an option to calculate the height for each section based on dynamic data rather than equal, static heights.
I'm currently using this setup to make the chart responsive onload:
var data = [
[ "Clicked", "5,000" ],
[ "Joined", "2,500" ],
[ "Took Action", "200" ],
[ "Shared", "50" ]
];
width = $('#funnelPanel').width();
var options = {
width : width - 30,
height : 400,
bottomWidth : 1/3,
bottomPinch : 0, // How many sections to pinch
isCurved : false, // Whether the funnel is curved
curveHeight : 20, // The curvature amount
fillType : "solid", // Either "solid" or "gradient"
isInverted : true, // Whether the funnel is inverted
hoverEffects : true // Whether the funnel has effects on hover
};
$( "#funnelContainer" ).css( "width", width);
var funnel = new D3Funnel ( data, options );
funnel.draw ( "#funnelContainer" );
I would love to, however, be able to do something like:
var options = {
width : "100%",
height : "100%"
};
and have the chart responsive as I change the width.
How do I do this?
It would probably be useful to display a color-coded legend somewhere. Need to have the ability to specify the location.
I noticed that height proportions are wrong when using dynamic Height with data with multiple same values. I assume it is because block height is calculated using block area. I think it is wrong. For example. Top 2 block values are 20 or whatever. Despite the same values, area will differ because bottom block is wider and it leads to bigger area and different height.
Wouldn't it be better if block height would be calculated based on block value and overall chart height? I modified the plugin and it seems to calculate height of the block better. There are few problems when value is 0 or calculated height is below minHeight but that can be fixed.
This library is powered by d3js but jquery is used in examples while d3js can be used instead of d3js in most situations specially examples of this library. Using a lot of different libraries in projects would slow down the clients and even local servers.
Please explain why do you use jquery?
This excellent d3 addon seems perfect for a need I have to do a simple pyramid. However, I need the biggest at bottom and going up in decreasing order with dynamic area such that the top is a triangle.
When I do that it seems to miscalculate areas and ends up with NaN in the path (from the calculation of bottomBase for last (now highest) data point.
I tried to understand why but could.
This is the options and the sort I add to the basic example on usage page:
var options = { bottomWidth: 0, isInverted:true, dynamicArea:true };
data.sort(function (a, b) { return a[1] - b[1]; });
Sometimes it may be desired that labels are positioned outside of the trapezoids, especially if the text will overflow. We should have an option to allow the labels be placed within the funnel or outside of the funnel (say, to the right). This would ultimately leave less real estate for the actual funnel itself and would require calculations on the text width.
When dynamicArea
is set to true
, some levels can be so small that the labels overflow above them. I am going to look at setting a minimum height, have you looked into this before or do you want to wait for a pull request?
It's pretty annoying to have both examples in the repo and examples in the GH Pages.
I had download the zip package, but is not work in local. I can not view the funnel and any other.
The current package.json
points main
to ./src/d3-funnel/d3-funnel.js
, when it should point to the UMD-exported ./dist/d3-funnel.js
.
Currently, the chart only produces meaningful results if bottomWidth
is part of the open interval (0, 1)
. It definitely makes sense to be at least right closed (0, 1]
, given that this will just produce a bunch of rectangles. It probably also makes sense to be left closed [0, 1)
such that we have a triangle produced.
The blocks passed to the D3 events are not documented yet, but need to be.
Currently, the defaults options are attached to the prototype. While this can be edited after the fact, it's probably a better idea to make the default options static and document the process of overriding the defaults.
The internal API has grown over time and many methods are far too long. Key tasks:
D3Funnel.makePaths
Hi,
it would be nice if you added an .editorconfig to the project, otherwise it's hard not to overwrite the settings you prefer.
Regards
Stefan
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.