4

I have this below data.

Any possibilites i can create one using dc.js?

Can someone help me in creating a histogram using dc js?

Searched all over the forum but couldn't get something useful except this post.

Date :

numbers
1
10
1
20
35
24
26
35
12
32
35
10
1
2
32
35
36
12

Stuck in this for last 2 days.

Please help.

Community
  • 1
  • 1
user3206082
  • 431
  • 9
  • 18

1 Answers1

6

http://jsfiddle.net/djmartin_umich/NmWP8/

enter image description here

1) First load your data. In this case I loaded it directly, but you will probably want to use d3.csv (as in the example at https://github.com/dc-js/dc.js/blob/master/web/examples/bar.html). 

var experiments = [
        1,
        10,
        1,
        //other data points
        20];

2) Next create your crossfilter dimension and group.

        var ndx = crossfilter(experiments),
        typeDimension = ndx.dimension(function (d) {
            return d;
        }),
        typeGroup = typeDimension.group().reduceCount();

3) Setup your chart

        var barChart = dc.barChart("#barChart");

        barChart
        .width(768)
        .height(480)
        .x(d3.scale.linear().domain([0,40]))
        .brushOn(false)
        .dimension(typeDimension)
        .group(typeGroup);

4) Render your chart(s)

    dc.renderAll();
VividD
  • 10,456
  • 6
  • 64
  • 111
DJ Martin
  • 2,579
  • 20
  • 24
  • Very good and thorough answer! I added a screenshot, if you don't mind. – VividD Feb 04 '14 at 14:17
  • Thank you very much for the reply. Also can please help me if can you say me how do it take a average and plot that hist? if you don't mind. +1 vote for the brief explanation and your answer. – user3206082 Feb 05 '14 at 04:14
  • I'm not sure what you mean by an average histogram. Do you mean the average value grouped by one of the fields of the dataset? An example might help me understand your needs. – DJ Martin Feb 05 '14 at 15:41
  • 1
    @DJMartin great explanation, could you elaborate a bit on the meaning of the `reduceCount()` part of the group? – sedavidw Oct 07 '14 at 19:17
  • 1
    dimension() is the field that you care to report on. group() is how you want those fields to be combined together... for example you might have a payments dimension and you might group by whole dollar amounts. Once you have all of the records grouped together, you can then use the reduceCount method to simply count how many records are in each group. Or perhaps you care less about the count and more about the added up sum (in which case you can build custom reduce() functions). See https://github.com/square/crossfilter/wiki/API-Reference for a more complete description. – DJ Martin Oct 09 '14 at 18:28
  • This plot is not technically a histogram, even though it looks like one. It's a simple bar plot. It just displays counts of each value in the dataset, while histogram would enable binning of a range of variables into a single bin. Arrived here looking for a histogram and this answer is very unhelpful... – Michal J Figurski Oct 26 '21 at 18:34