Tuesday, May 14, 2019

React With D3:

Introduction to React :

React helps developers to build applications by helping to manage the application state. It’s simple, declarative, and composable. React is not a traditional MVC framework because React is really interested in building user interfaces. 

React encourages the building applications out of self-contained, reusable components that only care about a small piece of the UI. Other frameworks such as Angular also do this, but React stands out because it enforces a unidirectional data flow from parent component to child component. This makes debugging much easier.

Introduction to D3:

D3 (Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data-visualizations. It is fairly low level, and the developer has a lot of control over the end result. D3 does mainly four things:
  1. LOADS: D3 has convenient methods for importing data from CSV documents.
  2. BINDS: D3 binds data elements to the DOM via JavaScript and SVG.
  3. TRANSFORMS: data can be adjusted to fit your visual requirements
  4. TRANSITIONS: D3 can respond to user input and animate elements based on that input
React with D3:

D3 is great at data visualizations, but it manipulates the DOM directly to display that data. Rendering DOM elements is where react shines. Also, once we create a chart component, we can want to be able to reuse that chart with different data anywhere in our app.

Setting React with D3.js development environment:

·         For Creating  React app, need to use the following command:
npx create-react-app <your-app-name> in your terminal.

Before we start, you'll need the below following components:
1) D3 library
2) Editor
3) Web browser

D3 Library:
To create data visualization, include D3.js library into your HTML webpage. This can be done in two ways:
1) Include D3 library in your project's folder
2) Include D3 library from CDN (Content Delivery Network)
To write your code use can use below editors. There are some great IDEs (Integrated Development Environment) with support for JavaScript like
1) Visual Studio Code
2) Web Storm
3) Eclipse
4) Sublime Text
These IDEs provide intelligent code completion as well as support for some of the modern JavaScript frameworks.
Web Browser:
D3 works on all browsers except IE8 and lower. After setting up the development environment, it's time to start exploring D3.
Folder Structure:
Customization of charts:
Create SVG Elements using D3
SVG provides different shapes like lines, rectangles, circles, ellipses etc. Hence, designing visualizations with SVG gives you more flexibility.
D3 Scale provides a convenient solution. They map our data values that would be better represented in visualizations.
Construct continuous linear scale where input data (domain) maps to specified output range.

d3-array ()
Array manipulation (array reverse, array sort, array splice)

For geographical projections

This is one of the most common approaches to integrate React and D3:
  • Create a Component in React for the charts.
  • Call our D3 code on initial load componentDidMount( )  and updates componentDidUpdate( ).
  • Import the dependencies from d3 which are used in your application to create different charts. Some of them are :
import { scaleLinear } from 'd3-scale'
import { max, sum } from 'd3-array'
import { select } from 'd3-selection'
import { legendColor } from 'd3-svg-legend'

·         Install d3 library in the component
                                    npm install d3
When we import d3 in our component, the dependencies belonging to d3.js will be added to the component.

Functions Used:
·         The d3-select() is used to select an HTML element from the document. It selects the first element that matches the argument passed and creates a node for it.
·         The append() method appends an HTML node to the selected item and returns a handle to that node.
·         The attr() method is used to add attributes to the element. This can be any attribute that you will normally add to the HTML element like classheightwidth or fill.
·         Under the SVG variable we created, add the following code:

JSON Data:
For implementing charts, provided a JSON data by which we can picturize the chart.

1) Adding Colors to the bar:
Based on the selecting different states, added different types of colors and differentiated the map
and bar
2) Mouse-Over:
Implemented events in chart such as mouse over events. By this event we can identify each map and bar state color.
Output screens:

Saturday, October 13, 2018

Web App to Native App in Angular6

Building Native Mobile Apps Using Cordova in Angular-6

Steps for Converting Angular-6 Project To Mobile Application

Step 1:
Open the Angular build project and go-to that specified path in Node.js command prompt and give the command “ng serve” to check the project in browser.

Step 2:
Give command "ng build --prod"
ng build --prod

Step 3:
Install the Cordova project by giving the below command.

npm install -g cordova

Step 4:
This is the major step in the process, in this step Create a new Cordova Project, using the Cordova command below.

cordova create MyAndroidapp

Goto MyAndroidapp folder path giving the below command.

cd MyAndroidapp

One new folder will be created in the project as shown in the below screen-shot.
Step 5:
Add your Cordova building platform:
Where platform can be either browser, Android, Blackberry or IOS.
cordova platform add android
cordova platform add browser

Step 6:
Go to src->index.html page and change <base href="/">to<base href-"./"> and add this script <script type="text/javascript" src="cordova.js"></script> below the <app-root></app-root>

Step 7:
Change the outputpath in angular.json to "dist" and build the app giving the command.
ng build --prod

Step 8:
Copy all the files in my-project1->dist folder and paste it inside MyAndriod->www

Note: Delete all previous css,js,index.html files present inside the MyAndriod->www path and paste the files present in dist path.

Step 9:
Run the app in browser using cordova command.
cordova run browser
You can see the Angular developed screens in the web page in browser as shown in below screenshots.

Step 10:
In the same way we need to build and run in android platform, if we run the app then the app will be displayed in android studio emulator or else if we build then an .apk file will be created in the below path.


so we can install the above .apk file in the andriod mobile,after installation we can see the below screens in the android mobile app.

Use Cordova if you are:
  • A mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform's language and tool set.
  • A web developer and want to deploy a web app that's packaged for distribution in various app store portals.
  • A mobile developer interested in mixing native application components with a WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.

I hope this blog will help to Convert your Angular build Project to mobile App using CORDOVA.

Alekhya Pulle
Mouri Tech Pvt Ltd