block by curran 30e50fe82819ef73c6b8d9f2d31b99a8

How Americans Spend Time

Full Screen

A stacked area chart visualization of how people spend their time, by hour of day. Inspired by New York Times: How Different Groups Spend Their Day.

Data from American Time Use Survey, Table A-3A. Percent of the population engaging in selected activities by time of day, 12 AM to 11 AM, average for the combined years 2011-15. The tables for AM and PM were combined into one. An additional column was added that describes the Subcategory Level, which is expressed as indentation in the original publication. Another column “Presentable” was also added. Values here were manually entered to hand-pick the Activities presented. The value (2)- means “Estimate is approximately zero.”.

Uses d3-area-label to position labels.

forked from curran‘s block: Persons of Concern StreamGraph by Origin

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://unpkg.com/d3@4.10.0"></script>
    <script src="https://unpkg.com/d3-area-label@1.2.0"></script>
    <title>Refugees Streamgraph</title>
    <style>
      body {
        margin: 0px;
      }
      .area-label {
        font-family: sans-serif;
        fill-opacity: 0.7;
        fill: white;
      }
      path:hover {
        fill-opacity: 1;
        fill:black;
      }
      path {
        fill-opacity: 0.8;
        stroke-width: 0.5;
      }
      text {
        pointer-events: none;
      }
      .axis--major .tick text, .legend text, .tooltip text {
        fill: #585858;
        font-family: sans-serif;
        font-size: 16pt;
      }
      .axis--minor .tick text {
        display: none;
      }
      .axis--major .tick line{
        stroke: #ddd;
        stroke-width: 2px;
      }
      .axis--minor .tick line{
        stroke: #eee;
      }
      .axis .domain {
        display: none;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      var parseHour = d3.timeParse("%H:%M %p");
      var hourFormatter = d3.timeFormat("%I:%M %p");
      var formatHour = function (date) {
        var hourStr = hourFormatter(date);
        if(hourStr[0] === "0"){
          return hourStr.substr(1);
        }
        return hourStr;
      };
      
      d3.csv('atus.csv', function (rawData) {
        
        var hours = Object.keys(rawData[0]).filter(function (d) {
          return d.indexOf(":00") !== -1;
        });
        
        var activities = rawData.filter(function (d) {
          return d.Presentable === "1";
        })
        
        var keys = activities.map(function (d) { return d.Activity; });
        
        var data = hours.map(function (hour){
          var row = { date: parseHour(hour) };
          activities.forEach(function (d) {
            row[d.Activity] = +d[hour].replace("(2)-", "0");
          });
          return row;
        });

        console.log(data);
        render(data, keys);
      });

      var margin = { top: 0, bottom: 30, left: 50, right: 10 };

      var svg = d3.select('svg');
      var width = +svg.attr('width');
      var height = +svg.attr('height');
      
      var g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);
      var xAxisG = g.append('g')
          .attr('class', 'axis');
      var xAxisMinorG = xAxisG.append('g')
          .attr('class', 'axis axis--minor');
      var xAxisMajorG = xAxisG.append('g')
          .attr('class', 'axis axis--major');
      var marksG = g.append('g');
      
      var stack = d3.stack()
        .offset(d3.stackOffsetExpand)
        .order(d3.stackOrderInsideOut)
      ;
      var xValue = function (d) { return d.date; };
      var xScale = d3.scaleTime();
      var yScale = d3.scaleLinear();
      var colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);
      
      var xAxisMajor = d3.axisBottom().scale(xScale).tickFormat(formatHour);
      var xAxisMinor = d3.axisBottom().scale(xScale).ticks(30);
      
      var area = d3.area()
        .x(d => xScale(xValue(d.data)))
        .y0(d => yScale(d[0]))
        .y1(d => yScale(d[1]))
        .curve(d3.curveBasis);
      
      // Render StreamGraph
      function render(data, keys) {
        stack.keys(keys);
        var stacked = stack(data);
        
        var innerWidth = width - margin.right - margin.left;
        var innerHeight = height - margin.top - margin.bottom;

        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth]);

        yScale
          .domain([
            d3.min(stacked, function (series) {
              return d3.min(series, function (d) { return d[0]; });
            }),
            d3.max(stacked, function (series) {
              return d3.max(series, function (d) { return d[1]; });
            })
          ])
          .range([innerHeight, 0]);
        
        colorScale.domain(d3.range(keys.length));
        
        var paths = marksG.selectAll('path').data(stacked);
        var pathsEnter = paths
          .enter().append('path');
        pathsEnter.merge(paths)
            .attr('fill', function (d) { return colorScale(d.index); })
            .attr('stroke', function (d) { return colorScale(d.index); })
            .attr('d', area);
        
        paths.select('title')
          .merge(pathsEnter.append('title'))
            .text(function (d) { return d.key; })

        var labels = marksG.selectAll('text').data(stacked)
        labels
          .enter().append('text')
            .attr('class', 'area-label')
          .merge(labels)
            .text(function (d) { return d.key; })
            .attr('transform', d3.areaLabel(area).interpolateResolution(1000));
        
        xAxisMajor.tickSize(-innerHeight);
        xAxisMinor.tickSize(-innerHeight);
        
        xAxisG.attr('transform', `translate(0,${innerHeight})`);
        xAxisMajorG.call(xAxisMajor);
        xAxisMinorG.call(xAxisMinor);
      }
    </script>
  </body>
</html>

atus.csv

Activity,Subcategory Level,Presentable,12:00 AM,1:00 AM,2:00 AM,3:00 AM,4:00 AM,5:00 AM,6:00 AM,7:00 AM,8:00 AM,9:00 AM,10:00 AM,11:00 AM,12:00 PM,1:00 PM,2:00 PM,3:00 PM,4:00 PM,5:00 PM,6:00 PM,7:00 PM,8:00 PM,9:00 PM,10:00 PM,11:00 PM
"Total, all activities",0,0,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100
Personal care activities,1,0,85.8,92.2,94.8,95.9,93.9,89.2,75.9,53,33.2,20,12.3,8.3,6.4,6.4,6.5,6.4,6.2,5.8,5.4,5.9,9.4,21,45.1,70.7
Sleeping,2,1,84.5,91.5,94.3,95.2,91.7,85.2,65.7,42.4,24.8,13.7,7.5,4.9,3.5,4.1,4.4,4.2,3.7,2.9,2.5,3,5.5,15.9,39.9,67.6
Eating and drinking,1,1,0.6,0.3,0.3,0.3,0.5,1.2,3.2,6.2,7.3,6.7,5.3,6.2,16.2,11,6.1,4.4,4.8,9.1,15.5,13.9,8.7,4.5,2.1,1
Household activities,1,1,0.7,0.3,0.2,0.3,0.8,1.7,4.4,7.7,10.4,13,14.1,14,13.1,12.2,11.7,11.7,13.1,14.9,14.1,11,7.6,5,2.8,1.3
Housework,2,0,0.2,0.1,0.1,(2)-,0.1,0.3,0.8,1.8,3.6,5.4,6.2,6,4.7,4.4,4.2,3.8,3.5,2.7,2.1,2.2,1.9,1.6,0.9,0.4
Food preparation and cleanup,2,0,0.1,0.1,0.1,0.1,0.4,0.9,2.4,3.6,3.6,3.2,2.6,2.8,3.5,2.7,2.4,2.9,4.7,7.8,8.3,5.7,3.1,1.7,0.7,0.3
Lawn and garden care,2,0,(2)-,(2)-,(2)-,(2)-,(2)-,(2)-,0.1,0.4,0.9,1.5,1.9,1.9,1.6,1.8,1.8,1.6,1.4,1.2,1,0.7,0.4,0.1,(2)-,(2)-
Household management,2,0,0.1,0.1,(2)-,(2)-,(2)-,0.1,0.2,0.4,0.6,0.8,0.9,0.9,0.9,0.8,0.9,0.9,0.8,0.8,0.7,0.6,0.7,0.6,0.4,0.2
Purchasing goods and services,1,1,0.2,0.1,0.1,0.1,0.1,0.2,0.4,0.9,2.1,3.9,5.8,7.1,7.9,7.5,7.2,7.2,6.8,6.4,5.3,3.8,2.7,1.5,0.8,0.4
Consumer goods purchases,2,0,0.1,(2)-,(2)-,(2)-,(2)-,(2)-,0.1,0.2,0.5,1.1,2.3,3.1,3.5,3.6,3.6,3.4,3.1,2.8,2.5,1.9,1.3,0.7,0.3,0.2
Professional and personal care services,2,0,(2)-,(2)-,(2)-,(2)-,(2)-,(2)-,(2)-,0.1,0.3,0.7,0.9,1,0.8,0.8,0.7,0.7,0.6,0.4,0.3,0.1,0.1,(2)-,(2)-,(2)-
Caring for and helping household members,1,1,0.3,0.2,0.2,0.2,0.5,0.4,1.5,3.7,3.5,2.6,2.4,2.3,2.2,2.1,2.6,3.7,4.1,4.3,4,4.4,4.7,3.4,1.5,0.6
Caring for and helping household children,2,0,0.2,0.2,0.2,0.2,0.4,0.3,1.2,2.6,2.1,1.9,1.8,1.7,1.5,1.6,1.8,2.5,2.8,2.9,3,3.8,4.2,2.9,1.2,0.4
Caring for and helping nonhousehold members,1,1,0.2,0.1,0.1,(2)-,(2)-,0.1,0.2,0.4,0.7,1,1.1,1.3,1.3,1.4,1.5,1.7,1.8,1.7,1.5,1.2,1,0.9,0.5,0.3
Caring for and helping nonhousehold adults,2,0,(2)-,(2)-,(2)-,(2)-,(2)-,(2)-,0.1,0.1,0.2,0.3,0.5,0.5,0.6,0.5,0.5,0.5,0.5,0.5,0.5,0.3,0.2,0.2,0.1,0.1
Working and work-related activities,1,0,2.2,1.7,1.5,1.4,2.2,3.8,7.8,15.8,24.9,28.9,30.1,30.5,24.1,27.9,29.9,29.1,25.9,19.3,11.9,8.3,6.7,5.8,4.6,3.4
Working,2,1,1.9,1.6,1.3,1.3,1.9,2.7,5.7,11.8,21.3,26.9,28.6,29.2,22.3,26,28.1,26.7,22.5,14.6,8.8,6.8,5.7,5,3.9,2.8
Educational activities,1,1,0.3,0.2,0.1,(2)-,0.1,0.1,0.2,1.3,3.3,4.2,4.6,4.4,3.8,4,4.1,3.1,2.3,2,1.7,1.7,1.7,1.5,1,0.6
Attending class,2,0,(2)-,(2)-,(2)-,(2)-,(2)-,(2)-,(2)-,0.4,2.5,3.4,3.6,3.3,2.7,2.9,2.9,1.4,0.5,0.3,0.4,0.4,0.4,0.2,0.1,(2)-
Homework and research,2,0,0.2,0.2,0.1,(2)-,0.1,0.1,0.1,0.2,0.3,0.5,0.7,0.9,0.8,0.8,0.9,1.1,1.3,1.3,1.1,1.2,1.2,1.1,0.9,0.5
"Organizational, civic, and religious activities",1,1,0.2,0.1,(2)-,0.1,0.1,0.3,0.5,0.9,1.5,2.7,3.7,3.8,2.9,1.9,1.7,1.4,1.5,1.7,2,2.4,2.1,1.3,0.7,0.3
Religious and spiritual activities,2,0,0.1,(2)-,(2)-,0.1,0.1,0.2,0.4,0.5,0.7,1.2,1.9,2.2,1.4,0.7,0.5,0.4,0.4,0.5,0.7,0.9,0.9,0.6,0.3,0.2
Volunteering (organizational and civic activities),2,0,0.1,(2)-,(2)-,(2)-,(2)-,(2)-,0.1,0.2,0.5,0.9,1.3,1.3,1,0.9,0.9,0.8,0.8,0.8,1,1.2,1,0.5,0.2,0.1
Leisure and sports,1,0,8.9,4.5,2.5,1.6,1.6,2.7,5.1,8.5,11.3,15,18.1,19.5,19.8,23.1,26.1,28.6,31,32.3,36.2,44.8,53,52.9,38.9,20.3
Socializing and communicating,2,1,1.1,0.7,0.3,0.2,0.1,0.1,0.2,0.7,1,1.4,2.3,2.7,2.9,3.5,4.2,4.8,5.3,5.7,6.2,6.5,6.3,5.1,3.6,2.2
Watching television,2,1,4.6,2.1,1.2,0.7,0.8,1.3,2,3.3,4.4,5.8,7,8.1,8.2,9.6,10.8,11.7,13.5,14.7,18.4,25.6,33.9,35.2,25.4,12
"Participating in sports, exercise, and recreation",2,1,0.2,0.1,0.1,(2)-,0.1,0.3,1,1.2,1.6,1.9,2,1.9,1.7,1.9,1.9,2.2,2.3,2.3,2.2,2.1,1.6,0.9,0.4,0.2
"Telephone calls, mail, and e-mail",1,1,0.4,0.2,0.1,0.1,0.1,0.1,0.2,0.4,0.6,0.7,0.8,0.9,0.8,0.8,0.9,1,1,1.1,1,1.2,1.3,1.3,1.2,0.6
"Other activities, not elsewhere classified",1,1,0.3,0.1,0.1,0.1,0.2,0.3,0.6,1.1,1.3,1.4,1.6,1.6,1.5,1.6,1.6,1.7,1.6,1.4,1.3,1.2,1.3,1.2,0.8,0.5