Old school D3 from simpler times

All examples By author By category About

cmdoptesc

Full window Github gist

D3: Open Hours (.csv parsing)

D3: Open Hours

view on bl.ocks.org
github repo

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">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>What's open now?</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
    <script src="openhours.js"></script>

<style>
      #ChartSVG {
        border: 1px solid rgba(153,153,153, 0.5);
      }

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>

<div class="container">
      <div id="ChartArea"></div>
    </div>

<script src="openhours-d3.js"></script>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
​
    <title>What's open now?</title>
​
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
​
    <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
    <script src="openhours.js"></script>
​
    <style>
      #ChartSVG {
        border: 1px solid rgba(153,153,153, 0.5);
      }
​
      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>
​
    <div class="container">
      <div id="ChartArea"></div>
    </div>
​
    <script src="openhours-d3.js"></script>
  </body>
</html>
    

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