Time-based Visualization for CS 590V

d3-scale-radial.js

(function(global, factory) {
  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("d3-scale")) :
  typeof define === "function" && define.amd ? define(["exports", "d3-scale"], factory) :
  (factory(global.d3 = global.d3 || {}, global.d3));
}(this, function(exports, d3Scale) {
  'use strict';

  function square(x) {
    return x * x;
  }

  function radial() {
    var linear = d3Scale.scaleLinear();

    function scale(x) {
      return Math.sqrt(linear(x));
    }

    scale.domain = function(_) {
      return arguments.length ? (linear.domain(_), scale) : linear.domain();
    };

    scale.nice = function(count) {
      return (linear.nice(count), scale);
    };

    scale.range = function(_) {
      return arguments.length ? (linear.range(_.map(square)), scale) : linear.range().map(Math.sqrt);
    };

    scale.ticks = linear.ticks;
    scale.tickFormat = linear.tickFormat;

    return scale;
  }

  exports.scaleRadial = radial;

  Object.defineProperty(exports, '__esModule', {value: true});
}));

gantt.js

/**
 * @author Dimitry Kudrayvtsev
 * @version 2.0
 *
 * Ported to d3 v4 by Keyvan Fatehi on October 16th, 2016
 */

 // found here: http://bl.ocks.org/baramuyu/be8e3005cfcb0aba5f763963c75f3c7e

d3.gantt = function() {
  var FIT_TIME_DOMAIN_MODE = "fit";
  var FIXED_TIME_DOMAIN_MODE = "fixed";

  var margin = {
    top : 20,
    right : 40,
    bottom : 20,
    left : 150
  };
  var timeDomainStart = d3.timeDay.offset(new Date(),-3);
  var timeDomainEnd = d3.timeHour.offset(new Date(),+3);
  var timeDomainMode = FIT_TIME_DOMAIN_MODE;// fixed or fit
  var taskTypes = [];
  var taskStatus = [];
  var height = document.body.clientHeight - margin.top - margin.bottom-5;
  var width = document.body.clientWidth - margin.right - margin.left-5;

  var tickFormat = "%H:%M";

  var keyFunction = function(d) {
    return d.startDate + d.taskName + d.endDate;
  };

  var rectTransform = function(d) {
    return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")";
  };

  var x,y,xAxis,yAxis;

  initAxis();

  var initTimeDomain = function() {
    if (timeDomainMode === FIT_TIME_DOMAIN_MODE) {
      if (tasks === undefined || tasks.length < 1) {
        timeDomainStart = d3.time.day.offset(new Date(), -3);
        timeDomainEnd = d3.time.hour.offset(new Date(), +3);
        return;
      }
      tasks.sort(function(a, b) {
        return a.endDate - b.endDate;
      });
      timeDomainEnd = tasks[tasks.length - 1].endDate;
      tasks.sort(function(a, b) {
        return a.startDate - b.startDate;
      });
      timeDomainStart = tasks[0].startDate;
    }
  };

 function initAxis() {
    x = d3.scaleTime().domain([ timeDomainStart, timeDomainEnd ]).range([ 0, width ]).clamp(true);

    y = d3.scaleBand().domain(taskTypes).rangeRound([ 0, height - margin.top - margin.bottom ], .1);

    xAxis = d3.axisBottom().scale(x).tickFormat(d3.timeFormat(tickFormat))
      .tickSize(8).tickPadding(8);

    yAxis = d3.axisLeft().scale(y).tickSize(0);
  };

  function gantt(tasks) {

    initTimeDomain();
    initAxis();

    var svg = d3.select("body")
      .append("svg")
      .attr("class", "chart")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("class", "gantt-chart")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

    svg.selectAll(".chart")
      .data(tasks, keyFunction).enter()
      .append("rect")
      .attr("rx", 5)
      .attr("ry", 5)
      .attr("class", function(d){ 
        if(taskStatus[d.status] == null){ return "bar";}
        return taskStatus[d.status];
      }) 
      .attr("y", 0)
      .attr("transform", rectTransform)
      .attr("height", function(d) { return 70; })
      .attr("width", function(d) { 
        return (x(d.endDate) - x(d.startDate)); 
      });

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0, " + (height - margin.top - margin.bottom) + ")")
        .transition()
        .call(xAxis);

      svg.append("g").attr("class", "y axis").transition().call(yAxis);

      return gantt;

  };

  gantt.redraw = function(tasks) {

    initTimeDomain();
    initAxis();

    var svg = d3.select("svg");

    var ganttChartGroup = svg.select(".gantt-chart");
    var rect = ganttChartGroup.selectAll("rect").data(tasks, keyFunction);

    rect.enter()
      .insert("rect",":first-child")
      .attr("rx", 5)
      .attr("ry", 5)
      .attr("class", function(d){ 
        if(taskStatus[d.status] == null){ return "bar";}
        return taskStatus[d.status];
      }) 
      .transition()
      .attr("y", 0)
      .attr("transform", rectTransform)
      .attr("height", function(d) { return y.range()[1]; })
      .attr("width", function(d) { 
        return (x(d.endDate) - x(d.startDate)); 
      });

      rect.transition()
        .attr("transform", rectTransform)
        .attr("height", function(d) { return y.range()[1]; })
        .attr("width", function(d) { 
          return (x(d.endDate) - x(d.startDate)); 
        });

        rect.exit().remove();

        svg.select(".x").transition().call(xAxis);
        svg.select(".y").transition().call(yAxis);

        return gantt;
  };

  gantt.margin = function(value) {
    if (!arguments.length)
      return margin;
    margin = value;
    return gantt;
  };

  gantt.timeDomain = function(value) {
    if (!arguments.length)
      return [ timeDomainStart, timeDomainEnd ];
    timeDomainStart = +value[0], timeDomainEnd = +value[1];
    return gantt;
  };

    /**
  * @param {string}
  *                vale The value can be "fit" - the domain fits the data or
  *                "fixed" - fixed domain.
  */
  gantt.timeDomainMode = function(value) {
    if (!arguments.length)
      return timeDomainMode;
    timeDomainMode = value;
    return gantt;

  };

  gantt.taskTypes = function(value) {
    if (!arguments.length)
      return taskTypes;
    taskTypes = value;
    return gantt;
  };

  gantt.taskStatus = function(value) {
    if (!arguments.length)
      return taskStatus;
    taskStatus = value;
    return gantt;
  };

  gantt.width = function(value) {
    if (!arguments.length)
      return width;
    width = +value;
    return gantt;
  };

  gantt.height = function(value) {
    if (!arguments.length)
      return height;
    height = +value;
    return gantt;
  };

  gantt.tickFormat = function(value) {
    if (!arguments.length)
      return tickFormat;
    tickFormat = value;
    return gantt;
  };

  return gantt;
};

