Back to homepage

#GivingTuesday: Data Analysis of Charities in the USA with WebDataRocks

While Thanksgiving is a perfect time to express gratitude to people you appreciate, Giving Tuesday is a great chance to celebrate kindness and humanity. It’s an initiative that began in 2012, with a purpose to promote acting more kindly and generously.

And with this international day of charitable just around the corner, we’ve prepared a thematic tutorial for you.

Let’s take a Kaggle’s dataset about the charities in the USA and turn it into something meaningful. To explore hidden trends in the data, our helping hand will be WebDataRocks – a universal tool for reporting and data analysis.

Can’t wait to see the results? Jump right to the demo. Otherwise, let’s get hands dirty with practice!

Prettify the data

No data analysis starts without data preparation. Take a look at your data first – does everything suit you? If not, let’s put it in good shape. 

Firstly, we recommend converting CSV data to JSON since this format opens up more opportunities for customization of the way fields are displayed on the grid. 

Next, define the first object in the JSON array that will be responsible for setting data types and captions for the fields. Using a separate object in the data source for defining the view and properties of the fields helps avoid manual renaming fields. You can learn more details about its structure in the Data types guide. 

Create a report

It’s time to pick the hierarchies you want to see on the grid. With the Field List, place them into rows, columns, and measures. Next, apply filtering to display only those hierarchies that satisfy your goals. To see the most relevant records first, sort them in ascending or descending order.

Don’t worry – you can easily arrange the fields differently with the drag-and-drop feature and look at the data from another angle at any time. 

Format values

When averaging values, the numbers will likely have a lot of digits after the comma. And this is where number formatting comes in handy. Simply select the measure of interest and set needed options to beautify it:

You can also add the currency symbol and arrange its position.

Highlight values

In addition to sorting, you can emphasize values that speak most. Apply conditional formatting for this:

Now it’s easy to see in which cities animal charities have the highest revenue.

Check results

Voila! The report is ready to be presented to the audience. You can save it in JSON to restore work later or export to Excel, PDF, PNG, or HTML and share it with your colleagues. 

Play with code?

Interact with a ready-to-use reporting solution on CodePen. 

You can experience the full flexibility of the pivot table tool due to the dynamic nature of reports. Slice and dice your data to gain new insights about the data related to activities of charitable organizations across the USA.

About WebDataRocks

WebDataRocks is available at no cost for any kind of web project. 

To dive deeper into its functionality, check out the UI Guide – it covers every feature you have access through the interface. 

You can also find more information on interacting with the component via API and integrating with frameworks in the API Reference and the Available Tutorials section.  

If you’d like to try creating a dashboard with a pivot table, graphs, maps, and charts, we have something for you as well – a list of guides on integration with charting libraries. 

In the previous blog post, we defined a technology stack and discussed why it’s important to choose the right one for web application development. 

Now it’s time to discover the most prevalent technologies that are valued both by startups and large enterprises.

Let’s dive in our top of tech stacks you should draw attention to in 2020. 

MEAN 

Undoubtedly, the MEAN stack is the most popular full-stack solution. Being entirely JavaScript-powered, it brings numerous benefits to web developers among which is the usage of a single language throughout your stack. Another strong advantage is that all the underlying technologies are free and open-source. The community around it is vibrant and active. If any issue arises during the development, you can always rely on its support.

MEAN presents a modern approach for developing fast and robust apps. Besides, all the components of MEAN speak JSON which makes the data flow smoothly between the layers.

Using one language (JavaScript) both for client-side and server-side development improves the communication inside the team and helps to understand your product holistically.

Now let’s break down its structure and take a closer look at its components.

• MongoDB

MongoDB is a popular NoSQL database. Unlike relational databases, it stores data as JSON-like documents. Developers appreciate this database for these key advantages:

1. Scalability. MongoDB offers scale-out features, automatic sharding, and replica set to maintain constant availability 
2. Flexibility. Since it’s schemaless, there is no need to predefine schema. Yet, it’s recommended. 
3. Short learning curve. The process of configuring MongoDB is easy. Besides, MongoDB query syntax is easy. 
4. Performance. Due to the flexibility of JSON documents, developers can work significantly faster. Besides, documents make apps fast since all the data for an object is stored in a single document.

MongoDB copes well with big data. Due to being horizontally scalable, it fits perfectly mobile and social networking sites, e-commerce product catalogs, and any apps that rely heavily on geospatial data.

• Express.js

Express.js is a back-end web app framework that supports and hosts Node.js projects. It assists in organizing your app into an MVC architecture on the server-side. The main task of Express.js is to manage the workflow between the client-side and the data model, ensuring easy transferring of data to end-users. 

Being written in JavaScript, it’s cross-platform, free and open-source. Lots of features are available for web and mobile apps. 

With Express, it’s easy to build a robust API. Another thing to love Express.js for is its incredibly accurate error handling. 

• AngularJS / Angular

Angular is a front-end framework, developed and maintained by Google. According to the Stack Overflow Developer Survey 2019, it’s in the topmost used web development frameworks. 

Angular extends the syntax of HTML, runs JavaScript code in the browser and serves to make your app’s UI dynamic and interactive. It’s mostly favored by the well-tuned performance and templates that are perfect for building the front end of cloud-native apps. 

• NodeJS 

NodeJS is an open-source cross-platform engine for building server-side applications. It’s the true backbone of the MEAN stack. NodeJS serves as an integrated web server for the smooth deployment of MongoDB and the app itself to the cloud. 

According to the results of Stack Overflow’s Developer Survey 2019, NodeJS tops the rating of the most favorable frameworks, libraries, and tools. 

With NodeJS, you can breath more functionality into your app. Built on top of Google’s V8 JS engine, it’s acknowledged as one of the most efficient and lightweight server-side frameworks. It improves runtime performance and successfully handles data-intensive tasks which leads to faster app development and better scalability. NodeJS comes with the largest repository of libraries – npm. 

NodeJS is often preferred for microservice architectures. Therefore, it’s appreciated by enterprises and large-scale projects.

Companies that use the MEAN stack are PayPal, LinkedIn, Netflix, and the New York Times.

MERN

In its essence, the MERN stack is the same as MEAN stack but with Angular replaced by React. As well as MEAN, it successfully covers the full development process – from front end to back end. 

