asuozzo/VTSalaryDataTop520092014.csv

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Vermont Salary Spending by Department, 2009-2014</title>
        <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            body {
                background-color: white;
                font-family:Helvetica, Arial, sans-serif;
            }

            h1 {
                font-size:24px;
                margin:0;
            }

            p {
                font-size: 14px;
                margin: 10px 0 0 0;
            }

            svg {
                background-color: white;
            }

            path {
                stroke: slateblue;
                stroke-width:1;
            }

            g.highlight1 path {
                stroke: green;
                stroke-width:2;
            }

            g.highlight2 path {
                stroke: red;
                stroke-width:2;
            }


            .axis path,
            .axis line {
                fill:none;
                stroke:black;
                shape-rendering:crispEdges;
            }

            .axis text {
                font-family: sans-serif;
                font-size: 11px
            }

            .y.axis path,
            .y.axis line {
                opacity:0;
            }

        </style>
    </head>
    <body>

        <h1>What Vermont departments spend the most on salaries?</h1>
        <p>Top five Vermont departments in total salary expenditures, 2009-2014. Source: <a href="http://data.vermont.gov">data.vermont.gov</a>
        <script type="text/javascript">

            var w=900;
            var h=400;
            var padding = [10, 10, 30, 90]

            //date formatting
            var dateFormat = d3.time.format("%Y");

            //scales
            var xScale = d3.time.scale()
                                .range([padding[3], w-padding[1]-padding[3] ]);

            var yScale = d3.scale.linear()
                                .range([ padding[0],h-padding[2] ]);

            // configure axes
            var xAxis = d3.svg.axis()
                                .scale(xScale)
                                .orient("bottom")
                                .ticks(5)
                                .tickFormat(function(d){
                                    return dateFormat(d);
                                });

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

            //configure line generator
            var line = d3.svg.line()
                .x(function(d){
                    return xScale(dateFormat.parse(d.year));
                })
                .y(function(d){
                    return yScale(d.amount);
                })

            //create svg
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

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

                //array with all years, for referencing later
                var years = ["2009", "2010", "2011", "2012", "2013", "2014"];

                //array to hold restructured data
                var dataset = [];

                //loop through data
                for (var i=0; i< data.length; i++) {

                    dataset[i] = {
                        department: data[i].Department,
                        salaries: []
                    }

                    for (var j = 0; j < years.length; j++) {

                        // If value is not empty
                        if (data[i][years[j]]) {
                            //Add a new object to the data array
                            //for this department
                            dataset[i].salaries.push({
                                year: years[j],
                                amount: data[i][years[j]]
                            });
                        }

                    }
                };


                //set scale domains
                xScale.domain([
                    d3.min(years, function(d){
                        return dateFormat.parse(d);
                    }),
                    d3.max(years, function(d){
                        return dateFormat.parse(d);
                    })
                ]);

                yScale.domain([
                    d3.max(dataset, function(d){
                        return d3.max(d.salaries, function(d){
                            return +d.amount
                        })
                    }),
                    0
                ]);

                //make a group for each dept
                var groups = svg.selectAll("g")
                    .data(dataset)
                    .enter()
                    .append("g")
                    .classed("highlight1", function(d) {

                        if (d.department == "Children & Families") {
                            return true;
                        } else {
                            return false;
                        }

                    })
                    .classed("highlight2", function(d) {

                        if (d.department == "Corrections") {
                            return true;
                        } else {
                            return false;
                        }

                    });

                //append a title with the dept name for tooltips
                groups.append("title")
                    .text(function(d){
                        return d.department;
                    });

                //within each group, create a new line/path
                groups.selectAll("path")
                    .data(function(d){
                        return [d.salaries];
                    })
                    .enter()
                    .append("path")
                    .attr("class", "line")
                    .attr("d", line)
                    .attr("fill", "none")
                    .attr("stroke", "steelblue")
                    .attr("stroke-width", 2);

                //axes
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + (h-padding[2]) + ")")
                    .call(xAxis);

                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (padding[3]) + ",0)")
                    .call(yAxis);

            });


        </script>

    </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## VTSalaryDataTop520092014.csv

          
            Department
            2009
            2010
            2011
            2012
            2013
            2014

            
              Health
              26772556.93
              24741532.31
              24586302.43
              23595120.06
              26238288.05
              28019450.68

            
              Public Safety
              39462489.05
              39395985.78
              39315973.1
              39171236.03
              41707129.4
              43903473.67

            
              Corrections
              55786501.56
              53891477.24
              54002007.3
              52255815.88
              56399508.6
              57978276.23

            
              Children & Families
              52190960.86
              51911733.07
              52547090.85
              49499461.16
              54475730.34
              59213987.59

            
              Transportation
              62825173.63
              63433624.13
              64816878.55
              64055953.68
              67411747.78
              70938509.06
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Vermont Salary Spending by Department, 2009-2014</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">
	body {
	background-color: white;
	font-family:Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size:24px;
	margin:0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	path {
	stroke: slateblue;
	stroke-width:1;
	}

	g.highlight1 path {
	stroke: green;
	stroke-width:2;
	}

	g.highlight2 path {
	stroke: red;
	stroke-width:2;
	}


	.axis path,
	.axis line {
	fill:none;
	stroke:black;
	shape-rendering:crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px
	}

	.y.axis path,
	.y.axis line {
	opacity:0;
	}

	</style>
	</head>
	<body>

	<h1>What Vermont departments spend the most on salaries?</h1>
	<p>Top five Vermont departments in total salary expenditures, 2009-2014. Source: <a href="http://data.vermont.gov">data.vermont.gov</a>
	<script type="text/javascript">

	var w=900;
	var h=400;
	var padding = [10, 10, 30, 90]

	//date formatting
	var dateFormat = d3.time.format("%Y");

	//scales
	var xScale = d3.time.scale()
	.range([padding[3], w-padding[1]-padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0],h-padding[2] ]);

	// configure axes
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5)
	.tickFormat(function(d){
	return dateFormat(d);
	});

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

	//configure line generator
	var line = d3.svg.line()
	.x(function(d){
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d){
	return yScale(d.amount);
	})

	//create svg
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

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

	//array with all years, for referencing later
	var years = ["2009", "2010", "2011", "2012", "2013", "2014"];

	//array to hold restructured data
	var dataset = [];

	//loop through data
	for (var i=0; i< data.length; i++) {

	dataset[i] = {
	department: data[i].Department,
	salaries: []
	}

	for (var j = 0; j < years.length; j++) {

	// If value is not empty
	if (data[i][years[j]]) {
	//Add a new object to the data array
	//for this department
	dataset[i].salaries.push({
	year: years[j],
	amount: data[i][years[j]]
	});
	}

	}
	};


	//set scale domains
	xScale.domain([
	d3.min(years, function(d){
	return dateFormat.parse(d);
	}),
	d3.max(years, function(d){
	return dateFormat.parse(d);
	})
	]);

	yScale.domain([
	d3.max(dataset, function(d){
	return d3.max(d.salaries, function(d){
	return +d.amount
	})
	}),
	0
	]);

	//make a group for each dept
	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g")
	.classed("highlight1", function(d) {

	if (d.department == "Children & Families") {
	return true;
	} else {
	return false;
	}

	})
	.classed("highlight2", function(d) {

	if (d.department == "Corrections") {
	return true;
	} else {
	return false;
	}

	});

	//append a title with the dept name for tooltips
	groups.append("title")
	.text(function(d){
	return d.department;
	});

	//within each group, create a new line/path
	groups.selectAll("path")
	.data(function(d){
	return [d.salaries];
	})
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-width", 2);

	//axes
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h-padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3]) + ",0)")
	.call(yAxis);

	});


	</script>

	</body>
	</html>
Department	2009	2010	2011	2012	2013	2014
Health	26772556.93	24741532.31	24586302.43	23595120.06	26238288.05	28019450.68
Public Safety	39462489.05	39395985.78	39315973.1	39171236.03	41707129.4	43903473.67
Corrections	55786501.56	53891477.24	54002007.3	52255815.88	56399508.6	57978276.23
Children & Families	52190960.86	51911733.07	52547090.85	49499461.16	54475730.34	59213987.59
Transportation	62825173.63	63433624.13	64816878.55	64055953.68	67411747.78	70938509.06