hourly_earnings.csv

index.html

<!DOCTYPE html>
<!-- This lab is based on the example Radial Line Chart 
  https://bl.ocks.org/tlfrd/fd6991b2d1947a3cb9e0bd20053899d6 -->
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3-scale-radial.js"></script>
  <script type="text/javascript" src="gantt.js"></script>
  <style>
    text {
      font-size: 14px;
      font-family: monospace;
    }
    .axis path,.axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
     
    .bar {
      fill: #33b5e5;
    }
     
    .bar-failed {
      fill: #CC0000;
    }
     
    .bar-running {
      fill: #669900;
    }
     
    .bar-succeeded {
      fill: #33b5e5;
    }
     
    .bar-killed {
      fill: #ffbb33;
    }
    #sliderContainer {
      text-align: center;
      top: 600px;
    }
    div.tooltip { 
      position: absolute;     
      text-align: center;     
      width: 160px;          
      height: 108px;         
      padding: 2px;       
      font: 12px sans-serif;    
      background: lightsteelblue; 
      border: 0px;    
      border-radius: 8px;     
      pointer-events: none;     
    }
  </style>
</head>
<body> 
  <h1>Hourly Worker's Earnings in 2017</h1>
  <h4>I work an hourly job in the college of education and I track whenever I work with the start/end dates. I've exported this data to be used for this assignment. I changed my pay to 3.50/hr and I added a random task (1-5) to each time entry (as instructured by the professor to add another data column). This data set has 450 entries. I added two charts, one to show my work patterns throughout the year based on how much I make on each day. The second is a gantt chart to show when I worked on each task and for how long. This data is useful for me to track my work patterns and to see when in the year I work the most. The user can hover over the earning's axis to see which months I had 1+ days where I earned that much money and they can use the time slider to highlight each month in the gantt chart. </h4>
  <svg width="960" height="500"></svg>
  <div id="sliderContainer">
        <input id="timeslide" type="range" min="0" max="12" value="0" step="1"/><br>
        <span id="range">Time Showing: Full Year</span>
    </div>
  <script type='text/javascript' src='script.js'></script>
</body>

script.js

const margin = {top: 20, right: 10, bottom: 20, left: 10};   
const innerWidth = 960 - margin.left - margin.right; 
const innerHeight = 500 - margin.top - margin.bottom;  
const svg = d3.select("svg");     
const g = svg.append("g")
      .attr("transform", "translate(" + innerWidth / 2 + "," + innerHeight / 2 + ")");
    
const innerRadius = 100; 
const outerRadius = Math.min(innerWidth, innerHeight) / 2 - 6;
const fullCircle = 2 * Math.PI;
const parseTime = d3.timeParse("%m/%d/%Y %H:%M"); 
const formatMonth = d3.timeFormat("%b"); 

const xScale = d3.scaleTime()
        .range([0, fullCircle]);
const yScale = d3.scaleRadial()
    		.range([innerRadius, outerRadius]);
