CODEWITHSUNDEEP
javascriptd3.jschartsgoogle-visualizationhistogram
eveo
eveo

Reputation: 2843

How to format array of values to form a distribution for google-charts histogram?

I have 1000 values in no particular order but I'd like to format them into a normal distribution to plot on a histogram using google-charts.

I've tried using d3.js and I got it working just based off some examples but it looks extremely ugly and I don't have enough time to learn d3 in and out to get the results I want. Google-charts visual format are great.

The problem is google-charts expects data in a format where each value has a name along with headers. So when I organized it into this:

'dsSample1': [
    ['price', 'number'],
    ['price', 11386.057139142767],
    ['price', 27659.397260273952],
    ['price', 44159.39726027395],
    ...

from

'dsSample2': [
    11386.057139142767,
    27659.397260273952,
    44159.39726027395,
    28026.04112639835,
    ...

google charts works, but I get the following:

enter image description here

This is as close as I've come to getting it working in d3: https://jsfiddle.net/0jtrq17x/1/. It works but it's extremely ugly.

I've managed to arrange the array data into bins using some d3 code but it is imcompatible with google-charts and I don't know to make it compatible, and also don't know how to format the data so it plays nice with google-charts histogram

this code

var values = this.hypo.dsSample2.map(x => {
    return x + 128608.42487322348
})
var max = d3.max(values)
var min = d3.min(values)
var x = d3.scale.linear()
    .domain([min, max])
    .range([0, 800]);
var histGenerator = d3.layout.histogram()
    .bins(x.ticks(100))
    (values)
this.data1 = histGenerator

returns this array transformation

enter image description here

My problem is I don't know how to massage my array of data so I can get something like this in google-charts:

enter image description here

Upvotes: 1

Views: 630

Answers (2)

WhiteHat
WhiteHat

Reputation: 61230

there are two data formats for the google charts version.
a single series format, with the names,
or a multi-series format, with just the numbers.
it is ok to use the multi-series format with a single series.

so, assigning names is not required.
but you will have to convert each value to its own array. 

'dsSample1': [
    [11386.057139142767],
    [27659.397260273952],
    [44159.39726027395],
    ...

from

'dsSample2': [
    11386.057139142767,
    27659.397260273952,
    44159.39726027395,
    ...

you can use the map method to format the data. 

dsSample.map(function (value) {
  return [value];
});

see following fiddle...

https://jsfiddle.net/x684f1vs/

Upvotes: 2

matthias.rocks
matthias.rocks

Reputation: 625

I know you have decided against D3, but since your question is still tagged with d3.js, I will post an answer using D3 anyways :)

I have made an updated JSFiddle, with an adaption of your code: https://jsfiddle.net/w7r80cfo/1/

In short, to manipulate this histogram, look to the following lines:

  • 1038 and 1039 to change the dimensions (width and height respectively) of the visualization. The values given are in pixels.
  • 1049 to change the number of buckets for you histogram. Currently it is set to 100.
  • 1083 to change the width of the individual bars. Currently, I've set it to 0.25 of the space calculated for each bar. If you e.g. change 0.25 to 1 the bars will be so wide, they will be drawn right next to each other.
  • 1085 to change the color of the bars. Currently they are given a darker shade of red the higher number of values they represent. If you want e.g. just blue, change the line to .attr("fill", "steelblue")

Play around with these values and see if you can get to a chart that is close to what you want.

To elaborate a bit on the changes I've made, they consist mainly of the following:

Line 1038: lowered the width to 600.

Line 1073: updated to position the visualization correctly:

.attr('transform', `translate(${margin.left},${margin.top})`);

Line 1083: lowered the width of the bars by multiplying by 0.25:

.attr("width", (x(data[0].dx) - x(0)) * 0.25)

Other than that I have removed the following code to remove the text labels, as they indeed made the chart look messy:

bar.append("text")
  .attr("dy", ".75em")
  .attr("y", -12)
  .attr("x", (x(data[0].dx) - x(0)) / 2)
  .attr("text-anchor", "middle")
  .text(function(d) { return "$" + d3.format(",.2f")(d.x); });

Besides this, I have added an y axis and changed the way the axes are drawn in order to make them look a bit nicer. I can go into detail about these changes, but I think they are of lesser interest to your goal.

Hope this helps!

Upvotes: 1

Related Questions