D3 bar chart with lines

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Top MSAs by new establishments</title>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>
    body {
        margin: 0;
        background-color: lightGray;
        font-family: Helvetica, Arial, sans-serif;
    }
    
    #container {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        padding: 50px;
        background-color: white;
        box-shadow: 3px 3px 5px 6px #ccc;
    }
    
    h1 {
        font-size: 24px;
        margin: 0;
    }
    
    p {
        font-size: 14px;
        margin: 10px 0 0 0;
    }
    
    svg {
        background-color: white;
    }
    
    rect:hover {
        fill: orange;
    }
    
    .label {
        font-size: 12px;
    }
    
    .shortLine {
        stroke: black;
        stroke-width: 2;
        opacity: .5;
    }
    
    .longLine {
        stroke: black;
        stroke-width: 1;
        opacity: .2
    }
    
    circle {
        fill: steelblue;
    }
    
    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        opacity: .3;
        shape-rendering: crispEdges;
    }
    
    .axis text {
        font-family: sans-serif;
        font-size: 12px;
    }
    
    .y.axis path,
    .y.axis line {
        opacity: 0;
    }
    </style>
</head>

<body>
    <div id="container">
        <h2>Top 30 US Metropolitan Statistical Areas (MSAs) by Rate of Business Establishments Entry, 2013</h2>
        <p>Measured as 100 * (estabs_entry at time t divided by the average of establishments at t and t-1), where estabs_entry is a count of establishments born during the previous 12 months.</p>
        <script type="text/javascript">
        var w = 700;
        var h = 700;
        var padding = [30, 30, 30, 200]; //Top, right, bottom, left

var formatDecimal = d3.format(".1f");

var widthScale = d3.scale.linear()
            .range([0, w - padding[1] - padding[3]]);

var heightScale = d3.scale.ordinal()
            .rangeRoundBands([padding[0], h - padding[2]], 0.1);

var xAxis = d3.svg.axis()
            .scale(widthScale)
            .orient("top");

var yAxis = d3.svg.axis()
            .scale(heightScale)
            .orient("left");

var svg = d3.select("#container")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

d3.csv("msa_entry_job_state.csv", function(data) {

data.sort(function(a, b) {
                return d3.descending(+a.estab_entry, +b.estab_entry);
            });

widthScale.domain([0, d3.max(data, function(d) {
                return +d.estab_entry;
            })]);

heightScale.domain(data.map(function(d) {
                return d.name;
            }));

maxLongLine = d3.max(data, function(d) {
                return +d.estab_entry;
            });

var lines = svg.selectAll(".shortLine")
                .data(data)
                .enter()
                .append("line");

lines
                .attr("class", "shortLine")
                .attr("x1", padding[3] + 30)
                .attr("y1", function(d, i) {
                    return heightScale(d.name) + 7;
                })
                .attr("x2", padding[3] + 30)
                .attr("y2", function(d, i) {
                    return heightScale(d.name) + 7;
                })
                .transition()
                .duration(2000)
                .attr("x2", function(d) {
                    return widthScale(+d.estab_entry) + padding[3];
                })
                .attr("y2", function(d, i) {
                    return heightScale(d.name) + 7;
                })

var longLines = svg.selectAll(".longLine")
                .data(data)
                .enter()
                .append("line");

longLines
                .attr("class", "longLine")
                .attr("x1", padding[3] + 30)
                .attr("y1", function(d) {
                    return heightScale(d.name) + 7;
                })
                .attr("x2", function(d) {
                    return widthScale(maxLongLine) + padding[3];
                })
                .attr("y2", function(d) {
                    return heightScale(d.name) + 7;
                })

var circles = svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle");

circles
                .attr("r", 0)
                .attr("cx", function(d) {
                    return widthScale(+d.estab_entry) + padding[3];
                })
                .attr("cy", function(d, i) {
                    return heightScale(d.name) + 7;
                })
                .transition()
                .delay(1000)
                .duration(1000)
                .ease('bounce')
                .attr("r", 3)

svg.selectAll("text")
                .data(data)
                .enter()
                .append("text")
                .attr("class", "label")
                .attr("x", padding[3])
                .attr("y", function(d) {
                    return heightScale(d.name) + 10;
                })
                .text(function(d) {
                    return formatDecimal(+d.estab_entry);
                })
                .attr("fill", "steelblue");

svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + padding[3] + ", -4)")
                .call(yAxis);
        });
        </script>
        <br>
        <p>Source: <a href="https://www.census.gov/ces/dataproducts/bds/data.html">Business Dynamics Statistics, US Census Bureau</a></p>
    </div>
</body>

</html>

https://d3js.org/d3.v3.min.js