Shubham Ankit

Shubham Ankit

1558493905

JavaScript tutorial - Easy data visualizations with React-vis ✈️✈️✈️

JavaScript tutorial: Beyond basic charts with React-vis. How to use … for your apps. • How to validate data, analytics, and data visualizations.The library of React components from Uber makes creating charts and other simple visualizations a snap…

Data visualization is an important part of telling stories, but you can get lost in the weeds with D3.js for hours just to make a few simple charts. If charts are all you need, there are plenty of libraries that wrap D3 and provide you with convenient ways to build simple visualizations. This week, we’ll start to look at React-vis, a charting library that Uber created and open-sourced.

React and d3.js have an interesting relationship. React is all about declarative rendering of components and D3.js is all about imperatively manipulating DOM elements. Using them together is possible using refs, but it’s much nicer to encapsulate all of the manipulation code in a separate component so

you don’t have to switch contexts as much. Luckily, the React-vis library already does that for us with a bunch of composable components we can use to build our visualizations.

The best way to test out data visualization libraries, or any library really, is by building something with it. Let’s do that, using the City of New York’s Popular Baby Names data set.

JavaScript is the most widely deployed language in the world. Whether you’re a beginning, intermediate, or advanced JavaScript developer, you’ll master new skills with this nine-part course from PluralSight.

Preparing the data for React-vis 🎓🎓🎓

To start, I’ve bootstrapped a React project with create-react-app and added a few dependencies: react-vis, d3-fetch to help pull in the CSV data, and moment to help with date formatting. I also put together a bit of boilerplate code to pull in and parse the CSV that includes the popular names using d3-fetch. In JSON format, the data set we’re pulling in has about 11,000 rows and each entry looks like this:

{
  "Year of Birth": "2016",
  "Gender": "FEMALE",
  "Ethnicity": "ASIAN AND PACIFIC ISLANDER",
  "Child's First Name": "Olivia",
  "Count": "172",
  "Rank": "1"
}

Because the spaces in the keys and the numbers represented as strings would make this data inconvenient to work with, we’ll modify the data at load time to do some massaging. That code simply uses the dsv method from d3-fetch:

import { dsv } from 'd3-fetch';
import moment from 'moment';
dsv(",", dataUrl, (d) => {
  return {
    yearOfBirth: +d['Year of Birth'],
    gender: d['Gender'],
    ethnicity: d['Ethnicity'],
    firstName: d['Child\'s First Name'],
    count: +d['Count'],
    rank: +d['Rank'],
  };
});

Now our input data is a lot friendlier. It looks like this:

{
  "yearOfBirth": 2016,
  "gender": "FEMALE",
  "ethnicity": "ASIAN AND PACIFIC ISLANDER",
  "firstName": "Olivia",
  "count": 172,
  "rank": 1
}

Our first plot with React-vis

The first component you’ll probably be using is some form of an XYPlot, which contains other components and is present in almost every chart you build. This is mostly just a wrapper that defines the size of the visualization, but it can include some properties that get passed to children as well. By itself, XYPlot doesn’t render anything but some empty space:

[ JavaScript is the most widely deployed language in the world. Whether you’re a beginning, intermediate, or advanced JavaScript developer, you’ll master new skills with** this nine-part course from PluralSight.**** ]**

<XYPlot
  width={300}
  height={300}
> 
</XYPlot>

To actually show data, we’ll need to use a series of some sort. A series is the component that actually draws the data, such as a vertical bar chart (VerticalBarSeries) or a line chart (LineSeries). We have 14 series at our disposal out of the box, but we’ll start with a simple VerticalBarSeries. Each series inherits from a base set of attributes. The most useful one for us will be the data attribute:

<XYPlot
  width={300}
  height={300}
> 
  <VerticalBarSeries
    data={data}
  />
</XYPlot>

This is going to fail, though, because React-vis expects the elements in the data array to be in the following shape:

{
  x: 2016,  // This will be mapped to the x-axis
  y: 4         // This will be mapped to the y-axis
}

For example, to show the total number of babies counted in the data set by year, we’ll need to process the data to get a single object for each year where the x attribute is the year and the y attribute is the total number of babies in the data set. The code I wrote to do that is fairly terse:

const totalBabiesByYear = Object.entries(data.reduce((acc, row) => {
  if(row.yearOfBirth in acc) {
    acc[row.yearOfBirth] = acc[row.yearOfBirth] + row.count
  } else {
    acc[row.yearOfBirth] = row.count
  }
  return acc;
}, {})).map(([k, v]) => ({x: +k, y: v}));

