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)

Editor:

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.

Method	Description
d3-scaleLinear()	Construct continuous linear scale where input data (domain) maps to specified output range.
d3-array ()	Array manipulation (array reverse, array sort, array splice)
d3-geo()	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 class, height, width 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.

Features:

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: