Visualize Time Series Data With μPlot Library


A small (< 30 KB min), fast chart for time series, lines, areas, ohlc & bars _(MIT Licensed)


μPlot is a fast, memory-efficient Canvas 2D-based chart for plotting time series, lines, areas, ohlc & bars; from a cold start it can create an interactive chart containing 150,000 data points in 135ms, scaling linearly at ~25,000 pts/ms. In addition to fast initial render, the zooming and cursor performance is by far the best of any similar charting lib; at < 30 KB, it’s likely the smallest and fastest time series plotter that doesn’t make use of context-limited WebGL shaders or WASM, both of which have much higher startup cost and code size.

However, if you’re looking for true real-time 60fps performance with massive datasets, uPlot can only get you so far. WebGL should still be the tool of choice for applications like realtime signal or waveform visualizations: Try danchitnis/webgl-plot, huww98/TimeChart, epezent/implot.

uPlot Chart



In order to stay lean, fast and focused the following features will not be added:

  • No data parsing, aggregation, summation or statistical processing - just do it in advance. e.g.,
  • No transitions or animations - they’re always pure distractions.
  • No collision avoidance for axis tick labels, so may require manual tweaking of spacing metrics if label customization signficiantly increases default label widths.
  • No stacked series or line smoothing. See links for how these are each terrible at actually communicating information. While neither will be part of the core, uPlot’s API makes it easy to implement both: stacked-series, line-smoothing.
  • No built-in drag scrolling/panning. Maintaining good perf with huge datasets would require a lot of extra code & multiple <canvas> elements to avoid continuous redraw and rescaling on each dragged pixel. If you have fewer than tens of thousands of datapoints, you can use uPlot’s API to implement smooth zooming or panning. e.g. zoom-wheel, zoom-touch. Pagination of data also works well.

Documentation (WIP)

The docs are a perpetual work in progress, it seems. Start with /docs/ for a conceptual overview. The full API is further documented via comments in /dist/uPlot.d.ts. Additionally, an ever-expanding collection of runnable /demos covers the vast majority of uPlot’s API.


Benchmarks done on a ThinkPad T480S:

  • Date: 2020-08-01
  • Windows 10 x64, Chrome 84.0.4147.105 (Official Build) (64-bit)
  • Core i5-8350U @ 1.70GHz, 8GB RAM
  • Intel HD 620 GPU, 2560x1440 res

uPlot Performance

Full size:

Raw data:

