D3: Open Hours (.csv parsing)

D3: Open Hours

D3 visualisation utilising D3's text/CSV to read/parse a CSV file with restaurant information and display which restaurants are currently open.

Users can drag the time (red line) to display restaurants open at other hours.

al lin, sep 2013

<!DOCTYPE html>
<html lang="en">

line.rule {
        stroke: #ccc;
      }

line.current-time {
        stroke: #f00;
        stroke-width: 3px;
      }

rect.current-clickoverlay {
        fill: rgba(255,255,0, 0.01);
        cursor: pointer;
      }

.x-axis text {
        font: 12px sans-serif;
      }
      .x-axis path,
      .x-axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

text.restaurant-names {
        font: 10px sans-serif;
        color: #666;
      }
    </style>
  </head>

<body>

Modified http://code.jquery.com/jquery-2.0.3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js to a secure url

https://code.jquery.com/jquery-2.0.3.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js