Angular #4 Routing

✅ Angular 19 Routing - Step-by-Step Guide with Code 🚀

📌 What is Routing in Angular?

Routing allows navigation between different components without refreshing the page. It helps create Single Page Applications (SPAs).

---

🔹 Step 1: Create a New Angular App

ng new angular-routing-example --standalone

📌 Flags Used:

• --standalone: Creates the app using Standalone Components (Angular 16+).

---

🔹 Step 2: Generate Components

cd angular-routing-example
ng g c home --standalone
ng g c about --standalone

📌 This creates two components:

• HomeComponent (home.component.ts)
• AboutComponent (about.component.ts)

---

🔹 Step 3: Define Routes in app.routes.ts

Create a new file:
📌 src/app/app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [
  { path: '', component: HomeComponent }, // Default Route
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

📌 Explanation:

• '/' → Loads HomeComponent by default.
• '/home' → Navigates to Home page.
• '/about' → Navigates to About page.

---

🔹 Step 4: Update app.component.ts

📌 Modify app.component.ts

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule.forRoot(routes)],  // ✅ Import RouterModule with routes
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

---

🔹 Step 5: Add Navigation Links in app.component.html

📌 Modify app.component.html

<nav>
  <a routerLink="/home">Home</a> |
  <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

📌 Explanation:

• <a routerLink="/home"> → Clicking navigates to /home.
• <a routerLink="/about"> → Clicking navigates to /about.
• <router-outlet></router-outlet> → Loads the respective component.

---

🔹 Step 6: Run the Application

ng serve

📌 Open http://localhost:4200 in your browser.

• Click Home → Loads HomeComponent.
• Click About → Loads AboutComponent.

---

🎯 Final Folder Structure

angular-routing-example/
│── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.routes.ts  ✅ Routes File
│   │   ├── home/
│   │   │   ├── home.component.ts
│   │   │   ├── home.component.html
│   │   ├── about/
│   │   │   ├── about.component.ts
│   │   │   ├── about.component.html

---

🔥 Conclusion

✅ Now, you have a fully functional Angular Routing Example!
✅ Clicking the Home and About links will load different pages.
🚀 Happy Coding! 😎

Let me know if you need more help, bro!

Angular Routing Guide for Angular <16

Setting Up Routing in Angular

Follow these steps in the command prompt:

1. Create a new Angular project

   ng new router-example --standalone
   

   • Select Y for Routing
   • Choose CSS for the stylesheet

2. Navigate into the project directory

   cd router-example
   

3. Generate components

   ng g c student
   ng g c subject
   

4. Open the project

   code .
   

   (Or open the folder manually in VS Code)

5. Modify app.module.ts

   Open src/app/app.module.ts and update the imports array:

   import { RouterModule } from '@angular/router';
   
   @NgModule({
     imports: [
       BrowserModule,
       RouterModule.forRoot([
         { path: 'student', component: StudentComponent },
         { path: 'subject', component: SubjectComponent },
       ]),
     ],
   })
   

6. Modify app.component.html

   Delete existing content and replace with:

   <app-student></app-student>
   <app-subject></app-subject>
   

7. Run the project

   ng serve
   

   Open http://localhost:4200 in a browser to check if the app is working.

Adding Navigation

8. Modify app.component.html

   <nav>
     <a class="button" routerLink="/student">Student List</a> |
     <a class="button" routerLink="/subject">Subject List</a>
   </nav>
   <router-outlet></router-outlet>
   

   • This will add navigation buttons for Student and Subject.

9. Modify app.component.css

   .button {
       background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
       border-radius: 6px;
       border: 1px solid #dcdcdc;
       cursor: pointer;
       color: #666;
       font-size: 15px;
       font-weight: bold;
       padding: 6px 24px;
       text-decoration: none;
   }
   
   .activebutton {
       background: linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
       border: 1px solid #84bbf3;
       color: #fff;
   }
   

Displaying Data in Components

10. Modify subject.component.ts

    export class SubjectComponent {
      subjects = [
        { id: 12, name: 'Networks' },
        { id: 13, name: 'C' },
        { id: 14, name: 'C++' },
        { id: 15, name: 'Angular' },
        { id: 16, name: 'React' },
        { id: 17, name: 'Java' },
        { id: 18, name: 'Python' },
        { id: 19, name: 'HTML' },
        { id: 20, name: 'CSS' }
      ];
    }
    

