Creating Data Visualization using GraphQL and ReactJS

Reading Time: 12 Minutes

by  | July 04, 2018 

Introduction to Data Visualization with GraphQL and React JS

A picture is worth a million words – especially when you are trying to understand and discover insights from data. Visuals are especially helpful when you’re trying to find relationships among hundreds or thousands of variables to determine their relative importance – or if they are important at all.

Data Visualization, as its name Data and Visualization, describes the term. Data Visualization means to visualize the raw data so that one can understand the information easily.

Why is Data Visualization important?

Big data is a general term for data sets complex or so large that conventional data processing application is inadequate. Challenges include analysis, capture, curation, search, sharing, storage, transfer, visualization, and information privacy.

Big data is distinct from the internet, although the web makes it much easier to collect and share data.

90% of all the data in the world has been created over the last three years, 3.2 billion GB of fresh data is produced every day.

1.5 trillion connected objects and devices on the planet generated data in 2017. To understand such a huge amount of data, Data visualization is essential.

There are four main reasons we visualize data-

• Digest large amounts of data at scale

• Compare and contrast

• Spot trends and patternsCustomized

• Reveal questions that would otherwise be missed

Data visualization can also:

• Identifies areas that need attention or improvement.

• Clarifies which factors influence customer behavior.

• Predicts sales volumes.

• Helps you understand which products to place where.

Data Visualization Techniques

To create meaningful visuals output of your data, there are some basic techniques and tips you should consider. Size of the data and composition play an important role when selecting graphs to represent your information.

Before we move further here are some of the tips that you need to keep in your mind:

• Before starting the visualization understand the raw data. Like its size, and structure, how much effort it will take to get.

• Make sure you know very well what type of data you want to get to visualize.

• Keep the target people in your head, and represent the data the way your audience/readers want to get.

• Keep it simple and make everything visualizing.

Word clouds

Word clouds give corporations the idea of how frequently a word is used. The words in the cloud are of various sizes. The larger the scale – the higher the frequency. This technique may be helpful, for a model, for sentiment analysis of the customers’ social media posts.

Connectivity charts

Connectivity charts show the links between aspects or events. The chart below shows the connections between machinery failures and their triggers, as well as the strength of these connections.

Visualization techniques that work for both traditional and big data Some of traditional data visualization techniques accommodate big data as well.

Line charts

Line charts allow watching on the behavior of one or several objects variable over time and recognizing the trends. In traditional Business Intelligence, line charts can show sales, revenue development and profit for the last one year. When running with big data, organizations can use this visualization technique to track total website clicks by weeks, the average number of complaints/requests to the call center by weeks or by months, etc.

Pie charts

Pie charts present the components of the whole. Organizations that work with both big data and traditional may use this technique to look at client segments or market shares. The difference between them lies in the sources from which these organizations take raw data for the analysis.

Bar charts

Bar charts are used to compare the values of different variables. In traditional BI, companies can analyze their sales by category, the costs of marketing promotions by channels, etc. When analyzing big data, companies can look at the visitors’ engagement with their website’s multiple pages, at the most frequent pre-failure cases recognized by sensors and more.

Data Visualization for Big Data, Data Science, and IoT 

Data visualization can be helpful in many sectors. Wondered? Here are some of the popular sectors:

By using data visualization, it became easier for business owners to understand their extensive data in a simple format. The visualization method is also time-saving, so business does not have to spend much time to make a report on any work or solve a query.  They can quickly do it in less time and in a more attracting way.

Visual analytics shows a story to the viewers by their work. By using charts and images or graphs, a person can easily represent the whole concept. As well the viewers would be able to understand the entire thing easily.

The most complicated data will seem easy when it undergoes the process of visualization. Big data report gets transformed into a simple format. And it helps us to understand the concept in a natural way.

With the Data visualization process, it gets more comfortable for the business manager to understand their product growth. The visualization tools can be very useful to monitor an email campaign. Or company’s initiative regarding something. Market competition in a better way. 

Golden Rule of Visual Analytics 

Don’t use Visual Analytics if an automated solution exists.

Role of React JS  in Data Visualization 

As I told that React works on components. With the help of components, we can do the small modules that can be stateful or stateless, and pass the data to them with the props. 

The benefit of making a component is to use the component again and again in the same project. We can make reusable component so that if we have some data in our app, we don’t need to create a new component every time.

We all know that technology is changing day by day and people’s interest is also evolving with it. So, for a company or an organization has to be updated with the people interest. A company whether it is selling any product or has to arrange its employee record, it needs to have a database. But the problem doesn’t resolve here. A person can not understand the significant amount of raw data. To overcome this situation we started using charts and graphs. So one can easily assume the information what the data has hidden in it. 

