Skip to content

Commit 8636dbd

Browse files
PrinceSumberiaPrinceSumberia
committed
Add India choropleth and fix bug
1 parent 1fb94d9 commit 8636dbd

File tree

2 files changed

+142
-156
lines changed

2 files changed

+142
-156
lines changed

‎src/components/CovidApp.js‎

Lines changed: 77 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,20 +55,94 @@ const styles = {
5555
},
5656
};
5757

58+
const stateCodes = {
59+
"Andhra Pradesh": "AP",
60+
"Arunachal Pradesh": "AR",
61+
Assam: "AS",
62+
Bihar: "BR",
63+
Chhattisgarh: "CT",
64+
Goa: "GA",
65+
Gujarat: "GJ",
66+
Haryana: "HR",
67+
"Himachal Pradesh": "HP",
68+
Jharkhand: "JH",
69+
Karnataka: "KA",
70+
Kerala: "KL",
71+
"Madhya Pradesh": "MP",
72+
Maharashtra: "MH",
73+
Manipur: "MN",
74+
Meghalaya: "ML",
75+
Mizoram: "MZ",
76+
Nagaland: "NL",
77+
Odisha: "OR",
78+
Punjab: "PB",
79+
Rajasthan: "RJ",
80+
Sikkim: "SK",
81+
"Tamil Nadu": "TN",
82+
Telengana: "TG",
83+
Tripura: "TR",
84+
Uttarakhand: "UT",
85+
"Uttar Pradesh": "UP",
86+
"West Bengal": "WB",
87+
"Andaman and Nicobar Islands": "AN",
88+
Chandigarh: "CH",
89+
"Dadra and Nagar Haveli": "DN",
90+
"Daman and Diu": "DD",
91+
Delhi: "DL",
92+
"Jammu and Kashmir": "JK",
93+
Ladakh: "LA",
94+
Lakshadweep: "LD",
95+
Puducherry: "PY",
96+
};
97+
5898
class CovidApp extends Component {
5999
constructor(props) {
60100
super(props);
61101

62102
this.state = {
63103
completeData: [],
64104
isLoading: false,
105+
mapData: [],
65106
};
66107
this.getData = this.getData.bind(this);
67108
this.loadingStatus = this.loadingStatus.bind(this);
109+
this.formatData = this.formatData.bind(this);
110+
this.findId = this.findId.bind(this);
111+
this.handleFormat = this.handleFormat.bind(this);
112+
}
113+
114+
formatData(completeData) {
115+
const newArr = completeData.slice(-1).map((data) => data.regional);
116+
const formatedData = newArr.flat().map((region, i) => {
117+
return {
118+
id: this.findId(region.loc),
119+
state: region.loc.replace(" and ", " & "),
120+
value: region.totalConfirmed,
121+
};
122+
});
123+
return formatedData;
124+
}
125+
126+
findId(location) {
127+
for (let [key, value] of Object.entries(stateCodes)) {
128+
if (location === key) {
129+
return value;
130+
}
131+
}
68132
}
69133

70134
getData(data, isLoading) {
71-
this.setState({ completeData: data, isLoading: isLoading });
135+
this.setState(
136+
{
137+
completeData: data,
138+
isLoading: isLoading,
139+
},
140+
this.handleFormat
141+
);
142+
}
143+
handleFormat() {
144+
const newdata = this.formatData(this.state.completeData);
145+
this.setState({ mapData: newdata });
72146
}
73147

74148
loadingStatus(loadingStatus) {
@@ -77,6 +151,7 @@ class CovidApp extends Component {
77151

78152
render() {
79153
const { classes, setDarkMode, isDarkMode } = this.props;
154+
const { mapData } = this.state;
80155

81156
return (
82157
<div className={classes.root}>
@@ -104,7 +179,7 @@ class CovidApp extends Component {
104179
<div className={classes.content}>
105180
<div className={classes.contentArea}>hello world</div>
106181
<div className={classes.chartArea}>
107-
<Map completeData={this.state.completeData} />
182+
<Map mapData={mapData} />
108183
<Charts
109184
data={this.state.completeData}
110185
isLoading={this.state.isLoading}

‎src/components/Map/Map.js‎

Lines changed: 65 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import React, { useState } from "react";
1+
import React, { Component } from "react";
22
import { ComposableMap, Geographies, Geography } from "react-simple-maps";
33
import { scaleQuantile } from "d3-scale";
44
import ReactTooltip from "react-tooltip";
5-
65
import LinearGradient from "./LinearGradient.js";
7-
// import "./App.css";
86

97
/**
108
* Courtesy: https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/india.topo.json
@@ -51,166 +49,79 @@ const geographyStyle = {
5149
},
5250
};
5351

54-
// will generate random heatmap data on every call
55-
const getHeatMapData = () => {
56-
return [
57-
{ id: "AP", state: "Andhra Pradesh", value: getRandomInt() },
58-
{ id: "AR", state: "Arunachal Pradesh", value: getRandomInt() },
59-
{ id: "AS", state: "Assam", value: getRandomInt() },
60-
{ id: "BR", state: "Bihar", value: getRandomInt() },
61-
{ id: "CT", state: "Chhattisgarh", value: getRandomInt() },
62-
{ id: "GA", state: "Goa", value: 21 },
63-
{ id: "GJ", state: "Gujarat", value: 22 },
64-
{ id: "HR", state: "Haryana", value: getRandomInt() },
65-
{ id: "JH", state: "Jharkhand", value: 26 },
66-
{ id: "KA", state: "Karnataka", value: 27 },
67-
{ id: "KL", state: "Kerala", value: getRandomInt() },
68-
{ id: "MP", state: "Madhya Pradesh", value: getRandomInt() },
69-
{ id: "MH", state: "Maharashtra", value: getRandomInt() },
70-
{ id: "MN", state: "Manipur", value: getRandomInt() },
71-
{ id: "ML", state: "Meghalaya", value: 59 },
72-
{ id: "MZ", state: "Mizoram", value: getRandomInt() },
73-
{ id: "NL", state: "Nagaland", value: 59 },
74-
{ id: "OR", state: "Odisha", value: 59 },
75-
{ id: "PB", state: "Punjab", value: getRandomInt() },
76-
{ id: "RJ", state: "Rajasthan", value: getRandomInt() },
77-
{ id: "SK", state: "Sikkim", value: getRandomInt() },
78-
{ id: "TN", state: "Tamil Nadu", value: getRandomInt() },
79-
{ id: "TG", state: "Telangana", value: getRandomInt() },
80-
{ id: "TR", state: "Tripura", value: 14 },
81-
{ id: "UT", state: "Uttarakhand", value: getRandomInt() },
82-
{ id: "UP", state: "Uttar Pradesh", value: 15 },
83-
{ id: "WB", state: "West Bengal", value: 17 },
84-
{ id: "WB", state: "West Bengal", value: 17 },
85-
{ id: "AN", state: "Andaman and Nicobar Islands", value: getRandomInt() },
86-
{ id: "CH", state: "Chandigarh", value: getRandomInt() },
87-
{ id: "DN", state: "Dadra and Nagar Haveli", value: 19 },
88-
{ id: "DD", state: "Daman and Diu", value: 20 },
89-
{ id: "DL", state: "Delhi", value: 59 },
90-
{ id: "JK", state: "Jammu and Kashmir", value: 25 },
91-
{ id: "LA", state: "Ladakh", value: getRandomInt() },
92-
{ id: "LD", state: "Lakshadweep", value: getRandomInt() },
93-
{ id: "PY", state: "Puducherry", value: getRandomInt() },
94-
];
95-
};
96-
// const getHeatMapData = () => {
97-
// return [
98-
// { id: "AP", state: "Andhra Pradesh", value: getRandomInt() },
99-
// { id: "AR", state: "Arunachal Pradesh", value: getRandomInt() },
100-
// { id: "AS", state: "Assam", value: getRandomInt() },
101-
// { id: "BR", state: "Bihar", value: getRandomInt() },
102-
// { id: "CT", state: "Chhattisgarh", value: getRandomInt() },
103-
// { id: "GA", state: "Goa", value: 21 },
104-
// { id: "GJ", state: "Gujarat", value: 22 },
105-
// { id: "HR", state: "Haryana", value: getRandomInt() },
106-
// { id: "HP", state: "Himachal Pradesh", value: 24 },
107-
// { id: "JH", state: "Jharkhand", value: 26 },
108-
// { id: "KA", state: "Karnataka", value: 27 },
109-
// { id: "KL", state: "Kerala", value: getRandomInt() },
110-
// { id: "MP", state: "Madhya Pradesh", value: getRandomInt() },
111-
// { id: "MH", state: "Maharashtra", value: getRandomInt() },
112-
// { id: "MN", state: "Manipur", value: getRandomInt() },
113-
// { id: "ML", state: "Meghalaya", value: 59 },
114-
// { id: "MZ", state: "Mizoram", value: getRandomInt() },
115-
// { id: "NL", state: "Nagaland", value: 59 },
116-
// { id: "OR", state: "Odisha", value: 59 },
117-
// { id: "PB", state: "Punjab", value: getRandomInt() },
118-
// { id: "RJ", state: "Rajasthan", value: getRandomInt() },
119-
// { id: "SK", state: "Sikkim", value: getRandomInt() },
120-
// { id: "TN", state: "Tamil Nadu", value: getRandomInt() },
121-
// { id: "TG", state: "Telangana", value: getRandomInt() },
122-
// { id: "TR", state: "Tripura", value: 14 },
123-
// { id: "UT", state: "Uttarakhand", value: getRandomInt() },
124-
// { id: "UP", state: "Uttar Pradesh", value: 15 },
125-
// { id: "WB", state: "West Bengal", value: 17 },
126-
// { id: "WB", state: "West Bengal", value: 17 },
127-
// { id: "AN", state: "Andaman and Nicobar Islands", value: getRandomInt() },
128-
// { id: "CH", state: "Chandigarh", value: getRandomInt() },
129-
// { id: "DN", state: "Dadra and Nagar Haveli", value: 19 },
130-
// { id: "DD", state: "Daman and Diu", value: 20 },
131-
// { id: "DL", state: "Delhi", value: 59 },
132-
// { id: "JK", state: "Jammu and Kashmir", value: 25 },
133-
// { id: "LA", state: "Ladakh", value: getRandomInt() },
134-
// { id: "LD", state: "Lakshadweep", value: getRandomInt() },
135-
// { id: "PY", state: "Puducherry", value: getRandomInt() },
136-
// ];
137-
// };
138-
139-
function Map(props) {
140-
const [tooltipContent, setTooltipContent] = useState("");
141-
const [data, setData] = useState(getHeatMapData());
142-
const completeData = props.completeData;
143-
144-
const formatData = (completeData) => {
145-
console.log(completeData);
146-
const newArr = completeData.slice(-1).map((data) => data.regional);
147-
const formatedData = newArr.flat().map((region, i) => {
148-
return {
149-
state: region.loc,
150-
value: region.totalConfirmed,
151-
};
152-
});
153-
console.log(formatedData);
154-
};
155-
156-
formatData(completeData);
157-
158-
const gradientData = {
159-
fromColor: COLOR_RANGE[0],
160-
toColor: COLOR_RANGE[COLOR_RANGE.length - 1],
161-
min: 0,
162-
max: data.reduce((max, item) => (item.value > max ? item.value : max), 0),
163-
};
164-
165-
const colorScale = scaleQuantile()
166-
.domain(data.map((d) => d.value))
167-
.range(COLOR_RANGE);
52+
class Map extends Component {
53+
constructor(props) {
54+
super(props);
55+
this.state = {
56+
tooltipContent: "",
57+
data: [
58+
{ id: "AP", state: "Andhra Pradesh", value: getRandomInt() },
59+
{ id: "AR", state: "Arunachal Pradesh", value: getRandomInt() },
60+
],
61+
};
62+
}
16863

169-
const onMouseEnter = (geo, current = { value: "NA" }) => {
64+
onMouseEnter = (geo, current = { value: "NA" }) => {
17065
return () => {
171-
setTooltipContent(`${geo.properties.name}: ${current.value}`);
66+
this.setState({
67+
tooltipContent: `${geo.properties.name}: ${current.value}`,
68+
});
17269
};
17370
};
17471

175-
const onMouseLeave = () => {
176-
setTooltipContent("");
72+
onMouseLeave = () => {
73+
this.setState({ tooltipContent: "" });
17774
};
17875

179-
const onChangeButtonClick = () => {
180-
setData(getHeatMapData());
76+
onChangeButtonClick = () => {
77+
this.setState({ data: this.formatData(this.props.completeData) });
18178
};
18279

183-
return (
184-
<div className="full-width-height container">
185-
<ReactTooltip>{tooltipContent}</ReactTooltip>
186-
<ComposableMap
187-
projectionConfig={PROJECTION_CONFIG}
188-
projection="geoMercator"
189-
width={600}
190-
height={220}
191-
data-tip=""
192-
>
193-
<Geographies geography={INDIA_TOPO_JSON}>
194-
{({ geographies }) =>
195-
geographies.map((geo) => {
196-
const current = data.find((s) => s.id === geo.id);
197-
return (
198-
<Geography
199-
key={geo.rsmKey}
200-
geography={geo}
201-
fill={current ? colorScale(current.value) : DEFAULT_COLOR}
202-
style={geographyStyle}
203-
onMouseEnter={onMouseEnter(geo, current)}
204-
onMouseLeave={onMouseLeave}
205-
/>
206-
);
207-
})
208-
}
209-
</Geographies>
210-
</ComposableMap>
211-
<LinearGradient data={gradientData} />
212-
</div>
213-
);
80+
render() {
81+
const data = this.props.mapData;
82+
const gradientData = {
83+
fromColor: COLOR_RANGE[0],
84+
toColor: COLOR_RANGE[COLOR_RANGE.length - 1],
85+
min: 0,
86+
max: data.reduce((max, item) => (item.value > max ? item.value : max), 0),
87+
};
88+
89+
const colorScale = scaleQuantile()
90+
.domain(data.map((d) => d.value))
91+
.range(COLOR_RANGE);
92+
93+
return (
94+
<div className="full-width-height container">
95+
<ReactTooltip>{this.state.tooltipContent}</ReactTooltip>
96+
<ComposableMap
97+
projectionConfig={PROJECTION_CONFIG}
98+
projection="geoMercator"
99+
width={600}
100+
height={220}
101+
data-tip=""
102+
>
103+
<Geographies geography={INDIA_TOPO_JSON}>
104+
{({ geographies }) =>
105+
geographies.map((geo) => {
106+
const current = data.find((s) => s.id === geo.id);
107+
return (
108+
<Geography
109+
key={geo.rsmKey}
110+
geography={geo}
111+
fill={current ? colorScale(current.value) : DEFAULT_COLOR}
112+
style={geographyStyle}
113+
onMouseEnter={this.onMouseEnter(geo, current)}
114+
onMouseLeave={this.onMouseLeave}
115+
/>
116+
);
117+
})
118+
}
119+
</Geographies>
120+
</ComposableMap>
121+
<LinearGradient data={gradientData} />
122+
</div>
123+
);
124+
}
214125
}
215126

216127
export default Map;

0 commit comments

Comments
 (0)