Draw histogram with d3.js

histogram.js

function histogramChart(color_value, title, xAxisTitle, yAxisTitle, num_of_of_bins) {
    var margin = {top: 30, right: 40, bottom: 50, left: 50},
    width = 460,
            height = 300;

    var histogram = d3.layout.histogram(),
            x = d3.scale.ordinal(),
            y = d3.scale.linear(),
            xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(6, 0),
            yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .ticks(10);

    function chart(selection) {
        selection.each(function (data) {

            // Compute the histogram.
            histogram.bins(num_of_of_bins);
            data = histogram(data);


            // Update the x-scale.
            x.domain(data.map(function (d) {
                return d.x;
            }))
                    .rangeRoundBands([0, width - margin.left - margin.right], .1);

            // Update the y-scale.
            y.domain([0, d3.max(data, function (d) {
                    return d.y;
                })])
                    .range([height - margin.top - margin.bottom, 0]);

            // Select the svg element, if it exists.
            var svg = d3.select(this).selectAll("svg").data([data]);

            // Otherwise, create the skeletal chart.
            var gEnter = svg.enter().append("svg")
                    .attr("preserveAspectRatio", "xMinYMin meet")
                    .attr("viewBox", "0 0 460 300")
                    .classed("svg-content", true).append("g");
            gEnter.append("g").attr("class", "bars");
            gEnter.append("g").attr("class", "x axis");
            gEnter.append("g").attr("class", "y axis");
            // Update the outer dimensions.
            /*svg.attr("width", width)
             .attr("height", height);*/

            // Update the inner dimensions.
            var g = svg.select("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


            // Update the bars.
            var bar = svg.select(".bars").selectAll(".bar").data(data);
            bar.enter().append("rect");
            bar.exit().remove();
            bar.attr("width", x.rangeBand())
                    .attr("x", function (d) {
                        return x(d.x);
                    })
                    .attr("y", function (d) {
                        return y(d.y);
                    }).order().attr("height", 0)
                    .transition()
                    .delay(function (d, i) {
                        return i * 100;
                    })
                    .attr("height", function (d) {
                        return y.range()[0] - y(d.y);
                    })
                    .attr("fill", function (d, i) {
                        d.sort(function (a, b) {
                            return a - b;
                        });
                        if (parseFloat(color_value) >= d[0] && parseFloat(color_value) <= d[d.length - 1]) {
                            return "red";
                        } else {
                            return "#17becf";
                        }
                    });


            // Update the x-axis.
            g.select(".x.axis")
                    .attr("transform", "translate(0," + y.range()[0] + ")")
                    .call(xAxis)
                    .selectAll("text")
                    .style("text-anchor", "end")
                    .attr("dx", "-.8em")
                    .attr("dy", ".15em")
                    .attr("transform", "rotate(-65)");

            g.select(".x.axis")
                    .call(xAxis)
                    .append("text").attr("transform", "rotate(0)")
                    .attr("x", width / 2)
                    .attr("y", margin.bottom - 10)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end").text(xAxisTitle);

            g.select(".y.axis")
                    .call(yAxis)
                    .append("text").attr("transform", "rotate(-90)")
                    .attr("dx", "-.15em")
                    .attr("dy", "-3.55em")
                    .style("text-anchor", "end").text(yAxisTitle);


            g.append("text")
                    .text(title)
                    .attr("x", width / Math.abs(title.length - 9))
                    .attr("y", -5)
                    .attr("class", "title");
        });


    }

    chart.margin = function (_) {
        if (!arguments.length)
            return margin;
        margin = _;
        return chart;
    };

    chart.width = function (_) {
        if (!arguments.length)
            return width;
        width = _;
        return chart;
    };

    chart.height = function (_) {
        if (!arguments.length)
            return height;
        height = _;
        return chart;
    };

    // Expose the histogram's value, range and bins method.
    d3.rebind(chart, histogram, "value", "range", "bins");

    // Expose the x-axis' tickFormat method.
    d3.rebind(chart, xAxis, "tickFormat");

    return chart;
}