index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.js" charset="utf-8"></script>

<style>
    .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 2px;
    }

    .bar {
        fill: steelblue;
    }

    .bar:hover {
        fill: brown;
    }

</style>

            <div class="chart" id="chart4"></div>
  
        <script>

            var data = [
                {letter: "0", frequency: 7},
                {letter: "1", frequency: 2},
                {letter: "2", frequency: 2},
                {letter: "3", frequency: 3},
                {letter: "4", frequency: 2},
                {letter: "5", frequency: 8},
                {letter: "6", frequency: 5},
                {letter: "7", frequency: 4},
                {letter: "8", frequency: 6},
                {letter: "9", frequency: 3},
                {letter: "10", frequency: 2},
                {letter: "11", frequency: 5},
                {letter: "12", frequency: 6},
                {letter: "13", frequency: 9},
                {letter: "14", frequency: 7},
                {letter: "15", frequency: 9},
                {letter: "16", frequency: 5},
                {letter: "17", frequency: 7}

            ]
            var margin = {
                top: 20,
                right: 20,
                bottom: 30,
                left: 40
            };
            var width = 550 - margin.left - margin.right;
            var height = 650 - margin.top - margin.bottom;

            var svg = d3.select("#chart4").append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

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

            var xAxis = d3.axisBottom(x)
                    .ticks(10);

            var yAxis = d3.axisLeft(y);

            x.domain([0, d3.max(data, function(d) { return d.frequency; })]);

            y.domain(data.map(function(d) { return d.letter; }))
                    .paddingInner(0.1)
                    .paddingOuter(0.5);


            svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis)
                    .append("text")
                    .attr("class", "label")
                    .attr("transform", "translate(" + width + ",0)")
                    .attr("y", -5)
                    .style("text-anchor", "end")
                    .text("Frequency");

            svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis);

            svg.selectAll(".bar")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "bar")
                    .attr("x", 0)
                    .attr("height", y.bandwidth())
                    .attr("y", function(d) { return y(d.letter); })
                    .attr("width", function(d) { return x(d.frequency); });

            function type(d) {
                d.frequency = +d.frequency;
                return d;
            }

        </script>