| lib            | size    | done    | js,rend,paint,sys | heap peak,final | interact (10s)      |
| -------------- | ------- | ------- | ----------------- | --------------- | ------------------- |
| [uPlot](          |   26 KB |   68 ms |   99   3   4   68 |  12 MB   4 MB   |  196  458  135  264 |
| [Chart.js-next](  |  222 KB |  189 ms |  275   3   3   95 |  32 MB  21 MB   | 3411   35  112 6322 |
| [LightningChart]( |  964 KB |  --- ms |  378   4   2   70 |  24 MB  18 MB   | 9647   32   59  113 |
| [dygraphs](       |  125 KB |  190 ms |  286   5   3  174 |  57 MB  46 MB   | 2329  272  333  415 |
| [CanvasJS](       |  477 KB |  320 ms |  400   4   2  103 |  40 MB  25 MB   | 2282  541  337  481 |
| [Flot](           |  494 KB |  320 ms |  205   7   6  307 |  24 MB  24 MB   | ---                 |
| [dvxcharts](      |  369 KB |  347 ms |  633  41  45   72 |  42 MB  24 MB   | 1476  891  294  280 |
| [Highcharts](     |  381 KB |  --- ms |  757   9   2   63 |  27 MB  23 MB   | 1986  780  207  311 |
| [Chart.js](       |  245 KB |  668 ms |  747   6   7  174 |  82 MB  76 MB   | 5565    5   13 4111 |
| [Plotly.js](      | 3400 KB |  483 ms |  849  10   4   87 |  39 MB  24 MB   | 1601  216   58  203 |
| [ECharts](        |  781 KB |  --- ms |  789   4   9 1119 |  79 MB  79 MB   | 2027   64   59 7696 |
| [ApexCharts](     |  459 KB |  --- ms | 2298  30 135   61 | 151 MB 151 MB   | 2223  259 7802   66 |
| [ZingChart](      |  857 KB | 2632 ms | 2934   8   1   68 | 121 MB  97 MB   | ---                 |
| [amCharts](       | 1200 KB | 6147 ms | 7159  56  15  112 | 251 MB 251 MB   | 6244 1163  598  448 |
  • size includes the lib itself plus any dependencies required to render the benchmark, e.g. Moment, jQuery, etc.
  • Flot does not make available any minified assets and all their examples use the uncompressed sources; they also use an uncompressed version of jQuery :/

TODO (all of these use SVG, so performance should be similar to Highcharts):

  • Chartist.js
  • d3-based
    • C3.js
    • dc.js
    • MetricsGraphics
    • rickshaw


Download Details:

Author: leeoniya


Source Code:


What is GEEK

Buddha Community

Visualize Time Series Data With μPlot Library
 iOS App Dev

iOS App Dev


Your Data Architecture: Simple Best Practices for Your Data Strategy

If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.

If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.

In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.

#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition

Sid  Schuppe

Sid Schuppe


How To Blend Data in Google Data Studio For Better Data Analysis

Using data to inform decisions is essential to product management, or anything really. And thankfully, we aren’t short of it. Any online application generates an abundance of data and it’s up to us to collect it and then make sense of it.

Google Data Studio helps us understand the meaning behind data, enabling us to build beautiful visualizations and dashboards that transform data into stories. If it wasn’t already, data literacy is as much a fundamental skill as learning to read or write. Or it certainly will be.

Nothing is more powerful than data democracy, where anyone in your organization can regularly make decisions informed with data. As part of enabling this, we need to be able to visualize data in a way that brings it to life and makes it more accessible. I’ve recently been learning how to do this and wanted to share some of the cool ways you can do this in Google Data Studio.

#google-data-studio #blending-data #dashboard #data-visualization #creating-visualizations #how-to-visualize-data #data-analysis #data-visualisation

Gerhard  Brink

Gerhard Brink


Getting Started With Data Lakes

Frameworks for Efficient Enterprise Analytics

The opportunities big data offers also come with very real challenges that many organizations are facing today. Often, it’s finding the most cost-effective, scalable way to store and process boundless volumes of data in multiple formats that come from a growing number of sources. Then organizations need the analytical capabilities and flexibility to turn this data into insights that can meet their specific business objectives.

This Refcard dives into how a data lake helps tackle these challenges at both ends — from its enhanced architecture that’s designed for efficient data ingestion, storage, and management to its advanced analytics functionality and performance flexibility. You’ll also explore key benefits and common use cases.


As technology continues to evolve with new data sources, such as IoT sensors and social media churning out large volumes of data, there has never been a better time to discuss the possibilities and challenges of managing such data for varying analytical insights. In this Refcard, we dig deep into how data lakes solve the problem of storing and processing enormous amounts of data. While doing so, we also explore the benefits of data lakes, their use cases, and how they differ from data warehouses (DWHs).

This is a preview of the Getting Started With Data Lakes Refcard. To read the entire Refcard, please download the PDF from the link above.

#big data #data analytics #data analysis #business analytics #data warehouse #data storage #data lake #data lake architecture #data lake governance #data lake management

Ray  Patel

Ray Patel


Clash of Python Data Visualization Libraries

Seaborn, Altair, and Plotly

Data visualization is a fundamental ingredient of data science. It helps us understand the data better by providing insights. We also use data visualization to deliver the results or findings.

Python, being the predominant choice of programming language in the data science ecosystem, offers a rich selection of data visualization libraries. In this article, we will do a practical comparison of 3 popular ones.

The libraries we will cover are Seaborn, Altair, and Plotly. The examples will consist of 3 fundamental data visualization types which are scatter plot, histogram, and line plot.

We will do the comparison by creating the same visualizations with all 3 libraries. We will be using the Melbourne housing dataset available on Kaggle for the examples.

#data-visualization #python #data-science #programming #clash of python data visualization libraries #libraries

Gerhard  Brink

Gerhard Brink


Introduction to Data Libraries for Small Data Science Teams

At smaller companies access to and control of data is one of the biggest challenges faced by data analysts and data scientists. The same is true at larger companies when an analytics team is forced to navigate bureaucracy, cybersecurity and over-taxed IT, rather than benefit from a team of data engineers dedicated to collecting and making good data available.

Creative, persistent analysts find ways to get access to at least some of this data. Through a combination of daily processes to save email attachments, run database queries, and copy and paste from internal web pages one might build up a mighty collection of data sets on a personal computer or in a team shared drive or even a database.

But this solution does not scale well, and is rarely documented and understood by others who could take it over if a particular analyst moves on to a different role or company. In addition, it is a nightmare to maintain. One may spend a significant part of each day executing these processes and troubleshooting failures; there may be little time to actually use this data!

I lived this for years at different companies. We found ways to be effective but data management took up way too much of our time and energy. Often, we did not have the data we needed to answer a question. I continued to learn from the ingenuity of others and my own trial and error, which led me to the theoretical framework that I will present in this blog series: building a self-managed data library.

A data library is _not _a data warehousedata lake, or any other formal BI architecture. It does not require any particular technology or skill set (coding will not be required but it will greatly increase the speed at which you can build and the degree of automation possible). So what is a data library and how can a small data analytics team use it to overcome the challenges I’ve described?

#big data #cloud & devops #data libraries #small data science teams #introduction to data libraries for small data science teams #data science