10 Browser-based visualization

 

This chapter covers

  • Using C3 for browser-based visualization
  • Understanding various charts: line, bar, pie, and scatter plot
  • Building a chart template so that you can start new projects quickly
  • Prototyping charts quickly
  • Creating a simple web server and REST API to serve data to your visualization
  • Adding various visual and interactive improvements to your charts

Now we come to the aspect of data wrangling for which JavaScript is best known!

JavaScript in the web browser is the place to host interactive visualizations. Through visualization we’ll bring our data out into the light for all to see. It’s the way we can better understand our data. Seeing the data in this way can deliver the information more effectively to our brains than we could ever hope to achieve by looking at the raw numbers.

Visualization is the way we communicate information about our data to our audience, whoever they might be; it allows the transfer of knowledge and understanding. We can easily identify and point out interesting trends, patterns, or data points.

In chapter 9 we analyzed our data, and while doing so, we looked at multiple charts. In this chapter, let’s take a step back and learn how we can create charts like this for ourselves.

10.1 Expanding your toolkit

10.2 Getting the code and data

10.3 Choosing a chart type

10.4 Line chart for New York City temperature

10.4.1 The most basic C3 line chart

10.4.2 Adding real data

10.4.3 Parsing the static CSV file

10.4.4 Adding years as the X axis

10.4.5 Creating a custom Node.js web server

10.4.6 Adding another series to the chart

10.4.7 Adding a second Y axis to the chart

10.4.8 Rendering a time series chart

10.5 Other chart types with C3

10.5.1 Bar chart

10.5.2 Horizontal bar chart

10.5.3 Pie chart

10.5.4 Stacked bar chart

10.5.5 Scatter plot chart

10.6 Improving the look of our charts

10.7 Moving forward with your own projects

Summary