When you plug it into the VerticalBarSeries, we get some results!

This isn’t particularly helpful on its own, but luckily the React-vis library provides some additional components that can be used to contextualize the information. Let’s import XAxis and YAxis so we can display more information in our chart. We’ll render those components inside the XYPlotalongside our VerticalBarSeries. The code and results look like this:

<XYPlot
  width={600}
  height={600}
> 
  <VerticalBarSeries
    data={totalBabiesByYear}
  />
  <XAxis />
  <YAxis />
</XYPlot>

Our y-axis labels are cut off and our x-axis labels are being formatted as numbers, but we’re making progress. To get the x-axis treated as discrete ordinal values as opposed to a continuous numeric range, we’ll add xType="ordinal" as a property on the XYPlot. While we’re at it, we can add some left margin to the chart so we can see more of the y-axis labels:

<XYPlot
  width={600}
  height={600}
  margin={{
    left: 70
  }}
  xType="ordinal"
> 

We’re in business! Our chart already looks great—and most of the work we had to do related to massaging data, not actually rendering it.

#javascript #reactjs

What is GEEK

Buddha Community

JavaScript tutorial - Easy data visualizations with React-vis ✈️✈️✈️
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

 iOS App Dev

iOS App Dev

1620466520

Your Data Architecture: Simple Best Practices for Your Data Strategy

If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.

If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.

In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.

#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition

Sid  Schuppe

Sid Schuppe

1617988080

How To Blend Data in Google Data Studio For Better Data Analysis

Using data to inform decisions is essential to product management, or anything really. And thankfully, we aren’t short of it. Any online application generates an abundance of data and it’s up to us to collect it and then make sense of it.

Google Data Studio helps us understand the meaning behind data, enabling us to build beautiful visualizations and dashboards that transform data into stories. If it wasn’t already, data literacy is as much a fundamental skill as learning to read or write. Or it certainly will be.

Nothing is more powerful than data democracy, where anyone in your organization can regularly make decisions informed with data. As part of enabling this, we need to be able to visualize data in a way that brings it to life and makes it more accessible. I’ve recently been learning how to do this and wanted to share some of the cool ways you can do this in Google Data Studio.

#google-data-studio #blending-data #dashboard #data-visualization #creating-visualizations #how-to-visualize-data #data-analysis #data-visualisation

Gerhard  Brink

Gerhard Brink

1620629020

Getting Started With Data Lakes

Frameworks for Efficient Enterprise Analytics

The opportunities big data offers also come with very real challenges that many organizations are facing today. Often, it’s finding the most cost-effective, scalable way to store and process boundless volumes of data in multiple formats that come from a growing number of sources. Then organizations need the analytical capabilities and flexibility to turn this data into insights that can meet their specific business objectives.

This Refcard dives into how a data lake helps tackle these challenges at both ends — from its enhanced architecture that’s designed for efficient data ingestion, storage, and management to its advanced analytics functionality and performance flexibility. You’ll also explore key benefits and common use cases.

Introduction

As technology continues to evolve with new data sources, such as IoT sensors and social media churning out large volumes of data, there has never been a better time to discuss the possibilities and challenges of managing such data for varying analytical insights. In this Refcard, we dig deep into how data lakes solve the problem of storing and processing enormous amounts of data. While doing so, we also explore the benefits of data lakes, their use cases, and how they differ from data warehouses (DWHs).


This is a preview of the Getting Started With Data Lakes Refcard. To read the entire Refcard, please download the PDF from the link above.

#big data #data analytics #data analysis #business analytics #data warehouse #data storage #data lake #data lake architecture #data lake governance #data lake management

Coy  Roberts

Coy Roberts

1599130980

React Data Visualization Tutorial

In this tutorial, we will see React Data Visualization. We will use uber chart datavisualization charting-library visualization react.React-vis is a React visualization library created by Uber. With it, you can quickly create simple charts, such as line, area, bar chartspie and donut chartstreemaps and many more.  Modern web application front ends are usually developed using one of the significant UI frameworks, such as Ember, React, Vue, or Angular. Depends on the framework you are using; you may want to ensure that the library plays well with it. Most of the charting libraries are framework agnostic. We use React-vis library for creating a React Data Visualization. So let us get started.

React Data Visualization Tutorial

First, we install the React js then we will start our example.

#react data visualization #react js #react-vis #vue #angular #node.js