11. Modify student.component.ts

    export class StudentComponent {
      students = [
        { id: 102, name: 'Dr. Nice' },
        { id: 103, name: 'Bombasto' },
        { id: 104, name: 'Celeritas' },
        { id: 105, name: 'Magneta' },
        { id: 106, name: 'RubberMan' },
        { id: 107, name: 'Dynama' },
        { id: 108, name: 'Dr. IQ' },
        { id: 109, name: 'Magma' },
        { id: 200, name: 'Tornado' }
      ];
    }
    

12. Modify subject.component.html

    <div *ngFor="let s of subjects">
      <div style="color: blue">
        {{s.id}}: {{s.name}}
      </div>
    </div>
    

13. Modify student.component.html

    <div *ngFor="let s of students">
      <div style="color: blue">
        {{s.id}}: {{s.name}}
      </div>
    </div>
    

Final Testing

• Run ng serve and open http://localhost:4200 to verify the output.

Exercise

1. Modify app.component.css with:

   .button {
       box-shadow: inset 0 1px 0 0 #ffffff;
       background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
       border-radius: 6px;
       border: 1px solid #dcdcdc;
       display: inline-block;
       cursor: pointer;
       color: #666;
       font-size: 15px;
       font-weight: bold;
       padding: 6px 24px;
       text-decoration: none;
   }
   
   .activebutton {
       background: linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
       border: 1px solid #84bbf3;
       color: #ffffff;
   }
   

2. Modify the first <a> tag in app.component.html:

   <a class="button"
      routerLink="/student"
      routerLinkActive="activebutton"
      ariaCurrentWhenActive="page">Student List</a> |
   

Check the browser output to see the updated navigation. Happy Learning Angular! 🚀

Angular 3 Structural Directives(+/- components in HTML View)

More Angular Magic! 🎩✨

*EX 5: ngFor Directive (Looping Through Data)

📌 How to Use ngFor Directive in Angular 19 (Step by Step)

The ngFor directive in Angular helps us display lists by looping through arrays. Here’s a simple guide to using ngFor in Angular 19 with standalone components.

---

🔹 Step 1: Create a New Angular App

Open your terminal and run the following command to create a new Angular project:

ng new ngfor-example --standalone

• --standalone flag tells Angular not to create app.module.ts (since Angular 19 uses standalone components).

After running the command, move into the project folder:

cd ngfor-example

---

🔹 Step 2: Define an Array in app.component.ts

Inside the src/app/app.component.ts file, add a list of students:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgFor } from '@angular/common'; // ✅ Import NgFor

@Component({
  selector: 'app-root',
  standalone: true,

  import { NgFor } from '@angular/common';  // ✅ Import NgFor

  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

  imports:[F]  
})
export class AppComponent {
  students = [
    { id: 101, name: 'Alice' },
    { id: 102, name: 'Bob' },
    { id: 103, name: 'Charlie' },
    { id: 104, name: 'David' }
  ];
}

✅ Explanation:

• We define a list of students inside the students array.
• Each student has an ID and Name.
• This data will be displayed in the browser.

---

🔹 Step 3: Use ngFor in app.component.html

Modify the file src/app/app.component.html to display the student list:

<h2>Student List</h2>
<ul>
  <li *ngFor="let student of students">
    {{ student.id }} - {{ student.name }}
  </li>
</ul>

✅ Explanation:

• *ngFor="let student of students" → Loops through the students array.
• Inside <li>, it displays ID and Name of each student.

---

🔹 Step 4: Run the Application

Start your Angular app by running:

ng serve

Now, open http://localhost:4200/ in a browser, and you will see the list of students displayed. 🎉

---

🔹 Step 5 (Optional): Add Index & Optimize Using trackBy

You can display the index number of each student and optimize performance using trackBy.

Update app.component.html

<h2>Student List</h2>
<ul>
  <li *ngFor="let student of students; let i = index; trackBy: trackById">
    {{ i + 1 }}. {{ student.id }} - {{ student.name }}
  </li>
</ul>

Update app.component.ts

trackById(index: number, student: any) {
  return student.id;
}

