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
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
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
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 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