DEV Community: Rajesh Sharma

How to create a choropleth Map or Geographic HeatMap in React

Rajesh Sharma — Sat, 15 Dec 2018 17:54:55 +0000

A Choropleth Map is a thematic map in which areas are shaded or patterned in proportion to the measurement of the statistical variable being displayed on the map, such as population density or per-capita income.In this guide we’ll be creating a Choropleth map of Canada, But it can be used as a guide to create a similar map of any country. We’ll be using Datamap for this purpose. I am assuming that you are familiar with React.

Create a new project using create-react-app
$ create-react-app map-example
Go inside the project folder and start the development server -
$ cd map-example $ yarn start
Install datamaps using yarn or npm

Datamaps is intended to provide some data visualizations based on geographical data. It’s SVG-based, can scale to any screen size, and includes everything inside of 1 script file. It heavily relies on the amazing D3.js library.
$ yarn add datamaps
Get the topoJson file of the country for which the map has to be created

The topoJson file contains the geometric data to plot the map of the country. To get the TopoJson file of a specific country, follow these steps:
- Go to https://github.com/markmarkoh/datamaps/tree/master/dist
- Find the datamaps.{xyz}.js file for the country xyz. xyz is the 3 character code for any country. Since we are creating a map for Canada, we’ll find the file named datamaps.can.js in the above repository (“can” is the 3 character code for Canada).
- Copy the contents of the file and paste it in the browser console (You can open the console by pressing F12 in the browser).
- Execute the following code after running the above code in the browser.
  
  copy(Datamap.prototype.canTopo);
  
  It will copy the data returned by Datamap.prototype.canTopo function to the clipboard. (You can replace “can” with any other country code if you are creating the map for another country).
- Create a new file named Canada.topo.json inside the src/components directory in the project folder.
- Paste the contents copied from the browser console. If the state codes contains dot(.) in the topo json, then you need to remove the dot from the code e.g, if your state code is CA.AL, remove CA. part to get 2-digit ISO code AL. If the states code are already in 2-digit ISO or do’t have dot(.) then don’t do any modification follow next steps. Objects country name in {xyz}.topo.json should be same as we have declared in the Datamap scope. e.g, for Canada, in canada.topo.json we have {“type”:”Topology”, “objects”:{“can”:{“type”:”GeometryCollection”}}}
  and we have provided scope as ‘canada’ in the map component in next step. So this case ‘can’ in canada.topo.json must be as ‘canada’ i.e.
  {“type”:”Topology”, “objects”:{“canada”:{“type”:”GeometryCollection”}}}
Create the ChoroplethMap component

This will be the component which will render the choropleth map (or geographic heatmap) in the DOM.
Create a new file named ChoroplethMap.js inside src/components directory in the project folder.
The contents of the file should be as below -

Now, we’ll walk through the code above - Starting with the usual react stuff, we have imported all the required packages as well as the topo json fiile.

Inside the componentDidMount lifecycle method, we have configured and rendered the choropleth Choropleth map using datemaps and d3.

We have transformed the data coming as the props to the format that Datamaps expects it to be in by finding the minimum and the maximum value from the data and then generating the colour palette using d3 scale. After that, we have created the map using new Datamap() and passing all the configurations and the data to plot the map.

Note that we have overridden the setProjection method to define the properties of the map like the center and the scale.The center of the map varies according to the country.

We have set [-106.3468, 68.1304] to locate center point for Canada in the world map. That means Latitude = -106.3468 E and Longitude = 68.1304 N. Remember Latitude and Longitude are always East and North. For western countries, Latitude are in West so make it convert as Negative of East. e.g 102.3421 W ==> -102.3421 E.

After that, we have rendered a div with the id=”choropleth_map”, which is used by Datamap to render the map.
Import and render the ChoroplethMap component in App.js

Now inside App.js component, we have to import the ChoroplethMap component that we created in the above steps and render it inside a div so that the App component looks like below -

We have defined some sample data in the state and passed it to the map component as props. Also, we have set the height and width of the container div through inline styles. This is important as the map component has the height and width set to 100% of the parent element.

Now run $ react start in the terminal and test the app.

You can clone and test the project from the following repository on github -

WebDevRaj / choropleth-map

A chloropleth map or Geographic heatmap created in react using datamaps.

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool…

View on GitHub

References :

npm/datamaps
Wikipedia