const lineScale = d3.lineRadial()
    		.angle(function(d) { return xScale(d.clocked_in); })  // x: angle in radians; 0 at -y (1/1/17)
    		.radius(function(d) { return yScale(d.earnings); }); // y: distance from origin (0,0)

// gantt.js seems to require a global tasks variable
var tasks;
var allData;
var ganttGraph;

// create tool tip
var div = d3.select("body").append("div") 
    .attr("class", "tooltip")       
    .style("opacity", 0);

// keep track of the current month being shown. null means the full year
var currentMonthIndex = 0;
var months = [
  "Full Year",
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

d3.csv("hourly_earnings.csv" ,function(d) {
      // format the data for display
      d.clocked_in = parseTime(d.clocked_in);
      d.startDate = d.clocked_in;
      d.endDate = parseTime(d.clocked_out);
      d.earnings = +d.earnings;
      return d;
    }, function(error, data) {
      if (error) throw error;
     
  allData = data; // store for slider
  tasks = data; // for gantt.js

  // make sure the scales work based on the actual provided data    
  xScale.domain(d3.extent(data, d => d.clocked_in));
  yScale.domain(d3.extent(data, d => d.earnings));
        
  // draw the line plot around the circle
  var linePlot = g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "#4099ff")
      .attr("d", lineScale); 
    
  var yAxis = g.append("g")
      .attr("text-anchor", "middle");

  var yTick = yAxis
      .selectAll("g")
      .data(yScale.ticks(5))
      .enter().append("g");

  // adds guiding circles to help with comparing values
  yTick.append("circle")
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("opacity", 0.2)
    .attr("r", yScale);
        
  yAxis.append("circle")
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("opacity", 0.2)
    .attr("r", function() { return yScale(yScale.domain()[0])});

  // shows the y axis dolar amounts
  yTick.append("text")
    .attr("y", function(d) { return -yScale(d); })
    .attr("dy", "0.35em")
    .text(function(d) { return "$" + d; })
    .on("mouseover", function(earningVal) {

      var monthsEarnedMinVal = [];

      for (var i = 0; i < allData.length; i++) {
        if (allData[i].earnings >= earningVal) {
          var monthIndex = allData[i].clocked_in.getMonth()+1;
          var monthText = months[monthIndex];
          if (monthsEarnedMinVal.includes(monthText) == false) {
            monthsEarnedMinVal.push(monthText);
          }
        }
      }

      div.transition()    
        .duration(200)    
        .style("opacity", .9);    
      div.html("In " + monthsEarnedMinVal.join(", ") + ", Jeremy had 1 or more days where he earned $" + earningVal + " or more.")  
        .style("left", (d3.event.pageX) + "px")   
        .style("top", (d3.event.pageY - 28) + "px"); 
         
    })          
    .on("mouseout", function(d) {   
        div.transition()    
            .duration(500)    
            .style("opacity", 0); 
    });
        
  var xAxis = g.append("g");
    
  // x axis month names   
  var xTick = xAxis
      .selectAll("g")
      .data(xScale.ticks(12))
      .enter().append("g")
      .attr("text-anchor", "middle")
      .attr("transform", function(d) {
              return "rotate(" + ((xScale(d)) * 180 / Math.PI - 90) + ")translate(" + innerRadius + ",0)";
            });

  // x axis ticks
  xTick.append("line")
    .attr("x2", -5)
    .attr("stroke", "#000");

  // formats text on angle
  xTick.append("text")
    .attr("transform", function(d) { 
        var angle = xScale(d); 
        return ((angle < Math.PI / 2) || (angle > (Math.PI * 3 / 2))) ? "rotate(90)translate(0,22)" : "rotate(-90)translate(0, -15)"; })
    .text(function(d) {return formatMonth(d);})
    .style("font-size", 10)
    .attr("opacity", 0.6)
        
  // add the description to the center of the visualization
  var title = g.append("g")
    .attr("class", "title")
    .append("text")
    .attr("dy", "-0.2em")
    .attr("text-anchor", "middle")
    .text("Daily Earnings")
        
  var subtitle = g.append("text")
    .attr("dy", "1em")
    .attr("text-anchor", "middle")
    .attr("opacity", 0.6)
    .text("1/1/17 - 12/31/17");  


  // update which points are highlighted based on the slider value
  d3.select("#timeslide").on("input", function() {
      update(+this.value);
  });

  // called when the slider updates it's value
  function update(sliderValue) {

      document.getElementById("range").innerHTML= "Time Showing: " + months[sliderValue];
      currentMonthIndex = sliderValue;

      d3.selectAll(".bar,.bar-failed")
            .attr("class", monthMatch);
  }

  // highlight the records in the specific month we're viewing
  function monthMatch(data, value) {
      if (data.startDate.getMonth() + 1 == currentMonthIndex) {
        return "bar-failed";
      } else {
        return "bar";
      };
  }

  // set up gantt chart
  ganttGraph = d3.gantt()
    .taskTypes(["1", "2", "3", "4", "5"])
    .tickFormat("%m/%d");

  ganttGraph(tasks);


});