Trying out Vega!!
(vega, react) #weeks8&9
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 codebase eased the learning.
Previous Version
Current Version :
Check it out on the Course Articles Page — Here
- Visualization for Article Edits added
- Switching between graphs based upon users choice
- Loading Component added
Vega
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 adatum
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
Basics
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 therender
method andgetData
method was callingsetState
. 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 reimplementation of React’s core algorithm
Buckle up, rides gonna get faster!!! Just 4 more weeks to go …