asifm/index.html

## index.html
<!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="http://www.census.gov/ces/dataproducts/bds/data.html">Business Dynamics Statistics, US Census Bureau</a></p>
    </div>
</body>

</html>

## msa_entry_job_state.csv

          
            name
            estab_entry

            
              Abilene, TX
              8.4

            
              Akron, OH
              7.9

            
              Albany, GA
              7.8

            
              Albany-Schenectady-Troy, NY
              9.1

            
              Albuquerque, NM
              9.3

            
              Alexandria, LA
              6.8

            
              Allentown-Bethlehem-Easton, PA-NJ
              8.6

            
              Altoona, PA
              7.3

            
              Amarillo, TX
              9.2

            
              Ames, IA
              7.8

            
              Anchorage, AK
              10.3

            
              Ann Arbor, MI
              9.8

            
              Anniston-Oxford-Jacksonville, AL
              7.3

            
              Appleton, WI
              7.1

            
              Asheville, NC
              10.1

            
              Athens-Clarke County, GA
              10.2

            
              Atlanta-Sandy Springs-Roswell, GA
              12

            
              Atlantic City-Hammonton, NJ
              9.8

            
              Auburn-Opelika, AL
              11.4

            
              Augusta-Richmond County, GA-SC
              7.9

            
              Austin-Round Rock, TX
              13.3

            
              Bakersfield, CA
              10.7

            
              Baltimore-Columbia-Towson, MD
              9.8

            
              Bangor, ME
              8.1

            
              Barnstable Town, MA
              10

            
              Baton Rouge, LA
              8.7

            
              Battle Creek, MI
              7.8

            
              Bay City, MI
              7.4

            
              Beaumont-Port Arthur, TX
              8.4

            
              Bellingham, WA
              10.4
	<!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="http://www.census.gov/ces/dataproducts/bds/data.html">Business Dynamics Statistics, US Census Bureau</a></p>
	</div>
	</body>

	</html>
	name	estab_entry
	Abilene, TX	8.4
	Akron, OH	7.9
	Albany, GA	7.8
	Albany-Schenectady-Troy, NY	9.1
	Albuquerque, NM	9.3
	Alexandria, LA	6.8
	Allentown-Bethlehem-Easton, PA-NJ	8.6
	Altoona, PA	7.3
	Amarillo, TX	9.2
	Ames, IA	7.8
	Anchorage, AK	10.3
	Ann Arbor, MI	9.8
	Anniston-Oxford-Jacksonville, AL	7.3
	Appleton, WI	7.1
	Asheville, NC	10.1
	Athens-Clarke County, GA	10.2
	Atlanta-Sandy Springs-Roswell, GA	12
	Atlantic City-Hammonton, NJ	9.8
	Auburn-Opelika, AL	11.4
	Augusta-Richmond County, GA-SC	7.9
	Austin-Round Rock, TX	13.3
	Bakersfield, CA	10.7
	Baltimore-Columbia-Towson, MD	9.8
	Bangor, ME	8.1
	Barnstable Town, MA	10
	Baton Rouge, LA	8.7
	Battle Creek, MI	7.8
	Bay City, MI	7.4
	Beaumont-Port Arthur, TX	8.4
	Bellingham, WA	10.4