Book Image

D3.js 4.x Data Visualization - Third Edition

By : Aendrew Rininsland, Teller
Book Image

D3.js 4.x Data Visualization - Third Edition

By: Aendrew Rininsland, Teller

Overview of this book

Want to get started with impressive interactive visualizations and implement them in your daily tasks? This book offers the perfect solution-D3.js. It has emerged as the most popular tool for data visualization. This book will teach you how to implement the features of the latest version of D3 while writing JavaScript using the newest tools and technique You will start by setting up the D3 environment and making your first basic bar chart. You will then build stunning SVG and Canvas-based data visualizations while writing testable, extensible code,as accurate and informative as it is visually stimulating. Step-by-step examples walk you through creating, integrating, and debugging different types of visualization and will have you building basic visualizations (such as bar, line, and scatter graphs) in no time. By the end of this book, you will have mastered the techniques necessary to successfully visualize data and will be ready to use D3 to transform any data into an engaging and sophisticated visualization.
Table of Contents (11 chapters)
3
Shape Primitives of D3

Histograms, Herstograms, Yourstograms, and Mystograms


Another simple layout is the histogram, which simplifies creating bar charts when they're in a continuous series. We can also use it for binning a series of values so that we don't have to do as many gymnastics with Array.prototype.reduce and Array.prototype.map.

In this instance, we will create an ordinal scale of episodes and seasons and use that to create a histogram. In doing so, we're going to use a new dataset, which I've included in the data/ directory, GoT-deaths-by-season.json. This includes all the deaths in the show in the following format:

    { 
      "name": "Will", 
      "role": "Ranger of the Night's Watch", 
      "death": { 
        "season": 1, 
        "episode": 1 
      }, 
      "execution": "Beheaded for desertion by Ned Stark", 
      "likelihoodOfReturn": "0%" 
    },

The only data we're really concerned with here is the death object, which we'll use to create an ordinal scale.

Start by resetting main.js by commenting...