• Sejal Khatri

Trying out Vega!!

Updated: Sep 23, 2019

My Outreachy Project: To improve the Wiki Ed Dashboard’s user profile pages. Mentors: Sage Ross and Jonathan Morgan

I successfully added visualizations for Edit Size of the articles by plotting characters added against the time axis. A lot of playing around with Vega specs at Vega live editor helped and also understanding the already implemented visualizations, for article history by Sage in the Wiki Ed code base eased the learning.

Previous Version

Only visualizes Article history with Structural Completeness

Current Version

Check it out on the Course Articles Page — Here

Visualization for Article Edits added

visualizes change in edit size of articles over time with characters added

Switching between graphs based upon users choice

Radio button added in the Main ArticleGraphs Component and Child Graph Components rendered according to the user input.

Loading Component added

Loading Component rendered until Article Data fetched


I have hosted the Article Edit Size Graph Vega Implementation at JS bin for quick understanding — check it out.

I followed Vega Documentation from its GitHub Wiki Page — here

Vega basics: Data, Scales, Axes, Marks, understand the Static bar Chart here and play with it

Few important points:

  • Vega includes its own expression language for writing basic formulas — Source.

  • datum(bound variable): In all cases, Vega includes a datum variable in the top-level scope, corresponding to an input data object. — Source.

  • Production Rules: Visual properties can also be set by evaluating an if-then-else style chain of production rules. — Source.

  • Vega Embed: For publishing Vega visualizations as embedded web components with interactive parameters. — Source

  • Vega Tutorials — Interactive tutorials for learning Vega. I am planning to follow this once I get some free time.



React Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. — React Docs

There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state. — React Docs

What I have done —

Having a parent component that handles user input and according to which child component is rendered(Conditional Rendering in React). Child component has the corresponding vega spec, which on call is embedded in the given HTML <div> element. Initially the data was loaded in the vega spec of child components and thus causing latency. Sage then suggested to move the data fetching to the parent component and pass it to child components using props , So I moved the data fetching out of Vega and into React, which helped in reducing the latency. Still, there was flickering before the graph shows up because of initial data fetching, So now we render loading component until data is fetched.

Extra Info

  • React-OnClickOutside: Higher order component to listen to clicks outside the element a particular component renders — more info

  • render() method getting called infinitely — I faced this error because I was calling getData method in the render method and getData method was calling setState. Basically, calling setState in render caused infinite loop. So I moved setState out of getData method and it worked. — error details

Checkout React Fiber if you are just starting to learn React. It is an ongoing re-implementation of React’s core algorithm

Published in Frontend Weekly, Medium