Search the Community

Hello, I'm in the data visualization field and I'm trying to see if I can leverage Pixi.js to create various charts that I've typically be created with SVG. Right now, I'm trying to create a bar chart with position and height changes as the data updates. I've been creating one PIXI.Graphics per bar and I'm updating the graphics width, height, and y positions when the data changes. // This runs ones per bar var rect = new PIXI.Graphics(); rect.beginFill(0x4682B4);rect.drawRect(0, y, width, height);doc.addChild(rect); // When updating barsrect.clear();rect.beginFill(0x4682B4);rect.drawRect(0, y, width, height); My questions are:1. If I'm planning to draw hundreds of bars, is Graphics the right object to use?2. Can I use sprites if I'm going to have different fills, width, and heights for each bar? I'm very new to PIXI, so I'm still trying to learn the API and figure what's the right set of objects to use for the job.

Hello there, this will be my first post and I want to excuse all of my beginners questions. I will work on it. At the moment I want to create a real-time chart and there a several questions about a good “way” to realize that. 1) My first try is really simple: Draw a line between the Points with the “graphics.lineTo” function. Then shift the graphics object position to the left. The Problem is, that the graphicsData will grow until there is no shift of the array of the data. If I use a CanvasRenderer I can shift the graphicsData but it do not work in the WebGlRenderer. Are there any method to shift the Data? http://jsfiddle.net/Tenobaal/7m6u9q2n/ 2) The second try is to redraw the lines. So I put everything in an array and draw the lines in a for-loop after I clear() the graphics object. But this method is really bad for the performance. http://jsfiddle.net/Tenobaal/wvtmg3ze/ 3) The third try is to use the polygon object. But later I want to use the bezier-function, so the polygon object might be not the best option. There is another problem with the triangulate of the lines if you have a fast switching graph. So not really a good choice at the moment. I will post later Version in jsfiddle. 4) The last try is to generate a texture from the graphics object and paste it in as sprite. So I clear the graphics object and begin to draw at the origin. The sprite will shift to the left, too. The texture looks different because of the anti-aliasing? Another problem is, that I need two graphics objects, because if I shift the position of graphics object the generate Texture will lose the data of the "shift". So the performance is not so good because of the two objects and the view is not the best. I will post later Version in jsfiddle, too. Maybe you can help me out with an idea, how I can realize a good looking and nice performing real-time chart. I would be happy to learn. Sorry for my english, it is not my first language. Many thanks tenobaal

I'm currently trying to visualize large number of data points (around ~100k) using d3.js and SVG. An example of what I am currently using is - http://bl.ocks.org/mbostock/3680957 The problem with SVG is that the performance becomes really sluggish when trying to visualize large number of points. That is why I was wondering, if I can utilize the power of WebGL using Pixi.js to implement the same requirements. Any tips on how to go about in this direction would be helpful.

Hello I want to draw a pie chart and animate it according to current value. My target is like this: http://codepen.io/jtarr/pen/upFGC It is relative easy to implement the animation using CSS or canvas graphics with 60fps. How can I create those effect with pixijs in WebGL context? I thought using canvas is a hurdle for 60fps in mobile device? Please let me know any tips or directions. Thanks.

What I aim to do with this blog post is set people on the right path from the get go with how image size in RAM works. I also want to provide others with the system I used to audit my image RAM and process I used to cut out inefficiencies. This should help you to get a good visual overview of which of your images are wasting the most RAM and where you can cut the fat. You can plug in the image asset list from your exported project and the sheet will give you some nice color coded information that isn't too hard on the eyes. Just click the banner above or, you can click this link too: http://pangolingames.com/how-to-audit-image-ram/ There is a RAM vs Storage overview before it gets to the utility itself, that should hopefully help explain how image download size and image size in RAM are not the same thing. In any case, I hope you find it an enjoyable and enlightening read! If you find anything that's incorrect, let me know!