Create high-performance 3D data visualizations with Deck.gl and Google Maps. Analyze over 140K gun violence ☠️🤕 incidents by geographic location. https://us-gun-violence.web.app/

- Tutorial https://fireship.io/lessons/deckgl-google-maps-tutorial/
- Deck.gl https://deck.gl/#/showcases/overview
- Google Maps https://developers.google.com/maps/documentation/javascript/tutorial

#datavis #gunviolence #googlemaps 

Take the quiz 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:30:32.141Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
dd162eba-eca7-4f2c-aaf7-dce5aa3df0b5
dc23fee9101beda5c23516b46d2671ff1cb6571d73e37d2eadffbf09fd712981
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Today, we'll take over 140,000 data points of people being killed or injured by guns and visualize them with deck gl and Google Maps.
We can go from a heat map of the entire country down to the actual street view of a neighborhood where the shit went down.
We'll start by adding a scatter plot layer for every single point in the data set.
Then we'll add a tooltip to see how many people were injured or killed at a given incident.
Then, we'll cluster points together into a heat map based on the map's zoom level.
Lastly, we'll cluster points into a hexagon with a 1 mile by hideous and extrude them into a 3 d shape where the elevation represents the amount of violence in that space.
We can do all of this data visualization efficiently thanks to a library called deck.
Gl.
It was created by Uber to visualize their own data and is able to run computations efficiently by offloading them to the GPU with WebGL.
By Say hello to my little friend.
Take a look at their Showcase for some awesome examples of companies using this technology in production.
I think my favorite is Escape.
It uses the deck gl arc layer to visualize the cheapest flights based on your by Cajun around the world.
Now, I realize that guns are a hot political issue in the United States, so I've tried to make this visual as neutral as possible.
The data comes from the gun violence archive from the years 2013 to 2018.
On the live demo, you can filter by defensive use, suicide, and so on to get a better picture of how the data is distributed.
Before we get started, let's talk a little bit more about how deck gl works.
You can think of it as a layer or multiple layers that sit on top of your Google Map.
When the user pans around or zooms in and out, the overlay will stick to the map.
And an awesome thing about this is that the layers can be composited.
In other words, you can set layers on top of each other, add some transparency, and deck.
Gl will calculate the composite colors that are actually rendered in the screen.
And that can give you some amazing three d visuals on top of a 2 dimensional map.
The actual JavaScript library itself follows the reactive programming paradigm, time, so it's very simple and familiar to most front end developers.
All you really need is a good dataset, a Google Maps API key, a few few lines of JavaScript, and you'll be up and running with interactive 3 d visuals on top of your map.
The first thing you'll need to get started is a Google Maps API key.
Create a by project or using existing project on the Google Cloud Platform console.
From there, go to the API screen.
You'll find the Google Maps JavaScript API, enable it, and then go to the credentials tab and grab your browser API key.
Just make a note of the API key for now, we'll need it in a minute or so when we get into the code.
You can use deck.
Gl in any framework, but it provides additional support for React.
In this video, I'm going to use vanilla JavaScript with webpack, and we'll set it up with hot module replacement for a nice developer experience.
Go ahead and open up Versus Code, and keep in mind you can find all of these steps in this lesson on Fireship IO.
First, we'll run npm init with the y flag to set up a new npm project.
Then we'll install webpack and webpack dev server into the development environment.
From there, I'll open up the package JSON, and I'm going to add a couple of scripts that we can use to build and serve the app.
The build command runs web by PAC and outputs everything into the public folder, which is where we'll actually put our production code.
Then the start command will use webpack by dev server to serve that code locally on local host 8080, and it will also perform hot module replacement whenever our source code changes.
The next thing we'll do is install deckgl.
It's organized in a monorepo, so there's different packages that you may or may not need.
We're going to need the Google Maps package, layers, by and aggregation layers.
The next thing we'll do is create a file for our JavaScript source code in the source directory.
And a little Versus Code pro tip here is to create that file with a slash and it will automatically create the directory structure for you.
Then we'll do the same thing for the public HTML file.
Then inside this HTML, we'll just Start with a plain HTML document, and we'll make a reference to the main JS file, which is where webpack will build our source code.
After that, we'll add a deferred script tag for the Google Maps JavaScript API.
This script has 2 required parameters.
The first one is the by PIKey, which is the browser API key that you got from the Google Cloud Platform console.
Then the callback is the name of a function defined on the window that initializes the map with whatever options you want to pass to it.
We'll define that one in just a minute in our JavaScript code.
Then the last thing we'll wanna do is go into the body of the HTML and add a div with an id of map.
This div will be replaced by the actual Google map, and in our case, we want to display a full screen map.
So we'll use some CSS to set the width and height to 100% of the viewport.
Now we'll go ahead and open up our JavaScript file, and we'll want to define a function on the window object.
This is the callback that we set on the Google Maps script tag.
The first argument is the actual div that will be replaced by the map, so we'll go ahead and get that by its ID.
And then you can add a bunch of additional options here depending on how you want to customize your app.
In fact, Google provides a wizard that helps you quickly customize the appearance of your map.
It.
That's how I created the dark map that you see in the demo.
So now that we have this init map function on the window, we can run npm start to tell webpack to build our code.
It.
That will also spin up a server on local host 8080.
So if you navigate there, you should see the default map at this point, and your code should rebuild anytime you update and save the index JS by file.
Now that we have this initial setup out of the way, we need to get some actual data to display on the map.
Now this can be very easy or very difficult depending on the data you're working with.
If you wanna go the easy route, you can simply grab the JSON data that lives on my web server.
But since you're a developer, I'm assuming you want to use your own custom by data.
A great place to find free data that's already well formatted is from Kaggle datasets, but in most cases, this data is going to be in CSV format.
An easy way to convert this data to the proper format is to use the node package convert CSV to JSON.
From there, create a file called convert dotjs in the root of your project.
Then inside the script, we can create a very simple node script that has an input in CSV format and then an output in JSON.
Now we can just Run that script from the command line and we've magically converted our custom dataset into JSON format that we can use with deck gl.
Your data should be an array of JSON objects, So in our case it looks like this.
The property names on this object can be anything you want, so you don't really need to format your data in any special way because as you'll see in the code, we tell deck.
Gl exactly how to access this data.
Let's move into our index.
Js file, and we'll import Google Maps overlay as well as the layers that we want to display from deck.
Gl.
Now like I said earlier, deck.
Gl uses a reactive programming paradigm, so I like to create my layers inside of a function.
Anytime your map or data changes, you tell deck gl to rebuild the entire map.
Under the hood, it's looking at the diff to update things efficiently, very similar to React JS.
It can do that because every layer is required to have a unique ID, and deck gl uses that to track the changes for that specific layer.
It.
The next option that you'll need to pass is the data.
So in our case, this will just be the path to the local JSON file, but this could also be a remote URL or a promise that resolves to the JSON object.
Now every layer has a variety of optional parameters that you can pass to customize the way the points are displayed.
Things like opacity and pixel radius are pretty self explanatory.
Now for every point in the dataset, deck gl is going to call the function that you pass to get position.
So get position is very similar to a for each loop where d represents an individual object in the dataset.
The function needs to return an array of the longitude point and the latitude point in that order.
It's not latitude longitude like you might see in other map programs, it's the more mathematically correct format of x y.
You can also use functions to compute other properties, like the actual fill color on the scatter plot.
In this case, I'm looking at if the number of people killed in this incident is greater than 0, in in which case I'll make the dot red, otherwise I'll make it orange which means that there are only injuries.
And that's all it takes to define a scatterplot layer.
From there, I'm going to jump down into the init map function that we wrote earlier.
We'll define a variable called overlay that's equal to a Google Maps overlay instance, then it takes an array of layers that will be stacked on top of each other.
So we'll go ahead and add our scatter plot function there.
Then the final step is to add overlay set map with the actual Google Maps instance.
By so that's how we initialize a map for the first time.
If you're running updates on a map, you would call set props with any subsequent updates to the same map.
I just wanted to point that out, but we're actually not going to use it in this simplified demo.
From here, if you open the browser, you should see all the points plotted on the map.
But I'd like to make these a little more interactive by adding a tooltip when the user hovers over an individual point.
We can do that by setting the Pickable option to true on the scatterplot layer.
And then from there, we'll define a function that runs on the on hover event.
This will give us access to the actual data object that represents that point and then also its x y coordinates.
We'll grab an element from the DOM called tooltip, and then if an object exists, we'll go ahead and insert some HTML into that tooltip based on the actual data object.
And if an object does not exist, we'll simply hide the tooltip by setting its opacity to 0.
And you can also handle click events, so if the user clicks on a given point, we can take them to the instant report on gun violence archive.
Now a problem with the map currently is that it's kind of hard to visualize a 140,000 points all at once.
Fortunately, deck gl has aggregation layers that will cluster the points into meaningful shapes.
This time, let's go ahead and create a function that returns a heat map layer.
This function uses the same getter for position, and we also have the option to calculate the weight for each point.
By default, every data point has a weight of 1, but we want to weight the data points based on how violent the incident was.
So we'll go ahead and take the number of people killed in that incident and then add it to the number of people injured by time 0.5.
So you get the most points for killing people, but you also get bonus points for injuring people as well.
We'll go ahead and set the pixel radius to 60, and and then we could also customize colors here as well, but we'll just go ahead and skip that for now.
And lastly, we'll come down here and add the heat map to our layers.
You can see I've switched the map to dark mode to see things a little bit better, and you'll notice we get different clustering patterns based on the zoom level of the map.
If we zoom in all the way, we'll start to see the individual instance that make up the larger clusters.
The heatmap is useful, but we may want to cluster our points based on a specific boundary.
And a great way to do that is with the hexagon layer.
This allows us to cluster points into a specific radius and then increase its elevation in the 3rd dimension based on how violent that area is.
We can do that by defining a getter for the elevation weight using the same logic that we used in the previous example.
We can customize the appearance with a variety of different parameters, and you can even use your own algorithm to control how the points are clustered into the hexagon.
Go ahead and add hexagon to the layers, and you'll now see that we get these extruded shapes on the map.
We can look at the elevation of the hexagon to determine how violent that neighborhood is, and the color of the hexagon becomes more red as the violence increases.
Now we've barely only scratched the surface on what's possible with deck.
Gl.
If you need high performance data visualization on a large data set, it's definitely worth checking out.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and scribe and consider becoming a pro member at FireShip.
Io for access to even more content.
Thanks for watching, and I will talk to you soon.
By

Speaker 0: Today, we'll take over 140,000 data points of people being killed or injured by guns and visualize them with deck gl and Google Maps. We can go from a heat map of the entire country down to the actual street view of a neighborhood where the shit went down. We'll start by adding a scatter plot layer for every single point in the data set. Then we'll add a tooltip to see how many people were injured or killed at a given incident. Then, we'll cluster points together into a heat map based on the map's zoom level.

Lastly, we'll cluster points into a hexagon with a 1 mile by hideous and extrude them into a 3 d shape where the elevation represents the amount of violence in that space. We can do all of this data visualization efficiently thanks to a library called deck. Gl. It was created by Uber to visualize their own data and is able to run computations efficiently by offloading them to the GPU with WebGL. By Say hello to my little friend.

