D3.js: Cutting-edge Data Visualization by Rininsland Ændrew H. & Heydt Michael & Castillo Pablo Navarro

Author:Rininsland, Ændrew H. & Heydt, Michael & Castillo, Pablo Navarro [Rininsland, Ændrew H.]
Language: eng
Format: epub
Publisher: Packt Publishing
Published: 2017-03-30T17:00:00+00:00

Has

Black

Blonde

Brown

Red

Total

Black

11975

5871

8916

2868

29630

Blonde

1951

10048

2060

6171

20230

Brown

8010

16145

8090

8045

40290

Red

1013

990

940

6907

9850

Total

22949

30354

20006

23991

10000

To explain the diagram, each outer ring segment represents the number of people that have a given hair color. The size of these ring segments is relative to the percentage of people of a given hair color. Each arc from a given color ring segment to another ring segment (or itself) represents the number of people of that hair color that prefer the hair color on the other side of that arc and vice versa. The ticks on the outside of each ring segment gives a feel for the total number of the people represented.

Now let's step through creating this graph. First, we create our top-level SVG elements. The main group is translated to the center, as the positions will be centered around (0, 0):

var width = 960, height = 500; var svg = d3.select('body') .append('svg') .attr({ width: width, height: height }); var mainGroup = svg.append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.