Originally published on medium - How to create a choropleth Map or a Geographic HeatMap in React

Deploy a React app on heroku the right way

Rajesh Sharma — Wed, 17 Oct 2018 17:30:14 +0000

Deploying a react app on heroku is the easiest task when we talk about deployment. However, if you miss some important steps, you might break the react-router’s functionality or deploy a development build to production.

So let’s look into the process of deploying a react app on heroku the right way, so that we get a production optimised build and react-router’s functionality intact.

I use create-react-app for generating the boilerplate code for a react app and assume that you’re using the same.

The very first step is to create a project using create-react-app and update the code as required. $ create-react-app MyAwesomeApp $ cd MyAwesomeApp
Next, we have to initialise a git repository inside the project folder. $ git init
Sign up on heroku if you haven’t already.
Install heroku CLI

https://devcenter.heroku.com/articles/heroku-cli
Login in heroku CLI using your email and password.
$ heroku login
Create a new heroku app while using the create-react-app buildpack. This buildpack deploys a React UI as a static web site. It also uses the production build of React app for deployment.
$ heroku create MY-AWESOME-APP --buildpack https://github.com/mars/create-react-app-buildpack.git
Add a new file in the root of your project directory and name it static.json. Put the following code into it.
{ "root": "build/", "clean_urls": false, "routes": { "/**": "index.html" } }
Now commit all the changes and push the code to heroku master.
$ git add . $ git commit -m "initial commit" $ git push heroku master
You can check the deployment using $ heroku open

Checkout create-react-app-buildpack and Heroku for more details.

Original Post : https://medium.com/@WebDevRaj/deploy-a-react-app-on-heroku-the-right-way-e17333d29169

How I landed my first developer Job

Rajesh Sharma — Tue, 26 Jun 2018 09:09:40 +0000

I would like to share my short story on how I landed my first Job as a Front-End Developer.

A little background about my education: I was always interested in the tech since I was in school and learned C++ during last years of school. I finished my schooling in 2014 and got admission in an average Private engineering college. During first 2 years of my college, I didn't focus on learning much except a 2 months training in Java. However, I had a good understanding of core concepts of programming.

In the third year, I decided to learn web development. After taking few short courses on HTML and CSS I started "The web Developer Bootcamp" by Colt Steele. It was such a nice course that made my interest in Web development. I learned about HTML, CSS, JavaScript, jQuery, Bootstrap, NodeJS, ExpressJS etc. After that, I took few more courses on Angular and Java.

At the end of my third year, I applied for a number of Internships but didn't get selected for any. But I still kept applying.

During the final year of my college, I appeared for a few interviews for internship, I got rejected in most of them initially, but after a few months, I started getting positive feedback and finally cleared 3 interviews for unpaid internships. But I needed some monetary rewards as well to keep myself motivated and during one of the interviews, after I cleared all the rounds, the HR told me that I won't get any stipend as I was from a tier 3 college. That hit me very hard so I decided to move to NCR, a place with better opportunities. I appeared for 4 interviews on a single day, failed in 3 but cleared the last one. It was in a small startup for a profile of Web Developer Intern with a some stipend as well.

The internship started in February. In the initial 2 weeks, I learned about some Java frameworks like Struts, Spring & Hibernate and then Angular. I worked on a few bug fixes and enhancements in a Big Enterprise Java Application. Most of the work was repetitive and kind of boring, so I kept looking for better opportunities.

After a few more failed interviews, I cleared an interview for a front-end developer intern profile at another startup with almost double stipend and ReactJs as the main technology. I left the previous company and joined the new one.

In the new company, I learned ReactJs and started working on a project. Finally, after 2 months, I got a PPO and got a full-time Front-End Developer role with a good enough salary package according to my skills and experience. I am happy with my current Job and a lot more is left to achieve.

DEV Community: Rajesh Sharma

How to create a choropleth Map or Geographic HeatMap in React

Create a new project using create-react-app

Install datamaps using yarn or npm

Get the topoJson file of the country for which the map has to be created

Create the ChoroplethMap component

Import and render the ChoroplethMap component in App.js

WebDevRaj / choropleth-map

A chloropleth map or Geographic heatmap created in react using datamaps.

Available Scripts

`npm start`

`npm test`

`npm run build`

`npm run eject`

Deploy a React app on heroku the right way

How I landed my first developer Job