visrelatebar's Introduction

visRelateBar

streaming visualization to show scrolling bars with relationships

The goal is to provide a streaming data visualization that shows a recent timeframe but keeps the context of historical data. It needs to be interactive but in a very light way, to have clickable components that can trigger outside functions. It will be showing summary data for thousands of records per second, and details on a few. the aggregation will be done outside the visualization. The logic on choosing what to show in detail is also decided outside the visualization.

Requirements

All Data must be in JSON format
no external dependancies besides lodash and the webgl framework chosen

streaming horizontal bar with all of the features of sparkline
with thresholds
and customizable colors per data point
newer timeframes get more incremental space, historical is compressed
relationship lines stay anchored to the time they had the relationship.
with customizeable colors
and widths are relative to their weight
detail information can be displayed in syntax highlighted json format above and/or below the bar charts
with relationship arrow shows where on the timline it came from
any other information that is displayed but not related to the stream of data is clearly connected/related to the original data
numerical data aligned with each streaming bar that shows totals
Everything needs to have a mind towards performance, and be able to run for 24 hours without any serious memory leaks.

Bar chart drawing logic

1 bar for each minute when the chart is updated each second, it will show up to 60 seconds there will never be more than 24 1 hour bars 60 minute bars 60 second bars each one will show avergae rate per second and can show less if there not enough room or data priority if there's not enough room is to show all seconds, some minutes, fewer hours seconds always higher priority / bar width / brighter than minutes and minutes higher priority than hours

visrelatebar's People

Contributors

Watchers

visrelatebar's Issues

Create a horizontal Bar chart with compressed time in webgl

scrolling bar chart

needs to show a history of values with an emphasis on the most recent

seconds show on bars on the right and are larger than minutes, hours,... no unit larger than hours
the older aggregate bars will be show in average per seconds

requires attention to performance, needs to be in webgl to support future functions
Future functions ( particles that move around, relationship lines between data points, multiple bar charts coordinated )

everything will scroll from the right to left as time progresses needs to look pretty smooth, and preferably not need to redraw everything every frame unless that ends up being faster.

it does not need to be interactive, yet. Eventually it may support a callback returning the data of what's clicked.

must be presentation framework independent so it doesnt matter if it's angular1,2 or react etc.

please try this in pixijs

seconds are within current minute, minute in current hour, hour in current day

tick labels only show the level needed, day has the date of month, then hour of the day, minute of the hour, seconds of the minute, skip where needed for room especially in the thinner, older bars

might need to layer, if there are too many values.

inputs:

initial input with values for seconds, minutes, hours, days with thei values and timestamps, called one time.
for example (this format is not required)

bar.init({
	 hours:[]
	,minutes:[{
	 	 "ts": js time in miliseconds
	 	,"val":21
	 },{
	 	 "ts": js time in miliseconds
	 	,"val":21
	 }]
	,seconds:[]
});

bar.add(31)

uses current timestamp assumes it's a seconds value
every 60 seconds a new minutes bar is added, but the seconds keep scrolling

see the demo provided to get an idea

Recommend Projects

suddendevelopment / visrelatebar Goto Github PK

visrelatebar's Introduction

visRelateBar

Requirements

Bar chart drawing logic

visrelatebar's People

Contributors

Watchers

visrelatebar's Issues

Create a horizontal Bar chart with compressed time in webgl

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent