luluwuluying/Time-spent.csv

## index.html
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>week3：d3 table</title>

	</head>
	<body>
<style>

    body  {
      font-family: Arial, sans-serif;
      font-size: 1em;
      margin:auto;
      max-width: 900px;
        color: steelblue;
    }

    p.info {
      font-size: 1em;
      color: steelblue;
      margin-left: 5px;
      line-height: 1em;
    }

    #table {
    border-collapse: collapse;
}
    #th,tr ,td{
        padding: 15px;
    text-align:center;
    }
    th {
    background-color: steelblue;
    color: white;
        padding: 15px;
}
   tr:nth-child(even) {background-color: #f2f2f2}
    </style>
</head>
<body>
         <h1>D3 table</h1>
         <p class="info">Time spent in primary activities of the civilian population engaging in each activity, averages per day by sex, 2014 annual averages</p>
         <p class="info">The charts shows the different between men and women about how they spent their day.</p>
         <p class="info">source:http://www.bls.gov/news.release/atus.t01.htm</p>
		<div id="table"></div>

	</body>

		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

		<script type="text/javascript" src="tabulate.js"></script>

		<script type="text/javascript">

			d3.csv("Time-spent.csv", function(error, data) {

				if (error) {
					console.log("Had an error loading file.");
				}

				data.forEach(function(d, i){
					d.Totalhour = (+d.AvgHourMen + +d.AvgHourWomen).toFixed(2);
				});

				console.log(data);

                 data.sort(function (a, b) {
            return d3.ascending(a.AvgHourMen, b.AvgHourMen);
            });

				var regionTable = tabulate(data,
					                        ["Activity", "AvgHourMen", "AvgHourWomen", "Totalhour"],
					                        "#table");

			});

		</script>

</html>

## tabulate.js
function tabulate(data, columns, id) {
    var table = d3.select(id).append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

    thead.append("tr")
        .selectAll("th")
        .data(columns)
        .enter()
        .append("th")
            .text(function(column) { return column; });

    var rows = tbody.selectAll("tr")
        .data(data)
        .enter()
        .append("tr");


    var cells = rows.selectAll("td")
        .data(function(row) {

            return columns.map(function(column) {
                return { value: row[column] };
            });
        })
        .enter()
        .append("td")
        .text(function(d) { return d.value; });
    return table;
}

## Time-spent.csv

          
            Activity
            AvgHourMen
            AvgHourWomen

            
              Personal care activities
              9.32
              9.82

            
              Sleeping
              8.69
              8.9

            
              Eating and drinking
              1.21
              1.14

            
              Household activities
              1.38
              2.14

            
              Housework
              0.27
              0.82

            
              Food preparation and cleanup
              0.34
              0.82

            
              Lawn and garden care
              0.25
              0.12

            
              Household management
              0.1
              0.13

            
              Purchasing goods and services
              0.6
              0.87

            
              Consumer goods purchases
              0.27
              0.44

            
              Professional and personal care services
              0.06
              0.12

            
              Caring for and helping household members
              0.35
              0.72

            
              Caring for and helping household children
              0.26
              0.55

            
              Caring for and helping nonhousehold members
              0.15
              0.21

            
              Caring for and helping nonhousehold adults
              0.07
              0.06

            
              Working and work-related activities
              4.29
              2.94

            
              Working
              3.87
              2.68

            
              Educational activities
              0.4
              0.44

            
              Attending class
              0.24
              0.23

            
              Homework and research
              0.12
              0.18

            
              Organizational, civic, and religious activities
              0.27
              0.37

            
              Religious and spiritual activities
              0.11
              0.17

            
              Volunteering (organizational and civic activities)
              0.12
              0.16

            
              Leisure and sports
              5.71
              4.93

            
              Socializing and communicating
              0.69
              0.73

            
              Watching television
              3.05
              2.61

            
              Participating in sports, exercise, and recreation
              0.38
              0.21

            
              Telephone calls, mail, and e-mail
              0.1
              0.19

            
              Other activities, not elsewhere classified
              0.22
              0.24
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>week3：d3 table</title>

	</head>
	<body>
	<style>

	body {
	font-family: Arial, sans-serif;
	font-size: 1em;
	margin:auto;
	max-width: 900px;
	color: steelblue;
	}

	p.info {
	font-size: 1em;
	color: steelblue;
	margin-left: 5px;
	line-height: 1em;
	}

	#table {
	border-collapse: collapse;
	}
	#th,tr ,td{
	padding: 15px;
	text-align:center;
	}
	th {
	background-color: steelblue;
	color: white;
	padding: 15px;
	}
	tr:nth-child(even) {background-color: #f2f2f2}
	</style>
	</head>
	<body>
	<h1>D3 table</h1>
	<p class="info">Time spent in primary activities of the civilian population engaging in each activity, averages per day by sex, 2014 annual averages</p>
	<p class="info">The charts shows the different between men and women about how they spent their day.</p>
	<p class="info">source:http://www.bls.gov/news.release/atus.t01.htm</p>
	<div id="table"></div>

	</body>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

	<script type="text/javascript" src="tabulate.js"></script>

	<script type="text/javascript">

	d3.csv("Time-spent.csv", function(error, data) {

	if (error) {
	console.log("Had an error loading file.");
	}

	data.forEach(function(d, i){
	d.Totalhour = (+d.AvgHourMen + +d.AvgHourWomen).toFixed(2);
	});

	console.log(data);

	data.sort(function (a, b) {
	return d3.ascending(a.AvgHourMen, b.AvgHourMen);
	});

	var regionTable = tabulate(data,
	["Activity", "AvgHourMen", "AvgHourWomen", "Totalhour"],
	"#table");

	});

	</script>

	</html>
	function tabulate(data, columns, id) {
	var table = d3.select(id).append("table"),
	thead = table.append("thead"),
	tbody = table.append("tbody");

	thead.append("tr")
	.selectAll("th")
	.data(columns)
	.enter()
	.append("th")
	.text(function(column) { return column; });

	var rows = tbody.selectAll("tr")
	.data(data)
	.enter()
	.append("tr");


	var cells = rows.selectAll("td")
	.data(function(row) {

	return columns.map(function(column) {
	return { value: row[column] };
	});
	})
	.enter()
	.append("td")
	.text(function(d) { return d.value; });
	return table;
	}
Activity	AvgHourMen	AvgHourWomen
Personal care activities	9.32	9.82
Sleeping	8.69	8.9
Eating and drinking	1.21	1.14
Household activities	1.38	2.14
Housework	0.27	0.82
Food preparation and cleanup	0.34	0.82
Lawn and garden care	0.25	0.12
Household management	0.1	0.13
Purchasing goods and services	0.6	0.87
Consumer goods purchases	0.27	0.44
Professional and personal care services	0.06	0.12
Caring for and helping household members	0.35	0.72
Caring for and helping household children	0.26	0.55
Caring for and helping nonhousehold members	0.15	0.21
Caring for and helping nonhousehold adults	0.07	0.06
Working and work-related activities	4.29	2.94
Working	3.87	2.68
Educational activities	0.4	0.44
Attending class	0.24	0.23
Homework and research	0.12	0.18
Organizational, civic, and religious activities	0.27	0.37
Religious and spiritual activities	0.11	0.17
Volunteering (organizational and civic activities)	0.12	0.16
Leisure and sports	5.71	4.93
Socializing and communicating	0.69	0.73
Watching television	3.05	2.61
Participating in sports, exercise, and recreation	0.38	0.21
Telephone calls, mail, and e-mail	0.1	0.19
Other activities, not elsewhere classified	0.22	0.24