✅ Explanation:

• let i = index → Displays the position of each student.
• trackBy: trackById → Helps Angular track elements by ID (improves performance).

---

🎯 Conclusion

1️⃣ ngFor helps loop through an array to display lists dynamically.
2️⃣ We created an array of students and displayed it using *ngFor.
3️⃣ The app was created using standalone components (no app.module.ts).
4️⃣ We added index numbers and used trackBy for better performance.

Now you know how to use ngFor in Angular 19! 🚀🔥

💡 Try modifying the list and see how it updates in real-time. 😎 Let me know if you need more help, bro!*EX 6: ngIf Directive (Conditional Rendering)

Want to show or hide elements dynamically? Use *ngIf!

Step 1: Add a Display Condition

Open src/app/app.component.ts and add:

    import { NgIf } from '@angular/common';                in the beginning
    imports: [FormsModule, NgFor, NgIf],                      in the @component decorator

export class AppComponent {
    displayButton: boolean = true;
}

*Step 2: Use ngIf in HTML

Edit src/app/app.component.html:

<div>
  <div *ngIf="displayButton">
     Message will disappear when you click this button
     <button class="btn btn-success" (click)="displayButton = false;">Click Me to Hide</button>
  </div>
</div>

Step 3: Run the Project

ng serve

Go to http://localhost:4200 and click the button—the message will disappear!

EX 7: ngStyle Directive (Dynamic Styling)

✅ Using NgStyle Directive in Angular (Step-by-Step Guide)

The NgStyle directive in Angular allows you to dynamically apply CSS styles to elements based on component data.

---

🔹 Step 1: Create a New Angular App

If you don’t have an Angular project, create one using:

ng new ngstyle-example --standalone
cd ngstyle-example
code .

---

🔹 Step 2: Modify app.component.ts

Make sure you import NgStyle in the imports[] array of @Component() if using Angular 16+ (standalone mode).

📌 app.component.ts

import { Component } from '@angular/core';
import { NgFor, NgIf, NgStyle } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  imports: [NgStyle, NgFor, NgIf]  // ✅ Import NgStyle
})
export class AppComponent {
  isHighlighted = true;
  textColor = 'blue';
  bgColor = 'yellow';

  changeStyle() {
    this.isHighlighted = !this.isHighlighted;
    this.textColor = this.isHighlighted ? 'blue' : 'red';
    this.bgColor = this.isHighlighted ? 'yellow' : 'lightgray';
  }
}

---

🔹 Step 3: Update app.component.html to Use NgStyle

📌 app.component.html

<h2 [ngStyle]="{'color': textColor, 'background-color': bgColor, 'padding': '10px'}">
  This text changes color dynamically
</h2>

<button (click)="changeStyle()">Toggle Style</button>

<div *ngFor = "let i of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]">
  <div *ngIf = "(i%2 != 0)" [ngStyle]="{'background-color':'green'}">
      <li><button>{{i}}</button></li>
  </div>
  <div *ngIf = "(i%2 === 0)" [ngStyle]="{'background-color':'red'}">
      <li><button>{{i}}</button></li>
  </div>
</div>

🔹 Explanation:

• [ngStyle] applies dynamic styles to the <h2> element.
• The button toggles textColor and bgColor when clicked.

---

🔹 Step 4: Run the Angular App

Start the Angular server:

ng serve

Open your browser and go to:

http://localhost:4200

Now, clicking the "Toggle Style" button will change the text color and background color dynamically! 🎨🎉

---

🚀 Summary

• ✅ NgStyle dynamically applies inline CSS.
• ✅ NgStyle takes an object with key-value pairs.
• ✅ Works with standalone components in Angular 16+.

Let me know if you need more help, bro! 😎🔥

EX 8: Pipes (Transforming Data)

Need to format text quickly? Pipes make it super easy!

Step 1: Add Text Transformations

Open src/app/app.component.ts and add:

import { UpperCasePipe } from '@angular/common';   in the beginning
imports: [NgStyle, UpperCasePipe] in @Component decorator




export class AppComponent {
    textPipe = 'lower case to be converted to uppercase';
}

Step 2: Use Pipes in HTML

Edit src/app/app.component.html:

<span style="color:blue">{{ textPipe | uppercase }}</span> 

