This is a simple barplot with d3-tip compatible with d3.v4

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Week 7</title>
        <script type="text/javascript" src="d3.js"></script>
        <script type="text/javascript" src="d3-tip.js"></script>
        <style type="text/css">
          
          .axis path,
          .axis line {
              fill: none;
              stroke: black;
              shape-rendering: crispEdges;
          }
          .axis text {
              font-family: sans-serif;
              font-size: 11px;
          }
          svg {
              padding-left: 100px;
              padding-bottom: 150px;
              padding-top: 20px;
              }
              .bar {
                fill: black;
              }
              .bar:hover {
                fill: grey ;
              }
              .d3-tip {
                line-height: 1;
                font-weight: bold;
                padding: 12px;
                background: rgba(0, 0, 0, 0.8);
                color: #fff;
                border-radius: 2px;
              }

/* Creates a small triangle extender for the tooltip */
              .d3-tip:after {
                box-sizing: border-box;
                display: inline;
                font-size: 10px;
                width: 100%;
                line-height: 1;
                color: rgba(0, 0, 0, 0.8);
                content: "\25BC";
                position: absolute;
                text-align: center;
              }

/* Style northward tooltips differently */
              .d3-tip.n:after {
                margin: -1px 0 0 0;
                top: 100%;
                left: 0;
              }
        </style>
    </head>  
    <body>
        
        
            <script type="text/javascript">
            
        
            d3.csv("crime_occurences.csv", function(data) {
                dataset_b = data;
                console.log(d3.max(dataset_b, function(d) { return +d.count;}));
                //console.log(d3.max(dataset, function(d) { return +d.count_veh_2003; }));

//Width and height
                var w_b = 1000;
                var h_b = 450;
                var padding_b = 30;

//var formatPercent = d3.format(".0%");

//Create scaled x
                var xScale_b = d3.scaleBand()
                               .domain(dataset_b.map(function(d) { return d.Category; })) //Assign Cateory value
                               .rangeRound([0, w_b]) //Create equally big widths for the bars within the svg total width 
                               .paddingInner(0.05);//Create padding between consecutive bars in percentage

//Create scaled y
                var yScale_b = d3.scaleLinear()
                               .domain([0, d3.max(dataset_b, function(d) { return +d.count;})])
                               .range([h_b, 0]);  // Invert yaxis upside-down

//Define X axis
                var xAxis_b = d3.axisBottom()
                                .scale(xScale_b);

//Define Y axis
                var yAxis_b = d3.axisLeft()
                                .scale(yScale_b);

//Create tip
                var tip = d3.tip()
                            .attr('class', 'd3-tip')
                            .offset([-10, 0])
                            .html(function(d) {
                              return "<strong>Frequency:</strong> <span style='color:red'>" + d.count + "</span>";
                            })

//Create SVG element
                var svg_b = d3.select("body")
                            .append("svg")
                            .attr("width", w_b)
                            .attr("height", h_b);

// Call the tip
                svg_b.call(tip);

//Add a rectangle to each element
                svg_b.selectAll(".bar")
                       .data(dataset_b)
                       .enter()
                       .append("rect")
                       .attr("class", "bar")
                       .attr("x", function(d) { return xScale_b(d.Category); })
                       .attr("y", function(d) { return  yScale_b(+d.count); }) //invert yaxis upside-down
                       .attr("width", xScale_b.bandwidth())
                       .attr("height", function(d,i) { return h_b - yScale_b(+d.count);})   //invert yaxis upside-down
                       .on('mouseover', tip.show)
                       .on('mouseout', tip.hide);
                   
                //Add X axis
                svg_b.append("g")
                       .attr("class", "x axisb")
                       .attr("transform", "translate(0," + h_b + ")")
                       .call(xAxis_b)
                       .selectAll("text")
                       .attr("y", 0)
                       .attr("x", 9)
                       .attr("dy", ".35em")
                       .attr("transform", "rotate(90)")
                       .style("text-anchor", "start");
                
                //Add Y axis
                svg_b.append("g")
                       .attr("class", "y axisb")
                       .attr("transform", "translate(0,0)")  // + 5 + "
                       .call(yAxis_b);

// Text label for the Y axis
                svg_b.append("text")
                     .attr("transform", "rotate(-90)")
                     .attr("y", 0 - padding_b*3)
                     .attr("x",0 - (h_b / 2))
                     .attr("dy", "1em")
                     .attr("font-family", "sans-serif")
                     .style("text-anchor", "middle")
                     .text("FREQUENCY");

// Text for the title of the plot
                svg_b.append("text")
                     .attr("class", "text title") 
                     .attr("transform","translate(" + w_b/2 + ",0)")
                     .style("text-anchor","middle")
                     .attr("font-family", "sans-serif")
                     .attr("font-size", "20px")
                     .text("Frequency of San Francisco categories of crimes (2003-2016)");

});
    </script>
                
 </body>
</html>