There are so many javascript libraries, available free of cost for creating graphs, charts or treemaps by the raw data. D3.js, Canvas.js, Highcharts.js, etc. are the best example of it.

What is GraphQL?

GraphQL is a query language for the APIs for fetching your data and runtime for satisfying those queries with your current data. 

It is an alternative for the REST APIs. GraphQL is a multi-platform language. It works for all type of clients including Android, iOS or web.

GraphQL provides comprehensive and understandable information of the data in your API, gives clients the endowment to ask for exactly what they want and nothing more their need, makes it easier to evolve APIs over time, and enables powerful developer tools.

GraphQL works on a single endpoint principle.

You send a query to that endpoint/API by using a special Query language syntax. The server responds to a question by providing a JSON object.

Let’s see an example of such a query.

GET /graphql?query={ person(id: "1") { name } }

It will return JSON data like this: 

{     “Name”: “BOB” }

Why GraphQL 

Although REST is popular, or I can say universal, method of making the APIs, it’s fair to presume you are familiar with it, so let’s discuss the differences between GraphQL and REST.

Rest is a concept

REST is a de-facto architecture standard, but it has no specification and tons of personal definitions. GraphQL has a specification draft, and it’s a Query Language instead of architecture, with a well-defined set of tools built around it.

While REST is created on top of an existing architecture, which is the most common scenarios is HTTP, GraphQL is building its own set of conventions. Which can be an advantage point, since REST benefits for free by caching on the HTTP layer.

A single endpoint

GraphQL has only one parameter, where you send all your queries. With a REST approach, you create multiple endpoints and use HTTP verbs to distinguish read actions (GET) and write actions (POST, PUT, DELETE). GraphQL does not use HTTP verbs to determine the request type. 

GraphQL makes it simple to monitor for fields usage With REST, except forcing sparse fieldsets, there is no way to determine if clients server uses a variable, so when it comes to deprecating or refactoring, it’s impossible to decide on actual usage.

GraphQL makes it possible to monitor which fields are used by clients.

Tailored to your needs

The REST API will usually return you much more data than what you need unless you constrain the API server as well, and you customize your responses for each different request.

With GraphQL you explicitly request just the information you need, you don’t “opt out” from the full response default, but it’s mandatory to pick the fields you want.

This helps saving resources on the server, since you most probably need less processing, and also network savings since the payload to transfer smaller.

Role Of GrapahQL in Data Visualization 

To link the react with the GraphQL we should have known about GraphQL.  You all might be thinking that GraphQL might be libraries for plotting graph. But you are wrong. It is not a library for graphs.

GraphQL is a query language for the API and server-side runtime. It is a type system which we define for our data to execute the queries over the API. GraphQL isn't connected to any specific database or storage system and is instead backed by your existing code and data. For example, we have to fetch the users details of first 100 people of our organization, so we can set the limit parameter using GraphQL so that our API returns only 100 users details.

A GraphQL service is generated by defining types and fields on those types, then providing functions for each field on each type. For example, a GraphQL service that tells us who the logged in user is (me) as well as that user's age might look something like this:type Query {   me: User }

type User {   id: ID   name: String   age: Integer }   Along with functions for each field on each type: function Query_me(request) {   return request.auth.user; }

function User_age(user) {   return user.getAge(); } Once a GraphQL service is running, it can be sent GraphQL queries to execute and validate. A received query is first verified to ensure it only relates to the fields and types defined, then runs the provided functions to produce a result. For example the query: {   me {     name   } } {   "me": {     "name": "Luke Skywalker"   } }

To link the GraphQL with React.js app, we can use Relay.

A relay is a javascript framework for building the data-driven React applications powered by GraphQL. It is designed from the ground up to be easy to use, extensible and, most of all, performant. It is also developed by the Facebook. 

React allows designs to be defined as components where every component is responsible for rendering a part of the HTML. Composing other components is how to build complex UI designs. Each React component doesn't need to know the internal workings of the composed components.

Relay links React with GraphQL and develop the idea of encapsulation further. It allows components to define what data they need and the Relay framework gives the data. This makes the data needs of inner components covered and allows composition of that reqData Visualization with GraphQL and React.jsuirements. Thinking about what data an app request becomes localized to the component making it easier to reason about what fields are needed or no longer needed.

Relay life cycle has three points.

• Declarative-Declare the data your component needs with GraphQL, Relay manages how and when to fetch your data.

• Colocation -GraphQL is written next to the component that relies on them. Relay aggregates query into efficient network requests

• Mutations-Write GraphQL mutations and Relay offers automatic data consistency, optimistic updates, and error handling.

Declarative: Declare the data your component needs with GraphQL, Relay manages how and when to fetch your data.

Colocation: GraphQL is written next to the component that relies on them. Relay aggregates query into efficient network requests.

Mutations: Write GraphQL mutations and Relay offers automatic data consistency, optimistic updates, and error handling.

Recently Facebook launched the Relay Modern, that is the latest version of Relay. Relay Modern is designed to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. It accomplishes this with static queries and ahead-of-time code generation.

Compiler Architecture of the Relay

The compiler is a collection of modules created to extract GraphQL documents from across a codebase, optimize/transform them, and generate build artifacts.

Examples of basic types of artifacts comprise optimized GraphQL to continue to your server, runtime representations of the queries for use with GraphQL clients such as the Relay runtime, or produced source code for use with GraphQL structures for compiled languages (Java/Swift/etc.).

Data Flow

The graphql text is extracted from source files and “parsed” into an intermediate representation (IR) using information from the schema.

The set of IR documents forms a CompilerContext, which is then transformed and optimized.

Finally, GraphQL is printed (e.g., to files, saved to a database, etc.) and any artifacts are generated.

Runtime Architecture of the Relay

The Relay runtime is a full-featured GraphQL client that is developed for high performance even on low-end mobile/tablets devices and is equipped for scaling to vast, complex applications. The runtime API isn't expected to be utilized straightforwardly in the product code, yet instead to give an establishment to building more elevated amount product APIs, for example, React/Relay. This framework includes-

• A normalized, in-memory object graph/cache.

• A mechanism for fetching data from the cache and subscribing for updates when these results change due to a subscription update, mutation, etc.

• An optimized "write" process for updating the cache with the results of queries/mutations/subscriptions.

• A generic mechanism for intercepting data before publishing it to the cache and either synthesizing new data or merging new and existing data (which among other things enables the creation of a variety of pagination schemes)

• Garbage collection to evict entries from the cache when any view can no longer reference them.

• Mutations with the ability to update the cache with arbitrary logic and optimistic updates.

• Support for live queries where supported by the network/server.

• Core primitives to enable subscriptions.

Core primitives for building offline/persisted caching. Example Data Flow: Fetching Query Data

The query is fetched from the network/backend.

The query and response are traversed together, extracting the results into Record objects which are added to a fresh RecordSource.

This fresh RecordSource would then be published to the store:

Publishing the results updates the store but does not immediately notify any subscribers. This is accomplished by calling notify()..which requests the callbacks for any subscribe()-ers whose results have changed. Each subscription is tested as follows:

First, the list of data IDs that have been changed since the last notify() is compared corresponding data IDs listed in the subscription's latest Snapshot. If there is not any overlap, the subscription's results cannot possibly have been changed. In this case, the subscription is ignored. Unless processing continues.

Second, any subscriptions that have overlapping data IDs are re-read, and the new/previous results are compared. If the result has not been changed, the subscription is ignored (this can occur if a field of a record changed that is not relevant to the subscription's selector), otherwise processing continues. Finally, subscriptions whose data changed are notified via their callback.

Summary of React JS

With some essential features for the development of high-quality applications, React JS is a great Framework. Immediate visualization of work result, high rendering speed and proficient operation of components associated with the Reactjs is the most significant advantage of this tool. As far as some needs are concerned, we can summarize that React JS was designed from the start as an excellent representation layer and it just performs this primary role with excellence.

React holds an extensive and highly developed ecosystem which consists of compatible add-ons, plugins, libraries, and frameworks. On the contrary, great thanks to specifics of its DOM manipulation system, using React in parallel with any other tool which changes DOM or part, therefore, is quite a challenging task.

How Can Don Help You?

Interactive Dashboard Design:- Create Interactive, Intuitive and Visually Appealing Dashboards for Data Visualization.Don provides data visualization solutions for engaging and Interactive dashboards for Real-time and Batch Analytics and Visualization of IoT Devices and Network components

Customized Data visualization- Don Provides customized and Reusable templates Data visualizations solutions using React.js,HighCharts,Canvas.js and d3.js

Large DataSet Visualization:- Don helps enterprises for data exploration and visualization of a large dataset from 2 million records to 100 million records

Tableau, Power BI and QlikView Solutions for Data Visualization- Don also offers solutions integrating Gateways between Data On-Premises and Data Visualization using Platforms like Tableau, QlikView and Power BI for Data Security and governance.