Step 3: Run the Project

ng serve

Go to http://localhost:4200 and check the text transformations!

---

Happy Learning Angular! 🚀😃

Angular #2 Data Binding {{}} , [ ], ( ), [()]

Let’s Build Our First Angular Project! 🚀

Ex 1: One Way Binding {{}}

Step 1: Create a New Angular Project

ng new ex1

• Say ‘N’ when asked about Angular Routing.
• Choose CSS for stylesheets.
• Wait for npm packages to install.

Step 2: Open Your Project in VS Code

cd ex1
code .

Expand the src directory to see app, assets, and environments folders.

Step 3: Modify app.component.html

Delete everything and add:

<h1>{{title}}</h1>

Save the file and run:

ng serve

Open http://localhost:4200 in a browser, and boom! You’ll see your title!

---

Ex 2: User-Defined Object Binding

Step 1: Modify app.component.ts

Add this inside the AppComponent class:

inputData = 'User Defined Data in Class';

Step 2: Modify app.component.html

<p style="color: rgb(128, 0, 28);"><b>{{inputData}}</b></p>

Save and check the browser!

---

Ex 3: Creating a New Component

Step 1: Generate a Component

ng generate component container

This creates four new files and updates app.module.ts.

Step 2: Modify app.component.html

Add this:

<app-container></app-container>

Step 3 a): Modify container.component.html

<h1>Header Comes Here</h1>
<h3>Nav Bar Comes Here</h3>
<h5>Content Comes Here</h5>

      b) Modify app.component.ts as shown below and save

@Component({
  selector: 'app-root',
  imports: [ContainerComponent],

Run:

ng serve

Check the browser to see the changes as shown above!

---

Ex 4: Event Data Binding

Step 1: Modify container.component.html

<div>
    <label>First Name:</label>
    <input type="text"> 
    <button (click)="onClick()">Click Me</button>
</div>

Step 2: Modify container.component.ts

Inside ContainerComponent class, add:

onClick() {
    alert('Somebody clicked the button!');
}

Save and run ng serve, then check http://localhost:4200. Click the button and watch the magic happen!

---

Ex 5: Two-Way Binding with ngModel

Step 1: Modify app.component.ts (delete the old contents)

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms'; // Import FormsModule
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule], // Add FormsModule here
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userName: string = 'iMMSS Inc'; // Variable for Two-Way Binding
}

Step 2. Modify (delete the old contents) app.component.html file

<h1>Test App Works!</h1>

<div>

  <label>Enter your name:</label>

  <input type="text" [(ngModel)]="userName">

</div>

<h1>Hello, {{ userName }}!</h1>

+ add the following in app.component.css

h1 {

    color :rgb(168, 26, 104);

}

Run ng serve and check **http://localhost:4200**—whatever you type will update in real-time!

---

🎯 What’s Next?

• Try experimenting with Directives and Pipes!
• Build dynamic forms and API integrations.
• Show off your Angular skills to the world! 🚀

Happy Coding! 🎉

Hand on Outputs:

Ex 1.

One Way Binding {{}}

In Visual Studio, Terminal 

create a project using 

 ng new ex1

Ans N for Would you like to Add Angular Routing ?

Choose CSS for Which Style sheet format you like to use?

Will install packages(npm).

Open folder ex1

Expand src directory to see app, assets, environments.. directories.

In app directory, open app.component.html files. Delete all the contents.

add the following and save.

<h1>{{title}}</h1>

Invoke by 

ng serve to run the server in Terminal Window. 

Open any browser and go to http://localhost:/4200

will display the title ex1 in browser

 Ex 2.

Add user defined object inputData

Add  the above USO in app.component.ts file AppCompenet class by 

inputData = 'User Defined Data in Class';

In app directory, open app.component.html files. 

add the following and save.

<p style="color: rgb(128, 0, 28);"><b>{{inputData}}</b></p>

Check in browser.

Ex  3.

Add a new Component 'Container'In terminal 

In Terminal Window, command prompt

ng generate component container

to create a new componont. Will create four new files and one update one file.

PS F:\AngularCourse\ex1> ng generate component container

CREATE src/app/container/container.component.html (24 bytes)

CREATE src/app/container/container.component.spec.ts (620 bytes)

