Three "HelloWorld" Tutorials

[backspaces]

First: I gotta say uPlot is such a good idea: short & sweet for us who need to plot data w/o the huge costs of the modern plotting libraries.

This is a request for really simple documentation via three "Hello" plots.

• HelloLine: a single line plot with integer x & y values. (x not dates/times) Y values varying randomly
• HelloBar: a single bar chart of x & y values. Maybe a histogram or similar.
• HelloPoints: a single points chart of x & y values where x's aren't a sequence. Consider x,y random in a given range

These should be really simple but guide us thru the basics. It'd be fun too, I bet!

Here's an example of the sort of plots I need for AgentScript, a NetLogo in JavaScript. In my case it's important that the plots can be small and simple like these.

[leeoniya]

there is an extensive list of demos here:

https://leeoniya.github.io/uPlot/demos/index.html

HelloLine: a single line plot with integer x & y values. (x not dates/times) Y values varying randomly

https://leeoniya.github.io/uPlot/demos/area-fill.html

HelloBar: a single bar chart of x & y values. Maybe a histogram or similar.

bar charts are done via a plugin. the grouped multi-bar plugin can easily be reduced to just have 1 bar per group.

https://leeoniya.github.io/uPlot/demos/multi-bars.html

HelloPoints: a single points chart of x & y values where x's aren't a sequence. Consider x,y random in a given range

uPlot cannot be used effectively as scatter plot. having ascending, unique x values is a requirement to use this library. there is some work started to support scatter, but it will be on hold for at least a few more months: https://github.com/leeoniya/uPlot/issues/107

It'd be fun too, I bet!

i have enough fun already :)

[fquirin]

@backspaces @leeoniya

I think uPlot is a great library and exactly what I was looking for to replace jQuery Sparklines (super small and fast), but I had some troubles getting started and to replace my old code, so I wrote a wrapper around uPlot and called it:

uPlot Lazy Interface :yum:

Its based on the 'path' demo and I've tried to build an interface that lets you quickly plot 'lines', 'points', 'bars' and custom paths. It would be great to get some feedback :-)

Hope you like it, Florian

[leeoniya]

It would be great to get some feedback :-)

pretty neat :)

random values generate pretty unrealistic data, and not great examples. using a random walk is better. (i'm guilty of this myself, but see the point density demo for random walk).

the sine wave demo doesnt disable points at high density, so becomes a perf-wasting fat worm.

i'd probably expect a simple demo to handle data parsing from csv (via papaparse), and support a common coord pairs format like {x, y} or {time, value}, where time is parsed from a string. also handle sorting by x or time as uPlot requires. multiple un-aligned datasets can be auto-aligned via uPlot.join(). i think the vast majority of simplification is on the data-prep and data-munging side to handle common inputs, or do stuff like bucketing, aggregation and statistics.

[fquirin]

Thanks for the comments!

random values generate pretty unrealistic data, and not great examples. using a random walk is better

I saw the randomWalk function in one of the demos and was thinking about copying it over but wanted to keep everything as small as possible. "realistic" data wasn't really important when I put together the examples ;-) I'll keep that in mind though.

the sine wave demo doesnt disable points at high density, so becomes a perf-wasting fat worm.

Good point, I should probably check data size and adjust default settings accordingly. Do you have an educated guess what would be a reasonable size to disable points?

i'd probably expect a simple demo to handle data parsing from csv

Though this might be useful for many people it wasn't really on my to-do list since I need the library for the visualization of audio data generated right inside the browser. Data preparation is a science for itself and a pretty broad scope, I think this should be handled in a separate module. That said sorting by x and aligning two data sets could indeed be useful. How does the uPlot.join() function work exactly?

[leeoniya]

Good point, I should probably check data size and adjust default settings accordingly. Do you have an educated guess what would be a reasonable size to disable points?

uPlot's default is 2x diameter, but i can see some people wanting it down to 1x. not much reason to show points below 1x, IMO.

Though this might be useful for many people it wasn't really on my to-do list since I need the library for the visualization of audio data generated right inside the browser

your lazy helper is then very purpose-specific and probably not gonna help most lazy people :D

How does the uPlot.join() function work exactly?

imagine you have 2 csv tables from 2 different datasets, so their timestamps are not aligned. join() does the equivalent of a SQL outer join between the tables and null-fills the empty spaces. so the result is a single data structure that can be fed to uPlot. you can see it used here:

https://github.com/leeoniya/uPlot/blob/ef77ab4e712883b91bc65b30aa29f71b341854bd/demos/path-gap-clip.html#L148-L163

[fquirin]

uPlot's default is 2x diameter, but i can see some people wanting it down to 1x. not much reason to show points below 1x, IMO.

Makes sense.

your lazy helper is then very purpose-specific and probably not gonna help most lazy people :D

:-p I guess the target group are users that previously used something like jQuery Sparklines but don't want to include jQuery anymore ^^, at least that was the path that lead lazy me to uPlot ;-).

join() does the equivalent of a SQL outer join between the tables and null-fills the empty spaces

This will be very useful!

[backspaces]

I'll check out the uPlot-lazy-interface, looks promising. Thanks!