CINXE.COM

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <link rel="shortcut icon" href="https://vega.github.io/favicon.ico" />  <title>A High-Level Grammar of Interactive Graphics | Vega-Lite</title> <meta name="generator" content="Jekyll v3.10.0" /> <meta property="og:title" content="A High-Level Grammar of Interactive Graphics" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="Vega-Lite - a high-level grammar for statistical graphics. Vega-Lite provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications. Vega-Lite specifications consist of simple mappings of variables in a data set to visual encoding channels such as x, y, color, and size. These mappings are then translated into detailed visualization specifications in the form of Vega specification language. Vega-Lite produces default values for visualization components (e.g., scales, axes, and legends) in the output Vega specification using a rule-based approach, but users can explicit specify these properties to override default values." /> <meta property="og:description" content="Vega-Lite - a high-level grammar for statistical graphics. Vega-Lite provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications. Vega-Lite specifications consist of simple mappings of variables in a data set to visual encoding channels such as x, y, color, and size. These mappings are then translated into detailed visualization specifications in the form of Vega specification language. Vega-Lite produces default values for visualization components (e.g., scales, axes, and legends) in the output Vega specification using a rule-based approach, but users can explicit specify these properties to override default values." /> <link rel="canonical" href="https://vega.github.io/vega-lite/" /> <meta property="og:url" content="https://vega.github.io/vega-lite/" /> <meta property="og:site_name" content="Vega-Lite" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="A High-Level Grammar of Interactive Graphics" /> <meta name="twitter:site" content="@vega_vis" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebSite","description":"Vega-Lite - a high-level grammar for statistical graphics. Vega-Lite provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications. Vega-Lite specifications consist of simple mappings of variables in a data set to visual encoding channels such as x, y, color, and size. These mappings are then translated into detailed visualization specifications in the form of Vega specification language. Vega-Lite produces default values for visualization components (e.g., scales, axes, and legends) in the output Vega specification using a rule-based approach, but users can explicit specify these properties to override default values.","headline":"A High-Level Grammar of Interactive Graphics","name":"Vega-Lite","url":"https://vega.github.io/vega-lite/"}</script>  <script> const BASEURL = window.location.origin + '/vega-lite'; </script> <link rel="stylesheet" href="/vega-lite/static/github.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/octicons@4.4.0/build/font/octicons.min.css" /> <link rel="stylesheet" href="/vega-lite/static/main.css" /> </head> <body> <div class="fill"> <header> <nav class="page-centered"> <div class="dropdown"> <a class="vl-title" href="/vega-lite/">Vega-Lite</a> <div class="dropdown-content"> <a href="https://vega.github.io/vega/">Vega</a> <a href="https://altair-viz.github.io/">Altair</a> <a href="https://vega.github.io/vega-lite-api/">Vega-Lite API</a> </div> </div> <div class="vl-links"> <div class="primary-links"> <a href="/vega-lite/examples/">Examples</a> <a href="/vega-lite/tutorials/getting_started.html">Tutorials</a> <a href="/vega-lite/docs/">Documentation</a> <a href="/vega-lite/usage/embed.html">Usage</a> <a href="/vega-lite/ecosystem.html">Ecosystem</a> </div> <div class="secondary-links"> <a href="https://www.github.com/vega/vega-lite">GitHub</a> <a href="https://vega.github.io/editor/#/examples/vega-lite/bar">Try Online</a> </div> </div> </nav> </header> <section> <div class="page-centered title"> <h1> <strong>Vega-Lite</strong> – A Grammar of Interactive Graphics</h1> </div> <div id="showcase"> <div class="examples"> <a class="preview" href="/vega-lite/examples/stacked_area_stream.html" style="background-image: url('/vega-lite/examples/stacked_area_stream.png')"> </a> <a class="preview" href="/vega-lite/examples/selection_translate_scatterplot_drag.html" style="background-image: url('/vega-lite/examples/selection_translate_scatterplot_drag.png')"> </a> <a class="preview" href="/vega-lite/examples/layer_point_errorbar_stdev.html" style="background-image: url('/vega-lite/examples/layer_point_errorbar_stdev.png')"> </a> <a class="preview" href="/vega-lite/examples/tick_strip.html" style="background-image: url('/vega-lite/examples/tick_strip.png')"> </a> <a class="preview" href="/vega-lite/examples/line_overlay_stroked.html" style="background-image: url('/vega-lite/examples/line_overlay_stroked.png')"> </a> <a class="preview" href="/vega-lite/examples/trellis_barley.html" style="background-image: url('/vega-lite/examples/trellis_barley.png')"> </a> <a class="preview" href="/vega-lite/examples/geo_choropleth.html" style="background-image: url('/vega-lite/examples/geo_choropleth.png')"> </a> <a class="preview" href="/vega-lite/examples/circle_github_punchcard.html" style="background-image: url('/vega-lite/examples/circle_github_punchcard.png')"> </a> <a class="preview" href="/vega-lite/examples/geo_layer_line_london.html" style="background-image: url('/vega-lite/examples/geo_layer_line_london.png')"> </a> <a class="preview" href="/vega-lite/examples/stacked_bar_weather.html" style="background-image: url('/vega-lite/examples/stacked_bar_weather.png')"> </a> <a class="preview" href="/vega-lite/examples/layer_line_co2_concentration.html" style="background-image: url('/vega-lite/examples/layer_line_co2_concentration.png')"> </a> <a class="preview" href="/vega-lite/examples/circle_natural_disasters.html" style="background-image: url('/vega-lite/examples/circle_natural_disasters.png')"> </a> <a class="preview" href="/vega-lite/examples/trellis_area.html" style="background-image: url('/vega-lite/examples/trellis_area.png')"> </a> <a class="preview" href="/vega-lite/examples/layer_line_errorband_ci.html" style="background-image: url('/vega-lite/examples/layer_line_errorband_ci.png')"> </a> <a class="preview" href="/vega-lite/examples/line_slope.html" style="background-image: url('/vega-lite/examples/line_slope.png')"> </a> <a class="preview" href="/vega-lite/examples/layer_ranged_dot.html" style="background-image: url('/vega-lite/examples/layer_ranged_dot.png')"> </a> <a class="preview" href="/vega-lite/examples/layer_bar_annotations.html" style="background-image: url('/vega-lite/examples/layer_bar_annotations.png')"> </a> <a class="preview" href="/vega-lite/examples/rect_binned_heatmap.html" style="background-image: url('/vega-lite/examples/rect_binned_heatmap.png')"> </a> <a class="preview" href="/vega-lite/examples/interactive_splom.html" style="background-image: url('/vega-lite/examples/interactive_splom.png')"> </a> <a class="preview" href="/vega-lite/examples/interactive_layered_crossfilter.html" style="background-image: url('/vega-lite/examples/interactive_layered_crossfilter.png')"> </a> <a class="preview" href="/vega-lite/examples/interactive_overview_detail.html" style="background-image: url('/vega-lite/examples/interactive_overview_detail.png')"> </a> </div> </div> <div class="page-centered page-main"> <section class="page-content"><p class="lead"> <strong>Vega-Lite</strong> is a high-level grammar of interactive graphics. It provides a concise, declarative JSON syntax to create an expressive range of visualizations for data analysis and presentation. </p> <p><span class="lead-columns"> <span> Vega-Lite specifications describe visualizations as encoding mappings from data to <strong>properties of graphical marks</strong> (e.g., points or bars). The Vega-Lite compiler <strong>automatically produces visualization components</strong> including axes, legends, and scales. It determines default properties of these components based on a set of <strong>carefully designed rules</strong>. This approach allows Vega-Lite specifications to be concise for quick visualization authoring, while giving user control to override defaults and customize various parts of a visualization. As we also designed Vega-Lite to support data analysis, Vega-Lite supports both <strong>data transformations</strong> (e.g., aggregation, binning, filtering, sorting) and <strong>visual transformations</strong> (e.g., stacking and faceting). Moreover, Vega-Lite specifications can be <strong>composed</strong> into layered and multi-view displays, and made <strong>interactive with selections</strong>. </span> <span class="lead-buttons"> <a href="/vega-lite/tutorials/getting_started.html">Get started<br><small>Latest Version: 6.1.0</small></a> <a href="https://vega.github.io/editor/#/custom/vega-lite">Try online</a> </span> </span></p> <p>Compared to <a href="https://vega.github.io/vega">Vega</a>, Vega-Lite provides a more concise and convenient form to author common visualizations. As Vega-Lite can compile its specifications to Vega specifications, users may use Vega-Lite as the <em>primary</em> visualization tool and, if needed, transition to use the lower-level Vega for advanced use cases.</p> <p>For more information, read our <a href="https://medium.com/@uwdata/de6661c12d58">introduction article to Vega-Lite v2 on Medium</a>, watch our <a href="https://www.youtube.com/watch?v=9uaHRWj04D4">OpenVis Conf talk about the new features in Vega-Lite v2</a>, see the <a href="/vega-lite/docs/">documentation</a> and take a look at our <a href="/vega-lite/examples/">example gallery</a>. Follow us on <a href="https://twitter.com/vega_vis">Twitter at @vega_vis</a> to stay informed about updates.</p> <h2 id="example">Example</h2> <div id="carousel" class="carousel"> <p> With Vega-Lite, we can start with a <a class="slide-nav" data-slide="0" data-state="active">bar chart of the average monthly precipitation</a> in Seattle, <a class="slide-nav" data-slide="1">overlay a rule for the overall yearly average</a>, and have it represent <a class="slide-nav" data-slide="2">an interactive moving average for a dragged region</a>. <button class="next-slide">Next step</button> </p> <div class="slides"> <div class="slide" data-state="active"> <div class="vl-example" data-name="bar_month"></div> </div> <div class="slide"> <div class="vl-example" data-name="layer_bar_month"></div> </div> <div class="slide video-demo"> <div class="vl-example" data-name="selection_layer_bar_month"></div> <video loop=""> <source src="/vega-lite/static/moving-avg.mp4" type="video/mp4"></source> </video> </div> </div> <div class="indicators"> <input class="indicator" name="indicator" data-slide="0" data-state="active" checked type="radio"> <input class="indicator" name="indicator" data-slide="1" type="radio"> <input class="indicator" name="indicator" data-slide="2" type="radio"> </div> </div> <h2 id="additional-links">Additional Links</h2> <ul> <li>Award winning <a href="https://idl.cs.washington.edu/papers/vega-lite">research paper</a> and <a href="https://www.youtube.com/watch?v=9uaHRWj04D4">video of our OpenVis Conf talk</a> on the design of Vega-Lite</li> <li><a href="https://vega.github.io/vega/about/">The about page for the Vega project</a></li> <li>Listen to a Data Stories episode about <a href="http://datastori.es/121-declarative-visualization-with-vega-lite-and-altair-with-dominik-moritz-jacob-vanderplas-kanit-ham-wongsuphasawat/">Declarative Visualization with Vega-Lite and Altair</a> </li> <li> <a href="http://json-schema.org/">JSON schema</a> specification for <a href="https://github.com/vega/schema">Vega-Lite</a> (<a href="https://vega.github.io/schema/vega-lite/v6.json">latest</a>)</li> <li>Ask questions about Vega-Lite on <a href="https://stackoverflow.com/tags/vega-lite">Stack Overflow</a> or <a href="https://bit.ly/join-vega-slack-2022">Slack</a> </li> <li>Fork our <a href="https://beta.observablehq.com/@domoritz/vega-lite-demo">Observable Notebook</a>.</li> </ul> <h2 id="users">Users</h2> <p>Vega-Lite is used by thousands of data enthusiasts, developers, journalists, data scientists, teachers, and researchers across many organizations. Here are some of them. Learn about integrations on our <a href="/vega-lite/ecosystem.html">ecosystem page</a>.</p> <ul class="logos"> <li><img src="/vega-lite/static/logo_airbnb.png" alt="Airbnb" title="Airbnb"></li> <li><img src="/vega-lite/static/logo_apple.png" alt="Apple" title="Apple"></li> <li><img src="/vega-lite/static/logo_databricks.png" alt="Databricks" title="Databricks"></li> <li><img src="/vega-lite/static/logo_google.png" alt="Google" title="Google"></li> <li><img src="/vega-lite/static/logo_ms.png" alt="Microsoft" title="Microsoft"></li> <li><img src="/vega-lite/static/logo_tableau.png" alt="Tableau" title="Tableau"></li> <li><img src="/vega-lite/static/logo_berkeley.png" alt="Berkeley" title="Berkeley"></li> <li><img src="/vega-lite/static/logo_cmu.png" alt="Carnegie Mellon University" title="Carnegie Mellon University"></li> <li><img src="/vega-lite/static/logo_cern.png" alt="CERN" title="CERN"></li> <li><img src="/vega-lite/static/logo_jlab.png" alt="JupyterLab" title="JupyterLab"></li> <li><img src="/vega-lite/static/logo_la_times.png" alt="LA Times" title="LA Times"></li> <li><img src="/vega-lite/static/logo_mit.png" alt="Massachusetts Institute of Technology" title="Massachusetts Institute of Technology"></li> <li><img src="/vega-lite/static/logo_uw.png" alt="University of Washington" title="University of Washington"></li> </ul> <h2 id="team">Team</h2> <p>The development of Vega-Lite is led by the alumni and members of the <a href="https://idl.cs.washington.edu">University of Washington Interactive Data Lab</a> (UW IDL), including <a href="https://twitter.com/kanitw">Kanit “Ham” Wongsuphasawat</a> (now at Databricks), <a href="https://twitter.com/domoritz">Dominik Moritz</a> (now at CMU / Apple), <a href="https://twitter.com/arvindsatya1">Arvind Satyanarayan</a> (now at MIT), and <a href="https://twitter.com/jeffrey_heer">Jeffrey Heer</a> (UW IDL).</p> <p>Vega-Lite gets significant contributions from its community. Please see the <a href="https://github.com/vega/vega-lite/graphs/contributors">contributors page</a> for the full list of contributors.</p> </section> </div> </section> </div> <footer> <div class="page-centered"> <span class="edit-page"> <a href="https://github.com/vega/vega-lite/edit/next/site/index.md">Edit this page</a> and submit a pull request! </span> <a href="http://idl.cs.washington.edu" title="UW Interactive Data Lab" class="idl-logo"><img src="/vega-lite/static/idl-logo.png"></a> </div> </footer> <script src="/vega-lite/static/bundle.js"></script> </body> </html>