Take a look at their Showcase for some awesome examples of companies using this technology in production. I think my favorite is Escape. It uses the deck gl arc layer to visualize the cheapest flights based on your by Cajun around the world. Now, I realize that guns are a hot political issue in the United States, so I've tried to make this visual as neutral as possible. The data comes from the gun violence archive from the years 2013 to 2018.

On the live demo, you can filter by defensive use, suicide, and so on to get a better picture of how the data is distributed. Before we get started, let's talk a little bit more about how deck gl works. You can think of it as a layer or multiple layers that sit on top of your Google Map. When the user pans around or zooms in and out, the overlay will stick to the map. And an awesome thing about this is that the layers can be composited.

In other words, you can set layers on top of each other, add some transparency, and deck. Gl will calculate the composite colors that are actually rendered in the screen. And that can give you some amazing three d visuals on top of a 2 dimensional map. The actual JavaScript library itself follows the reactive programming paradigm, time, so it's very simple and familiar to most front end developers. All you really need is a good dataset, a Google Maps API key, a few few lines of JavaScript, and you'll be up and running with interactive 3 d visuals on top of your map.

The first thing you'll need to get started is a Google Maps API key. Create a by project or using existing project on the Google Cloud Platform console. From there, go to the API screen. You'll find the Google Maps JavaScript API, enable it, and then go to the credentials tab and grab your browser API key. Just make a note of the API key for now, we'll need it in a minute or so when we get into the code.

You can use deck. Gl in any framework, but it provides additional support for React. In this video, I'm going to use vanilla JavaScript with webpack, and we'll set it up with hot module replacement for a nice developer experience. Go ahead and open up Versus Code, and keep in mind you can find all of these steps in this lesson on Fireship IO. First, we'll run npm init with the y flag to set up a new npm project.

Then we'll install webpack and webpack dev server into the development environment. From there, I'll open up the package JSON, and I'm going to add a couple of scripts that we can use to build and serve the app. The build command runs web by PAC and outputs everything into the public folder, which is where we'll actually put our production code. Then the start command will use webpack by dev server to serve that code locally on local host 8080, and it will also perform hot module replacement whenever our source code changes. The next thing we'll do is install deckgl.

It's organized in a monorepo, so there's different packages that you may or may not need. We're going to need the Google Maps package, layers, by and aggregation layers. The next thing we'll do is create a file for our JavaScript source code in the source directory. And a little Versus Code pro tip here is to create that file with a slash and it will automatically create the directory structure for you. Then we'll do the same thing for the public HTML file.

Then inside this HTML, we'll just Start with a plain HTML document, and we'll make a reference to the main JS file, which is where webpack will build our source code. After that, we'll add a deferred script tag for the Google Maps JavaScript API. This script has 2 required parameters. The first one is the by PIKey, which is the browser API key that you got from the Google Cloud Platform console. Then the callback is the name of a function defined on the window that initializes the map with whatever options you want to pass to it.

We'll define that one in just a minute in our JavaScript code. Then the last thing we'll wanna do is go into the body of the HTML and add a div with an id of map. This div will be replaced by the actual Google map, and in our case, we want to display a full screen map. So we'll use some CSS to set the width and height to 100% of the viewport. Now we'll go ahead and open up our JavaScript file, and we'll want to define a function on the window object.

This is the callback that we set on the Google Maps script tag. The first argument is the actual div that will be replaced by the map, so we'll go ahead and get that by its ID. And then you can add a bunch of additional options here depending on how you want to customize your app. In fact, Google provides a wizard that helps you quickly customize the appearance of your map. It.

That's how I created the dark map that you see in the demo. So now that we have this init map function on the window, we can run npm start to tell webpack to build our code. It. That will also spin up a server on local host 8080. So if you navigate there, you should see the default map at this point, and your code should rebuild anytime you update and save the index JS by file.

Now that we have this initial setup out of the way, we need to get some actual data to display on the map. Now this can be very easy or very difficult depending on the data you're working with. If you wanna go the easy route, you can simply grab the JSON data that lives on my web server. But since you're a developer, I'm assuming you want to use your own custom by data. A great place to find free data that's already well formatted is from Kaggle datasets, but in most cases, this data is going to be in CSV format.

An easy way to convert this data to the proper format is to use the node package convert CSV to JSON. From there, create a file called convert dotjs in the root of your project. Then inside the script, we can create a very simple node script that has an input in CSV format and then an output in JSON. Now we can just Run that script from the command line and we've magically converted our custom dataset into JSON format that we can use with deck gl. Your data should be an array of JSON objects, So in our case it looks like this.

The property names on this object can be anything you want, so you don't really need to format your data in any special way because as you'll see in the code, we tell deck. Gl exactly how to access this data. Let's move into our index. Js file, and we'll import Google Maps overlay as well as the layers that we want to display from deck. Gl.

Now like I said earlier, deck. Gl uses a reactive programming paradigm, so I like to create my layers inside of a function. Anytime your map or data changes, you tell deck gl to rebuild the entire map. Under the hood, it's looking at the diff to update things efficiently, very similar to React JS. It can do that because every layer is required to have a unique ID, and deck gl uses that to track the changes for that specific layer.

It. The next option that you'll need to pass is the data. So in our case, this will just be the path to the local JSON file, but this could also be a remote URL or a promise that resolves to the JSON object. Now every layer has a variety of optional parameters that you can pass to customize the way the points are displayed. Things like opacity and pixel radius are pretty self explanatory.

Now for every point in the dataset, deck gl is going to call the function that you pass to get position. So get position is very similar to a for each loop where d represents an individual object in the dataset. The function needs to return an array of the longitude point and the latitude point in that order. It's not latitude longitude like you might see in other map programs, it's the more mathematically correct format of x y. You can also use functions to compute other properties, like the actual fill color on the scatter plot.

In this case, I'm looking at if the number of people killed in this incident is greater than 0, in in which case I'll make the dot red, otherwise I'll make it orange which means that there are only injuries. And that's all it takes to define a scatterplot layer. From there, I'm going to jump down into the init map function that we wrote earlier. We'll define a variable called overlay that's equal to a Google Maps overlay instance, then it takes an array of layers that will be stacked on top of each other. So we'll go ahead and add our scatter plot function there.

Then the final step is to add overlay set map with the actual Google Maps instance. By so that's how we initialize a map for the first time. If you're running updates on a map, you would call set props with any subsequent updates to the same map. I just wanted to point that out, but we're actually not going to use it in this simplified demo. From here, if you open the browser, you should see all the points plotted on the map.

But I'd like to make these a little more interactive by adding a tooltip when the user hovers over an individual point. We can do that by setting the Pickable option to true on the scatterplot layer. And then from there, we'll define a function that runs on the on hover event. This will give us access to the actual data object that represents that point and then also its x y coordinates. We'll grab an element from the DOM called tooltip, and then if an object exists, we'll go ahead and insert some HTML into that tooltip based on the actual data object.

And if an object does not exist, we'll simply hide the tooltip by setting its opacity to 0. And you can also handle click events, so if the user clicks on a given point, we can take them to the instant report on gun violence archive. Now a problem with the map currently is that it's kind of hard to visualize a 140,000 points all at once. Fortunately, deck gl has aggregation layers that will cluster the points into meaningful shapes. This time, let's go ahead and create a function that returns a heat map layer.

This function uses the same getter for position, and we also have the option to calculate the weight for each point. By default, every data point has a weight of 1, but we want to weight the data points based on how violent the incident was. So we'll go ahead and take the number of people killed in that incident and then add it to the number of people injured by time 0.5. So you get the most points for killing people, but you also get bonus points for injuring people as well. We'll go ahead and set the pixel radius to 60, and and then we could also customize colors here as well, but we'll just go ahead and skip that for now.

And lastly, we'll come down here and add the heat map to our layers. You can see I've switched the map to dark mode to see things a little bit better, and you'll notice we get different clustering patterns based on the zoom level of the map. If we zoom in all the way, we'll start to see the individual instance that make up the larger clusters. The heatmap is useful, but we may want to cluster our points based on a specific boundary. And a great way to do that is with the hexagon layer.

This allows us to cluster points into a specific radius and then increase its elevation in the 3rd dimension based on how violent that area is. We can do that by defining a getter for the elevation weight using the same logic that we used in the previous example. We can customize the appearance with a variety of different parameters, and you can even use your own algorithm to control how the points are clustered into the hexagon. Go ahead and add hexagon to the layers, and you'll now see that we get these extruded shapes on the map. We can look at the elevation of the hexagon to determine how violent that neighborhood is, and the color of the hexagon becomes more red as the violence increases.

Now we've barely only scratched the surface on what's possible with deck. Gl. If you need high performance data visualization on a large data set, it's definitely worth checking out. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and consider becoming a pro member at FireShip.

