I am using d3 to make some graphs but the constraint is the number of data. To be more specific, I have an average number of points of 500,000 on a graph.
It could go from 100,000 to 1,000,000 points on the graph.
Whenever there are 'zoom' possibilities or some other trick (that I would be pleased if someone would explain to me), I wonder if d3 (or any other lib) will really handle a 500,000 points graph.
Morever, I suppose it will depend on the client's computer, which mean they could have the latest i7 proc or a old intel pentium. For this last case, how would the browser react? I suppose it's going so slow that it will just crash?
Well, if people can give some feedback/advice please?
(Currently trying to display the data differently but my brain just imploded.)
I do not have numbers or trials but I can say that I have seen d3 go slow after certain data sizes especially for certain types of graphs. 500.000 seems to be quite huge in terms of data points so if you have no way to reduce that number by aggregation (such as representing 10 day data as 1 day) you might be right about worrying.
As in all performance related questions, the best way to know is to test it, so I can advice you to test it and see if it fits your requirements. If it does not you might want to try some of the non-free libraries such as HighCharts. Another free library which satisfies me with its performance is Chart.js (although it only has 6 charts supported).
I don't think that using d3 for representing a massive amounts of data is the right choice due to performance:
Vector graphics javascript library like d3 are quite heavy(for the
client) to run.
Complex visualization logic can easily hang the browser for multiple
seconds.
Large data manipulation using DOM could be slow.
Try something like Graphviz or Gephi that maybe could be more suitable for your requests.
Related
I have a list of values over time (basically a list of integers).
Currently the NPM website is down so I can't really search for API's properly, therefore I am asking if any of you know an API for Javascript Node which takes an input of a list of integers (representing y coordinates on a graph) and can then make a prediction of how the graph will continue to flow.
Thank you very much for any responses!
It depends on how you want to make a prediction. You can calculate a linear regression, fit a time series model, train a neural network, etc.
The easiest is a linear regression model. It won't be very accurate; just give you a sense of direction as to where the data is going at the current time.
Time series modelling (autoregression) is probably what you are looking for. This usually involves using historical data to fit a model that can be used to predict (referred to as forecast) future values. This involves some fairly heavy lifting with statistics, but JavaScript libraries do exist, like timeseries-analysis.
If you want to create a fully-blown neural network, tensorflow is being developed for JavaScript, but I wouldn't recommend this approach unless you have a fairly good understanding of machine learning. In order to make an effective forecaster with a neural network, you need to be able to properly normalize data and write a recurrent network; not a basic topic by any stretch of the imagination.
For my application, I am making a get request of thousands of data points.
When I use charts js to display the data, it takes a long time to render, and I experience lag. I also noticed that the x-axis labels for each data point don't appear properly, so they had to be omitted
I like the sleek design and ui of the graphs, but cannot get it to work well for my use case. Is charts js not meant to be used with large data sets? Is there another library like charts js that can handle large data sets? While also being free?
if you want to handle big data you should use Highcharts
it easy can handle some million data without a big delay
Another option to consider is ZingChart. It is free as a branded version, but renders large amounts of data quickly while still maintaining flexibility in customization. If you are looking for a sleek design and UI, ZingChart allows the user to change just about every size, shape, and color to match your taste.
Full disclosure, I am on the ZingChart team. However, we developed a speed test tool that I think you will find helpful in testing your number of data points, regardless of which library you end up selecting. Note that some of these libraries will use up all your browser memory, so proceed with caution in some cases.
I had the same problem, Charts js seems to be unable to handle large data sets. The best alternative I've found is https://github.com/danvk/dygraphs . Also you could try http://canvasjs.com/ although it is comercial.
Have a look at LightningChart JS... It is made with WebGL. It can render
1 million data points in ~80 ms in line chart
10 million data points in ~800 ms
that is for static data. Those I got from my PC (AMD Ryzen, NVidia GTX1060)
But for scrolling streaming data, the performance is yet more impressive. Dozens of millions of points, with some configurations with Firefox browser, over 100 million points.
There is a chart performance tester application
I work with the team making this chart...
I have to write an application in javascript using the d3 graphics library to display SysML diagrams. I feel like most of this project is within my grasp but I have no idea how to approach one aspect of it.
Since the application will assume nothing about the complexity, size, or nesting of the diagram, hard-coding rules for how to arrange the blocks would be futile. I imagine significant study has gone into this kind of thing before but I am unaware of what it would fall under or where to look.
Also, does anyone know where to find examples of SysML diagrams in XML format? Any help is appreciated!
Since SysML is a UML2 profile, you might find jsUML2 a useful starting point for your attempts. Basically you could use the jsUML2 to draw the SysML diagram and then use the export function to produce the XML. NB: XMI is the standard for interchange between different tools.
I have a very large data set that I'd like to craft into a scaling, zoomable, panning graph that goes back over the course of a decade of data. It appears that the best solution for the job is dygraphs vs other options.
I'm not opposed to other options if any meet the requirements of very high interactivity, so if'n you got someth'n else, please share...
Notwithstanding, I have not found a solid example of using dygraphs with Rails 3 and would really appreciate seeing an example of how to tie this into a dataset very quickly or a link to an example.
Initially I just need to throw all of the content out into the graph to see how it works out and for some analysis, so nothing super fancy's needed.
**EDIT: Just found Highstock. Seems to be a perfect match. In that light I'd like to modify my request to perhaps some examples of utilizing Highstock in this context.
I can't point to any tutorials or lessons. I actually had this exact same problem a while ago, trying to do the exact same thing. My answer is that you just have to generate the HTML/dygraphs functions to plot your data.
In case you are still trying to figure this out, I have created rails app that will interactively let the user choose and plot data from any basic database schema, any database. I'm a total RoR noob, but it works pretty well and is made to be generic and dynamic, as well as add checkboxes and linear regressions to each plot. Its not finished, or fully documented yet but you may find it helpful.
I think you can access it this way:
git clone https://bitbucket.org/zachd1_618/rails-stocks.git
or just get in contact with me if you are for some reason really interested.
I've tested it on multiple databases and different schemas, and it easily handles 50k+ points across multiple graphs.
I see that Highstock is nice too, but you shouldn't have any problems in adapting Dygraphs to what you describe. I have not used it with Rails, but have good experiences with it on Django. The approach would be quite similar: Either you serve the dataset in a separate request, or you generate the dataset within the template layer. The latter is probably the slowest.
Could you please recommend an interactive charting library that would have ajax scroll/zoom possibility (or at least events tied to x-axis scale) and, optionally, financial analysis features, like SMA/EMA trends or polynomial approximation (since performing these tasks on server-side is nothing but a waste of resources).
I have to display a large set of data (statistical info being collected every 5 minutes for couple of years) and wouldn't like to re-invent the wheel, but half day of browsing didn't reveal anything promising.
Zing Chart: http://www.zingchart.com/
You might take a look at http://dygraphs.com - Very powerful do display large sets of data. Further very interesting is also: http://d3js.org/