Histogram Examples

<script src='https://d3js.org/d3.v4.min.js'></script> was added in the page head.

xxxxxxxxxx

 

1

%%html

2

<style>@import 'https://fonts.googleapis.com/css?family=Sancreek';

3

.axis text,.bar text {fill:#3636ff; font-family:Sancreek; 

4

                      font-size:90%; text-shadow:3px 3px 3px #aaa;}

5

.bar rect {fill:#3636ff; opacity:.5;}

6

</style><svg id='svg1' width='650' height='350' 

7

style='background-color:lavender;'/><script>

8

var data=d3.range(3000).map(d3.randomBates(5)),

9

    formatCount=d3.format(',.0f');

10

var svg=d3.select('#svg1'),

11

    m=30,margin={top:m,right:m,bottom:m,left:m}, 

12

    width=+svg.attr('width')-margin.left-margin.right,

13

    height=+svg.attr('height')-margin.top-margin.bottom,

14

    tr='translate('+margin.left+','+margin.top+')',

15

    g=svg.append('g').attr('transform',tr);

16

var x=d3.scaleLinear().rangeRound([0,width]);

17

var bins=d3.histogram().domain(x.domain())

18

           .thresholds(x.ticks(30))(data);

19

var y=d3.scaleLinear().range([height,0])

20

        .domain([0,1.1*d3.max(bins,function(d){return d.length;})]);

21

var bar=g.selectAll('.bar').data(bins).enter()

22

         .append('g').attr('class','bar')

23

         .attr('transform',function(d){

24

             return 'translate('+x(d.x0)+','+y(d.length)+')';});

25

bar.append('rect').attr('x',0)

26

   .attr('width',x(bins[0].x1)-x(bins[0].x0)-2)

27

   .attr('height',function(d){return height-y(d.length);});

28

bar.append('text').attr('text-anchor','middle')

29

   .text(function(d){return formatCount(d.length);})

30

   .attr('dy','.55em').attr('y',-10)

31

   .attr('x',(x(bins[0].x1)-x(bins[0].x0))/2);

32

g.append('g').attr('class','axis axis--x')

33

 .call(d3.axisBottom(x))

34

 .attr('transform','translate(0,'+height+')'); 

35

g.append('text').attr('y',5)

36

 .attr('font-family','Sancreek')

37

 .text('The Example of D3 Histograms');

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages