In the last part of the previous post I laid the ground work for our responsive dashboard. In particular, I used CSS’s flexbox to build a grid layer. In this post the objective will be to fill the grid with our D3.js visualizations. If you want to see the final product, check it out here. To see how the layout changes, be sure to resize your window. Here is a small preview:

Dashboards are everywhere now partly because they can lead to better decision making. They allow to look at our data through a series of visualizations instead of looking at some cryptic numbers on a spreadsheet.

Last time, I wrote about how folium allows us to seamlessly integrate leaflet maps for visualization. This time, I wanted to challenge myself a bit more. I decided to use d3.js for visualizing earthquakes again. As I have pointed out in a previous post, d3.js is a highly flexible JavaScript library that allows you to create visually appealing and interactive visualizations. This comes at a cost: learning how to work with it can take a while.

Lately, I have been working with the significant earthquake database for a project. I always thought it would be really cool to see how the earthquakes spread out around the world. I used, for example, the geopandas plotting library for this purpose. However, the static images that I got as a result were not quite appealing to engage with, at least not from an exploratory analysis standpoint.

As part of a project I was working on, I had to scrape data from Open Street Map. I scraped data from Lima, the city where I come from. As always with cleaning scraped data, the process can be painstaking. You can check it here.