Reader small image

You're reading from  D3.js 4.x Data Visualization - Third Edition

Product typeBook
Published inApr 2017
Reading LevelIntermediate
PublisherPackt
ISBN-139781787120358
Edition3rd Edition
Languages
Tools
Right arrow
Authors (2):
Aendrew Rininsland
Aendrew Rininsland
author image
Aendrew Rininsland

<p>Aendrew Rininsland is a developer and journalist who has spent much of the last half a decade building interactive content for newspapers such as The Financial Times, The Times, Sunday Times, The Economist, and The Guardian. During his 3 years at The Times and Sunday Times, he worked on all kinds of editorial projects, ranging from obituaries of figures such as Nelson Mandela to high-profile, data-driven investigations such as The Doping Scandal the largest leak of sporting blood test data in history. He is currently a senior developer with the interactive graphics team at the Financial Times.</p>
Read more about Aendrew Rininsland

Swizec Teller
Swizec Teller
author image
Swizec Teller

Swizec Teller is a geek with a hat. Founding his first startup at 21, he is now looking for the next big idea as a full-stack web generalist focusing on freelancing for early-stage startup companies. When he isn't coding, he's usually blogging, writing books, or giving talks at various non-conference events in Slovenia and nearby countries. He is still looking for a chance to speak at a big international conference. In November 2012, he started writing Why Programmers Work at Night, and set out on a quest to improve the lives of developers everywhere.
Read more about Swizec Teller

View More author details
Right arrow

Axes


Now that we can make all these different shapes, let's use them to create something actually useful. One way we can do that is by using lines and text to create graph axes. It would be tedious though, so D3 makes our lives easier with axis generators. They take care of drawing a line, putting on some ticks, adding labels, evenly spacing them, and so on.

A D3 axis is just a combination of path generators configured for awesomeness. All we have to do for a simple linear axis is create a scale and tell the axis to use it.

Note

In D3, it's worth remembering that a scale is a function that maps an input range to an output domain, whereas an axis is merely a visual representation of a scale.

Also, because we will be using scales a lot from now on, let's do that Scott Murray exercise from Chapter 1, Getting Started with D3, ES2017, and Node.js, again: Input! Domain! Output! Range! Input! Domain! Output! Range!

Honestly, it really never gets old.

For a more customized axis, we might have to define...

lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
D3.js 4.x Data Visualization - Third Edition
Published in: Apr 2017Publisher: PacktISBN-13: 9781787120358

Authors (2)

author image
Aendrew Rininsland

<p>Aendrew Rininsland is a developer and journalist who has spent much of the last half a decade building interactive content for newspapers such as The Financial Times, The Times, Sunday Times, The Economist, and The Guardian. During his 3 years at The Times and Sunday Times, he worked on all kinds of editorial projects, ranging from obituaries of figures such as Nelson Mandela to high-profile, data-driven investigations such as The Doping Scandal the largest leak of sporting blood test data in history. He is currently a senior developer with the interactive graphics team at the Financial Times.</p>
Read more about Aendrew Rininsland

author image
Swizec Teller

Swizec Teller is a geek with a hat. Founding his first startup at 21, he is now looking for the next big idea as a full-stack web generalist focusing on freelancing for early-stage startup companies. When he isn't coding, he's usually blogging, writing books, or giving talks at various non-conference events in Slovenia and nearby countries. He is still looking for a chance to speak at a big international conference. In November 2012, he started writing Why Programmers Work at Night, and set out on a quest to improve the lives of developers everywhere.
Read more about Swizec Teller