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

Money for nothing, treemaps for free (maps)


Despite the similar name, treemaps bear little visual resemblance to the tree layout we used earlier; instead, they divide a tree into rectangular regions. This requires us to have a dimension to our data; in this case, we'll size the treemap regions based on screen time, nesting each region into its parent. As such, the size of each parent will be the sum of its children, plus its own value.

This is all going to start looking really similar, so we will start writing all of our common functions now. In common/index, add this function, which will give us increasingly deeper gradiations based on a hierarchy:

 export const descendantsDarker =  (d, color, invert = false, dk = 5) => 
   d3.color(
     color(
       d.ancestors()[d.ancestors().length - 2].id.split(' ').pop()
     ) )[invert ? 'brighter' : 'darker'](d.depth / dk);

This takes a datum, a color scale, and then three options: a Boolean to make the scale go brighter instead of darker, a numerical...

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