Git Product home page Git Product logo

falcon's Introduction

Vega: A Visualization Grammar

Vega Examples

Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs. With Vega you can describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.

For documentation, tutorials, and examples, see the Vega website. For a description of changes between Vega 2 and later versions, please refer to the Vega Porting Guide.

Build Instructions

For a basic setup allowing you to build Vega and run examples:

  • Clone https://github.com/vega/vega.
  • Run yarn to install dependencies for all packages. If you don't have yarn installed, see https://yarnpkg.com/en/docs/install. We use Yarn workspaces to manage multiple packages within this monorepo.
  • Once installation is complete, run yarn test to run test cases, or run yarn build to build output files for all packages.
  • After running either yarn test or yarn build, run yarn serve to launch a local web server β€” your default browser will open and you can browse to the "test" folder to view test specifications.

This repository includes the Vega website and documentation in the docs folder. To launch the website locally, first run bundle install in the docs folder to install the necessary Jekyll libraries. Afterwards, use yarn docs to build the documentation and launch a local webserver. After launching, you can open http://127.0.0.1:4000/vega/ to see the website.

Internet Explorer Support

For backwards compatibility, Vega includes a babel-ified IE-compatible version of the code in the packages/vega/build-es5 directory. Older browser would also require several polyfill libraries:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/runtime.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fetch.umd.min.js"></script>

Contributions, Development, and Support

Interested in contributing to Vega? Please see our contribution and development guidelines, subject to our code of conduct.

Looking for support, or interested in sharing examples and tips? Post to the Vega discussion forum or join the Vega slack organization! We also have examples available as Observable notebooks.

If you're curious about system performance, see some in-browser benchmarks. Read about future plans in our roadmap.

falcon's People

Contributors

dependabot-preview[bot] avatar dependabot[bot] avatar domoritz avatar greenkeeper[bot] avatar p42-ai[bot] avatar tarekrached avatar xnought avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

falcon's Issues

Snapping

The cache needs some kind of smart indexing. Ideally we have a data structure that supports fast nearest nieghbor search and inserts. For now, since we only have a single dimension I will use a sorted array.

Incremental querying

We can optimize the queries we sent to postgres by only downloading the delta to something we already have. To support this, we need to be able to do lookups for close index values similar to what we do in the client.

v2

  • update API
    • batching
    • ranges
    • zooming/ resolution
    • 2D
    • Init
    • Preload
    • Caching
  • zoom tree
    • Insert
    • Lookup
  • index structure
    • R-tree/ KD-tree
    • 2D data
  • Update visualizations
  • Preloader
    • send queries
  • batching
  • compression using JPG
  • GC

update interface -- feedback from pilot

  • put total flights at the top or the bottom, not in a random place.
  • Need info to provide context for titles. Add units.
  • Clean up labels and axes.
  • figure out whether it makes sense to have 2D views for the specific tasks. Could bias participants to answer in certain ways, makes certain attributes look more important.
  • add more padding between plots.
  • 2 titles are redundant in 1D views.
  • having continuous axes with discrete bars is a little confusing.
  • brush handle disappears when brush intersects view boundaries. add padding to the plot so they don’t disappear.
  • make count/total bar chart horizontal?

MapD

Add a mapd database

negative numbers with random backend

the random backend breaks our assumption about the data, namely if we are querying for [0, a] and [0, b] with a < b, we expect the elements of the results of b to be greater than the corresponding elements of the results of a. the random backend doesn't guarantee this and leads to some issues trying to draw negative values

Support partial logs

Brush start and mousein for charts do not have brush start and end so we should support partial logs.

Generate from Vega Lite

I am curious if I could use this library to create an interactive visualization based on the Vega Lite spec built up by the user in Altair. Do you think it would be wise/possible to generate the App views based on a vega lite schema?

Obviously, if we wanted to output directly from Altair, we would also need to create a db, but we could do this pretty easily based on a MapD database URL.

Optimizations

  • Use summed "area" table to precompute histograms on active chart
    • Be smart about the order of computation based on mouse movement
  • Compress data sent over socket
  • Use prepared statements

brush near 0 looks wrong

I think that brush ranges are not inclusive because in the weather data a brush over 0 does not show many items.

Visualizations follow up

From #41

  • You won't see any data until a adding a brush. The results from init currently have an explicit index value, but these need to be special cased for having an "infinite" index
  • The brush and zoom aren't playing nicely right now, the brush should be resized when the user zooms in/out. There should also be a keyboard toggle so you can pan without triggering the brush.
  • There are still some issues with the two dimensional brush, I've disabled that hitting the api until that is fixed

Sometimes data only has a single value

I simply try to use a second brush.

screen shot 2016-12-03 at 20 32 41

The server shows this error

QueryResultError {
    code: queryResultErrorCode.noData
    message: "No data returned from the query."
    received: 0
    query: {"name":"DEP_DELAY-9","text":"\n      SELECT width_bucket(\"DEP_DELAY\", $1, $2, $3) as bucket, count(*)\n      FROM flights\n      WHERE $4 < \"DEP_DELAY\" and \"DEP_DELAY\" < $5 and \"DISTANCE\" < $6 and $7 < \"ARR_DELAY\" and \"ARR_DELAY\" < $8\n      GROUP BY bucket order by bucket asc;\n    ","values":[0,100,25,0,100,1016.1363636363637,39.09090909090909,59.77272727272728]}
}

But the query seems to be correct and returns data if I run it in psql. Any ideas?

Make it presentable

  • Add axes
  • Fix domain and range
  • Add color overlay to show current vs all data
  • Fix bug where brush range isn't being cleared correctly

Baseline condition

We need to be able to demonstrate the unoptimized baseline without any caching and round trips for every request.

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.