Io for access to even more content. Thanks for watching, and I will talk to you soon. By
Today, we'll take over 140,000 data points of people being killed or injured by guns and visualize them with deck gl and Google Maps. We can go from a heat map of the entire country down to the actual street view of a neighborhood where the shit went down. We'll start by adding a scatter plot layer for every single point in the data set. Then we'll add a tooltip to see how many people were injured or killed at a given incident.
Then, we'll cluster points together into a heat map based on the map's zoom level. Lastly, we'll cluster points into a hexagon with a 1 mile by hideous and extrude them into a 3 d shape where the elevation represents the amount of violence in that space. We can do all of this data visualization efficiently thanks to a library called deck. Gl. It was created by Uber to visualize their own data and is able to run computations efficiently by offloading them to the GPU with WebGL. By Say hello to my little friend. Take a look at their Showcase for some awesome examples of companies using this technology in production. I think my favorite is Escape. It uses the deck gl arc layer to visualize the cheapest flights based on your by Cajun around the world. Now, I realize that guns are a hot political issue in the United States, so I've tried to make this visual as neutral as possible. The data comes from the gun violence archive from the years 2013 to 2018. On the live demo, you can filter by defensive use, suicide, and so on to get a better picture of how the data is distributed. Before we get started, let's talk a little bit more about how deck gl works.
firearms
visualization
programming
aerospace
technology
software development
geometry
software
marketing
air travel
industry
weapons
data analysis
tourism
geography
data
You can think of it as a layer or multiple layers that sit on top of your Google Map.
When the user pans around or zooms in and out, the overlay will stick to the map. And an awesome thing about this is that the layers can be composited. In other words, you can set layers on top of each other, add some transparency, and deck. Gl will calculate the composite colors that are actually rendered in the screen. And that can give you some amazing three d visuals on top of a 2 dimensional map. The actual JavaScript library itself follows the reactive programming paradigm, time, so it's very simple and familiar to most front end developers.
visualization
graphic design
All you really need is a good dataset, a Google Maps API key, a few few lines of JavaScript, and you'll be up and running with interactive 3 d visuals on top of your map. The first thing you'll need to get started is a Google Maps API key. Create a by project or using existing project on the Google Cloud Platform console. From there, go to the API screen. You'll find the Google Maps JavaScript API, enable it, and then go to the credentials tab and grab your browser API key.
google
Just make a note of the API key for now, we'll need it in a minute or so when we get into the code. You can use deck. Gl in any framework, but it provides additional support for React. In this video, I'm going to use vanilla JavaScript with webpack, and we'll set it up with hot module replacement for a nice developer experience. Go ahead and open up Versus Code, and keep in mind you can find all of these steps in this lesson on Fireship IO. First, we'll run npm init with the y flag to set up a new npm project.
Then we'll install webpack and webpack dev server into the development environment. From there, I'll open up the package JSON, and I'm going to add a couple of scripts that we can use to build and serve the app. The build command runs web by PAC and outputs everything into the public folder, which is where we'll actually put our production code. Then the start command will use webpack by dev server to serve that code locally on local host 8080, and it will also perform hot module replacement whenever our source code changes.
software development
programming
software
The next thing we'll do is install deckgl. It's organized in a monorepo, so there's different packages that you may or may not need. We're going to need the Google Maps package, layers, by and aggregation layers. The next thing we'll do is create a file for our JavaScript source code in the source directory. And a little Versus Code pro tip here is to create that file with a slash and it will automatically create the directory structure for you. Then we'll do the same thing for the public HTML file. Then inside this HTML, we'll just Start with a plain HTML document, and we'll make a reference to the main JS file, which is where webpack will build our source code. After that, we'll add a deferred script tag for the Google Maps JavaScript API. This script has 2 required parameters. The first one is the by PIKey, which is the browser API key that you got from the Google Cloud Platform console. Then the callback is the name of a function defined on the window that initializes the map with whatever options you want to pass to it. We'll define that one in just a minute in our JavaScript code. Then the last thing we'll wanna do is go into the body of the HTML and add a div with an id of map. This div will be replaced by the actual Google map, and in our case, we want to display a full screen map. So we'll use some CSS to set the width and height to 100% of the viewport. Now we'll go ahead and open up our JavaScript file, and we'll want to define a function on the window object. This is the callback that we set on the Google Maps script tag.
The first argument is the actual div that will be replaced by the map, so we'll go ahead and get that by its ID. And then you can add a bunch of additional options here depending on how you want to customize your app. In fact, Google provides a wizard that helps you quickly customize the appearance of your map. It. That's how I created the dark map that you see in the demo. So now that we have this init map function on the window, we can run npm start to tell webpack to build our code.
google
It. That will also spin up a server on local host 8080. So if you navigate there, you should see the default map at this point, and your code should rebuild anytime you update and save the index JS by file. Now that we have this initial setup out of the way, we need to get some actual data to display on the map. Now this can be very easy or very difficult depending on the data you're working with.
If you wanna go the easy route, you can simply grab the JSON data that lives on my web server. But since you're a developer, I'm assuming you want to use your own custom by data. A great place to find free data that's already well formatted is from Kaggle datasets, but in most cases, this data is going to be in CSV format.
databases
An easy way to convert this data to the proper format is to use the node package convert CSV to JSON. From there, create a file called convert dotjs in the root of your project. Then inside the script, we can create a very simple node script that has an input in CSV format and then an output in JSON. Now we can just Run that script from the command line and we've magically converted our custom dataset into JSON format that we can use with deck gl. Your data should be an array of JSON objects, So in our case it looks like this. The property names on this object can be anything you want, so you don't really need to format your data in any special way because as you'll see in the code, we tell deck. Gl exactly how to access this data. Let's move into our index. Js file, and we'll import Google Maps overlay as well as the layers that we want to display from deck. Gl. Now like I said earlier, deck. Gl uses a reactive programming paradigm, so I like to create my layers inside of a function. Anytime your map or data changes, you tell deck gl to rebuild the entire map. Under the hood, it's looking at the diff to update things efficiently, very similar to React JS. It can do that because every layer is required to have a unique ID, and deck gl uses that to track the changes for that specific layer. It. The next option that you'll need to pass is the data. So in our case, this will just be the path to the local JSON file, but this could also be a remote URL or a promise that resolves to the JSON object. Now every layer has a variety of optional parameters that you can pass to customize the way the points are displayed. Things like opacity and pixel radius are pretty self explanatory. Now for every point in the dataset, deck gl is going to call the function that you pass to get position. So get position is very similar to a for each loop where d represents an individual object in the dataset.
The function needs to return an array of the longitude point and the latitude point in that order. It's not latitude longitude like you might see in other map programs, it's the more mathematically correct format of x y. You can also use functions to compute other properties, like the actual fill color on the scatter plot.
geometry
In this case, I'm looking at if the number of people killed in this incident is greater than 0, in in which case I'll make the dot red, otherwise I'll make it orange which means that there are only injuries. And that's all it takes to define a scatterplot layer. From there, I'm going to jump down into the init map function that we wrote earlier. We'll define a variable called overlay that's equal to a Google Maps overlay instance, then it takes an array of layers that will be stacked on top of each other. So we'll go ahead and add our scatter plot function there. Then the final step is to add overlay set map with the actual Google Maps instance. By so that's how we initialize a map for the first time. If you're running updates on a map, you would call set props with any subsequent updates to the same map.
I just wanted to point that out, but we're actually not going to use it in this simplified demo. From here, if you open the browser, you should see all the points plotted on the map. But I'd like to make these a little more interactive by adding a tooltip when the user hovers over an individual point. We can do that by setting the Pickable option to true on the scatterplot layer. And then from there, we'll define a function that runs on the on hover event.
animation
visualization
This will give us access to the actual data object that represents that point and then also its x y coordinates.
We'll grab an element from the DOM called tooltip, and then if an object exists, we'll go ahead and insert some HTML into that tooltip based on the actual data object. And if an object does not exist, we'll simply hide the tooltip by setting its opacity to 0. And you can also handle click events, so if the user clicks on a given point, we can take them to the instant report on gun violence archive.
firearms
weapons
Now a problem with the map currently is that it's kind of hard to visualize a 140,000 points all at once. Fortunately, deck gl has aggregation layers that will cluster the points into meaningful shapes. This time, let's go ahead and create a function that returns a heat map layer. This function uses the same getter for position, and we also have the option to calculate the weight for each point. By default, every data point has a weight of 1, but we want to weight the data points based on how violent the incident was. So we'll go ahead and take the number of people killed in that incident and then add it to the number of people injured by time 0.5.
data
data analysis
geometry
statistics
data management
So you get the most points for killing people, but you also get bonus points for injuring people as well. We'll go ahead and set the pixel radius to 60, and and then we could also customize colors here as well, but we'll just go ahead and skip that for now. And lastly, we'll come down here and add the heat map to our layers. You can see I've switched the map to dark mode to see things a little bit better, and you'll notice we get different clustering patterns based on the zoom level of the map. If we zoom in all the way, we'll start to see the individual instance that make up the larger clusters. The heatmap is useful, but we may want to cluster our points based on a specific boundary.
And a great way to do that is with the hexagon layer. This allows us to cluster points into a specific radius and then increase its elevation in the 3rd dimension based on how violent that area is. We can do that by defining a getter for the elevation weight using the same logic that we used in the previous example.
geometry
geography
We can customize the appearance with a variety of different parameters, and you can even use your own algorithm to control how the points are clustered into the hexagon.
Go ahead and add hexagon to the layers, and you'll now see that we get these extruded shapes on the map. We can look at the elevation of the hexagon to determine how violent that neighborhood is, and the color of the hexagon becomes more red as the violence increases. Now we've barely only scratched the surface on what's possible with deck. Gl. If you need high performance data visualization on a large data set, it's definitely worth checking out. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and consider becoming a pro member at FireShip. Io for access to even more content. Thanks for watching, and I will talk to you soon. By
internet
geometry
multimedia
media
websites
youtube
streaming
visualization
data management
social media
geography
Today, we'll take over 140,000 data points of people being killed or injured by guns and visualize them with deck gl and Google Maps. We can go from a heat map of the entire country down to the actual street view of a neighborhood where the shit went down. We'll start by adding a scatter plot layer for every single point in the data set. Then we'll add a tooltip to see how many people were injured or killed at a given incident. Then, we'll cluster points together into a heat map based on the map's zoom level. Lastly, we'll cluster points into a hexagon with a 1 mile by hideous and extrude them into a 3 d shape where the elevation represents the amount of violence in that space. We can do all of this data visualization efficiently thanks to a library called deck. Gl. It was created by Uber to visualize their own data and is able to run computations efficiently by offloading them to the GPU with WebGL. By Say hello to my little friend. Take a look at their Showcase for some awesome examples of companies using this technology in production. I think my favorite is Escape. It uses the deck gl arc layer to visualize the cheapest flights based on your by Cajun around the world. Now, I realize that guns are a hot political issue in the United States, so I've tried to make this visual as neutral as possible. The data comes from the gun violence archive from the years 2013 to 2018. On the live demo, you can filter by defensive use, suicide, and so on to get a better picture of how the data is distributed. Before we get started, let's talk a little bit more about how deck gl works. You can think of it as a layer or multiple layers that sit on top of your Google Map. When the user pans around or zooms in and out, the overlay will stick to the map. And an awesome thing about this is that the layers can be composited. In other words, you can set layers on top of each other, add some transparency, and deck. Gl will calculate the composite colors that are actually rendered in the screen. And that can give you some amazing three d visuals on top of a 2 dimensional map. The actual JavaScript library itself follows the reactive programming paradigm, time, so it's very simple and familiar to most front end developers. All you really need is a good dataset, a Google Maps API key, a few few lines of JavaScript, and you'll be up and running with interactive 3 d visuals on top of your map. The first thing you'll need to get started is a Google Maps API key. Create a by project or using existing project on the Google Cloud Platform console. From there, go to the API screen. You'll find the Google Maps JavaScript API, enable it, and then go to the credentials tab and grab your browser API key. Just make a note of the API key for now, we'll need it in a minute or so when we get into the code. You can use deck. Gl in any framework, but it provides additional support for React. In this video, I'm going to use vanilla JavaScript with webpack, and we'll set it up with hot module replacement for a nice developer experience. Go ahead and open up Versus Code, and keep in mind you can find all of these steps in this lesson on Fireship IO. First, we'll run npm init with the y flag to set up a new npm project. Then we'll install webpack and webpack dev server into the development environment. From there, I'll open up the package JSON, and I'm going to add a couple of scripts that we can use to build and serve the app. The build command runs web by PAC and outputs everything into the public folder, which is where we'll actually put our production code. Then the start command will use webpack by dev server to serve that code locally on local host 8080, and it will also perform hot module replacement whenever our source code changes. The next thing we'll do is install deckgl. It's organized in a monorepo, so there's different packages that you may or may not need. We're going to need the Google Maps package, layers, by and aggregation layers. The next thing we'll do is create a file for our JavaScript source code in the source directory. And a little Versus Code pro tip here is to create that file with a slash and it will automatically create the directory structure for you. Then we'll do the same thing for the public HTML file. Then inside this HTML, we'll just Start with a plain HTML document, and we'll make a reference to the main JS file, which is where webpack will build our source code. After that, we'll add a deferred script tag for the Google Maps JavaScript API. This script has 2 required parameters. The first one is the by PIKey, which is the browser API key that you got from the Google Cloud Platform console. Then the callback is the name of a function defined on the window that initializes the map with whatever options you want to pass to it. We'll define that one in just a minute in our JavaScript code. Then the last thing we'll wanna do is go into the body of the HTML and add a div with an id of map. This div will be replaced by the actual Google map, and in our case, we want to display a full screen map. So we'll use some CSS to set the width and height to 100% of the viewport. Now we'll go ahead and open up our JavaScript file, and we'll want to define a function on the window object. This is the callback that we set on the Google Maps script tag. The first argument is the actual div that will be replaced by the map, so we'll go ahead and get that by its ID. And then you can add a bunch of additional options here depending on how you want to customize your app. In fact, Google provides a wizard that helps you quickly customize the appearance of your map. It. That's how I created the dark map that you see in the demo. So now that we have this init map function on the window, we can run npm start to tell webpack to build our code. It. That will also spin up a server on local host 8080. So if you navigate there, you should see the default map at this point, and your code should rebuild anytime you update and save the index JS by file. Now that we have this initial setup out of the way, we need to get some actual data to display on the map. Now this can be very easy or very difficult depending on the data you're working with. If you wanna go the easy route, you can simply grab the JSON data that lives on my web server. But since you're a developer, I'm assuming you want to use your own custom by data. A great place to find free data that's already well formatted is from Kaggle datasets, but in most cases, this data is going to be in CSV format. An easy way to convert this data to the proper format is to use the node package convert CSV to JSON. From there, create a file called convert dotjs in the root of your project. Then inside the script, we can create a very simple node script that has an input in CSV format and then an output in JSON. Now we can just Run that script from the command line and we've magically converted our custom dataset into JSON format that we can use with deck gl. Your data should be an array of JSON objects, So in our case it looks like this. The property names on this object can be anything you want, so you don't really need to format your data in any special way because as you'll see in the code, we tell deck. Gl exactly how to access this data. Let's move into our index. Js file, and we'll import Google Maps overlay as well as the layers that we want to display from deck. Gl. Now like I said earlier, deck. Gl uses a reactive programming paradigm, so I like to create my layers inside of a function. Anytime your map or data changes, you tell deck gl to rebuild the entire map. Under the hood, it's looking at the diff to update things efficiently, very similar to React JS. It can do that because every layer is required to have a unique ID, and deck gl uses that to track the changes for that specific layer. It. The next option that you'll need to pass is the data. So in our case, this will just be the path to the local JSON file, but this could also be a remote URL or a promise that resolves to the JSON object. Now every layer has a variety of optional parameters that you can pass to customize the way the points are displayed. Things like opacity and pixel radius are pretty self explanatory. Now for every point in the dataset, deck gl is going to call the function that you pass to get position. So get position is very similar to a for each loop where d represents an individual object in the dataset. The function needs to return an array of the longitude point and the latitude point in that order. It's not latitude longitude like you might see in other map programs, it's the more mathematically correct format of x y. You can also use functions to compute other properties, like the actual fill color on the scatter plot. In this case, I'm looking at if the number of people killed in this incident is greater than 0, in in which case I'll make the dot red, otherwise I'll make it orange which means that there are only injuries. And that's all it takes to define a scatterplot layer. From there, I'm going to jump down into the init map function that we wrote earlier. We'll define a variable called overlay that's equal to a Google Maps overlay instance, then it takes an array of layers that will be stacked on top of each other. So we'll go ahead and add our scatter plot function there. Then the final step is to add overlay set map with the actual Google Maps instance. By so that's how we initialize a map for the first time. If you're running updates on a map, you would call set props with any subsequent updates to the same map. I just wanted to point that out, but we're actually not going to use it in this simplified demo. From here, if you open the browser, you should see all the points plotted on the map. But I'd like to make these a little more interactive by adding a tooltip when the user hovers over an individual point. We can do that by setting the Pickable option to true on the scatterplot layer. And then from there, we'll define a function that runs on the on hover event. This will give us access to the actual data object that represents that point and then also its x y coordinates. We'll grab an element from the DOM called tooltip, and then if an object exists, we'll go ahead and insert some HTML into that tooltip based on the actual data object. And if an object does not exist, we'll simply hide the tooltip by setting its opacity to 0. And you can also handle click events, so if the user clicks on a given point, we can take them to the instant report on gun violence archive. Now a problem with the map currently is that it's kind of hard to visualize a 140,000 points all at once. Fortunately, deck gl has aggregation layers that will cluster the points into meaningful shapes. This time, let's go ahead and create a function that returns a heat map layer. This function uses the same getter for position, and we also have the option to calculate the weight for each point. By default, every data point has a weight of 1, but we want to weight the data points based on how violent the incident was. So we'll go ahead and take the number of people killed in that incident and then add it to the number of people injured by time 0.5. So you get the most points for killing people, but you also get bonus points for injuring people as well. We'll go ahead and set the pixel radius to 60, and and then we could also customize colors here as well, but we'll just go ahead and skip that for now. And lastly, we'll come down here and add the heat map to our layers. You can see I've switched the map to dark mode to see things a little bit better, and you'll notice we get different clustering patterns based on the zoom level of the map. If we zoom in all the way, we'll start to see the individual instance that make up the larger clusters. The heatmap is useful, but we may want to cluster our points based on a specific boundary. And a great way to do that is with the hexagon layer. This allows us to cluster points into a specific radius and then increase its elevation in the 3rd dimension based on how violent that area is. We can do that by defining a getter for the elevation weight using the same logic that we used in the previous example. We can customize the appearance with a variety of different parameters, and you can even use your own algorithm to control how the points are clustered into the hexagon. Go ahead and add hexagon to the layers, and you'll now see that we get these extruded shapes on the map. We can look at the elevation of the hexagon to determine how violent that neighborhood is, and the color of the hexagon becomes more red as the violence increases. Now we've barely only scratched the surface on what's possible with deck. Gl. If you need high performance data visualization on a large data set, it's definitely worth checking out. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and consider becoming a pro member at FireShip. Io for access to even more content. Thanks for watching, and I will talk to you soon. By
Today,
today
we'll
we'll
take
take
over
over
140,000
140,000
data
data
points
points
of
of
people
people
being
being
killed
killed
or
or
injured
injured
by
by
guns
guns
and
and
visualize
visualize
them
them
with
with
deck
deck
gl
gl
and
and
Google
google
Maps.
maps
We
we
can
can
go
go
from
from
a
a
heat
heat
map
map
of
of
the
the
entire
entire
country
country
down
down
to
to
the
the
actual
actual
street
street
view
view
of
of
a
a
neighborhood
neighborhood
where
where
the
the
shit
shit
went
went
down.
down
We'll
we'll
start
start
by
by
adding
adding
a
a
scatter
scatter
plot
plot
layer
layer
for
for
every
every
single
single
point
point
in
in
the
the
data
data
set.
set
Then
then
we'll
we'll
add
add
a
a
tooltip
tooltip
to
to
see
see
how
how
many
many
people
people
were
were
injured
injured
or
or
killed
killed
at
at
a
a
given
given
incident.
incident
Then,
then
we'll
we'll
cluster
cluster
points
points
together
together
into
into
a
a
heat
heat
map
map
based
based
on
on
the
the
map's
map's
zoom
zoom
level.
level
Lastly,
lastly
we'll
we'll
cluster
cluster
points
points
into
into
a
a
hexagon
hexagon
with
with
a
a
1
1
mile
mile
by
by
hideous
hideous
and
and
extrude
extrude
them
them
into
into
a
a
3
3
d
d
shape
shape
where
where
the
the
elevation
elevation
represents
represents
the
the
amount
amount
of
of
violence
violence
in
in
that
that
space.
space
We
we
can
can
do
do
all
all
of
of
this
this
data
data
visualization
visualization
efficiently
efficiently
thanks
thanks
to
to
a
a
library
library
called
called
deck.
deck
Gl.
gl
It
it
was
was
created
created
by
by
Uber
uber
to
to
visualize
visualize
their
their
own
own
data
data
and
and
is
is
able
able
to
to
run
run
computations
computations
efficiently
efficiently
by
by
offloading
offloading
them
them
to
to
the
the
GPU
gpu
with
with
WebGL.
webgl
By
by
Say
say
hello
hello
to
to
my
my
little
little
friend.
friend
Take
take
a
a
look
look
at
at
their
their
Showcase
showcase
for
for
some
some
awesome
awesome
examples
examples
of
of
companies
companies
using
using
this
this
technology
technology
in
in
production.
production
I
i
think
think
my
my
favorite
favorite
is
is
Escape.
escape
It
it
uses
uses
the
the
deck
deck
gl
gl
arc
arc
layer
layer
to
to
visualize
visualize
the
the
cheapest
cheapest
flights
flights
based
based
on
on
your
your
by
by
Cajun
cajun
around
around
the
the
world.
world
Now,
now
I
i
realize
realize
that
that
guns
guns
are
are
a
a
hot
hot
political
political
issue
issue
in
in
the
the
United
united
States,
states
so
so
I've
i've
tried
tried
to
to
make
make
this
this
visual
visual
as
as
neutral
neutral
as
as
possible.
possible
The
the
data
data
comes
comes
from
from
the
the
gun
gun
violence
violence
archive
archive
from
from
the
the
years
years
2013
2013
to
to
2018.
2018
On
on
the
the
live
live
demo,
demo
you
you
can
can
filter
filter
by
by
defensive
defensive
use,
use
suicide,
suicide
and
and
so
so
on
on
to
to
get
get
a
a
better
better
picture
picture
of
of
how
how
the
the
data
data
is
is
distributed.
distributed
Before
before
we
we
get
get
started,
started
let's
let's
talk
talk
a
a
little
little
bit
bit
more
more
about
about
how
how
deck
deck
gl
gl
works.
works
You
you
can
can
think
think
of
of
it
it
as
as
a
a
layer
layer
or
or
multiple
multiple
layers
layers
that
that
sit
sit
on
on
top
top
of
of
your
your
Google
google
Map.
map
When
when
the
the
user
user
pans
pans
around
around
or
or
zooms
zooms
in
in
and
and
out,
out
the
the
overlay
overlay
will
will
stick
stick
to
to
the
the
map.
map
And
and
an
an
awesome
awesome
thing
thing
about
about
this
this
is
is
that
that
the
the
layers
layers
can
can
be
be
composited.
composited
In
in
other
other
words,
words
you
you
can
can
set
set
layers
layers
on
on
top
top
of
of
each
each
other,
other
add
add
some
some
transparency,
transparency
and
and
deck.
deck
Gl
gl
will
will
calculate
calculate
the
the
composite
composite
colors
colors
that
that
are
are
actually
actually
rendered
rendered
in
in
the
the
screen.
screen
And
and
that
that
can
can
give
give
you
you
some
some
amazing
amazing
three
three
d
d
visuals
visuals
on
on
top
top
of
of
a
a
2
2
dimensional
dimensional
map.
map
The
the
actual
actual
JavaScript
javascript
library
library
itself
itself
follows
follows
the
the
reactive
reactive
programming
programming
paradigm,
paradigm
time,
time
so
so
it's
it's
very
very
simple
simple
and
and
familiar
familiar
to
to
most
most
front
front
end
end
developers.
developers
All
all
you
you
really
really
need
need
is
is
a
a
good
good
dataset,
dataset
a
a
Google
google
Maps
maps
API
api
key,
key
a
a
few
few
few
few
lines
lines
of
of
JavaScript,
javascript
and
and
you'll
you'll
be
be
up
up
and
and
running
running
with
with
interactive
interactive
3
3
d
d
visuals
visuals
on
on
top
top
of
of
your
your
map.
map
The
the
first
first
thing
thing
you'll
you'll
need
need
to
to
get
get
started
started
is
is
a
a
Google
google
Maps
maps
API
api
key.
key
Create
create
a
a
by
by
project
project
or
or
using
using
existing
existing
project
project
on
on
the
the
Google
google
Cloud
cloud
Platform
platform
console.
console
From
from
there,
there
go
go
to
to
the
the
API
api
screen.
screen
You'll
you'll
find
find
the
the
Google
google
Maps
maps
JavaScript
javascript
API,
api
enable
enable
it,
it
and
and
then
then
go
go
to
to
the
the
credentials
credentials
tab
tab
and
and
grab
grab
your
your
browser
browser
API
api
key.
key
Just
just
make
make
a
a
note
note
of
of
the
the
API
api
key
key
for
for
now,
now
we'll
we'll
need
need
it
it
in
in
a
a
minute
minute
or
or
so
so
when
when
we
we
get
get
into
into
the
the
code.
code
You
you
can
can
use
use
deck.
deck
Gl
gl
in
in
any
any
framework,
framework
but
but
it
it
provides
provides
additional
additional
support
support
for
for
React.
react
In
in
this
this
video,
video
I'm
i'm
going
going
to
to
use
use
vanilla
vanilla
JavaScript
javascript
with
with
webpack,
webpack
and
and
we'll
we'll
set
set
it
it
up
up
with
with
hot
hot
module
module
replacement
replacement
for
for
a
a
nice
nice
developer
developer
experience.
experience
Go
go
ahead
ahead
and
and
open
open
up
up
Versus
versus
Code,
code
and
and
keep
keep
in
in
mind
mind
you
you
can
can
find
find
all
all
of
of
these
these
steps
steps
in
in
this
this
lesson
lesson
on
on
Fireship
fireship
IO.
io
First,
first
we'll
we'll
run
run
npm
npm
init
init
with
with
the
the
y
y
flag
flag
to
to
set
set
up
up
a
a
new
new
npm
npm
project.
project
Then
then
we'll
we'll
install
install
webpack
webpack
and
and
webpack
webpack
dev
dev
server
server
into
into
the
the
development
development
environment.
environment
From
from
there,
there
I'll
i'll
open
open
up
up
the
the
package
package
JSON,
json
and
and
I'm
i'm
going
going
to
to
add
add
a
a
couple
couple
of
of
scripts
scripts
that
that
we
we
can
can
use
use
to
to
build
build
and
and
serve
serve
the
the
app.
app
The
the
build
build
command
command
runs
runs
web
web
by
by
PAC
pac
and
and
outputs
outputs
everything
everything
into
into
the
the
public
public
folder,
folder
which
which
is
is
where
where
we'll
we'll
actually
actually
put
put
our
our
production
production
code.
code
Then
then
the
the
start
start
command
command
will
will
use
use
webpack
webpack
by
by
dev
dev
server
server
to
to
serve
serve
that
that
code
code
locally
locally
on
on
local
local
host
host
8080,
8080
and
and
it
it
will
will
also
also
perform
perform
hot
hot
module
module
replacement
replacement
whenever
whenever
our
our
source
source
code
code
changes.
changes
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
install
install
deckgl.
deckgl
It's
it's
organized
organized
in
in
a
a
monorepo,
monorepo
so
so
there's
there's
different
different
packages
packages
that
that
you
you
may
may
or
or
may
may
not
not
need.
need
We're
we're
going
going
to
to
need
need
the
the
Google
google
Maps
maps
package,
package
layers,
layers
by
by
and
and
aggregation
aggregation
layers.
layers
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
create
create
a
a
file
file
for
for
our
our
JavaScript
javascript
source
source
code
code
in
in
the
the
source
source
directory.
directory
And
and
a
a
little
little
Versus
versus
Code
code
pro
pro
tip
tip
here
here
is
is
to
to
create
create
that
that
file
file
with
with
a
a
slash
slash
and
and
it
it
will
will
automatically
automatically
create
create
the
the
directory
directory
structure
structure
for
for
you.
you
Then
then
we'll
we'll
do
do
the
the
same
same
thing
thing
for
for
the
the
public
public
HTML
html
file.
file
Then
then
inside
inside
this
this
HTML,
html
we'll
we'll
just
just
Start
start
with
with
a
a
plain
plain
HTML
html
document,
document
and
and
we'll
we'll
make
make
a
a
reference
reference
to
to
the
the
main
main
JS
js
file,
file
which
which
is
is
where
where
webpack
webpack
will
will
build
build
our
our
source
source
code.
code
After
after
that,
that
we'll
we'll
add
add
a
a
deferred
deferred
script
script
tag
tag
for
for
the
the
Google
google
Maps
maps
JavaScript
javascript
API.
api
This
this
script
script
has
has
2
2
required
required
parameters.
parameters
The
the
first
first
one
one
is
is
the
the
by
by
PIKey,
pikey
which
which
is
is
the
the
browser
browser
API
api
key
key
that
that
you
you
got
got
from
from
the
the
Google
google
Cloud
cloud
Platform
platform
console.
console
Then
then
the
the
callback
callback
is
is
the
the
name
name
of
of
a
a
function
function
defined
defined
on
on
the
the
window
window
that
that
initializes
initializes
the
the
map
map
with
with
whatever
whatever
options
options
you
you
want
want
to
to
pass
pass
to
to
it.
it
We'll
we'll
define
define
that
that
one
one
in
in
just
just
a
a
minute
minute
in
in
our
our
JavaScript
javascript
code.
code
Then
then
the
the
last
last
thing
thing
we'll
we'll
wanna
wanna
do
do
is
is
go
go
into
into
the
the
body
body
of
of
the
the
HTML
html
and
and
add
add
a
a
div
div
with
with
an
an
id
id
of
of
map.
map
This
this
div
div
will
will
be
be
replaced
replaced
by
by
the
the
actual
actual
Google
google
map,
map
and
and
in
in
our
our
case,
case
we
we
want
want
to
to
display
display
a
a
full
full
screen
screen
map.
map
So
so
we'll
we'll
use
use
some
some
CSS
css
to
to
set
set
the
the
width
width
and
and
height
height
to
to
100%
100%
of
of
the
the
viewport.
viewport
Now
now
we'll
we'll
go
go
ahead
ahead
and
and
open
open
up
up
our
our
JavaScript
javascript
file,
file
and
and
we'll
we'll
want
want
to
to
define
define
a
a
function
function
on
on
the
the
window
window
object.
object
This
this
is
is
the
the
callback
callback
that
that
we
we
set
set
on
on
the
the
Google
google
Maps
maps
script
script
tag.
tag
The
the
first
first
argument
argument
is
is
the
the
actual
actual
div
div
that
that
will
will
be
be
replaced
replaced
by
by
the
the
map,
map
so
so
we'll
we'll
go
go
ahead
ahead
and
and
get
get
that
that
by
by
its
its
ID.
id
And
and
then
then
you
you
can
can
add
add
a
a
bunch
bunch
of
of
additional
additional
options
options
here
here
depending
depending
on
on
how
how
you
you
want
want
to
to
customize
customize
your
your
app.
app
In
in
fact,
fact
Google
google
provides
provides
a
a
wizard
wizard
that
that
helps
helps
you
you
quickly
quickly
customize
customize
the
the
appearance
appearance
of
of
your
your
map.
map
It.
it
That's
that's
how
how
I
i
created
created
the
the
dark
dark
map
map
that
that
you
you
see
see
in
in
the
the
demo.
demo
So
so
now
now
that
that
we
we
have
have
this
this
init
init
map
map
function
function
on
on
the
the
window,
window
we
we
can
can
run
run
npm
npm
start
start
to
to
tell
tell
webpack
webpack
to
to
build
build
our
our
code.
code
It.
it
That
that
will
will
also
also
spin
spin
up
up
a
a
server
server
on
on
local
local
host
host
8080.
8080
So
so
if
if
you
you
navigate
navigate
there,
there
you
you
should
should
see
see
the
the
default
default
map
map
at
at
this
this
point,
point
and
and
your
your
code
code
should
should
rebuild
rebuild
anytime
anytime
you
you
update
update
and
and
save
save
the
the
index
index
JS
js
by
by
file.
file
Now
now
that
that
we
we
have
have
this
this
initial
initial
setup
setup
out
out
of
of
the
the
way,
way
we
we
need
need
to
to
get
get
some
some
actual
actual
data
data
to
to
display
display
on
on
the
the
map.
map
Now
now
this
this
can
can
be
be
very
very
easy
easy
or
or
very
very
difficult
difficult
depending
depending
on
on
the
the
data
data
you're
you're
working
working
with.
with
If
if
you
you
wanna
wanna
go
go
the
the
easy
easy
route,
route
you
you
can
can
simply
simply
grab
grab
the
the
JSON
json
data
data
that
that
lives
lives
on
on
my
my
web
web
server.
server
But
but
since
since
you're
you're
a
a
developer,
developer
I'm
i'm
assuming
assuming
you
you
want
want
to
to
use
use
your
your
own
own
custom
custom
by
by
data.
data
A
a
great
great
place
place
to
to
find
find
free
free
data
data
that's
that's
already
already
well
well
formatted
formatted
is
is
from
from
Kaggle
kaggle
datasets,
datasets
but
but
in
in
most
most
cases,
cases
this
this
data
data
is
is
going
going
to
to
be
be
in
in
CSV
csv
format.
format
An
an
easy
easy
way
way
to
to
convert
convert
this
this
data
data
to
to
the
the
proper
proper
format
format
is
is
to
to
use
use
the
the
node
node
package
package
convert
convert
CSV
csv
to
to
JSON.
json
From
from
there,
there
create
create
a
a
file
file
called
called
convert
convert
dotjs
dotjs
in
in
the
the
root
root
of
of
your
your
project.
project
Then
then
inside
inside
the
the
script,
script
we
we
can
can
create
create
a
a
very
very
simple
simple
node
node
script
script
that
that
has
has
an
an
input
input
in
in
CSV
csv
format
format
and
and
then
then
an
an
output
output
in
in
JSON.
json
Now
now
we
we
can
can
just
just
Run
run
that
that
script
script
from
from
the
the
command
command
line
line
and
and
we've
we've
magically
magically
converted
converted
our
our
custom
custom
dataset
dataset
into
into
JSON
json
format
format
that
that
we
we
can
can
use
use
with
with
deck
deck
gl.
gl
Your
your
data
data
should
should
be
be
an
an
array
array
of
of
JSON
json
objects,
objects
So
so
in
in
our
our
case
case
it
it
looks
looks
like
like
this.
this
The
the
property
property
names
names
on
on
this
this
object
object
can
can
be
be
anything
anything
you
you
want,
want
so
so
you
you
don't
don't
really
really
need
need
to
to
format
format
your
your
data
data
in
in
any
any
special
special
way
way
because
because
as
as
you'll
you'll
see
see
in
in
the
the
code,
code
we
we
tell
tell
deck.
deck
Gl
gl
exactly
exactly
how
how
to
to
access
access
this
this
data.
data
Let's
let's
move
move
into
into
our
our
index.
index
Js
js
file,
file
and
and
we'll
we'll
import
import
Google
google
Maps
maps
overlay
overlay
as
as
well
well
as
as
the
the
layers
layers
that
that
we
we
want
want
to
to
display
display
from
from
deck.
deck
Gl.
gl
Now
now
like
like
I
i
said
said
earlier,
earlier
deck.
deck
Gl
gl
uses
uses
a
a
reactive
reactive
programming
programming
paradigm,
paradigm
so
so
I
i
like
like
to
to
create
create
my
my
layers
layers
inside
inside
of
of
a
a
function.
function
Anytime
anytime
your
your
map
map
or
or
data
data
changes,
changes
you
you
tell
tell
deck
deck
gl
gl
to
to
rebuild
rebuild
the
the
entire
entire
map.
map
Under
under
the
the
hood,
hood
it's
it's
looking
looking
at
at
the
the
diff
diff
to
to
update
update
things
things
efficiently,
efficiently
very
very
similar
similar
to
to
React
react
JS.
js
It
it
can
can
do
do
that
that
because
because
every
every
layer
layer
is
is
required
required
to
to
have
have
a
a
unique
unique
ID,
id
and
and
deck
deck
gl
gl
uses
uses
that
that
to
to
track
track
the
the
changes
changes
for
for
that
that
specific
specific
layer.
layer
It.
it
The
the
next
next
option
option
that
that
you'll
you'll
need
need
to
to
pass
pass
is
is
the
the
data.
data
So
so
in
in
our
our
case,
case
this
this
will
will
just
just
be
be
the
the
path
path
to
to
the
the
local
local
JSON
json
file,
file
but
but
this
this
could
could
also
also
be
be
a
a
remote
remote
URL
url
or
or
a
a
promise
promise
that
that
resolves
resolves
to
to
the
the
JSON
json
object.
object
Now
now
every
every
layer
layer
has
has
a
a
variety
variety
of
of
optional
optional
parameters
parameters
that
that
you
you
can
can
pass
pass
to
to
customize
customize
the
the
way
way
the
the
points
points
are
are
displayed.
displayed
Things
things
like
like
opacity
opacity
and
and
pixel
pixel
radius
radius
are
are
pretty
pretty
self
self
explanatory.
explanatory
Now
now
for
for
every
every
point
point
in
in
the
the
dataset,
dataset
deck
deck
gl
gl
is
is
going
going
to
to
call
call
the
the
function
function
that
that
you
you
pass
pass
to
to
get
get
position.
position
So
so
get
get
position
position
is
is
very
very
similar
similar
to
to
a
a
for
for
each
each
loop
loop
where
where
d
d
represents
represents
an
an
individual
individual
object
object
in
in
the
the
dataset.
dataset
The
the
function
function
needs
needs
to
to
return
return
an
an
array
array
of
of
the
the
longitude
longitude
point
point
and
and
the
the
latitude
latitude
point
point
in
in
that
that
order.
order
It's
it's
not
not
latitude
latitude
longitude
longitude
like
like
you
you
might
might
see
see
in
in
other
other
map
map
programs,
programs
it's
it's
the
the
more
more
mathematically
mathematically
correct
correct
format
format
of
of
x
x
y.
y
You
you
can
can
also
also
use
use
functions
functions
to
to
compute
compute
other
other
properties,
properties
like
like
the
the
actual
actual
fill
fill
color
color
on
on
the
the
scatter
scatter
plot.
plot
In
in
this
this
case,
case
I'm
i'm
looking
looking
at
at
if
if
the
the
number
number
of
of
people
people
killed
killed
in
in
this
this
incident
incident
is
is
greater
greater
than
than
0,
0
in
in
in
in
which
which
case
case
I'll
i'll
make
make
the
the
dot
dot
red,
red
otherwise
otherwise
I'll
i'll
make
make
it
it
orange
orange
which
which
means
means
that
that
there
there
are
are
only
only
injuries.
injuries
And
and
that's
that's
all
all
it
it
takes
takes
to
to
define
define
a
a
scatterplot
scatterplot
layer.
layer
From
from
there,
there
I'm
i'm
going
going
to
to
jump
jump
down
down
into
into
the
the
init
init
map
map
function
function
that
that
we
we
wrote
wrote
earlier.
earlier
We'll
we'll
define
define
a
a
variable
variable
called
called
overlay
overlay
that's
that's
equal
equal
to
to
a
a
Google
google
Maps
maps
overlay
overlay
instance,
instance
then
then
it
it
takes
takes
an
an
array
array
of
of
layers
layers
that
that
will
will
be
be
stacked
stacked
on
on
top
top
of
of
each
each
other.
other
So
so
we'll
we'll
go
go
ahead
ahead
and
and
add
add
our
our
scatter
scatter
plot
plot
function
function
there.
there
Then
then
the
the
final
final
step
step
is
is
to
to
add
add
overlay
overlay
set
set
map
map
with
with
the
the
actual
actual
Google
google
Maps
maps
instance.
instance
By
by
so
so
that's
that's
how
how
we
we
initialize
initialize
a
a
map
map
for
for
the
the
first
first
time.
time
If
if
you're
you're
running
running
updates
updates
on
on
a
a
map,
map
you
you
would
would
call
call
set
set
props
props
with
with
any
any
subsequent
subsequent
updates
updates
to
to
the
the
same
same
map.
map
I
i
just
just
wanted
wanted
to
to
point
point
that
that
out,
out
but
but
we're
we're
actually
actually
not
not
going
going
to
to
use
use
it
it
in
in
this
this
simplified
simplified
demo.
demo
From
from
here,
here
if
if
you
you
open
open
the
the
browser,
browser
you
you
should
should
see
see
all
all
the
the
points
points
plotted
plotted
on
on
the
the
map.
map
But
but
I'd
i'd
like
like
to
to
make
make
these
these
a
a
little
little
more
more
interactive
interactive
by
by
adding
adding
a
a
tooltip
tooltip
when
when
the
the
user
user
hovers
hovers
over
over
an
an
individual
individual
point.
point
We
we
can
can
do
do
that
that
by
by
setting
setting
the
the
Pickable
pickable
option
option
to
to
true
true
on
on
the
the
scatterplot
scatterplot
layer.
layer
And
and
then
then
from
from
there,
there
we'll
we'll
define
define
a
a
function
function
that
that
runs
runs
on
on
the
the
on
on
hover
hover
event.
event
This
this
will
will
give
give
us
us
access
access
to
to
the
the
actual
actual
data
data
object
object
that
that
represents
represents
that
that
point
point
and
and
then
then
also
also
its
its
x
x
y
y
coordinates.
coordinates
We'll
we'll
grab
grab
an
an
element
element
from
from
the
the
DOM
dom
called
called
tooltip,
tooltip
and
and
then
then
if
if
an
an
object
object
exists,
exists
we'll
we'll
go
go
ahead
ahead
and
and
insert
insert
some
some
HTML
html
into
into
that
that
tooltip
tooltip
based
based
on
on
the
the
actual
actual
data
data
object.
object
And
and
if
if
an
an
object
object
does
does
not
not
exist,
exist
we'll
we'll
simply
simply
hide
hide
the
the
tooltip
tooltip
by
by
setting
setting
its
its
opacity
opacity
to
to
0.
0
And
and
you
you
can
can
also
also
handle
handle
click
click
events,
events
so
so
if
if
the
the
user
user
clicks
clicks
on
on
a
a
given
given
point,
point
we
we
can
can
take
take
them
them
to
to
the
the
instant
instant
report
report
on
on
gun
gun
violence
violence
archive.
archive
Now
now
a
a
problem
problem
with
with
the
the
map
map
currently
currently
is
is
that
that
it's
it's
kind
kind
of
of
hard
hard
to
to
visualize
visualize
a
a
140,000
140,000
points
points
all
all
at
at
once.
once
Fortunately,
fortunately
deck
deck
gl
gl
has
has
aggregation
aggregation
layers
layers
that
that
will
will
cluster
cluster
the
the
points
points
into
into
meaningful
meaningful
shapes.
shapes
This
this
time,
time
let's
let's
go
go
ahead
ahead
and
and
create
create
a
a
function
function
that
that
returns
returns
a
a
heat
heat
map
map
layer.
layer
This
this
function
function
uses
uses
the
the
same
same
getter
getter
for
for
position,
position
and
and
we
we
also
also
have
have
the
the
option
option
to
to
calculate
calculate
the
the
weight
weight
for
for
each
each
point.
point
By
by
default,
default
every
every
data
data
point
point
has
has
a
a
weight
weight
of
of
1,
1
but
but
we
we
want
want
to
to
weight
weight
the
the
data
data
points
points
based
based
on
on
how
how
violent
violent
the
the
incident
incident
was.
was
So
so
we'll
we'll
go
go
ahead
ahead
and
and
take
take
the
the
number
number
of
of
people
people
killed
killed
in
in
that
that
incident
incident
and
and
then
then
add
add
it
it
to
to
the
the
number
number
of
of
people
people
injured
injured
by
by
time
time
0.5.
0.5
So
so
you
you
get
get
the
the
most
most
points
points
for
for
killing
killing
people,
people
but
but
you
you
also
also
get
get
bonus
bonus
points
points
for
for
injuring
injuring
people
people
as
as
well.
well
We'll
we'll
go
go
ahead
ahead
and
and
set
set
the
the
pixel
pixel
radius
radius
to
to
60,
60
and
and
and
and
then
then
we
we
could
could
also
also
customize
customize
colors
colors
here
here
as
as
well,
well
but
but
we'll
we'll
just
just
go
go
ahead
ahead
and
and
skip
skip
that
that
for
for
now.
now
And
and
lastly,
lastly
we'll
we'll
come
come
down
down
here
here
and
and
add
add
the
the
heat
heat
map
map
to
to
our
our
layers.
layers
You
you
can
can
see
see
I've
i've
switched
switched
the
the
map
map
to
to
dark
dark
mode
mode
to
to
see
see
things
things
a
a
little
little
bit
bit
better,
better
and
and
you'll
you'll
notice
notice
we
we
get
get
different
different
clustering
clustering
patterns
patterns
based
based
on
on
the
the
zoom
zoom
level
level
of
of
the
the
map.
map
If
if
we
we
zoom
zoom
in
in
all
all
the
the
way,
way
we'll
we'll
start
start
to
to
see
see
the
the
individual
individual
instance
instance
that
that
make
make
up
up
the
the
larger
larger
clusters.
clusters
The
the
heatmap
heatmap
is
is
useful,
useful
but
but
we
we
may
may
want
want
to
to
cluster
cluster
our
our
points
points
based
based
on
on
a
a
specific
specific
boundary.
boundary
And
and
a
a
great
great
way
way
to
to
do
do
that
that
is
is
with
with
the
the
hexagon
hexagon
layer.
layer
This
this
allows
allows
us
us
to
to
cluster
cluster
points
points
into
into
a
a
specific
specific
radius
radius
and
and
then
then
increase
increase
its
its
elevation
elevation
in
in
the
the
3rd
3rd
dimension
dimension
based
based
on
on
how
how
violent
violent
that
that
area
area
is.
is
We
we
can
can
do
do
that
that
by
by
defining
defining
a
a
getter
getter
for
for
the
the
elevation
elevation
weight
weight
using
using
the
the
same
same
logic
logic
that
that
we
we
used
used
in
in
the
the
previous
previous
example.
example
We
we
can
can
customize
customize
the
the
appearance
appearance
with
with
a
a
variety
variety
of
of
different
different
parameters,
parameters
and
and
you
you
can
can
even
even
use
use
your
your
own
own
algorithm
algorithm
to
to
control
control
how
how
the
the
points
points
are
are
clustered
clustered
into
into
the
the
hexagon.
hexagon
Go
go
ahead
ahead
and
and
add
add
hexagon
hexagon
to
to
the
the
layers,
layers
and
and
you'll
you'll
now
now
see
see
that
that
we
we
get
get
these
these
extruded
extruded
shapes
shapes
on
on
the
the
map.
map
We
we
can
can
look
look
at
at
the
the
elevation
elevation
of
of
the
the
hexagon
hexagon
to
to
determine
determine
how
how
violent
violent
that
that
neighborhood
neighborhood
is,
is
and
and
the
the
color
color
of
of
the
the
hexagon
hexagon
becomes
becomes
more
more
red
red
as
as
the
the
violence
violence
increases.
increases
Now
now
we've
we've
barely
barely
only
only
scratched
scratched
the
the
surface
surface
on
on
what's
what's
possible
possible
with
with
deck.
deck
Gl.
gl
If
if
you
you
need
need
high
high
performance
performance
data
data
visualization
visualization
on
on
a
a
large
large
data
data
set,
set
it's
it's
definitely
definitely
worth
worth
checking
checking
out.
out
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
scribe
scribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip.
fireship
Io
io
for
for
access
access
to
to
even
even
more
more
content.
content
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
By
by
success
The speakers discuss the use of deck gl and Google Maps in visualizing the safety of gun violence in data visualization. They explain how to use deck gl for building a new project, create a file for JavaScript, and create a deferred script tag. They also discuss the process of building an app, installing a dev server, and creating a file for the Google Maps API. The heat map is useful for data visualization and the speaker suggests using the same logic for the heat map layer. They also discuss the use of overlay and the cluster point process.
Visualize 140k Gun Violence Incidents with Deck.gl & Google Maps
Today, we'll take over 140,000 data points of people being killed or injured by guns and visualize them with deck gl and Google Maps. We can go from a heat map of the entire country down to the actual street view of a neighborhood where the shit went down. We'll start by adding a scatter plot layer for every single point in the data set. Then we'll add a tooltip to see how many people were injured or killed at a given incident. Then, we'll cluster points together into a heat map based on the map's zoom level. Lastly, we'll cluster points into a hexagon with a 1 mile by hideous and extrude them into a 3 d shape where the elevation represents the amount of violence in that space. We can do all of this data visualization efficiently thanks to a library called deck. Gl. It was created by Uber to visualize their own data and is able to run computations efficiently by offloading them to the GPU with WebGL. By Say hello to my little friend. Take a look at their Showcase for some awesome examples of companies using this technology in production. I think my favorite is Escape. It uses the deck gl arc layer to visualize the cheapest flights based on your by Cajun around the world. Now, I realize that guns are a hot political issue in the United States, so I've tried to make this visual as neutral as possible. The data comes from the gun violence archive from the years 2013 to 2018. On the live demo, you can filter by defensive use, suicide, and so on to get a better picture of how the data is distributed. Before we get started, let's talk a little bit more about how deck gl works. You can think of it as a layer or multiple layers that sit on top of your Google Map. When the user pans around or zooms in and out, the overlay will stick to the map. And an awesome thing about this is that the layers can be composited. In other words, you can set layers on top of each other, add some transparency, and deck. Gl will calculate the composite colors that are actually rendered in the screen. And that can give you some amazing three d visuals on top of a 2 dimensional map. The actual JavaScript library itself follows the reactive programming paradigm, time, so it's very simple and familiar to most front end developers. All you really need is a good dataset, a Google Maps API key, a few few lines of JavaScript, and you'll be up and running with interactive 3 d visuals on top of your map. The first thing you'll need to get started is a Google Maps API key. Create a by project or using existing project on the Google Cloud Platform console. From there, go to the API screen. You'll find the Google Maps JavaScript API, enable it, and then go to the credentials tab and grab your browser API key. Just make a note of the API key for now, we'll need it in a minute or so when we get into the code. You can use deck. Gl in any framework, but it provides additional support for React. In this video, I'm going to use vanilla JavaScript with webpack, and we'll set it up with hot module replacement for a nice developer experience. Go ahead and open up Versus Code, and keep in mind you can find all of these steps in this lesson on Fireship IO. First, we'll run npm init with the y flag to set up a new npm project. Then we'll install webpack and webpack dev server into the development environment. From there, I'll open up the package JSON, and I'm going to add a couple of scripts that we can use to build and serve the app. The build command runs web by PAC and outputs everything into the public folder, which is where we'll actually put our production code. Then the start command will use webpack by dev server to serve that code locally on local host 8080, and it will also perform hot module replacement whenever our source code changes. The next thing we'll do is install deckgl. It's organized in a monorepo, so there's different packages that you may or may not need. We're going to need the Google Maps package, layers, by and aggregation layers. The next thing we'll do is create a file for our JavaScript source code in the source directory. And a little Versus Code pro tip here is to create that file with a slash and it will automatically create the directory structure for you. Then we'll do the same thing for the public HTML file. Then inside this HTML, we'll just Start with a plain HTML document, and we'll make a reference to the main JS file, which is where webpack will build our source code. After that, we'll add a deferred script tag for the Google Maps JavaScript API. This script has 2 required parameters. The first one is the by PIKey, which is the browser API key that you got from the Google Cloud Platform console. Then the callback is the name of a function defined on the window that initializes the map with whatever options you want to pass to it. We'll define that one in just a minute in our JavaScript code. Then the last thing we'll wanna do is go into the body of the HTML and add a div with an id of map. This div will be replaced by the actual Google map, and in our case, we want to display a full screen map. So we'll use some CSS to set the width and height to 100% of the viewport. Now we'll go ahead and open up our JavaScript file, and we'll want to define a function on the window object. This is the callback that we set on the Google Maps script tag. The first argument is the actual div that will be replaced by the map, so we'll go ahead and get that by its ID. And then you can add a bunch of additional options here depending on how you want to customize your app. In fact, Google provides a wizard that helps you quickly customize the appearance of your map. It. That's how I created the dark map that you see in the demo. So now that we have this init map function on the window, we can run npm start to tell webpack to build our code. It. That will also spin up a server on local host 8080. So if you navigate there, you should see the default map at this point, and your code should rebuild anytime you update and save the index JS by file. Now that we have this initial setup out of the way, we need to get some actual data to display on the map. Now this can be very easy or very difficult depending on the data you're working with. If you wanna go the easy route, you can simply grab the JSON data that lives on my web server. But since you're a developer, I'm assuming you want to use your own custom by data. A great place to find free data that's already well formatted is from Kaggle datasets, but in most cases, this data is going to be in CSV format. An easy way to convert this data to the proper format is to use the node package convert CSV to JSON. From there, create a file called convert dotjs in the root of your project. Then inside the script, we can create a very simple node script that has an input in CSV format and then an output in JSON. Now we can just Run that script from the command line and we've magically converted our custom dataset into JSON format that we can use with deck gl. Your data should be an array of JSON objects, So in our case it looks like this. The property names on this object can be anything you want, so you don't really need to format your data in any special way because as you'll see in the code, we tell deck. Gl exactly how to access this data. Let's move into our index. Js file, and we'll import Google Maps overlay as well as the layers that we want to display from deck. Gl. Now like I said earlier, deck. Gl uses a reactive programming paradigm, so I like to create my layers inside of a function. Anytime your map or data changes, you tell deck gl to rebuild the entire map. Under the hood, it's looking at the diff to update things efficiently, very similar to React JS. It can do that because every layer is required to have a unique ID, and deck gl uses that to track the changes for that specific layer. It. The next option that you'll need to pass is the data. So in our case, this will just be the path to the local JSON file, but this could also be a remote URL or a promise that resolves to the JSON object. Now every layer has a variety of optional parameters that you can pass to customize the way the points are displayed. Things like opacity and pixel radius are pretty self explanatory. Now for every point in the dataset, deck gl is going to call the function that you pass to get position. So get position is very similar to a for each loop where d represents an individual object in the dataset. The function needs to return an array of the longitude point and the latitude point in that order. It's not latitude longitude like you might see in other map programs, it's the more mathematically correct format of x y. You can also use functions to compute other properties, like the actual fill color on the scatter plot. In this case, I'm looking at if the number of people killed in this incident is greater than 0, in in which case I'll make the dot red, otherwise I'll make it orange which means that there are only injuries. And that's all it takes to define a scatterplot layer. From there, I'm going to jump down into the init map function that we wrote earlier. We'll define a variable called overlay that's equal to a Google Maps overlay instance, then it takes an array of layers that will be stacked on top of each other. So we'll go ahead and add our scatter plot function there. Then the final step is to add overlay set map with the actual Google Maps instance. By so that's how we initialize a map for the first time. If you're running updates on a map, you would call set props with any subsequent updates to the same map. I just wanted to point that out, but we're actually not going to use it in this simplified demo. From here, if you open the browser, you should see all the points plotted on the map. But I'd like to make these a little more interactive by adding a tooltip when the user hovers over an individual point. We can do that by setting the Pickable option to true on the scatterplot layer. And then from there, we'll define a function that runs on the on hover event. This will give us access to the actual data object that represents that point and then also its x y coordinates. We'll grab an element from the DOM called tooltip, and then if an object exists, we'll go ahead and insert some HTML into that tooltip based on the actual data object. And if an object does not exist, we'll simply hide the tooltip by setting its opacity to 0. And you can also handle click events, so if the user clicks on a given point, we can take them to the instant report on gun violence archive. Now a problem with the map currently is that it's kind of hard to visualize a 140,000 points all at once. Fortunately, deck gl has aggregation layers that will cluster the points into meaningful shapes. This time, let's go ahead and create a function that returns a heat map layer. This function uses the same getter for position, and we also have the option to calculate the weight for each point. By default, every data point has a weight of 1, but we want to weight the data points based on how violent the incident was. So we'll go ahead and take the number of people killed in that incident and then add it to the number of people injured by time 0.5. So you get the most points for killing people, but you also get bonus points for injuring people as well. We'll go ahead and set the pixel radius to 60, and and then we could also customize colors here as well, but we'll just go ahead and skip that for now. And lastly, we'll come down here and add the heat map to our layers. You can see I've switched the map to dark mode to see things a little bit better, and you'll notice we get different clustering patterns based on the zoom level of the map. If we zoom in all the way, we'll start to see the individual instance that make up the larger clusters. The heatmap is useful, but we may want to cluster our points based on a specific boundary. And a great way to do that is with the hexagon layer. This allows us to cluster points into a specific radius and then increase its elevation in the 3rd dimension based on how violent that area is. We can do that by defining a getter for the elevation weight using the same logic that we used in the previous example. We can customize the appearance with a variety of different parameters, and you can even use your own algorithm to control how the points are clustered into the hexagon. Go ahead and add hexagon to the layers, and you'll now see that we get these extruded shapes on the map. We can look at the elevation of the hexagon to determine how violent that neighborhood is, and the color of the hexagon becomes more red as the violence increases. Now we've barely only scratched the surface on what's possible with deck. Gl. If you need high performance data visualization on a large data set, it's definitely worth checking out. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and consider becoming a pro member at FireShip. Io for access to even more content. Thanks for watching, and I will talk to you soon. By
The speakers discuss the use of deck gl and Google Maps in visualizing the safety of gun violence in data visualization. They explain how to use deck gl for building a new project, create a file for JavaScript, and create a deferred script tag. They also discuss the process of building an app, installing a dev server, and creating a file for the Google Maps API. The heat map is useful for data visualization and the speaker suggests using the same logic for the heat map layer. They also discuss the use of overlay and the cluster point process.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Visualize 140k Gun Violence Incidents with Deck.gl & Google Maps 
        and a small summary : The speakers discuss the use of deck gl and Google Maps in visualizing the safety of gun violence in data visualization. They explain how to use deck gl for building a new project, create a file for JavaScript, and create a deferred script tag. They also discuss the process of building an app, installing a dev server, and creating a file for the Google Maps API. The heat map is useful for data visualization and the speaker suggests using the same logic for the heat map layer. They also discuss the use of overlay and the cluster point process.
        [/INST]
        
        Generate the video : Today, we'll take over 140,000 data points of people being killed or injured by guns and visualize them with deck gl and Google Maps. We can go from a heat map of the entire country down to the actual street view of a neighborhood where the shit went down. We'll start by adding a scatter plot layer for every single point in the data set. Then we'll add a tooltip to see how many people were injured or killed at a given incident. Then, we'll cluster points together into a heat map based on the map's zoom level. Lastly, we'll cluster points into a hexagon with a 1 mile by hideous and extrude them into a 3 d shape where the elevation represents the amount of violence in that space. We can do all of this data visualization efficiently thanks to a library called deck. Gl. It was created by Uber to visualize their own data and is able to run computations efficiently by offloading them to the GPU with WebGL. By Say hello to my little friend. Take a look at their Showcase for some awesome examples of companies using this technology in production. I think my favorite is Escape. It uses the deck gl arc layer to visualize the cheapest flights based on your by Cajun around the world. Now, I realize that guns are a hot political issue in the United States, so I've tried to make this visual as neutral as possible. The data comes from the gun violence archive from the years 2013 to 2018. On the live demo, you can filter by defensive use, suicide, and so on to get a better picture of how the data is distributed. Before we get started, let's talk a little bit more about how deck gl works. You can think of it as a layer or multiple layers that sit on top of your Google Map. When the user pans around or zooms in and out, the overlay will stick to the map. And an awesome thing about this is that the layers can be composited. In other words, you can set layers on top of each other, add some transparency, and deck. Gl will calculate the composite colors that are actually rendered in the screen. And that can give you some amazing three d visuals on top of a 2 dimensional map. The actual JavaScript library itself follows the reactive programming paradigm, time, so it's very simple and familiar to most front end developers. All you really need is a good dataset, a Google Maps API key, a few few lines of JavaScript, and you'll be up and running with interactive 3 d visuals on top of your map. The first thing you'll need to get started is a Google Maps API key. Create a by project or using existing project on the Google Cloud Platform console. From there, go to the API screen. You'll find the Google Maps JavaScript API, enable it, and then go to the credentials tab and grab your browser API key. Just make a note of the API key for now, we'll need it in a minute or so when we get into the code. You can use deck. Gl in any framework, but it provides additional support for React. In this video, I'm going to use vanilla JavaScript with webpack, and we'll set it up with hot module replacement for a nice developer experience. Go ahead and open up Versus Code, and keep in mind you can find all of these steps in this lesson on Fireship IO. First, we'll run npm init with the y flag to set up a new npm project. Then we'll install webpack and webpack dev server into the development environment. From there, I'll open up the package JSON, and I'm going to add a couple of scripts that we can use to build and serve the app. The build command runs web by PAC and outputs everything into the public folder, which is where we'll actually put our production code. Then the start command will use webpack by dev server to serve that code locally on local host 8080, and it will also perform hot module replacement whenever our source code changes. The next thing we'll do is install deckgl. It's organized in a monorepo, so there's different packages that you may or may not need. We're going to need the Google Maps package, layers, by and aggregation layers. The next thing we'll do is create a file for our JavaScript source code in the source directory. And a little Versus Code pro tip here is to create that file with a slash and it will automatically create the directory structure for you. Then we'll do the same thing for the public HTML file. Then inside this HTML, we'll just Start with a plain HTML document, and we'll make a reference to the main JS file, which is where webpack will build our source code. After that, we'll add a deferred script tag for the Google Maps JavaScript API. This script has 2 required parameters. The first one is the by PIKey, which is the browser API key that you got from the Google Cloud Platform console. Then the callback is the name of a function defined on the window that initializes the map with whatever options you want to pass to it. We'll define that one in just a minute in our JavaScript code. Then the last thing we'll wanna do is go into the body of the HTML and add a div with an id of map. This div will be replaced by the actual Google map, and in our case, we want to display a full screen map. So we'll use some CSS to set the width and height to 100% of the viewport. Now we'll go ahead and open up our JavaScript file, and we'll want to define a function on the window object. This is the callback that we set on the Google Maps script tag. The first argument is the actual div that will be replaced by the map, so we'll go ahead and get that by its ID. And then you can add a bunch of additional options here depending on how you want to customize your app. In fact, Google provides a wizard that helps you quickly customize the appearance of your map. It. That's how I created the dark map that you see in the demo. So now that we have this init map function on the window, we can run npm start to tell webpack to build our code. It. That will also spin up a server on local host 8080. So if you navigate there, you should see the default map at this point, and your code should rebuild anytime you update and save the index JS by file. Now that we have this initial setup out of the way, we need to get some actual data to display on the map. Now this can be very easy or very difficult depending on the data you're working with. If you wanna go the easy route, you can simply grab the JSON data that lives on my web server. But since you're a developer, I'm assuming you want to use your own custom by data. A great place to find free data that's already well formatted is from Kaggle datasets, but in most cases, this data is going to be in CSV format. An easy way to convert this data to the proper format is to use the node package convert CSV to JSON. From there, create a file called convert dotjs in the root of your project. Then inside the script, we can create a very simple node script that has an input in CSV format and then an output in JSON. Now we can just Run that script from the command line and we've magically converted our custom dataset into JSON format that we can use with deck gl. Your data should be an array of JSON objects, So in our case it looks like this. The property names on this object can be anything you want, so you don't really need to format your data in any special way because as you'll see in the code, we tell deck. Gl exactly how to access this data. Let's move into our index. Js file, and we'll import Google Maps overlay as well as the layers that we want to display from deck. Gl. Now like I said earlier, deck. Gl uses a reactive programming paradigm, so I like to create my layers inside of a function. Anytime your map or data changes, you tell deck gl to rebuild the entire map. Under the hood, it's looking at the diff to update things efficiently, very similar to React JS. It can do that because every layer is required to have a unique ID, and deck gl uses that to track the changes for that specific layer. It. The next option that you'll need to pass is the data. So in our case, this will just be the path to the local JSON file, but this could also be a remote URL or a promise that resolves to the JSON object. Now every layer has a variety of optional parameters that you can pass to customize the way the points are displayed. Things like opacity and pixel radius are pretty self explanatory. Now for every point in the dataset, deck gl is going to call the function that you pass to get position. So get position is very similar to a for each loop where d represents an individual object in the dataset. The function needs to return an array of the longitude point and the latitude point in that order. It's not latitude longitude like you might see in other map programs, it's the more mathematically correct format of x y. You can also use functions to compute other properties, like the actual fill color on the scatter plot. In this case, I'm looking at if the number of people killed in this incident is greater than 0, in in which case I'll make the dot red, otherwise I'll make it orange which means that there are only injuries. And that's all it takes to define a scatterplot layer. From there, I'm going to jump down into the init map function that we wrote earlier. We'll define a variable called overlay that's equal to a Google Maps overlay instance, then it takes an array of layers that will be stacked on top of each other. So we'll go ahead and add our scatter plot function there. Then the final step is to add overlay set map with the actual Google Maps instance. By so that's how we initialize a map for the first time. If you're running updates on a map, you would call set props with any subsequent updates to the same map. I just wanted to point that out, but we're actually not going to use it in this simplified demo. From here, if you open the browser, you should see all the points plotted on the map. But I'd like to make these a little more interactive by adding a tooltip when the user hovers over an individual point. We can do that by setting the Pickable option to true on the scatterplot layer. And then from there, we'll define a function that runs on the on hover event. This will give us access to the actual data object that represents that point and then also its x y coordinates. We'll grab an element from the DOM called tooltip, and then if an object exists, we'll go ahead and insert some HTML into that tooltip based on the actual data object. And if an object does not exist, we'll simply hide the tooltip by setting its opacity to 0. And you can also handle click events, so if the user clicks on a given point, we can take them to the instant report on gun violence archive. Now a problem with the map currently is that it's kind of hard to visualize a 140,000 points all at once. Fortunately, deck gl has aggregation layers that will cluster the points into meaningful shapes. This time, let's go ahead and create a function that returns a heat map layer. This function uses the same getter for position, and we also have the option to calculate the weight for each point. By default, every data point has a weight of 1, but we want to weight the data points based on how violent the incident was. So we'll go ahead and take the number of people killed in that incident and then add it to the number of people injured by time 0.5. So you get the most points for killing people, but you also get bonus points for injuring people as well. We'll go ahead and set the pixel radius to 60, and and then we could also customize colors here as well, but we'll just go ahead and skip that for now. And lastly, we'll come down here and add the heat map to our layers. You can see I've switched the map to dark mode to see things a little bit better, and you'll notice we get different clustering patterns based on the zoom level of the map. If we zoom in all the way, we'll start to see the individual instance that make up the larger clusters. The heatmap is useful, but we may want to cluster our points based on a specific boundary. And a great way to do that is with the hexagon layer. This allows us to cluster points into a specific radius and then increase its elevation in the 3rd dimension based on how violent that area is. We can do that by defining a getter for the elevation weight using the same logic that we used in the previous example. We can customize the appearance with a variety of different parameters, and you can even use your own algorithm to control how the points are clustered into the hexagon. Go ahead and add hexagon to the layers, and you'll now see that we get these extruded shapes on the map. We can look at the elevation of the hexagon to determine how violent that neighborhood is, and the color of the hexagon becomes more red as the violence increases. Now we've barely only scratched the surface on what's possible with deck. Gl. If you need high performance data visualization on a large data set, it's definitely worth checking out. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and consider becoming a pro member at FireShip. Io for access to even more content. Thanks for watching, and I will talk to you soon. By
        