Skip to content

Instantly share code, notes, and snippets.

@ajfarkas

ajfarkas/README.md

Last active October 23, 2019 22:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ajfarkas/0767aad90dd57ee7490e9f6256b5b683 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ajfarkas/0767aad90dd57ee7490e9f6256b5b683 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ajfarkas renamed this gist Apr 21, 2016. 1 changed file with 0 additions and 0 deletions.
    0 barChartClock.html → index.html
    View file
    File renamed without changes.
  2. ajfarkas renamed this gist Apr 20, 2016. 1 changed file with 0 additions and 0 deletions.
    0 thumb.png → thumbnail.png
    View file
    File renamed without changes
  3. ajfarkas revised this gist Apr 20, 2016. 2 changed files with 25 additions and 26 deletions.
    5 changes: 3 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    #Bar Chart Clock

    Sometimes D3 is overkill. For a simple bar chart that changes value (this example uses time),
    defining the width of the bar as a percentage of its container will suffice. 14 lines gets the job done.
    For a simple bar chart that changes value (this example uses time),
    defining the width of the bar as a percentage of its container will suffice.
    14 lines gets the job done.
    46 changes: 22 additions & 24 deletions barChartClock.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,31 +10,29 @@
    padding: 0;
    border: none;
    }
    #graph {
    width: 960px;
    height: 480px;
    path {
    fill: none;
    stroke-width: 9;
    }
    .bar {
    width: 0;
    height: 150px;
    margin: 5px 0;
    overflow-y: visible;
    font-size: 48px;
    color: #9c3c3c;
    text-transform: uppercase;
    transition: width 0.8s linear;
    text {
    font-family: helvetica, sans-serif;
    font-size: 4px;
    fill: #66acc8;
    }
    .hour { background-color: #342474; }
    .minute { background-color: #426cc9; }
    .second { background-color: #52dadb; }
    #hour { stroke: #342474; }
    #minute { stroke: #426cc9; }
    #second { stroke: #52dadb; }
    </style>
    </head>
    <body>
    <div id="graph">
    <p class="hour bar"></p>
    <p class="minute bar"></p>
    <p class="second bar"></p>
    </div>
    <svg id="clock" width="960" height="480" viewBox="0 0 60 30">
    <path id="hour" d="M0,5L60,5"/>
    <path id="minute" d="M0,15L60,15"/>
    <path id="second" d="M0,25L60,25"/>
    <text class="hour" x="1" y="5">12 HOURS</text>
    <text class="minute" x="1" y="15">60 MINUTES</text>
    <text class="second" x="1" y="25">60 SECONDS</text>
    </svg>
    </body>
    <script>
    function getTime() {
    @@ -44,10 +42,10 @@
    minute: now.getMinutes(),
    second: now.getSeconds()
    }
    Object.keys(time).forEach(function(hand) {
    var max = hand === 'hours' ? 12 : 60
    document.querySelector('.'+hand).style.width = 100*time[hand]/max + '%'
    document.querySelector('.'+hand).innerHTML = time[hand]+'&nbsp;'+hand+'s'
    Object.keys(time).forEach(function(hand, i) {
    var X = hand === 'hour' ? 5 : 1
    d3.select('#'+hand).attr('d', 'M0,'+(10*i+5)+'L'+(X*time[hand])+','+(10*i+5) )
    d3.select('.'+hand).text(time[hand]+' '+hand.toUpperCase()+'S')
    })
    }
    var timer = window.setInterval(getTime, 1000)
  4. ajfarkas revised this gist Apr 20, 2016. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumb.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  5. ajfarkas created this gist Apr 20, 2016.
    4 changes: 4 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    #Bar Chart Clock

    Sometimes D3 is overkill. For a simple bar chart that changes value (this example uses time),
    defining the width of the bar as a percentage of its container will suffice. 14 lines gets the job done.
    55 changes: 55 additions & 0 deletions barChartClock.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
    * {
    margin: 0;
    padding: 0;
    border: none;
    }
    #graph {
    width: 960px;
    height: 480px;
    }
    .bar {
    width: 0;
    height: 150px;
    margin: 5px 0;
    overflow-y: visible;
    font-size: 48px;
    color: #9c3c3c;
    text-transform: uppercase;
    transition: width 0.8s linear;
    }
    .hour { background-color: #342474; }
    .minute { background-color: #426cc9; }
    .second { background-color: #52dadb; }
    </style>
    </head>
    <body>
    <div id="graph">
    <p class="hour bar"></p>
    <p class="minute bar"></p>
    <p class="second bar"></p>
    </div>
    </body>
    <script>
    function getTime() {
    var now = new Date()
    var time = {
    hour: now.getHours() % 12,
    minute: now.getMinutes(),
    second: now.getSeconds()
    }
    Object.keys(time).forEach(function(hand) {
    var max = hand === 'hours' ? 12 : 60
    document.querySelector('.'+hand).style.width = 100*time[hand]/max + '%'
    document.querySelector('.'+hand).innerHTML = time[hand]+'&nbsp;'+hand+'s'
    })
    }
    var timer = window.setInterval(getTime, 1000)
    </script>
    </html>