Code Monkey home page Code Monkey logo

Comments (9)

chrisbolin avatar chrisbolin commented on June 19, 2024 1

we decided to use dummy data. getting and wrangling real data probably has a low ROI.

we'd like to target financial data users, so we'll probably make it "vaguely financial"

from victory-docs.

paulathevalley avatar paulathevalley commented on June 19, 2024 1

@chrisbolin Fair. I think it looks really great. 👍

from victory-docs.

chrisbolin avatar chrisbolin commented on June 19, 2024

@boygirl any specific data sources you had in mind?

from victory-docs.

chrisbolin avatar chrisbolin commented on June 19, 2024

code in branch 69-realtime-data. waiting for victory release w/ transition enhancements before pushing live

from victory-docs.

chrisbolin avatar chrisbolin commented on June 19, 2024

Current State

What do you think? cc @paulathevalley @boygirl @ebrillhart

I've tried to make something that looks cool and doesn't run into too much weirdness with the animations. That means "restarting" the animation. Explanation below.

Actual Speed

good-normal-speed

10x Speed to Show Restart

After 30 points, the animation will restart to two points. Two points seems to look better than 3. One point would be ideal, but the vertical axis goes crazy and zooms way out, even though a domain is set and didn't change (any ideas here @boygirl?).

good-sped-up

Why restart the animation?

Why restart? Why not just keep a fixed "window" of data (say 25 points) and every iteration add a new point and remove that last?

Animations are coolest at the beginning

+1

animation-beginning

Fixed-Points don't look great

But once it "fills up" to the maximum number of points...

It just kinda flexes around, you don't get the sense that it is progressing forward in time.

animation-continuing

from victory-docs.

paulathevalley avatar paulathevalley commented on June 19, 2024

I agree that fixed-points don’t look great, and the animation looks coolest in the beginning.

I am seeing some weirdness with the vertical axis in the "10x Speed to Show Restart" gif. The first point starts just below 55, but as points continue adding, it jumps to above 55.2. It's disorienting, but at actual speed it may not be that disorienting.

Did some looking at other live charts, particularly seismographs.

polywaves
(Interestingly enough, the new points are entering on the left! Not all do this though.)

Once the points enter, they don’t adjust to a new domain in the vertical axis. Once they've entered the graph, their proportions don’t change as new points enter (because it’s all written down), as if they’re frozen. Is "freezing" the first data points possible?

Also, adding vertical grid lines might help communicate forward movement on the horizontal axis, like this below:

seismograph2

These are my two cents and just suggestions, and this is looking awesome already. Do what looks/feels right to you!

from victory-docs.

chrisbolin avatar chrisbolin commented on June 19, 2024

@paulathevalley great catch with the movement on restart. honestly i think we are between a rock and a hard place with the way the animations work :S

  • Reset to 1 point: vertical axis zooms in and out. No go.
  • Reset to 2 points: the animation makes the first two points match the two new values
  • Make first two points always the same. This would look good on animation. But it's pretty darn contrived.

I like the last option the best. Here's what it would look like:

restart with consistent points

from victory-docs.

chrisbolin avatar chrisbolin commented on June 19, 2024

also, we won't see restarting that often, only every 90 seconds (30 points, 3 second update).

from victory-docs.

chrisbolin avatar chrisbolin commented on June 19, 2024

Resolving in #97

from victory-docs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.