CREATE src/app/container/container.component.ts (287 bytes)

CREATE src/app/container/container.component.css (0 bytes)

UPDATE src/app/app.module.ts (408 bytes)

Now check the container.component.html file.

Add the following contents inside app.compoent.html

<app-container></app-container>

Delete the contents. Add the following

<h1>Header Comes here</h1>

<h3>Nav Bar comes here</h3>

<h5>Content  comes here</h5>

Now invoke webpack by 

ng serve

command inside the terminal prompt to check the browser contents. 

Ex 4.

Evet data binding 

add the following contents  in container.component.html file.

<div>

    <Label> First Name : </Label>

    <input type="text">

    <button (click) = "onClick()">Clik Me</button>

</div>

 in src\app\container\container.component.ts file, add the following 

Inside ContainerComponent class after ngOnInit(): void{}  and save

onClick(){

    alert('Some body kicked the Button');

  }

Now invoke webpack by ng serve and check http://localhost:4200 in browser. Click the button to see alert box.

Ex4: 

Two way Binding [(ngModule)]y

create a new project using 

ng new ex4

Add the following contents  in container.component.html file.

<div>

    <Label> First Name : </Label>

    <input type="text" [(ngModel)] = "inputData"> <br><br>

    Entered Choice is  : {{inputData}}

</div>

Open app.component.ts File , add inside the class AppComponent  and save file.

inputData = 'Two way Binding Example';

Add the following in app.module.ts file import section and save.

import { FormsModule } from '@angular/forms';

Register  FormsModule   as shown below:

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

run ng serve in terminal. Check in the opened browser http://localhost:4200.

Whatever you typed will be displayed immediately next to  Entered Choice is  :

Angular #1 Installation

Why is it called Angular?

Because it's written between < >! Get it? (Okay, bad joke, but now you won’t forget it!)

Angular is a powerful framework built with TypeScript for developing client-side applications. It’s like a superhero for web developers—making code cleaner, reusable, and testable!

---

Angular Architecture (Frontend + Backend)

Frontend (UI)

This is what users see in their browsers! It includes:

• HTML & CSS (Templates & Styles)
• TypeScript (Super-powered JavaScript)
• Angular (The magic framework!)

Backend (Data Processing)

This is where the data magic happens!

• Data + API (Application Programming Interface)
• Business Logic (The brain behind the app)

In short, Angular makes life easier!

---

Angular Versions: What’s the Deal?

• The first version was AngularJS.
• Later versions dropped the "JS" and are called Angular (Vx) (Latest: Angular 14.0).

---

AngularJS vs Angular – What’s Different?

Feature	AngularJS	Angular
Architecture	MVC Model	Components & Directives
Language	JavaScript	TypeScript
Mobile Friendly?	Nope	Yes!
Expression Syntax	{{ }}	() []
Dependency Injection	Not used	Hierarchical DI
Routing	@routeProvider	@Route Configuration
Code Structure	Messy 😵‍💫	Well-structured ✅

---

Let’s Build Our First Angular Project! 🚀

Step 1: Install Node.js

• Go to nodejs.org
• Download the latest stable version (Windows/Mac/Linux)
• Install it like a pro! (Run as Administrator)
• Check if it's installed by running:

  node --version
  

Step 2: Install Angular CLI (Command Line Interface)

CLI is your best friend for Angular projects!

npm install -g @angular/cli

Check if it's installed:

ng version

Step 3: Create Your First Angular Project

Run this command:

ng new hello-universe

hello-universe is your project name! It will ask a few questions:

• Would you like to add Angular routing? (Say ‘N’)
• Which stylesheet format to use? (Choose CSS)
• Then, it will take some time to set up all the files. Grab a coffee! ☕

Step 4: Install Visual Studio Code (VS Code)

• Download it from Visual Studio Code
• Install it as Administrator
• Open your project by running:

  cd hello-universe
  code .
  

Now, your VS Code will open with your first Angular project! 🎉

Step 5: Run Your First Angular App! 🚀

Run this command inside your project folder:

ng serve

Wait for the magic words: Compiled Successfully!

Now, open your browser and go to:

localhost:4200

Great My friend, You have done it!

Boom! Your first Angular app is live! 🎉🎉🎉

---

