Untitled

<!DOCTYPE html>

<head>
<title>
  Visualización
</title>

<script src="https://d3js.org/d3.v5.min.js"></script>

<script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"></script>


<style>
         #title {
          font-family: american typewriter;
          font-size: 2vw;
          color:#AB3820;
          text-align:center;
          margin: auto;
          line-height: 3px;
          color: #AB3820;
          }
          #subti {
          font-family: american typewriter;
          font-size: 1vw;
          color:#777777;
          text-align:center;
          background-color: #ECECEC;
          }
          table, th, td {
          border: 0px white;
          }
          img {
          width: 100%;
          height: auto;
          }
          html,body,#wrapper {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        .chart {
            font-family: Arial, sans-serif;
            font-size: 12px;
        }

        .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;
        }

        #forkme_banner {
            display: block;
            position: absolute;
            top: 0;
            right: 10px;
            z-index: 10;
            padding: 10px 50px 10px 10px;
            color: #fff;
            background:
                url('http://dk8996.github.io/Gantt-Chart/images/blacktocat.png')
                #0090ff no-repeat 95% 50%;
            font-weight: 700;
            box-shadow: 0 0 10px rgba(0, 0, 0, .5);
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            text-decoration: none;
        }
</style>

</head>
<body>

<div id="title">
<h1><p>#Visualización<p/>
</h1>
</div>
<br>
<script type="text/javascript">

var tasks =[
 {
   "startDate": new Date("Sun Dec 09 00:00:00 EST 2012"),"endDate": new Date("Sun Dec 09 00:00:03 EST 2012"),"taskName": "Imagen","status": "RED"},
 {
   "startDate": new Date("Sun Dec 09 00:00:20 EST 2012"),"endDate": new Date("Sun Dec 09 00:00:29 EST 2012"),"taskName": "Imagen","status": "RED"},
 {
   "startDate": new Date("Sun Dec 09 00:00:49 EST 2012"),"endDate": new Date("Sun Dec 09 00:00:57 EST 2012"),"taskName": "Imagen","status": "RED"},
 {
   "startDate": new Date("Sun Dec 09 00:01:30 EST 2012"),"endDate": new Date("Sun Dec 09 00:01:32 EST 2012"),"taskName": "Imagen","status": "RED"},
 {
   "startDate": new Date("Sun Dec 09 00:02:06 EST 2012"),"endDate": new Date("Sun Dec 09 00:02:08 EST 2012"),"taskName": "Imagen","status": "RED"},
];
var taskStatus = {
    "RED" : "bar",
};

var taskNames = [ "Imagen" ];

tasks.sort(function(a, b) {
    return a.endDate - b.endDate;
});
var maxDate = tasks[tasks.length - 1].endDate;
tasks.sort(function(a, b) {
    return a.startDate - b.startDate;
});
var minDate = tasks[0].startDate;

var format = "%H:%M";

var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format);gantt(tasks);


</script>

</script>

</body>
</html>