# India Map
## Introduction
The india map is a custom plugin for Expertbridge build using echarts and d3. Map of different states and union territories of India are built using geojson data. Echarts is used render the map whereas d3 is used to fetch geojson data from server. Scatter points can also be plotted on the map where the radius of the point could be fixed or changed according to a metric. The radius of the scatter points could also be relatively scaled by providing min and max values in the control panel.  

## Creating the plugin
In the india map plugin, we render the map using geojson data and scatter points for co-ordinates provided. 

### Rendering the Map
To render the map, we first import the geojson file of the corresponding region using `d3.json()` async query.
Then we use echarts's `geo` chart to render the geojson data.

### Fetching Co-ordinates

The co-ordinates of the scatter points are fetched from the database. The radius of each point is determined based on user's choice from the control panel. By default, the radius is fixed at 10. But the user has a choice to use any metric to determine the radius of each point.

### Relative Scaling of Radius

The radius of points could be relatively scaled by providing `min` and `max` values. The scale is determined using the code:-
```js
const max_val = data.reduce((prev, cur) => prev[metric] > cur[metric] ? prev : cur)[metric];
const min_val = data.reduce((prev, cur) => prev[metric] < cur[metric] ? prev : cur)[metric];
var scale = 0;
if(max_val - min_val > 0.00001)
  scale = (pointBound[1] - pointBound[0])/(max_val - min_val);
```
The radius value also needs to be translated into the range of values. Amount of translation is determined by :-
```js
const translate = scale*min_val - pointBound[0];
```
Finally the new radius is determined as:-
```js
points = points.map((point) => {point[3] = point[3]*scale - translate; return point;});
```