React

Developed and maintained by Facebook, React is one of the most popular frameworks for building interactive UIs. It’s appreciated by the reusability of components, high performance, and smooth learning curve.

MEVN

In this version of MEAN, Angular is replaced with Vue.js as a frontend framework. 

Vue.js  

Vue.js is rapidly gaining popularity during recent years. It embodies the best features of React and Angular. Its key advantages are a non-steep learning curve, excellent performance, neat programming style and a rich ecosystem of tools. 

LAMP

The LAMP stack is an industry-standard. It’s recognized for its performance, flexibility, and open-source nature. LAMP is often chosen for improving operational efficiency and reducing IT infrastructure costs. 

Let’s take a look at its structural components. 

• Linux

Linux is an operating system and a first layer of the stack. All subsequent layers run on top of it. 

• Apache 

Apache is an open-source and free HTTP server that transfers the content between the server and client machines upon request. To be precise, it fetches the content from the server, turns it to static HTML files and returns it to the browser. 

To be precise, it’s not a physical server but a software that operates on the server. It establishes a connection between a server and browsers of users (Google Chrome, Safari, Firefox, etc).

Since Apache is a cross-platform software, it works on Unix and Windows servers. 

Due to its module-based structure, it can be customized to enable security, caching, password authentication, etc.

• MySQL

MySQL is a relational database management system (RDBMS). It stores information that can be requested to build a website. 

• PHP

PHP is a programming language. Instead, you can use a similar web programming language, e.g., Perl or Python. 

All these layers are open-source and free products. However, since the stack can run smoothly on any operating system, you can choose different modifications and variations of the same stack:

• WAMP (Windows OS, Apache, MySQL, PHP)
• MAMP (Mac OS, Apache, MySQL, PHP)
• WISA (Windows, IIS, SQL, ASP.NET)
• BAMP (BSD, Apache, MySQL, PHP)
• XAMPP (distribution that contains MariaDB, PHP, and Perl)
• SAMP (Solaris, Apache, MySQL, PHP)

RoR (Ruby on Rails)

Ruby on Rails is a web framework written over Ruby – a dynamic programming language with an elegant syntax. With Ruby on Rails, you can build a complete web application by combining HTML, CSS, JavaScript, and Ruby.

Ruby on Rails has a lot of supporters since it makes writing and debugging code faster and easier. The greatest thing is that Ruby developers can reap benefits from open source tools that speed up development. 

Signature stacks

Now that we considered standard solution stacks, let’s discover which bundles of technologies stand behind popular web apps. The following combinations of technologies can be categorized as “signature stacks”.

Uber Tech Stack

• Web server: NGINX, Apache
• Databases: MySQL, PostgreSQL, MongoDB
• Server-side framework: Node.js
• Programming languages: Python, Java, JavaScript, Objective-C 

Reddit Tech Stack

• Server: NGINX
• Databases: PostgreSQL, Redis
• Server-side framework: Node.js
• Programming languages: JavaScript, Python

Pinterest Tech Stack

• Programming Languages: Python, Java, Go
• Framework: Django, Javascript MVC
• Databases: MySQL, Hadoop, HBase, Memcached, Redis
• Server: NGINX

Facebook Tech Stack

• Programming Languages: PHP, GraphQL, Hack
• Framework: Tornado
• Databases: Cassandra, RocksDB, Beringei, Memcached
• Server: custom/proprietary

Airbnb Tech Stack

• Programming Languages: JavaScript, Ruby
• Framework: Rails
• Databases: MySQL, Amazon RDS, Hadoop
• Server: NGINX

This time we covered the time-tested tech stacks that are used widely across modern applications. The right tech stack directly affects the success of your project. Hopefully, today you’ve got the step closer to finding your perfect match.

Empower your tech stack with analytics

If your app needs analytical and reporting features, you can always rely on WebDataRocks. Integrating with any front-end technology of your technology stack is as simple as ABC – check out available tutorials to make sure how seamless the entire process is.  

We continue our blog series on discovering awesome data visualization types. This tutorial suits everyone who wants to understand their geographic data better. 

Today we’ll focus on using one of the most popular visualization techniques for geospatial data – a choropleth map. And not only you’ll learn how to use this chart to represent the geodata but also how to efficiently combine it with a pivot table on a dashboard. 

Here’s what you’ll get as a result:

See the Pen WebDataRocks Pivot Table with Google Charts Map by WebDataRocks (@webdatarocks) on CodePen.

But first things first: what is a choropleth map?

Choropleth map 

Choropleth map is a data visualization technique that allows representing the data using different colors or shades of one color for different regions. Most often, it’s used to visualize how the variable varies across a certain geographic area. You can use this technique to communicate the correlation between the variable and a geographic location.

One of the best implementations of this data visualization method is a geo chart by Google Charts. Plus, it can be perfectly combined with another data visualization type – a pivot table.

Now let’s figure out how to create a dashboard in five simple steps. 

Step 1: Add a web reporting tool

The first step is to include the pivot table on the page. For this, we should follow the straightforward steps from the Quickstart guide.

Step 2: Connect your data

Choose the data format you prefer and load the file into the pivot table by specifying its URL or the name of the function that returns it.

Here’s how you can specify the data source in the report object:

filename: "URL-to-your-CSV-or-JSON-file"

or

data: getData()

Step 3: Create a tabular report

Now it’s time to select the fields to be displayed on the grid. Let’s put the “Country” hierarchy to the rows, “Category” to the columns and aggregate this data by “Revenue” – a calculated value built using “Price” and “Quantity” measures:

"slice": {
    "rows": [{
        "uniqueName": "Country",
        "sort": "asc"
    }],
    "columns": [{
        "uniqueName": "Category",
        "sort": "asc"
    }, {
        "uniqueName": "Measures"
    }],
    "measures": [{
        "uniqueName": "Revenue",
        "formula": "sum(\"Price\") * sum(\"Quantity\") ",
        "individual": true,
        "caption": "Revenue"
    }]
}

Step 4: Integrate with Google Charts

Add the Google Charts loader to the <head> section of your web page:

<script src="https://www.gstatic.com/charts/loader.js"></script>

