Chapter 1. Getting Started with Responsive Design, Bootstrap, and D3.js
The best way to understand data is to visualize it and explore it using an interactive visualization. In this book, we are going to build such an interactive visualization (actually many of them) using the latest techniques and web technologies. To make the information accessible across all devices, we are going to make the visualizations responsive. However, before we can start, we need to understand what this actually means. We also want to reuse some existing frameworks to not just do a great job but also work in an efficient way.
This chapter serves as an introduction to the methods, technologies, and frameworks that we will use throughout the book, and it will help you understand why we are using them to create data visualizations and how they work together.
In this chapter you will learn the following:
- What exactly is Responsive Design and how can it be applied to create visualizations that work across all different screen sizes and resolutions
- What is a Media Query and how it can be used to design visualizations for various devices
- Why and how we use Bootstrap to build the visualization on existing components
- Why we use vector graphics, such as SVG, for the web
- Why we use
D3.jsfor data manipulation and graphics creation
First, you will learn about Responsive Design and how it can be used to design a visualization for various screen sizes and resolutions. Then, we will discuss the importance of some key technologies such as CSS3 (especially Media Queries) and HTML5 (especially the viewport meta tag).
In the following chapter, we will get acquainted to the popular CSS and HTML framework called Bootstrap. Don't worry if you have never heard about it; it helps us to build the application on the existing and well-tested components, such as grids and LESS Media Queries.
In the last section of this chapter, you will learn about Scalable Vector Graphics (SVG) in the browser; and you will understand why and when it is great to use vector graphics for visualizations. Then, we will see a brief introduction to D3.js, which is a versatile JavaScript library for data transformations and graphics generation. At the end of this chapter, you will understand why SVG is a great choice for designing interactive responsive visualizations for the web.
