d3.js - Graphing live re-syncing data in D3js in a fixed window with linear easing -


i'm interested in graphing live-ish data in d3js. now, when "live-ish" mean i'll collecting data every 200ms +/- 10ms, there may several minute long periods of inactivity. fortunately, input data time-stamped!

what have far: i've followed line drawing in d3 guides (eg: this) , have y axis value range/domain want. have x axis range want , moving domain per standard time-series fixed-width graph. is, if graph's x axis domain (0:15, 0:35) in 5 seconds (0:20, 0:40). transitions nicely it's using linear easing.

i have mock-data being output each iteration of graph tick. domain set such new points out of x-axis domain such allow smooth effect per 1. in all, looks great.

so go here? desired result: data comes in asynchronously , placed precisely @ x-axis time-stamped location. if data date, gets placed juuust outside x-axis domain , has smooth transition in. if data doesn't arrive in time, graph continues without drawing new points until data received, @ time adds each point @ appropriate time-stamp retroactively. if data missing period doesn't arrive @ all, continue gap in graph. can emulate calling...

d3.select(window).on("click", .. )

effectively, can click add random data @ current time-stamp using anonymous function allows me mimic data / event structure code should handle.

i think current confusion due how add data , draw path it.

var line = d3.svg.line()   .interpolate("basis-open")   .x(function(d, i) { return x(now - (n-1-i)*duration); })   .y(function(d, i) { return y(d); });  var axis = svg.append("g")   .attr("class", "x axis")   .attr("transform", "translate(0," + height + ")")   .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));  svg.append("g")   .attr("class", "y axis")   .call(d3.svg.axis().scale(y).orient("left"));  var path = svg.append("g")   .attr("clip-path", "url(#clip)")   .append("path")   .datum(data)   .attr("class", "line")

the big question: y-values correspond path.datum(data) (data array of values) appropriately, when push data array draw line, places each point graphically @ equal distance apart. how break out of mono-variable graph without destroying time-series smooth scrolling animation? record second array of timestamps alongside data array, how integrate line? ideally, i'd have them both part of same array sort timestamp when call data.shift() oldest data gone. tried changing "duration" of transition function made graph accelerate weirdly , didn't break equidistance of points on x.

how set y-axis graph take account x-location without breaking graph?

alright, figured out pretty straightforward way of doing wanted while still using .datum(data) instead of .data(data) (where 'data' array). instead of passing in array of values .datum, pass in array of objects. or, once data = [value1, value2, ...] data = [{gx:timestamp1, gy:value1}, {gx:timestamp2, gy:value2}, ...].

my line x-axis / y-axis functions now...

.x(function(d, i) { return x(d.gx); }) .y(function(d, i) { return y(d.gy); });

which ends being bit neater initial run @ it. transition functions didn't have change.

the final puzzle piece data comes in time-stamped out of order. fortunately, display domain isn't large , thus, don't need store many values in array. such, when new data comes in sort make line not wobbly-bobbly mess.

data.sort(function(a,b){ return a.gx - b.gx});

and voila! if size of array beyond boundary, shift off data. gives effect of sliding timeseries window of past n seconds time-stamped data points may arbitrarily dumped on , displayed properly.


Comments

Post a Comment

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

i have ec2 instance mongodb 3.2.0 installed. have user admin access. can connect user , perform operation remotely. 1 can connect database test remote if knows ip mongo 11.11.11.11. although not able make operations, want restrict access user credentials can connect server. first need create users , grant roles users, example: use admin db.createuser( { user: "myuseradmin", pwd: "abc123", roles: [ { role: "useradminanydatabase", db: "admin" } ] } ) then need start server --auth parameter mongod --auth more information here
Read more

r - Update two sets of radiobuttons reactively - shiny -

i have read ( how make choices in radiobuttons reactive in shiny? ) shows me how update radiobutton s in reactive way. however, when try , update 2 sets of buttons same data, 1 set renders. example: server: # create example data wafer <- rep(c(1:3), each=3) length <- c(1,1,2,1,1,1,3,5,1) width <- c(3,1,6,1,1,1,1,1,6) dd <- data.frame(wafer, length, width) shinyserver(function(input, output, session){ # create reactive dataframe store data values <- reactivevalues() values$df <- data.frame() # lengths , widths of wafer user input <- eventreactive(input$do, { subset(dd, wafer %in% input$wafer, select = length:width) }) # update reactive data frame lengths , widths have been selected user input observe({ if(!is.null(a())) { values$df <- rbind(isolate(values$df), a()) } }) output$wl <- renderdatatable({ a() }) # update radio buttons unique length , widths stored in values$df # ever "observe" put first in co...
Read more

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -

i'm working on app using core data , nsfetchedresultcontroller many reasons switch use realm. saw there "realm version" of nsfetchedresultcontroller on github wouldn't compatible current code using core data. the view controller displaying list of people same school, address book. list sublist of people studied in same city. so thinking make 1 unique request database retrieve list of people , filter locally list within 1 dictionary per school [string: anyobject] string section name within tableview , anyobject array of people. first solution, make nsfetchedresultcontroller each school predicate filtering location. delete actions etc.. handled delegates -> not compatible realm create dictionaries , update them each actions... -> works realm it's annoying code. any better solution? edit: i need clarify request: i'd write class inherit uitableviewcontroller. this class has list of people sorted in alphabetical order the tableview has ...
Read more