🎯 What’s Next?

• Learn about Components, Modules & Directives
• Play around with Routing and Services
• Build something cool & show off your Angular skills! 😎

Happy Coding! 🚀

#0 Intro to Data Analysis

 Two Words

Data & Analysis

Data : oil, Electricity,  everywhere, every time, even now.

Analysis : Answer how and Why ?

Analysis :

Data analysis is the process of collecting, modeling, and analyzing data to extract insights that support decision-making. There are several methods and techniques to perform analysis depending on the industry and the aim of the investigation

Why Is Data Analysis Important?

Informed decision-making: 

Reduce costs| Increase Profits

Target Customers Better

DA is a Process

Identify-Collect-Clean-Analyze-Interpret or Infer- Act

(ICCAIA)

Types of DA

1.Descriptive: What ?-Data to Valuable Insights

2.Exploratory: How  ?-To generate Hypothesis to solve specific 3.Problems

4.Diagnostic : Why ? - To tackle and to cure 

5.Predictive  : What if ? - Future Projection

6.Prescriptive : IF-?.Then-This : 

Top DA Methods

1. Cluster Analysis: Similar elements - Grouping Data 

2. Cohort Analysis : Historical data to examine and compare -Google Analytics:

3. Regression Analysis - y=mx+c

4. Factor Analysis : Dimension Reduction

5. Neural Networks : Mimic Human Brain to find solutions

6. Data Mining: Identify patterns, Dependencies, realations, Trends

7. Text Analysis : Actional Insights with Relevant Data

8. TimeSeries Analysis : Data Collected over a specified period of time.

9. Decison Trees: To support smart and strategic Decisions

10. Conjoint Analysis : How individuals value different attributes of a product or Service

Top 17 Data Analysis Techniques:

Collaborate your needs

Establish your questions

Data democratization

Think of data governance 

Clean your data

Set your KPIs

Omit useless data

Build a data management roadmap

Integrate technology

Answer your questions

Visualize your data

Interpretation of data

Consider autonomous technology

Build a narrative

Share the load

Data Analysis tools

Refine your process constantly 

Quality Criteria For Data Analysis 

Internal Validity

External Validity

Reliability

Objectivity

Application of DA:

Academics: Universities and academic institutions can perform data analysis to measure student performance and gather insights on how certain behaviors can further improve education.

Human Resources: Organizations can use data analysis to offer a great experience to their employees and ensure an excellent work environment. They can also utilize the data to find out the best resources whose skill set matches the organizational goals

Communication is very Important

Qualitative

Stephen Few - 8 Types of Quantitative Messages out of DA:

1. Time Series : Line Chart

2. Ranking : Bar Chart

3. Part-to-Whole : Pie Chart

4. Deviation: Bar Comparison : Actual Vs Variation

5. Frequency Distribuition : Histogram

6. Correlation: Scatter Plot 

7. Nominal Comparison : bar Chart

8. Geographical : Cartogram

Quantitative

mean, median, mode, Standard deviation, chi-square, eigen vector

Free software for data analysis

Notable free software for data analysis include:

DevInfo – A database system endorsed by the United Nations Development Group for monitoring and analyzing human development.[149]

ELKI – Data mining framework in Java with data mining oriented visualization functions.

KNIME – The Konstanz Information Miner, a user friendly and comprehensive data analytics framework.

Orange – A visual programming tool featuring interactive data visualization and methods for statistical data analysis, data mining, and machine learning.

Pandas – Python library for data analysis.

PAW – FORTRAN/C data analysis framework developed at CERN.

R – A programming language and software environment for statistical computing and graphics.[150]

ROOT – C++ data analysis framework developed at CERN.

SciPy – Python library for data analysis.

Julia - A programming language well-suited for numerical analysis and computational science.

Slides for DS Intro

1. Intro to Data Science

Pyspark Tutorial

DATA SCIENCE ETHICS

 DSE definition:

“Data ethics is a new branch of ethics that studies and evaluates moral problems related to data (including generation, recording, curation, processing, dissemination, sharing and use), algorithms (including artificial intelligence, artificial agents, machine learning and robots) and corresponding practices (including responsible innovation, programming, hacking and professional codes), in order to formulate and support morally good solutions (e.g. right conducts or right values).”