Comments (17)
+:100: for modularization/plugins (e.g. a download page that lets you pick and choose), we are considering using plot.ly and the biggest blocker is the size of the minified version.
As the first step maybe just do a split of web.gl from the "stuff" that don't require it (haven't looked at the code to see whether that's easily achievable).
Regardless of all that, great library and stunning examples.
from plotly.js.
It would be very nice to have d3 and the webgl stuff separate and optional. Having webgl stuff optional could help #22 .
BTW, here is a map of the entire plotly.js dist file: http://bl.ocks.org/Hypercubed/e13c3ba8eb86ce0fc3ae
from plotly.js.
Hi all,
PR #202 will bring modularity to plotly.js version 1.5.0. Feel free to comment on the PR.
Note that d3
will still be part of the core bundle following #202. We haven't quite settled on the best way to remove it from the plotly.js core. Please see https://gist.github.com/etpinard/4e72f1a430ba01f9cbd7 for an overview.
from plotly.js.
+1.
1MB is too big for mobile app, I think we should have a basic version contains scatter, bar, pie and have rest feature in advanced version, or something like plugin.
from plotly.js.
@eoinmurray thanks for writing in.
We hope to achieve some sort of modularizibilty in the near future.
I would be pretty easy to add a plotly-basic.js
bundle to the dist folder. For example, making a scatter-only bundle sums up to applying this patch and running npm run build
.
The main requirement for adding plotly-basic.js
would be to solidify+generalize our image test framework so that multiple bundle types could be tested in the same run.
Down the road, I'm thinking (cc @alexcjohnson) of allowing users to make their own bundles using some sort of plugin signature e.g:
var Plotly = require('plotly.js/lib/base');
require('plotly.js/lib/cartesian')(Plotly);
require('plotly.js/lib/scatter')(Plotly);
// and then maybe also modularizing non-trace components:
require('plotly.js/lib/errorbars')(Plotly);
require('plotly.js/lib/colorbar')(Plotly);
require('plotly.js/lib/legend')(Plotly)
// ...
and a browserify step. That way users could include only the components and traces types they need.
Achieving this would take some work cleaning up circular dependencies inside the src tree, but is definitively doable. Most things in the plotly.js src are already modules of their own. We just need to make a little more orthogonal to one another.
from plotly.js.
+1 for modularization so the large download can be avoided. @etpinard & @alexcjohnson - do you have a rough idea when you will be able to tackle this? Are you thinking days, weeks, or months? TIA
from plotly.js.
apart from size issue there is and issue when you already have d3 loaded on page with some plugins. Loading plotly will rewrite d3 with plugins =(
any big single-page app will face this issue while trying to use plotly
from plotly.js.
You could use browserify's exclude option to remove d3
from the plotly.js bundle:
browserify -x d3 src/index.js > plotly-without-d3.js
from plotly.js.
@etpinard thx.. I'll consider switching to browserify =)
from plotly.js.
For the first iteration:
1) Split library into a core lib module and trace-type lib modules
Each trace module would register the appropriate plot-type module (e.g. the scatter3d
module will register the gl3d
plot type).
The core module would include all the cartesian plot code, all the components and the polar code for now. As it stands right now, the core module would be ~275 kb minified excluding d3.
TODO:
- Move all the composed trace modules into modules of their own so that trace types and trace modules match 1-to-1 (e.g. split Histogram into Histogram2d and Histogram2dContour) [done in #124]
- Combine
Plotly.Scene
,Plotly.Gl3dLayout
andplotGl3D
into a plot-type module. I'd call itgl3d
and put insrc/plots/gl3d/index.js
. [done in #160] - Similarly, combine
Plotly.Geo
,Plotly.GeoLayout
andplotGeo
[done in #160] , as well as -
Plotly.Scene2d
andplotGl2d
, so thatplot_api.js
won't have to require all the plot type module. [done in #160] - Expose a plot-type register method in
lib/core.js
, e.g. :
var Plotly = require('plotly.js/lib/core');
var PlotlyScatter3D = require('plotly.js/lib/scatter3d'); // i.e. lib / <trace type>
Plotly.register(PlotlyGl3d); // or a better api?
Plotly.plot('graph', [ { type: 'scatter3d', x: [], y: [], z: [] } ]);
- Use plot-type registry in
Plotly.plot
to call corresponding plot-type plot functions. [done in #160] - Use plot-type registry in the
Plots.supplyLayoutModuleDefaults
step. [done in #160] - Make
Scene
,Scene2d
andGeo
agnostic to the graph's trace modules (i.e. replace the create?? switchboards which with_module.plot
calls) [done #180]
2) Register d3
instead of requiring it into the plotly source files
So that the users that already have d3
in their scopes could:
var Plotly = require('plotly.js/lib/core');
Plotly.d3 = window.d3
// or something more sugary e.g.
Plotly.register({d3: window.d3})
TODO:
- we would need to replace all
var d3 = require('d3')
from the src files forvar d3 = Plotly.d3
.
N.B. The dist bundles would still include d3
and we should warn users that use a different version of d3
than the one that ships with the plotly.js dist bundles.
@alexcjohnson @mdtusz @bpostlethwaite
from plotly.js.
re: (1), library modules
Thinking about this from a user's perspective, people will know what kind of traces they want to draw, and what kind of components (shapes, annotations, colorbars, legends...) they want to add. Just based on that, we can determine what plot types (gl3d, gl2d, geo) the bundle needs to include. We should make the source follow that logic as well. That means that:
- we group the resources needed for each plot type into an easily
require
able module, as @etpinard describes. - each trace module
require
s the plot type it, er, requires. - components get registered too (in a separate registry from traces, we wouldn't want to try and draw a 'shapes' trace!) and when a plot or a trace on a plot wants to use a component, it has to look up the component in the registry, and only continue if it finds said component.
- then the bundle index wouldn't directly include anything in the plots section (except the first file - that's where this register stuff is! that still needs a bit of refactoring I suppose...), and the process of making a custom build would be just to omit whichever traces and components you don't want.
- That said, most of the size optimization is accomplished by filtering out any plot types you don't need - at a first cut we can make this easier by grouping traces and components by plot type within the bundle index, then down the line we could have a script to automatically prepare filtered index files.
re: (2), d3
👍
from plotly.js.
each trace module requires the plot type it, er, requires.
I'd prefer exposing the explicit:
var Plotly = require('plotly.js/lib/core');
var PlotlyScatter3D = require('plotly.js/lib/scatter3d');
Plotly.register({traces: [PlotlyScatter3D]});
over the implicit:
var Plotly = require('plotly.js/lib/core');
require('plotly.js/lib/scatter3d'); // where Plotly.Plots.register('scatter3d') would get called
from plotly.js.
I'd prefer exposing the explicit over the implicit
Ah I see, so the other args to the existing Plotly.Plots.register
get exported as module attributes and picked up by the new Plotly.register
- sounds great. This requires a 1:1 correspondence between trace modules and trace types, but that has a whole bunch of benefits of its own 🌟
The call could even be Plotly.register(require('plotly.js/traces/scatter3d'));
etc. for each trace type... but I don't feel strongly about that. Though, one possible benefit of that would be to allow including modules post-build... so the build includes some modules, but then in your app after loading plotly.js you can bring in another module as a separate js file and register it.
from plotly.js.
@etpinard Just want to say I think this is a great plan.
from plotly.js.
This issue is now part of https://github.com/plotly/plotly.js/milestones/Modular%20plotly.js .
from plotly.js.
👏
from plotly.js.
🎉
from plotly.js.
Related Issues (20)
- Mismatch between legend and line colors when using uppercase css colors HOT 1
- Item toggle behavior when using multiple legends HOT 8
- insiderange on multiple overlaid axes edge case
- [Feature Request] Adding a Button to Copy Image to Clipboard HOT 1
- BUG: standoff causes axis title position to break if no tick labels
- Shapes - fill to infinity/-infinity
- Adding a dendrogram to heatmaps
- Smith Chart (scattersmith) pan & zoom functionality HOT 2
- axes range not working. Range is +-1, data is 0->1.6e10 HOT 3
- ScatterGL throws ` TypeError: r[v] is undefined` when using frames HOT 1
- Clicks are sometimes missed with clickmode layout key HOT 4
- Tooltip pointer (triangle) not correctly positioned with hovermode 'x'
- Plotly chart conflict with touchstart / touchmove event to scroll smartphone screen HOT 1
- [BUG] Rangeslider won't reset after zooming out HOT 1
- Inconsistent behavior when providing an array of marker sizes in "markers" mode on scatter3D
- hoverdistance broken in 3D scatter plots; hover radius vs click radius?
- `scattergl` line plots no longer working after upgrading to 2.29.1 HOT 3
- Combining rangemode tozero and tickformat set to "," produces unexpected results
- REOPENING BUG - pie chart hover label hidden
- Hoverlabel overlaps each other
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plotly.js.