To have access to the data preprocessing methods of WebDataRocks, include its connector for Google Charts: 

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>

Create a <div> container to hold the chart:

<div id="googlechart-container"></div>

Step 5: Connect the chart to the pivot table

Now that we’ve set up the web reporting tool and charts, let’s synchronize them. 

For this, we need a reportcomplete event. It’s triggered once the report has completed loading into the pivot tool.

Here’s how we can attach an event handler to it:

reportcomplete: function() {
    pivot.off("reportcomplete");
}

Additionally, we need two flag variables to track when both charts loader and the report are ready to be used:

var pivotTableReportComplete = false;
var googleChartsLoaded = false;

For loading the charts, we need to specify the mapsApiKey parameter:

google.charts.load('current', {
    'packages': ['geochart'],
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

We also need to set the callback function for the google.charts module to track if it’s finished loading:

google.charts.setOnLoadCallback(onGoogleChartsLoaded);

Once we’ve configured everything, let’s move on to a more creative part of the tutorial – drawing charts. 

Create the functions that are responsible for handling the drawing logic:

function createGoogleChart() {
    if (googleChartsLoaded) {
        pivot.googlecharts.getData({
                type: "bar"
            },
            drawChart,
            drawChart
        );
    }
}

function onGoogleChartsLoaded() {
    googleChartsLoaded = true;
    if (pivotTableReportComplete) {
        createGoogleChart();
    }
}

function drawChart(data) {
    var data = google.visualization.arrayToDataTable(_data.data);
    var options = {
        colorAxis: {
            colors: ['#449544', '#4ca64c', '#7fbf7f', '#b2d8b2']
        },
        backgroundColor: '#b3e5fc',
        datalessRegionColor: '#ffffff',
        defaultColor: '#f5f5f5',
    };

    var chart = new google.visualization.GeoChart(document.getElementById('googlechart-container'));
    chart.draw(data, options);

Since for mapping data, we’ll use a single-hue progression, in the colorsproperty, we should specify the palette – all the shades of the chosen color, from the lightest to the darkest. The darkest hue represents the largest values of the data, the lightest – the smallest values.

So, after we’ve defined all the needed functions, here’s how our event handler for reportcomplete looks like:

reportcomplete: function() {
    pivot.off("reportcomplete");
    pivotTableReportComplete = true;
    createGoogleChart();
}

Results

Hooray! Now your dashboard is rendered on the web page and we can use it for deriving insights from the geographic data.

The greatest thing about such a data visualization approach is that the elements on the dashboards are connected – the chart reacts to the changes applied to the report. Try filtering the data or moving the hierarchies between rows and columns to see the synchronization in action. 

What’s next?

Eager to discover more features of WebDataRocks Pivot? Check out our tutorials on integration and the UI guide.

Want to customize the charts further? The editable examples from the Google Charts documentation will help you to find out how to do it. 

Let’s outline the essential aspects every developer needs to know about a technology stack and how its selection can affect the entire process of software development. Further, we’ll stress the top things you should pay attention to when choosing the tech stack for your project. 

We do hope that this article will help you get a full picture of the tech stack’s purpose and understand how to make a smart choice of the one that fits your project at best. 

Let’s start!

What is a tech stack in software development?

Even if you are already well-familiar with the concept, let’s recap its definition. 

A tech stack (also known as a solutions stack) is a bundle of tools, namely programming languages, libraries, frameworks, and databases that come together for the development of a particular web, mobile, or hybrid application. 

Such a name is given to this concept not without a reason – each subsequent layer of the stack builds on top of the features of one underneath it. All of them are brought together around one common goal – to assist in building, testing and running your application. 

Though this concept can be found in many areas, the term itself emerged in the software development community. It meant to simplify communication between developers and help to indicate the application’s strong and weak points. 

Structure of a tech stack

Every tech stack is different, yet, they all share a common structure. It’s comprised of two major components –  front end and back end. The front end is responsible for the client-side part of your app while the back end is in charge of its server-side functionality. 

What is a back end stack?

A back end is the backbone of your application. It refers to everything that is not visible to users but ensures the proper functioning of the app. Behind the scenes, it takes care of things like security, content management and the structure of your app. 

Structurally, the back end consists of the following components:

• Programming languages (JavaScript, Node.js, Ruby, C#, Perl, PHP, Python, Java, Go, Scala, Elixir, etc)
• Server-side web frameworks (e.g., .NET, Django, Flask, Mojolicious, Laravel, CakePHP, Ruby on Rails, Phoenix, Express JS, AdonisJS, Spring Boot, etc)
• Databases (MySQL, Oracle, MongoDB, GraphQL, etc)
• Web servers (Nginx, Express, Apache, Apache Tomcat, IIS, Google Web Server, etc)

Let’s break down the purposes of all the back end’s building blocks. A back-end developer has to work with programming languages that databases understand to ensure the communication between web services, database systems and the application itself. A framework simplifies and speeds up development. A database is used for storing your application’s data. In addition to a database, a caching system is required to be set up to reduce the load on your database (e.g., Memcached, Redis, etc). A web server handles requests that come from the client-side, i.e., your app’s users. 

What is a front end stack?

And now let’s look at the front-end more closely. 

A front end is responsible for a visual part of an application. It defines what your users see and how they can interact with your app. The core purpose of front-end web development is to create a seamless user experience and maximize its quality by making the interface accessible to any user.

As a rule, a front end is a part of the project where the development starts since it’s the most important thing to show to your customers in the first stages. 

What are the cornerstones of the client-side?

• HTML
• CSS
• JavaScript

This is a classical trio of tools for implementing designs on the web. HTML defines the structure and layout of the application’s content. CSS tells the browser how this content has to be styled with colors, fonts, etc. JavaScript is a scripting language that is responsible for making web pages interactive (i.e. defining the rules of how, when and where the content should be modified, hidden or removed). Often, front-end development becomes heavily JavaScript-oriented, especially if a web application is highly interactive.

A modern front-end developer needs to be familiar with the principles of responsive design, test-driven development, front-end frameworks and libraries (React, AngularJS, Angular, Vue, Ember, Bootstrap, Foundation), and basics of server-side rendering. Also, knowledge of the principles of working with SASS and LESS adds a competitive advantage since these pre-processors for CSS provide more flexibility and modularity when it comes to your app’s styling. Front-end developers should know how to use graphic design tools that allow building the application’s prototypes, experiment with the user interface and deliver the final variant. The most popular software is Balsamiq Mockups, Illustrator, Figma, Photoshop, Sketch. Try at least several of them to find your perfect match. 

Why tech stack matters

The technology stack is a foundation of your application. The underlying technologies make a significant impact on how your app is functioning and how it will perform in the future. It also can affect the scalability of your app. That’s why developers should take the task of selection responsibly and with exceptional care.

Once you’ve chosen the tech stack, try to understand its strengths and weaknesses. This will help you to know how to benefit from the former and alleviate the latter. 

How to choose your tech stack

If you struggle to make the right choice on the tech stack, there are some general guidelines for you to follow.

• Take into account the size of your project – it can be small, mid-range or large. Small projects are often built on top of Node.js – React and Python-Django stacks. If you need only a simple landing page, consider using WordPress. Mid-size projects (e.g., online stores, etc) need more complex stacks such as MEAN, LAMP, or MERN that prove to perform well. Large projects require more scalability, speed, and maintainability. So, you need to find the stack that leverages well both performance and customer satisfaction. 
• Scalability. Depending on the technologies you choose, your app may have different scalability capabilities. This factor should be taken into consideration as early as possible. If you are building a service that will be accessed by thousands and millions of users, think about programming languages that support high-read operations and databases that are scalable. In this case, you can try MEAN stack.
• Consider your app’s type. Will it be a mobile or desktop app? If a mobile, then for which platform – Android or iOS? If a desktop, which browser will it use? It’s always better to launch the MVP of your app only on a single platform – web or mobile. After you made enough process in developing and distributing your product, you can proceed to build the second app’s interface. 
• Stick to the mobile-first design paradigm and build a responsive web application.
• Make sure you have enough engineers with the required skills.
• Try to predict whether your tech stack will scale. However, the lion’s share of performance issues is related to application design rather than a choice of technologies. So, be ready to tune and optimize your app’s design. 
• Evaluate the cost of development. After studying carefully the tech stacks that correspond to the needs of your app. Before choosing the paid tools for development, compare the cost of a resulting stack and usability of the features it provides. Rather than investing in expensive tools or building custom ones from the ground up, try researching their free alternatives. You can reap a lot of benefits from the open-source products. 

Vue.js is a progressive JavaScript framework that enables web developers to create UIs in an elegant and efficient manner. Lately, it started to attract more and more attention from wider circles of the web development community.

And not without a reason – among the most prominent features of Vue are a smooth learning curve, concise programming style and high performance due to the automatic tracking of the component’s dependencies during its rendering. Besides, its core concepts are well-documented.

As the Vue.js community grows in size, so does its ecosystem of development tools. Let’s explore its best representatives in more detail.

Vue CLI

Vue CLI is a standard utility for rapid Vue.JS development. It provides your Vue app with access to the build tools and ensures they work smoothly together, allowing you to fully concentrate on bringing your ideas with code rather than on configuring the app. 

The flexible plugin system of Vue CLI supports Babel, TypeScript, ESLint, PostCSS, PWA, Jest, Mocha, Cypress, and Nightwatch. Plus, thanks to this system, developers can share their plugins with the community.

To my mind, the greatest thing is that you can make use of various configuration and customization options to meet your project’s specific needs.

Another thing you’ll love is a mighty GUI of Vue CLI that makes creating, configuring and managing projects a lot easier. Besides, Vue CLI has out-of-the-box support of unit & end-to-end testing.

Storybook

Storybook is an open-source environment for developing, managing and testing UI components. Seamless configuring components through a flexible API is what makes it a must-have tool for building UIs efficiently. 

With Storybook, you can create awesome components and demonstrate them in an isolated environment. Since it runs outside your app, you don’t need to worry about your app’s dependencies and specific requirements. 

If you want to implement extra features for Storybook, you can try addons functionality. 

Vuetify

Vuetify is a component framework that offers a broad range of stunning UI components. All the components adhere to the principles of Material Design. You can use this framework for building mobile, server-side rendered, single page, and progressive web apps as well as for regular HTML pages.

To get familiar with everything Vuetify has to offer, browse the components, pick those you like the most and get hands-on experience with them in your app. Try one of the pre-made layouts, design your own theme or style your components with colors, spacings, typography and more. 

Another aspect I’d like to highlight is its rich ecosystem which includes a theme generator, vuetify-loader, Cognito module, and other tools. Moreover, the components are well-documented and accompanied with nice examples. 

To my mind, this framework can meet the needs of any project. Plus, you can select only specific components to be used within your app. This approach allows you to control the size of your app by making it more lightweight.

VuePress

VuePress is a static site generator tool. It offers blogging features and a plugin system. You can build custom themes and use ready-to-use community themes. 

Let me break down the essence of its work. After you write the site’s content using Markdown syntax, VuePress transforms it into static HTML files. As soon as these files are loaded, your site runs as a single page application (SPA) backed by Vue, Vue Router and Webpack. 

The main advantage of this approach is that you can include Vue code or components within Markdown files. That’s why the development comes out as flexible and you can create a website like a regular Vue app. 

VueX

VueX is a state management system for Vue apps. You can use it as a centralized store for the application’s components and define rules that ensure that states are mutated merely in a predictable manner. 

Let’s take a closer look at the structural components of VueX:

• state – an object that contains the app’s state
• getters – objects that provide methods used to access the state. They act like computed properties for stores. 
• mutations – objects that provide methods for affecting the state. Mutations may remind you of events since a mutation has a string type and a handler – a function in which we modify an actual state. 
• actions – objects that provide methods for triggering mutations and running async operations. 

Also, it’s worth to mention modules as an inevitable part of VueX. Modules may come in handy when your application starts to scale. It’s a good practice to organize your code in modules to separate the store into individual pieces and hence simplify its maintenance. Each module has its own state, mutations, actions, and getters. 

Other cool built-in features you may like are hot-reloading mutations, modules, actions, and getters during development. 

To my mind, VueX perfectly copes with shared state management. But if your application is as simple as single page application, then you most likely don’t need Vuex. You should use it if you are building a medium- or large-scale single page application and facing the problem of handling the state outside of your Vue components. 

Nuxt

Nuxt is another progressive Vue-based framework for building modern web applications. Under the hood of Nuxt, there are Vue official libraries (vue, vue-router, and vuex), and web dev tools (as webpack, PostCSS, and Babel) being used. 

With Nuxt, you can build all kinds of Vue applications – from static landing pages to sophisticated enterprise-ready ones. It has a modular ecosystem that enables you to easily connect REST and GraphQL endpoints. 

Other built-in features include server-side rendering, automatic code-splitting, ES2015+ transpilation, powerful routing system with async data and a lot more. 

To my mind, the best thing about Nuxt is that it lets you enhance the development experience by providing the functionality for making the app structured and optimized. 

To get a better idea of how Nuxt.js can be used, dive into examples and explore its API. 

If you want to contribute to its development, you are welcome to do it on its GitHub. 

Gridsome

Gridsome is a modern framework for building fast and secure websites that can be deployed to any static web host or CDN (Netflify, Amazon S3, etc). Though it’s relatively new (released in 2018), there are already a lot of adopters and followers among Vue developers. Its creators were inspired by Gatsby.js (a site generator for React). This inspiration resulted in building a similar framework but for Vue.js. 

Let me explain how it works. Gridsome generates SEO-friendly HTML files based on the data source you provide within your app. The data source can be any – Markdown, CSV, Yaml, JSON, WordPress, Drupal (any other CMS), MongoDB, Airtable, etc. After loading the content, it’s turned into a single GraphQL Data Layer that serves for centralized data management. Now you can use extract this data and use it for building and deploying your Vue application.

The use of a universal GraphQL layer for all the data sources connected to the app is what makes Gridsome so unique. Due to it, data management is greatly simplified since the GraphQL layer acts as centralized storage and can be used by any page or component. 

Another aspect I’d like to mention is a plugin ecosystem of Gridsome. You can take advantage of diverse plugins developed by the community of developers or even create your custom one. 

Other out-of-the-box features are automatic code-splitting, static file generation, dynamic and file-based routing, hot-reloading, etc. I recommend taking the time exploring all other features of the framework.  

Besides, not only it’s free but also open-source. Any contribution to the project is more than welcome since it’s a young project created and maintained by two Vue enthusiasts. 

Learn more

If you are searching for ways to improve your VueJS coding skills and deepen knowledge in its specific concepts, we recommend you to explore GitConnected – there you can find plenty of tutorials on how to build apps with VueJS.

The best way to succeed in the field of data science or data analytics is to complete structured courses designed by industry experts. 

And here is why. 

The primary value of such courses is that you learn the subject in a logically organized way. 

But courses shouldn’t stand alone. When coupled with real-life projects, they help you to get a deeper knowledge of how everything works.

Another advantage of such courses is that you can learn everything at your own pace and from anywhere in the world. Modern courses allow you to be truly flexible. There is no room for “no-time” excuses – you are free to make a learning schedule that suits you the best. No less important is interaction with the community of peers who are in the same boat as you are. By getting into thematic discussions on forums, you can move forward noticeably faster.  

To simplify your way to developing an intuition behind algorithmic techniques, statistical and mathematical concepts, and master programming skills, we’ve picked for you the best-in-class free data analytics and data science online courses that deliver the most current knowledge and cover cutting edge models and techniques. During the completion, you’ll be given a chance to gain hands-on experience with coding assignments and solve real-world business problems. 

Let’s dive in!

Data Science Courses

• Data Science fundamentals by IBM
• Probability and Statistics in Data Science using Python by UC San Diego
• Essential Math for Machine Learning: Python Edition by Microsoft
• Statistical Thinking for Data Science and Analytics by the Columbia University
• Data Science Math Skills by the Duke University

Data Science and Analysis Learning paths

Another way to start data science and analytics journeys is with tracks on DataQuest.io. There are a lot of awesome career paths available:

• Data Analyst in R
• Data Analyst in Python
• Data Scientist in Python

DataCamp also has to offer comprehensive career tracks in data science and analytics. Check them out: 

• Data Scientist with R
• Data Scientist with Python
• Data Analyst with R
• Data Analyst with Python

During all these missions, you’ll face exciting challenges as well as get the intuition behind the basic concepts, apply statistical and ML models to real-world scenarios, and master programming in Python or R. 

Data Science Specializations

• Applied Data Science with IBM
• Advanced Data Science with IBM
• Introduction to Data Science with IBM
• Data Analysis and Interpretation Specialization by Wesleyan University

Since many courses simply bombard you with the theory, we’ve selected only those that contain practical coding exercises and help to build a solid foundation of maths and statistics behind data science and analytics. All of them are created by professional data scientists who are eager to share their knowledge and simply teach you complex concepts.

We do hope you’ll find the best fit for you, get enough soft and hard skills and create a stunning portfolio to kickstart your career.

We hope you’ve had enough time to get acquainted with WebDataRocks Pivot Table and make sure its functionality is the best fit for your analytical app.

Here at WebDataRocks, we strive to provide you with the quintessential features for data visualization and analytical reporting:

• Connecting to local or remote CSV and JSON data sources 
• 17 aggregation functions for data summarization
• Filtering by members, values
• Report filters
• Sorting
• Customization options
• Exporting and saving results in different formats
• Extensive JavaScript API
• Conditional & number formatting

All these features work together to help you compose interactive reports and understand your data better.

What if you need more data to load?

You may have noticed that WebDataRocks perfectly works with data sets that do not exceed 1 MB. This quality satisfies most of the pivot’s users. 

But what if your business starts rapidly scaling? 

That particular moment can be hard to predict but it’s important to be prepared for any sudden changes in advance. Especially if your data also starts growing in size and the need to find scalable solutions for data analysis arises.

That’s exactly the case for which we’ve decided to prepare you. To handle either rapid or expected growth of your business successfully, we suggest migrating from WebDataRocks to Flexmonster – a more sophisticated and flexible reporting tool. 

If you are ready to discover more exciting features of Flexmonster Pivot which your project will certainly reap the benefits of, move ahead! 

1. Beyond CSV and JSON: working with other data sources

Surely, CSV and JSON are the most common data sources when it comes to storing the data. And WebDataRocks perfectly copes with its processing. 

But if you prefer to load the data directly from the database, you can try connecting to relational or NoSQL databases from Flexmonster Pivot.

Or if your data comes from an OLAP cube, you can connect Microsoft Analysis Services and start pivoting your data in minutes.

Lastly, if you prefer Elasticsearch to any other data storages, that’s not a problem at all likewise. You can easily connect to the index from the pivot table just as fast.

As you can see, Flexmonster provides a lot more data source options to which you can connect.

What else deserves special attention is the special algorithm under the hood of Flexmonster which ensures the data from the cube or index is loaded piece-by-piece, meaning the component loads only the data that is specified by the current slice. 

This approach guarantees that all the data calculations are performed on the server-side and less data is loaded into the browser thereby improving the overall performance of your app.

2. More flexibility of integration

The developers can experience more flexibility in terms of integration with the most popular tech stacks. Among the solutions stacks in which Flexmonster proved to work smoothly are LAMP and MEAN.

As for front-end frameworks, libraries, module loaders, bundlers, and languages, you can integrate the reporting tool with AngularJS, Angular, React, webpack, RequireJS, TypeScript, ASP.NET, PhoneGap, and a lot more. 

Check out the full list of client-side technologies for which Flexmonster provides ready-to-use wrappers and integration instructions. 

3. Extended filters

You may especially like more sophisticated filtering options of Flexmonster Pivot. 

As in WebDataRocks, you can easily manage how and when filters are applied to your data but using more versatile queries. 

Take advantage of filters by date – we are sure that your end-users may find these extremely powerful for their reports.

4. Total alignment with Material Design

What is distinctive about Flexmonster is its UI design inspired by the principles of Material Design. It makes the component totally suitable for any app, no matter where it’s published  – on Android, iOS or web. 

5. More customization options

As well as in WebDataRocks, you can customize the Toolbar, apply predefined themes, localize UI labels, customize cells, and configure exporting options of Flexmonster. 

However, you can feel even more freedom of personalization and change the component in line with the needs of your project. For example, you can completely change the context menu to add custom scenarios for the right-click action, enable search in the Field List, and a lot more. There are also more date and time formatting options available. 

If you want to dive into other visual customization options, refer to the Customizing appearance section.

6. Pivot Charts

This is the feature exclusive to Flexmonster. In addition to integrations with charting libraries, you can benefit from Pivot Charts that are always at hand. 

To understand patterns hiding in your data visually, simply send summarized numbers to Pivot Charts in a few clicks:

You can even try the split view to look at both charts and the grid at the same time.  

7. Extended API

The JavaScript API of Flexmonster offers many more API calls. For example, you can partially update data in the runtime, define custom sorting for hierarchy members, and more.

8. Advanced customer support

If you choose Flexmonster, you’ll also get new minor features and updates every two weeks. Besides, the Flexmonster Support team is always ready to help you to manage a case of any difficulty on the Forum. 

Discover Flexmonster Pivot Table & Charts

Feeling you need more data to analyze? Then you should give Flexmonster a try. Learn more in our documentation.

You have 30 days to test its functionality without any commitment and decide whether to move to a new solution or not. Oh, besides, it’s really easy. We’ve prepared a special guide for you to make the transitioning completely seamless.

You may also be interested in:

• Recent Flexmonster UX updates
• What makes Flexmonster the fastest Pivot Table on the market? 

Today we’re going to talk about analytics. To be more precise – HR analytics.

We’ll clarify why it is so important for small-, medium- and large-sized businesses and how you can implement a custom solution for HR data analysis simply using charts and a pivot table without investing a lot of developer resources? 

You might be wondering: why does your company need to focus on it at all? – Fortunately, we have all the answers for you here.

First of all, it helps to evaluate the performance of the company’s departments and answer crucial questions regarding the work of employees. 

Though often being underestimated, HR analytics also gives the power to transform how the HR department performs by testing the effectiveness of the implemented strategies. 

In other words, provided that you use analytics to the fullest extent, you can improve employee performance, get a bird’s eye view of your business and make data-driven decisions relying on extracted insights rather than simple intuition.

Before the start, we suppose you’ve already managed to outline your business goals. The goals may vary from company to company but the foremost ones may include:

• recognizing trends in the current workforce.
• increasing employee retention rates, engagement, and performance.
• predicting voluntary and involuntary turnover.

Then, you need to identify metrics to track.

We took care of it and have prepared a kind of memo for you.

It’s fundamental metrics we’re going to analyze in this tutorial and corresponding types of visualization. (!But bear in mind that you can always calculate your own metrics with the help of tools we’ll mention below).

• Employee productivity (efficiency). This is the ratio of the employee output’s amount to time spent on a particular task or project.
• Turnover rate. Measures the number of employees leaving a company over time. With the multi-line chart, we can track a turnover rate in each department. This metric is often the center of the HR manager’s attention. The goal is to minimize this number.
• Revenue per employee. Measures the revenue per employee.
• Retention rate. This is the opposite of a turnover rate. Measures the percentage of employees remained at the end of a period. We can also measure it by the department.
• Employee engagement. Measures the level of the employee’s commitment. It is mostly affected by satisfaction and stress levels. We can use the line chart to track engagement for each person over months. Or within each department.
• Training costs per employee. Column chart.
• Overtime hours by departments and age groups. Best to analyze with a column chart.
• The number of part-time employees in the company.
• Hires to the goal. Total hires required to achieve the specified recruitment goal within a fixed time.
• Absenteeism (absence rate). Measures the percentage of total working time when employees are absent from work. You want it to be as low as possible.
• Ranges of salaries by departments.

And finally, demographics-related metrics:

• Employees’ countries of origin. We can display the top countries in a pie chart.
• Gender ratio. The ratio between the number of females and males in the company. Pie chart works here best since there are only two categories to depict.
• Age groups. Column chart.

Now, check all your data that you’ve already collected from various sources and start building your HR analytics solution.

We suggest the most popular way to communicate all the data through an interactive dashboard. You can easily implement this approach by combining WebDataRocks Pivot with Highcharts.

Both libraries work together like a charm and soon you’ll make sure of it. Let’s go-ahead to the dashboard’s creating!

Step 1: Add Highcharts dependencies

We’ll be adding all scripts into the <head> section of the web page to ensure they are run before the rest of the page is loaded.

To access Highcharts, include these scripts:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

Let’s also add the export module to allow end-users to download charts as PDF, JPG, PNG, or SVG images:

<script src="http://code.highcharts.com/modules/exporting.js"></script>

If you want to enable exporting without an internet connection, you can add this script instead:

<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>

Add containers where the charts will be rendered:

<div id="piechart-container"></div>
...
<div id="barchart-container"></div>

Create as many containers as there will be charts on the dashboard.

Step 2: Add WebDataRocks Pivot

It’s time to configure a reporting tool in your project.

Include WebDataRocks scripts and styles:

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet">
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

To apply the dark theme, add the corresponding styles:

<link rel="stylesheet" type="text/css" href="https://cdn.webdatarocks.com/latest/theme/dark/webdatarocks.min.css" />

Create the container for the pivot table:

<div id="pivot-container"></div>

Step 3: Initialize the pivot table on the page

var pivot = new WebDataRocks({
    container: "#pivot-container",
    toolbar: true,
    report: {
        dataSource: {
            data: getData()
        }
    }
});

To load data into the component, define and set a function that returns the JSON data:

function getData() {
    return [
        {
            "id": 1,
            "Full Name": "Sallyanne Tryhorn",
            "Job Title": "Software Consultant",
            "Country": "Sweden",
            "Gender": "F",
            "Employee Engagement": 0.8,
            "Part-time": "No",
            "Revenue per employee": 889,
            "Hours Spent for Project": 66,
            "University": "Kalmar University College",
            "Currency": "SEK",
            "Department": "Business Development",
            "LinkedIn Skill": "Brand Management",
            "Month Salary": 1229,
            "Overtime Hours": 12,
            "Employment start date": "9/26/2015",
            "Age Group": "<21"
        }
    ]
}

Don’t forget to specify data types for JSON!

Step 4: Create a report

Now that your pivot contains the data, it's time to analyze it. 

To provide your end-users with a meaningful report, set a slice that describes which hierarchies have to be placed to the rows, columns, and measures.

As well as a report, this object has a JSON structure:

"slice": {
    "rows": [{
        "uniqueName": "Department"
    }],
    "columns": [{
        "uniqueName": "Measures"
    }],
    "measures": [{
        "uniqueName": "Total Overtime Hours",
        "formula": "sum(\"Overtime Hours\") ",
        "caption": "Total Overtime Hours"
    }],
    "sorting": {
        "column": {
            "type": "desc",
            "tuple": [],
            "measure": "Total Overtime Hours"
        }
    }
}

This slice helps to get an understanding of the overtime hours by departments. 

Try exploring the data interactively - drag and drop the hierarchies on the grid and save the resulting report.

Step 5: Pass the data to the charts

Before creating the charts and filling them with the data, we need to process the data to the appropriate formats.

Each chart requires a different data structure. To save your time, add the WebDataRocks connector for Highcharts to get access to the ready-to-use methods that handle data processing:

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.highcharts.js"></script>

Next, we need to write code that performs the following scenario for each chart type:

• Gets the data from the pivot table component. On this step, you can specify which subset of the data you want to visualize.
• Processes this data with the help of the connector's methods.
• Creates the chart and sends the data to it.
• Each time the report on the grid is updated, the renewed data has to be resent to the chart.

To know whether the pivot table is ready to provide the data, we should use an event handler for reportcomplete.

Here's a simple example of the handler you can attach to the event:

reportcomplete: function() {
    pivot.off("reportcomplete");
    createPieChart();
    createBarChart();
}

To keep the blog post concise, I prefer not to include all the code here - you can find all the details of charts creating in the CodePen demo. You can also see there how to apply a dark theme for Highcharts.

Step 6: Enjoy the resulting dashboard

See how the dashboard looks like as a result:

This dashboard is completely ready to be an efficient instrument for HR analytics. Your end-users can interact both with a pivot table and charts, change reports on the fly and look at the data from multiple angles.

Coupled together, the pivot table and charts complement each other and make your data speak.

Hopefully, the presented approach will help you to get insights from the data, showcase your data story to the colleagues and improve the business performance in the long run. 

People often ask: how data analytics and data science differ from each other? For many, it may be hard to differentiate these two disciplines. And today we’ll try shedding the light upon their principal distinctions. 

To my mind, it’s not quite right to oppose these disciplines with each other. Instead, it’s more beneficial to consider them as parts of a single whole. 

Data Science

Data science is an umbrella term that embraces data mining, data analytics, machine learning, and other disciplines. Its primary goal is to extract insights from massive collections of raw unstructured, semi-structured and structured data sets. 

A significant difference between Data Science and Data Analytics lies in their goals and tactics. For example, a data scientist is more concerned with finding the right questions to ask while a data analyst intends to obtain the right answers based on the existing questions to the data.

Also, these disciplines are different in scopes. While data science produces broader insights on the subject and identifies inherent trends in the data, data analytics aims at focusing on more concrete / narrower goals. 

Skills to become a proficient data scientist

Hard skills

A skilled data scientist has to know how to collect data sets from diverse sources, preprocess it by cleaning and transforming disordered data, extract required features and implement machine learning techniques to gain insights into the data. 

Equally important is to know how to perform predictive analytics, sentiment analysis and integrate analytics with enterprise-scale systems. 

Tools and languages

Along with ML techniques, a data scientist has to know Python, R, Scala, or/and SAS/STAT well, have a strong background in maths, probability, and statistics. 

Since the data that data scientists work with is most often stored in relational databases, SQL expertise is a critical skill that can’t be underestimated. You need to know how to write basic and complex, nested queries to get the precise data you need.

Understanding how to work with unstructured data is especially valuable – in most cases, you’ll work with messy data. The ability to work with NoSQL databases (MongoDB, etc) is also highly appreciated.

Soft skills

A qualified data scientist should possess not only exceptional technical skills but also outstanding communication, problem-solving, and prioritization skills. Another key skill is a clear understanding of the data from a business point of view.

Given the above, data scientists are proficient data analysts with solid programming skills.

To be a good data scientist, you must be an excellent data analyst. But the opposite is not always true. 

Skills to become a proficient data analyst

A data analyst has to be skilled at descriptive statistics, visualizing data, and reporting insights gained from the data.

Like data scientists, data analysts have to be proficient at statistics, working with databases, and looking at the data from multiple angles. 

Hard skills

Must-have skills for data analysts are: 

• Knowledge of R and Python
• Experience with Tableau, Power BI
• Ability to prepare the data for analysis
• Solid maths and statistics foundation
• The ability to create visualizations with Python/JavaScript libraries (e.g., pivot tables, charting libraries) is a plus.

Soft skills

A skilled data analyst has to expertly communicate their findings to a wide audience of decision-makers by using various data visualization and reporting methods. Data analysts have to constantly cooperate with other team members, be good at problem solving and research. 

No less important is to be attentive to the smallest details and be able to present complex concepts in a simple language. 

---

To summarize, data science and data analytics have a lot in common, yet, they have differences that can be nonobvious at first sight. Today we’ve covered the major aspects that differentiate these two powerful disciplines and outlined must-have skills for data scientists and data analysts.

Have you read? 

• Best Public Dataset Sources for Data Analysis and Machine Learning

What is React

React is a front-end library created and maintained by Facebook.

The central idea behind React is that everything can be built with reusable components which have own lifecycle.

Among companies that choose React as a front-end technology, you can find Netflix, Dropbox, Coursera, IMDb, Khan Academy, New York Times and a lot of other notable organizations.

If you asked us what are the main features that make React great for the development of user interfaces, we’d outline these:

• Quick process of writing components with JSX.
• Virtual DOM & the diffing algorithm that ensure effective updates of the DOM tree, leading to higher app’s performance. This aspect is critical for building large-scale applications with real-time data.
• Stability of code due to the downward data flow.
• SEO–friendliness.
• Ability to build mobile apps for iOS and Android platforms with React Native.
• Shorter learning curve comparing to Angular. As soon as you are comfortable with the concepts of components and their lifecycle, you can proceed to create user interfaces.

Another advantage of React is its rich ecosystem that’s backed by the strong community of developers across the globe. Thanks to them, all possible tools are available to you: IDEs, extensions for code editors, plugins for web browser, boilerplates, libraries, etc. And these are what we’re going to dedicate this blog post to.

Regardless of your level of expertise, you can greatly benefit from tools that speed up web development. To simplify your searching, we’ve picked the most useful tools that will help you to build a successful project.

Let’s take a closer look at them.

CodeSandBox

CodeSandBox is on the top of our list. And not by chance – it’s one of the most progressive online IDEs we know. The companies that use CodeSandBox are GitLab, Atlassian, Shopify.

With the available toolkit, you can create any type of web project that uses React, Angular, Vue, Vanilla JS, Preact, Reason, Svelte, CxJS, Unibit, Dojo as client templates and Next.js,  Nuxt.js, Gatsby, Ember, Apollo, Nest, Node.js as server templates. If you don’t want to be limited to provided templates, you can create your custom ones.

The finished sandboxes can be deployed to Zeit or Netlify.

The IDE smoothly integrates with GitHub: you can import your repository as a sandbox which will stay in sync with the original repo.

You can even create commits and open pull requests from a forked sandbox. It’s also possible to create a new GitHub repository based on the existing sandbox.

Another cool feature is that React DevTools are integrated directly inside CodeSandBox. 

The feature we’d like to highlight is the capability to embed the project anywhere, even on Medium. This is what makes it perfect for sharing projects.

Lastly, the IDE is almost entirely open-source – you can contribute to its development.

Rekit Studio

You shouldn’t miss this stand-alone IDE as well. Rekit Studio offers a lot of features which make building scalable web applications with React, Redux, and React Router easier: code generation, dependency diagraming, building, unit tests, navigating code in a meaningful manner. It also facilitates refactoring, which is especially important for large-scale apps.

With the project explorer, you can quickly navigate between project elements.

To understand your code better, you can always review your project visually – Rekit generates diagrams that display dependencies between features, modules, and actions. This functionality increases the visibility of your work and simplifies refactoring.

Read about it in more details on freeCodeCamp.

React Studio

Whether you prefer using a design- or code-first approach for building projects, you are going to like React Studio.

It provides the functionality that makes easier to control all the top-level aspects of your application’s design, assemble the components into an application and keep your code clean. As soon as you’re satisfied with your project, you can publish it right to the web. All these features bolster rapid development.

It should be noted that the IDE is especially suitable for designers. Completely from scratch, they can create a web application via the drag-and-drop gesture and test it even before the real-world data is available.

Other features for designers include built-in drawing tools for Illustrator, Photoshop, and Sketch.

Discover more about new features of React Studio on Hackernoon.

React boilerplate

React boilerplate is a real find for developers who want to enhance their performance. It automates everything – creating of components, routers, containers, selectors right from the CLI.

The built React applications are offline-first, meaning that they remain accessible to the users even without a network connection.

When editing code, you can see changes to the CSS and JS in an instant, without the need to update the page.

Other features for development involve state management, support of the most up-to-date JavaScript features, composable CSS.

You are free to contribute to this evolving project on GitHub.

Create React App

Create React App is an official start-kit for React created by Facebook. It considerably reduces time spent on configuring projects. With one simple command, you can create a project with its live development server, compiled React, JSX, ES6, CSS files. For testing, ESLint is used.

Keeping the library up-to-date is effortless as well – once a new version of Create React App is rolled out, you can update it with a single command.

React DevTools for Chrome

React DevTools for Chrome is a handy extension for making the development process more manageable. As well as ‘Create React App’, it’s created and maintained by Facebook.

With the Component tab, you can thoroughly inspect the components, edit their properties and states.

With the Profiler feature, you can track performance information.

By the way, you can select one of the 18 predefined themes to change its Look & Feel. Or even create your custom styling.

React DevTools for Firefox

React DevTools for Firefox is another add-on that offers alike functionality for inspecting a React tree right in Firefox.

Closing words

All the listed React developer tools are meant to make your development process more efficient and fast. We truly hope they will.

More to learn

If you are getting started with React, you’ll find useful this amazing overview.

If you prefer a visual approach, check out the React for designers guide. 

Move up